/* Opening animation: strands -> logo -> 3 partners -> home */
.intro{display:block!important;background:#020a1a!important;transition:opacity .9s ease,visibility .9s!important}
.intro::before{display:none!important}
.intro.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
#intro-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.intro-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,transparent 30%,rgba(1,5,14,.85) 100%)}
.intro-skip{position:absolute;top:28px;right:32px;z-index:5}
.intro-stage{position:absolute;inset:0;display:grid;place-items:center;z-index:3}
.intro-layer{position:absolute;display:flex;flex-direction:column;align-items:center;text-align:center;opacity:0;visibility:hidden;transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1),filter .7s ease;transform:translateY(18px) scale(.97);filter:blur(6px)}
.intro-layer.on{opacity:1;visibility:visible;transform:none;filter:none}
.intro-layer.off{opacity:0;transform:translateY(-14px) scale(1.03);filter:blur(8px)}

/* logo */
.logo-mark-wrap{position:relative;width:clamp(150px,22vw,230px);margin-bottom:clamp(14px,3vh,28px);filter:drop-shadow(0 0 40px rgba(240,180,50,.35))}
.logo-mark-img{display:block;width:100%;height:auto;opacity:0;transform:translateY(24px) scale(.85);clip-path:inset(100% 0 0 0)}
.intro-layer.on .logo-mark-img{animation:markReveal 1.5s .2s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes markReveal{to{opacity:1;transform:none;clip-path:inset(0)}}
.logo-sheen{position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.75) 50%,transparent 60%);background-size:250% 100%;background-position:150% 0;mix-blend-mode:overlay;-webkit-mask:url(assets/logo-mark.png) center/100% 100% no-repeat;mask:url(assets/logo-mark.png) center/100% 100% no-repeat}
.intro-layer.on .logo-sheen{animation:sheen 1.6s 1.5s ease-in-out forwards}
@keyframes sheen{to{background-position:-50% 0}}
.logo-wordmark-img{display:block;width:min(640px,86vw);height:auto;opacity:0;clip-path:inset(0 100% 0 0);transform:translateY(12px)}
.intro-layer.on .logo-wordmark-img{animation:wordReveal 1.5s 1.1s cubic-bezier(.65,0,.2,1) forwards}
@keyframes wordReveal{to{opacity:1;clip-path:inset(0);transform:none}}

