/* Coming-soon page: one screen, two panels, same language as the home hero. */
:root{--t0:2.15s}                       /* when the content starts to arrive: just after the curtain begins to lift */
html.no-loader{--t0:.1s}               /* returning visitor in the same session: no curtain, no wait */
.soon{padding-top:var(--hh)}
.soon-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--pg);min-height:clamp(560px,calc(100vh - var(--hh) - 64px),940px);min-height:clamp(560px,calc(100svh - var(--hh) - 64px),940px)}  /* min-height, never height: the panel grows with its content on short windows */
.soon-media{grid-column:1/span 7;background:#2B1E1B;min-height:420px}
.soon-media picture,.soon-media img.cover{position:absolute;inset:0;width:100%;height:100%}
.soon-media img.cover{object-fit:cover;object-position:40% 50%;transform-origin:40% 50%}
.soon-media-foot{position:absolute;left:clamp(20px,2.4vw,36px);right:clamp(20px,2.4vw,36px);bottom:clamp(18px,2vw,30px);z-index:3;display:flex;justify-content:space-between;gap:16px;color:rgba(255,255,255,.82)}
.soon-media::after{content:"";position:absolute;inset:auto 0 0 0;height:30%;background:linear-gradient(0deg,rgba(0,0,0,.38),transparent);z-index:2;pointer-events:none}

.soon-copy{grid-column:8/span 5;display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(24px,3vw,48px) clamp(20px,2.6vw,44px)}
.soon-copy .label{margin-bottom:clamp(14px,1.6vw,22px)}
.soon-title{font-size:clamp(44px,4.3vw,76px);max-width:12ch}
.soon-title .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.soon-title .w>span{display:inline-block}
.soon-meta{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;width:100%;margin-top:clamp(14px,1.6vw,20px);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500}
.soon-meta span:first-child{text-align:left}.soon-meta span:last-child{text-align:right}
.soon-meta .icons{display:flex;gap:6px;color:var(--text)}
.soon-meta .icons svg{width:14px;height:14px}
.soon-inset-zone{flex:1 0 auto;display:grid;place-items:center;width:100%;padding:clamp(16px,2.4vh,32px) 0}
.soon-inset{height:clamp(120px,27vh,245px);aspect-ratio:4/5;overflow:hidden;border-radius:3px;background:var(--panel-2)}
.soon-inset img{width:100%;height:100%;object-fit:cover}
.soon-lede{font-size:14px;line-height:1.65;color:var(--muted);max-width:46ch;margin-bottom:24px}
.soon-ctas{display:flex;gap:20px;align-items:center;flex-wrap:wrap;justify-content:center}

.soon-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;height:64px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500}

/* Arrival motion: CSS only, `backwards` fill so everything is simply visible if animations never run */
.soon-media{animation:media-reveal 1.7s var(--ease) var(--t0) backwards}
.soon-media img.cover{animation:img-settle 2.2s var(--ease-out) var(--t0) backwards,drift 26s ease-in-out calc(var(--t0) + 2.2s) infinite alternate}
.soon-copy{animation:rise 1.3s var(--ease-out) calc(var(--t0) + .1s) backwards}
.soon-copy>.label,.soon-meta,.soon-lede,.soon-ctas{animation:rise 1s var(--ease-out) calc(var(--t0) + .5s + var(--k,0)*.08s) backwards}
.soon-meta{--k:1}.soon-lede{--k:2}.soon-ctas{--k:3}
.soon-title .w>span{animation:word-up 1.3s var(--ease-out) calc(var(--t0) + .25s + var(--i,0)*.09s) backwards}
.soon-inset{animation:inset-reveal 1.3s var(--ease) calc(var(--t0) + .3s) backwards}
.soon-inset img{animation:img-settle 1.8s var(--ease-out) calc(var(--t0) + .3s) backwards}
.site-header .header-inner,.soon-foot{animation:fade-in 1s var(--ease-out) calc(var(--t0) + .8s) backwards}
@keyframes media-reveal{from{clip-path:inset(7% 7% 7% 7% round 20px)}to{clip-path:inset(0 0 0 0 round 20px)}}
@keyframes img-settle{from{transform:scale(1.3)}}
@keyframes drift{to{transform:scale(1.06)}}
@keyframes rise{from{opacity:0;transform:translateY(16px)}}
@keyframes word-up{from{transform:translateY(108%)}}
@keyframes inset-reveal{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}

@media (max-width:960px){
  .soon-grid{grid-template-columns:1fr;height:auto}
  .soon-media{grid-column:auto;aspect-ratio:4/5;max-height:72vh;width:100%;min-height:0}
  .soon-inset{height:clamp(160px,30vh,245px)}
  .soon-copy{grid-column:auto}
  .soon-inset-zone{padding:28px 0}
}
@media (max-width:560px){.soon-foot span:nth-child(2){display:none}}