/* =====================================================================
   INTRO — "Now arriving." ~42 seconds, plays once per visitor.
   Everything is transforms and opacity so it stays smooth.
   ===================================================================== */
html.intro-on,html.intro-on body{overflow:hidden!important}
html.intro-pending body>*:not(#intro){visibility:hidden}
#intro{position:fixed;inset:0;z-index:200;background:#fff;color:#0a2240;font-family:"Lexend",Arial,sans-serif;overflow:hidden;-webkit-font-smoothing:antialiased}
#intro *{box-sizing:border-box}
#intro .sc{position:absolute;inset:0;display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .12s linear,visibility 0s .12s}
#intro .sc.on{opacity:1;visibility:visible;transition:opacity .08s linear,visibility 0s}
#intro .sc.navy{background:#0a2240;color:#fff}
#intro .sc.white{background:#fff}
#intro .mono{font-family:"Space Mono",ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;font-size:12px}
#intro .cap{position:absolute;left:0;right:0;bottom:9vh;text-align:center;padding:0 24px;font:500 clamp(15px,1.6vw,20px)/1.4 "Lexend",sans-serif;opacity:0;transform:translateY(12px);transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1)}
#intro .cap.on{opacity:1;transform:none}
#intro .navy .cap{color:#c9d6e6}
#intro .cap q{quotes:"\201C" "\201D";font-family:"Space Mono",monospace;font-size:.92em}

/* chrome: progress, skip, sound */
#intro .ui{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:center;padding:18px 22px;z-index:20;pointer-events:none}
#intro .ui>*{pointer-events:auto}
#intro .ui .tag{font:400 11px "Space Mono",monospace;letter-spacing:.06em;text-transform:uppercase;color:#8fa3bd;mix-blend-mode:difference}
#intro .ui .btns{display:flex;gap:8px}
#intro .ui button{appearance:none;cursor:pointer;height:38px;padding:0 16px;border-radius:999px;border:1px solid rgba(143,163,189,.5);background:rgba(10,34,64,.55);color:#fff;font:500 13px "Lexend",sans-serif;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#intro .ui button:hover{background:#63a941;border-color:#63a941}
#intro .bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(143,163,189,.25);z-index:20}
#intro .bar i{display:block;height:100%;width:0;background:#63a941}

/* S1 brand */
#intro .s1 .wrapc{display:grid;justify-items:center;gap:28px;text-align:center;padding:0 24px}
#intro .s1 img{width:min(720px,82vw);height:auto;clip-path:inset(0 100% 0 0);transition:clip-path 1.4s cubic-bezier(.7,0,.2,1)}
#intro .s1.go img{clip-path:inset(0 0 0 0)}
#intro .s1 h2{margin:0;font:700 clamp(36px,5.6vw,84px)/1 "Lexend",sans-serif;letter-spacing:-.045em}
#intro .s1 h2 span{display:inline-block;opacity:0;transform:translateY(30px);transition:opacity .5s,transform .7s cubic-bezier(.2,.8,.2,1)}
#intro .s1 h2 span.in{opacity:1;transform:none}
#intro .s1 h2 .g{color:#63a941}
#intro .s1 .ev{font:400 clamp(16px,1.8vw,22px) "Space Mono",monospace;color:#8fa3bd;min-height:1.4em}

/* S2 request form */
#intro .form{width:min(560px,90vw);background:#fff;color:#0a2240;border-radius:22px;padding:26px 26px 22px;box-shadow:0 60px 100px -40px rgba(0,0,0,.6);transform:translateY(40px) scale(.96);opacity:0;transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .5s}
#intro .s2.go .form{transform:none;opacity:1}
#intro .form h3{margin:0 0 4px;font:700 24px "Lexend",sans-serif;letter-spacing:-.03em}
#intro .form .row{display:grid;grid-template-columns:120px 1fr;gap:12px;padding:10px 0;border-top:1px solid rgba(10,34,64,.12);font-size:14px}
#intro .form .row span:first-child{font:400 10.5px "Space Mono",monospace;letter-spacing:.06em;text-transform:uppercase;color:#6b7a8f;padding-top:3px}
#intro .form .row b{font-weight:500;min-height:1.2em;display:block}
#intro .form .sub{margin-top:14px;display:flex;justify-content:space-between;align-items:center;gap:10px}
#intro .form button{appearance:none;border:0;height:48px;padding:0 24px;border-radius:999px;background:#0a60ab;color:#fff;font:600 15px "Lexend",sans-serif;transition:transform .12s,background .3s}
#intro .form button.press{transform:scale(.92)}
#intro .form button.done{background:#63a941}
#intro .form .due{font:400 11px "Space Mono",monospace;letter-spacing:.06em;text-transform:uppercase;color:#6b7a8f}

/* S3 chat */
#intro .chat{width:min(620px,92vw);display:flex;flex-direction:column;gap:14px}
#intro .msg{max-width:84%;border-radius:20px;padding:14px 18px;font-size:clamp(15px,1.7vw,19px);line-height:1.4;opacity:0;transform:translateY(16px) scale(.97);transition:opacity .4s,transform .5s cubic-bezier(.2,.8,.2,1)}
#intro .msg.in{opacity:1;transform:none}
#intro .msg small{display:block;font:400 10.5px "Space Mono",monospace;letter-spacing:.05em;text-transform:uppercase;margin-bottom:6px;opacity:.75}
#intro .msg.l{align-self:flex-start;background:#1a3a66;color:#fff;border-bottom-left-radius:6px}
#intro .msg.r{align-self:flex-end;background:#fff;color:#0a2240;border-bottom-right-radius:6px}
#intro .msg.g{align-self:flex-start;background:#63a941;color:#fff;border-bottom-left-radius:6px;font-weight:600}

/* S4 capture */
#intro .s4 svg{width:min(980px,96vw);height:auto;overflow:visible}
#intro .s4 .lbl{font:600 15px "Lexend",sans-serif;fill:#fff}
#intro .s4 .sub{font:400 11px "Space Mono",monospace;fill:#8fa3bd;letter-spacing:.06em}
#intro .s4 .node{fill:#1a3a66}
#intro .s4 .gate{fill:#0a60ab}
#intro .s4 .wire{fill:none;stroke:rgba(255,255,255,.18);stroke-width:2;stroke-dasharray:5 7}
#intro .s4 .count{font:700 54px "Space Mono",monospace;fill:#ffb000}

/* S5 the zero */
#intro .s5 .grid5{display:grid;grid-template-columns:1fr auto 1fr;gap:28px;align-items:center;width:min(1100px,94vw)}
#intro .s5 .card{background:#fff;color:#0a2240;border-radius:20px;padding:22px 24px;opacity:0;transform:translateY(20px);transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1)}
#intro .s5 .card.in{opacity:1;transform:none}
#intro .s5 .card .mono{color:#0a60ab;display:block;margin-bottom:10px}
#intro .s5 .card.bad{box-shadow:inset 6px 0 0 #e5484d}
#intro .s5 .card.bad .mono{color:#d13438}
#intro .s5 .card p{margin:0;font:400 clamp(15px,1.6vw,19px)/1.5 "Space Mono",monospace}
#intro .s5 .clk{font:700 clamp(56px,8vw,120px)/1 "Space Mono",monospace;color:#ffb000;text-align:center}
#intro .s5 .clk small{display:block;font:400 11px "Space Mono",monospace;letter-spacing:.06em;color:#8fa3bd;margin-top:10px;text-transform:uppercase}
#intro .s5 .zero{position:absolute;inset:0;display:grid;place-items:center;background:#0a2240;opacity:0;transition:opacity .4s}
#intro .s5 .zero.in{opacity:1}
#intro .s5 .zero b{display:block;font:700 clamp(200px,40vw,520px)/.8 "Lexend",sans-serif;letter-spacing:-.06em;color:#fff;transform:scale(1.6);opacity:0;transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .4s}
#intro .s5 .zero.in b{transform:none;opacity:1}
#intro .s5 .zero span{display:block;text-align:center;font:600 clamp(18px,2.2vw,28px) "Lexend",sans-serif;color:#ff6b6f;margin-top:10px}
@media (max-width:760px){#intro .s5 .grid5{grid-template-columns:1fr;gap:16px}}

/* S6 money */
#intro .s6 .money{text-align:center;display:grid;gap:14px;padding:0 20px}
#intro .s6 .amt{font:700 clamp(54px,10vw,170px)/1 "Lexend",sans-serif;letter-spacing:-.05em;color:#63a941;font-variant-numeric:tabular-nums}
#intro .s6 .who{font:600 clamp(20px,2.6vw,34px) "Lexend",sans-serif;color:#0a2240;letter-spacing:-.02em;transition:opacity .3s}
#intro .s6 .yr{font:400 13px "Space Mono",monospace;letter-spacing:.06em;color:#6b7a8f}
#intro .s6 .coins{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#intro .s6 .coin{position:absolute;top:-60px;width:44px;height:44px;border-radius:50%;background:#63a941;color:#fff;display:grid;place-items:center;font:700 20px "Lexend",sans-serif;box-shadow:0 6px 0 #3f8c25}

/* S7 portraits */
#intro .s7{background:#06162b}
#intro .s7 .pf{position:absolute;inset:0;margin:auto auto auto auto;bottom:12vh;width:min(58vmin,600px);height:min(58vmin,600px);border-radius:26px;overflow:hidden;box-shadow:0 60px 120px -40px rgba(0,0,0,.8);opacity:0;transform:scale(1.35) rotate(-4deg);transition:opacity .12s,transform .4s cubic-bezier(.3,1.5,.5,1)}
#intro .s7 .pf.in{opacity:1;transform:scale(1) rotate(var(--r,-2deg))}
#intro .s7 .pf img{width:100%;height:100%;object-fit:cover}
#intro .s7 .nm{position:absolute;left:0;right:0;bottom:7vh;text-align:center;font:700 clamp(28px,4.6vw,64px)/1 "Lexend",sans-serif;letter-spacing:-.045em;color:#fff}
#intro .s7 .nm em{font-style:normal;color:#ff6b6f}
#intro .shake{animation:ishake .35s}
@keyframes ishake{20%{transform:translate(-8px,4px)}40%{transform:translate(7px,-5px)}60%{transform:translate(-5px,3px)}80%{transform:translate(3px,-2px)}}
#intro .s7 .grid7{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);opacity:0;transition:opacity .4s}
#intro .s7 .grid7.in{opacity:1}
#intro .s7 .grid7 img{width:100%;height:100%;object-fit:cover}
@media (max-width:760px){#intro .s7 .grid7{grid-template-columns:1fr 1fr}}

/* S8 fulfilled + doors */
#intro .s8 .stamp{font:800 clamp(56px,11vw,180px)/1 "Lexend",sans-serif;letter-spacing:-.03em;color:#e5484d;border:clamp(6px,1vw,12px) solid #e5484d;border-radius:18px;padding:.08em .3em .14em;transform:rotate(-10deg) scale(3);opacity:0;transition:transform .4s cubic-bezier(.3,1.6,.5,1),opacity .2s;background:rgba(255,255,255,.92)}
#intro .s8.go .stamp{transform:rotate(-10deg) scale(1);opacity:1}
#intro .s8 .fine{position:absolute;left:0;right:0;top:calc(50% + 24vmin);text-align:center;color:#6b7a8f}
#intro .door{position:absolute;top:0;bottom:0;width:50.5%;background:#0a2240;z-index:15;transition:transform 1s cubic-bezier(.7,0,.2,1);display:flex;align-items:center}
#intro .door.l{left:0;transform:translateX(-101%);justify-content:flex-end;border-right:3px solid #1a3a66}
#intro .door.r{right:0;transform:translateX(101%);justify-content:flex-start;border-left:3px solid #1a3a66}
#intro .door .win{width:46%;height:46%;margin:0 8%;border-radius:14px;background:linear-gradient(160deg,#1a3a66,#0d2c52);box-shadow:inset 0 0 0 6px #06162b}
#intro.close .door{transform:none}
#intro.open .door.l{transform:translateX(-101%)}
#intro.open .door.r{transform:translateX(101%)}
#intro .doortxt{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);z-index:16;text-align:center;font:700 clamp(30px,5vw,76px)/1 "Lexend",sans-serif;letter-spacing:-.045em;color:#fff;opacity:0;transition:opacity .4s;padding:0 20px}
#intro .doortxt em{font-style:normal;color:#63a941}
#intro.close .doortxt{opacity:1;transition-delay:.7s}
#intro.open .doortxt{opacity:0;transition-delay:0s}
#intro.done{opacity:0;transition:opacity .4s;pointer-events:none}

#intro .ui button.pulse{animation:ipulse 1.6s ease-in-out infinite;border-color:#63a941}
@keyframes ipulse{50%{box-shadow:0 0 0 8px rgba(99,169,65,.25)}}