/* A 3.4-second logo opening. Only transforms and opacity animate. */
.hero-utilities{display:flex;align-items:center;gap:8px}
.intro-replay,.intro-skip{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:44px;padding:10px 12px;font:500 9px/1 var(--font);letter-spacing:.04em;background:#111;border:1px solid #383838;color:var(--ink);cursor:pointer}
.intro-replay{background:transparent;color:#aaa}
.intro-replay span{font-size:16px;color:var(--accent)}
.intro-replay[hidden]{display:inline-flex;visibility:hidden}
.intro-replay:disabled{cursor:default;opacity:.5}
.intro-replay:hover:not(:disabled),.intro-skip:hover{border-color:var(--accent);color:var(--ink)}
.intro-stage{position:fixed;inset:0;z-index:40;overflow:hidden;contain:layout paint;pointer-events:auto;isolation:isolate}
.intro-stage[hidden],.intro-skip[hidden]{display:none}
.intro-curtain{position:absolute;inset-block:0;width:calc(50% + 1px);background:#060606;z-index:-1}
.intro-curtain-left{left:0;border-right:1px solid #202020}
.intro-curtain-right{right:0;border-left:1px solid #202020}
.intro-skip{position:fixed;right:max(24px,env(safe-area-inset-right));top:max(24px,env(safe-area-inset-top));z-index:41;background:#0b0b0b;color:#ccc}
.intro-orbit{position:absolute;left:50%;top:47%;width:176px;height:176px;transform:translate(-50%,-50%)}
.intro-square{position:absolute;inset:0;border:2px solid #f7f7f7;border-radius:4px}
.intro-square:before,.intro-square:after{content:'';position:absolute;width:15px;height:15px;border:2px solid var(--cyan,#00b8e9)}
.intro-square:before{left:-7px;top:-7px;border-right:0;border-bottom:0}
.intro-square:after{right:-7px;bottom:-7px;border-left:0;border-top:0;border-color:var(--mint,#2dddb4)}
.intro-letter{position:absolute;inset:0;display:grid;place-items:center;font:800 112px/1 var(--display);letter-spacing:-.06em;padding-right:.06em;opacity:0}
.intro-letter-b{color:var(--cyan,#00b8e9)}
.intro-letter-l{color:var(--pink,#f24db3)}
.intro-letter-n{color:var(--yellow,#ffc447)}
.intro-letter-t{color:var(--mint,#2dddb4)}
.intro-signature{position:absolute;left:50%;top:47%;display:grid;grid-template-columns:auto auto;align-items:center;column-gap:22px;row-gap:17px;width:max-content;max-width:calc(100% - 40px);opacity:0;transform:translate(-50%,-50%)}
.intro-signature img{width:100px;height:auto;display:block;object-fit:contain}
.intro-signature strong{font:800 clamp(60px,8vw,100px)/.95 var(--display);letter-spacing:-.055em;color:#f7f7f7}
.intro-signature span{grid-column:1/-1;text-align:center;font:600 9px/1.5 var(--font);letter-spacing:.24em;color:#c3c3c3}
.intro-color-track{position:absolute;left:50%;top:calc(47% + 132px);display:flex;gap:6px;width:176px;transform:translateX(-50%)}
.intro-color-track i{height:3px;flex:1;background:var(--cyan,#00b8e9);opacity:.12;transform:scaleX(.35);transform-origin:left}
.intro-color-track i:nth-child(2){background:var(--pink,#f24db3)}
.intro-color-track i:nth-child(3){background:var(--yellow,#ffc447)}
.intro-color-track i:nth-child(4){background:var(--mint,#2dddb4)}
.intro-active .intro-stage,.intro-active .intro-skip{animation:intro-clear 3.4s linear both}
.intro-active .intro-square{animation:intro-square-turn 3.4s cubic-bezier(.65,0,.25,1) both}
.intro-active .intro-letter-b{animation:intro-b-hit 3.4s ease both}
.intro-active .intro-letter-l{animation:intro-l-hit 3.4s ease both}
.intro-active .intro-letter-n{animation:intro-n-hit 3.4s ease both}
.intro-active .intro-letter-t{animation:intro-t-hit 3.4s ease both}
.intro-active .intro-signature{animation:intro-signature-in 3.4s cubic-bezier(.22,1,.36,1) both}
.intro-active .intro-color-track{animation:intro-track-out 3.4s ease both}
.intro-active .intro-color-track i{animation:intro-color-hit 3.4s ease both}
.intro-active .intro-color-track i:nth-child(2){animation-name:intro-color-hit-l}
.intro-active .intro-color-track i:nth-child(3){animation-name:intro-color-hit-n}
.intro-active .intro-color-track i:nth-child(4){animation-name:intro-color-hit-t}
.intro-active .intro-curtain-left{animation:intro-curtain-left 3.4s cubic-bezier(.65,0,.25,1) both}
.intro-active .intro-curtain-right{animation:intro-curtain-right 3.4s cubic-bezier(.65,0,.25,1) both}
@keyframes intro-square-turn{
  0%{opacity:0;transform:scale(.72) rotate(-14deg)}
  7%,23%{opacity:1;transform:scale(1) rotate(0)}
  31%,44%{opacity:1;transform:scale(1) rotate(90deg)}
  49%,60%{opacity:1;transform:scale(1) rotate(180deg)}
  65%,73%{opacity:1;transform:scale(1) rotate(270deg)}
  78%,100%{opacity:0;transform:scale(.84) rotate(360deg)}
}
@keyframes intro-b-hit{0%,8%{opacity:0;transform:scale(1.3)}12%,22%{opacity:1;transform:scale(1)}27%,100%{opacity:0;transform:scale(.75) rotate(12deg)}}
@keyframes intro-l-hit{0%,28%{opacity:0;transform:scale(1.3) rotate(-12deg)}32%,42%{opacity:1;transform:scale(1) rotate(0)}47%,100%{opacity:0;transform:scale(.75) rotate(12deg)}}
@keyframes intro-n-hit{0%,46%{opacity:0;transform:scale(1.3) rotate(-12deg)}50%,58%{opacity:1;transform:scale(1) rotate(0)}63%,100%{opacity:0;transform:scale(.75) rotate(12deg)}}
@keyframes intro-t-hit{0%,62%{opacity:0;transform:scale(1.3) rotate(-12deg)}66%,73%{opacity:1;transform:scale(1) rotate(0)}78%,100%{opacity:0;transform:scale(.75)}}
@keyframes intro-signature-in{0%,74%{opacity:0;transform:translate(-50%,-50%) scale(.9)}79%,87%{opacity:1;transform:translate(-50%,-50%) scale(1)}94%,100%{opacity:0;transform:translate(-50%,-50%) scale(1.04)}}
@keyframes intro-color-hit{0%,8%{opacity:.12;transform:scaleX(.35)}12%,100%{opacity:1;transform:scaleX(1)}}
@keyframes intro-color-hit-l{0%,28%{opacity:.12;transform:scaleX(.35)}32%,100%{opacity:1;transform:scaleX(1)}}
@keyframes intro-color-hit-n{0%,46%{opacity:.12;transform:scaleX(.35)}50%,100%{opacity:1;transform:scaleX(1)}}
@keyframes intro-color-hit-t{0%,62%{opacity:.12;transform:scaleX(.35)}66%,100%{opacity:1;transform:scaleX(1)}}
@keyframes intro-track-out{0%,87%{opacity:1}94%,100%{opacity:0}}
@keyframes intro-curtain-left{0%,87%{transform:translateX(0)}100%{transform:translateX(-101%)}}
@keyframes intro-curtain-right{0%,87%{transform:translateX(0)}100%{transform:translateX(101%)}}
@keyframes intro-clear{0%,99%{opacity:1;visibility:visible;pointer-events:auto}100%{opacity:0;visibility:hidden;pointer-events:none}}
@media(max-width:850px){.hero-utilities{gap:5px}.intro-replay{font-size:8px;padding-inline:9px}}
@media(max-width:600px){
  .intro-orbit{width:144px;height:144px}
  .intro-letter{font-size:94px}
  .intro-signature{column-gap:16px;row-gap:15px}
  .intro-signature img{width:78px}
  .intro-signature strong{font-size:76px}
  .intro-signature span{font-size:7px;letter-spacing:.2em}
  .intro-color-track{top:calc(47% + 112px);width:144px}
  .intro-skip{right:max(16px,env(safe-area-inset-right));top:max(16px,env(safe-area-inset-top))}
  .hero-foot .hero-utilities{order:3;width:100%;gap:8px}
  .hero-utilities .intro-replay,.hero-foot .hero-utilities .motion-toggle{flex:1;width:auto;min-height:44px;font-size:9px}
}
@media(prefers-reduced-motion:reduce){.intro-stage,.intro-skip{display:none!important}}