/* partners */
#layer-partners{width:min(920px,calc(100% - 40px))}
.partners-kicker{margin:0 0 30px;font-size:11px;letter-spacing:.4em;color:#e3b04b;display:flex;align-items:center;gap:16px}
.partners-kicker::before,.partners-kicker::after{content:"";width:48px;height:1px;background:linear-gradient(90deg,transparent,#e8a93a)}
.partners-kicker::after{transform:scaleX(-1)}
.partner-slides{position:relative;width:100%;height:min(54vh,440px)}
.p-slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:clamp(24px,5vw,60px);opacity:0;visibility:hidden;transform:translateX(60px);transition:opacity .7s ease,transform .9s cubic-bezier(.2,.8,.2,1),visibility .7s}
.p-slide.on{opacity:1;visibility:visible;transform:none}
.p-slide.off{opacity:0;transform:translateX(-60px)}
.p-photo{position:relative;flex:none;height:100%;aspect-ratio:4/5;border-radius:26px;overflow:hidden;border:1px solid rgba(240,200,110,.35);background:#0a1428;box-shadow:0 0 0 8px rgba(232,169,58,.07),0 40px 90px rgba(0,0,0,.6),0 0 80px rgba(232,169,58,.22)}
.p-photo img{width:100%;height:100%;object-fit:cover;object-position:center 22%;clip-path:inset(0 0 100% 0);transform:scale(1.15);transition:clip-path 1s .1s cubic-bezier(.7,0,.2,1),transform 1.6s .1s ease-out}
.p-slide.on .p-photo img{clip-path:inset(0);transform:none}
.p-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(8,6,24,.55))}
.p-mono{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font:700 96px var(--display);color:#fff;background:radial-gradient(circle at 50% 40%,#6b4e12,#0a1020 70%)}
.p-mono span{color:#ffd36b;margin-left:4px}
.p-copy{text-align:left;max-width:340px}
.p-num{font:600 12px var(--font);letter-spacing:.3em;color:#e8a93a}
.p-copy h2{margin:14px 0 10px;font:600 clamp(30px,5vw,54px)/1.05 var(--display);letter-spacing:-.03em;background:linear-gradient(180deg,#fff,#f3d58b);-webkit-background-clip:text;background-clip:text;color:transparent}
.p-copy p{margin:0;color:#aeb4c8;font-size:15px}
.p-line{display:block;margin-top:24px;height:2px;width:0;background:linear-gradient(90deg,#e8a93a,#ffe29a);transition:width 1.2s .5s ease}
.p-slide.on .p-line{width:120px}
.p-copy>*{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.p-slide.on .p-copy>*{opacity:1;transform:none}
.p-slide.on .p-copy>*:nth-child(1){transition-delay:.35s}.p-slide.on .p-copy>*:nth-child(2){transition-delay:.5s}.p-slide.on .p-copy>*:nth-child(3){transition-delay:.65s}.p-slide.on .p-copy>*:nth-child(4){transition-delay:.8s}
.p-dots{display:flex;gap:10px;margin-top:30px}
.p-dots i{width:28px;height:3px;border-radius:3px;background:rgba(240,200,110,.2);overflow:hidden;position:relative}
.p-dots i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#e8a93a,#ffe29a);transform:scaleX(0);transform-origin:left}
.p-dots i.done::after{transform:none}
.p-dots i.cur::after{animation:fill var(--dur,2.2s) linear forwards}
@keyframes fill{to{transform:none}}

/* exit flash */
.intro-flash{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 50%,rgba(232,169,58,.5),transparent 60%)}
.intro.exiting .intro-flash{animation:flash 1s ease-out}
@keyframes flash{0%{opacity:0;transform:scale(.6)}35%{opacity:1}100%{opacity:0;transform:scale(2.2)}}
.intro.exiting #intro-canvas{transition:transform 1.1s ease-in,opacity .9s;transform:scale(1.35);opacity:.2}

/* home entrance after the intro */
body:not(.home-ready) .site-header{opacity:0;transform:translateY(-16px)}
.site-header{transition:opacity .8s ease,transform .8s ease,background .3s,border-color .3s}
body:not(.home-ready) .hero-copy>*,body:not(.home-ready) .hero-art,body:not(.home-ready) .hero-bottom{opacity:0;transform:translateY(34px)}
.hero-copy>*,.hero-art,.hero-bottom{transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform 1s cubic-bezier(.2,.8,.2,1)}
.hero-copy>*:nth-child(2){transition-delay:.12s}.hero-copy>*:nth-child(3){transition-delay:.24s}.hero-copy>*:nth-child(4){transition-delay:.36s}.hero-copy>*:nth-child(5){transition-delay:.48s}
.hero-art{transition-delay:.3s}.hero-bottom{transition-delay:.7s}

@media (max-width:700px){
  .p-slide{flex-direction:column;gap:22px}
  .partner-slides{height:min(64vh,520px)}
  .p-photo{height:auto;width:min(62vw,260px);max-height:56%}
  .p-copy{text-align:center}.p-line{margin-inline:auto}
  .intro-skip{top:18px;right:18px}
}
@media (prefers-reduced-motion:reduce){.intro{display:none!important}body:not(.home-ready) .site-header,body:not(.home-ready) .hero-copy>*,body:not(.home-ready) .hero-art,body:not(.home-ready) .hero-bottom{opacity:1;transform:none}}

#intro-canvas{transition:opacity 1.2s ease}
.intro.dim #intro-canvas{opacity:.5}

.brand .brand-mark{height:34px;width:auto;display:block;flex:none;filter:drop-shadow(0 0 12px rgba(232,169,58,.35))}
.brand-name span{color:#e3b04b!important}
.footer-brand .brand-mark{height:40px}
