/* =====================================================================
   Launcher intro (see intro.js). One timeline, in seconds:
   0.0 radar opens · 0.5 contacts · 1.1 lock-on · 1.8 shell · 2.15 impact
   2.35 title · 2.75 tape · 3.0 tagline · 3.9 fade out (4.4 gone).
   ===================================================================== */
.intro{--r:min(72vmin,620px);--blue:#96bcff;position:fixed;inset:0;z-index:100;display:grid;place-items:center;overflow:hidden;cursor:pointer;direction:rtl;
  background:radial-gradient(circle at 50% 50%,#0f3047 0,#071827 62%,#030c15 100%);animation:intro-out .5s ease-in 3.9s forwards}
.intro.is-skipping{animation:intro-out .3s ease-in forwards}
.intro-stage{position:relative;display:grid;place-items:center;width:100%;height:100%;animation:intro-shake .45s linear 2.15s both}

/* Radar */
.intro-radar{position:absolute;width:var(--r);height:var(--r);border-radius:50%;background:radial-gradient(circle,#123a52 0,#0b2638 70%);
  box-shadow:0 0 0 2px #7fe0e055,0 0 0 calc(var(--r)*.02) #04111c,0 0 calc(var(--r)*.15) #7fe0e022,inset 0 0 calc(var(--r)*.12) #000a;
  animation:intro-radar-open .7s cubic-bezier(.2,.9,.3,1) backwards,intro-radar-back .6s ease-in-out 2.3s forwards}
.intro-grid{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;fill:none;stroke:#7fe0e0;stroke-opacity:.18;stroke-width:.3}
.intro-grid circle{stroke-opacity:.12;stroke-dasharray:1 1.4}
.intro-sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,#7fe0e000 0 70%,#7fe0e024 88%,#7fe0e0aa 99.6%,#fff 100%);
  animation:intro-spin 1.5s linear infinite;mix-blend-mode:screen}

/* Contacts: each pings in, then keeps a faint glow */
.intro-blip{--c:var(--yellow);position:absolute;left:var(--x);top:var(--y);width:3.2%;height:3.2%;margin:-1.6%;border-radius:50%;background:var(--c);
  box-shadow:0 0 calc(var(--r)*.03) var(--c);opacity:0;animation:intro-blip .9s ease-out .5s forwards}
.intro-blip::after{content:'';position:absolute;inset:-30%;border-radius:50%;border:2px solid var(--c);opacity:0;animation:intro-ping .9s ease-out;animation-delay:inherit}
.intro-blip-mint{--c:var(--mint)}.intro-blip-blue{--c:var(--blue)}.intro-blip-coral{--c:var(--coral)}

/* Lock-on brackets close in on the target cell, then blink */
.intro-lock{position:absolute;left:var(--x);top:var(--y);width:10%;height:10%;margin:-5%;opacity:0;animation:intro-lock .7s cubic-bezier(.3,1.5,.5,1) 1.1s forwards,intro-lock-blink .3s steps(1,end) 1.8s 2}
.intro-lock i{position:absolute;width:32%;height:32%;border:0 solid #ff4a2a;filter:drop-shadow(0 0 4px #ff4a2a)}
.intro-lock i:nth-child(1){top:0;left:0;border-width:3px 0 0 3px}
.intro-lock i:nth-child(2){top:0;right:0;border-width:3px 3px 0 0}
.intro-lock i:nth-child(3){bottom:0;left:0;border-width:0 0 3px 3px}
.intro-lock i:nth-child(4){bottom:0;right:0;border-width:0 3px 3px 0}

/* The strike: shell falls in, fire and rings at the target */
.intro-hit{position:absolute;left:var(--x);top:var(--y);width:0;height:0}
.intro-shell{position:absolute;right:0;top:calc(var(--r)*-.012);width:calc(var(--r)*.22);height:calc(var(--r)*.024);border-radius:99px;transform-origin:100% 50%;opacity:0;
  background:linear-gradient(90deg,#ffc85700,#ffc85788 70%,#fff 96%);filter:drop-shadow(0 0 6px #ffc857);animation:intro-shell .35s cubic-bezier(.5,0,1,.6) 1.8s forwards}
.intro-fire{position:absolute;width:calc(var(--r)*.34);height:calc(var(--r)*.34);margin:calc(var(--r)*-.17);border-radius:50%;opacity:0;
  background:radial-gradient(circle,#fff 0 12%,#ffd166 28%,#ff8272 50%,#ff4a2a00 70%);animation:intro-fire .9s ease-out 2.15s forwards}
.intro-ring{position:absolute;width:calc(var(--r)*.1);height:calc(var(--r)*.1);margin:calc(var(--r)*-.05);border-radius:50%;border:3px solid #ffd166;opacity:0;animation:intro-ring .9s ease-out 2.15s forwards}
.intro-ring+.intro-ring{border-color:var(--coral);animation-delay:2.3s}
.intro-flash{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,#fff6dc,#ffc85700 75%);opacity:0;pointer-events:none;animation:intro-flash .4s ease-out 2.15s forwards}

/* Title */
.intro-title{position:relative;text-align:center;display:grid;justify-items:center;gap:clamp(8px,1.6vmin,18px)}
.intro-title h1{font:800 clamp(64px,13vmin,170px)/1.1 var(--label,Changa),Cairo,sans-serif;color:var(--yellow);letter-spacing:-1px;
  text-shadow:0 .06em 0 #6e4b00,0 .1em .3em #000c,0 0 .5em #ffc85744;opacity:0;animation:intro-slam .45s cubic-bezier(.2,1.5,.4,1) 2.35s both}
.intro-tape{font:800 clamp(18px,3.2vmin,40px)/1.5 var(--label,Changa),Cairo,sans-serif;letter-spacing:3px;background:#141414;color:#f2f2ec;padding:.1em .8em;border-radius:3px;
  text-shadow:0 1px 0 #777,0 -1px 0 #000;box-shadow:0 3px 0 #0008,inset 0 1px 0 #ffffff14;clip-path:inset(0 0 0 100%);animation:intro-tape .4s cubic-bezier(.4,0,.2,1) 2.75s forwards}
.intro-tagline{color:#b3c6cf;font-size:clamp(14px,2.2vmin,24px);opacity:0;animation:intro-rise .5s ease-out 3s forwards}
.intro-skip{position:absolute;bottom:max(20px,env(safe-area-inset-bottom));left:0;right:0;text-align:center;color:#b3c6cf88;font-size:13px;animation:intro-rise .4s ease-out .6s both}

@keyframes intro-out{to{opacity:0;transform:scale(1.06);visibility:hidden}}
@keyframes intro-radar-open{from{clip-path:circle(0);transform:scale(.6)}to{clip-path:circle(50%);transform:none}}
@keyframes intro-radar-back{to{transform:scale(.82);opacity:.28;filter:blur(2px)}}
@keyframes intro-spin{to{transform:rotate(1turn)}}
@keyframes intro-blip{0%{opacity:0;transform:scale(.2)}25%{opacity:1;transform:scale(1.5)}100%{opacity:.75;transform:none}}
@keyframes intro-ping{0%{opacity:.9;transform:scale(.5)}100%{opacity:0;transform:scale(2.6)}}
@keyframes intro-lock{from{opacity:0;transform:scale(3.4) rotate(45deg)}to{opacity:1;transform:none}}
@keyframes intro-lock-blink{50%{opacity:.15}}
@keyframes intro-shell{0%{opacity:1;transform:translate(calc(var(--r)*-.55),calc(var(--r)*-.85)) rotate(57deg) scale(2.2)}96%{opacity:1}100%{opacity:0;transform:rotate(57deg) scale(.6)}}
@keyframes intro-fire{0%{opacity:1;transform:scale(.2)}30%{opacity:1;transform:scale(1.3)}100%{opacity:0;transform:scale(1.8)}}
@keyframes intro-ring{from{opacity:1;transform:scale(.3)}to{opacity:0;transform:scale(7)}}
@keyframes intro-flash{0%{opacity:.35}100%{opacity:0}}
@keyframes intro-shake{0%,100%{transform:none}15%{transform:translate(-1.4%,1%)}30%{transform:translate(1.2%,-.8%)}45%{transform:translate(-.8%,-.6%)}60%{transform:translate(.6%,.6%)}80%{transform:translate(-.3%,.2%)}}
@keyframes intro-slam{0%{opacity:0;transform:scale(2.4);filter:blur(14px)}60%{opacity:1;filter:none}100%{opacity:1;transform:none}}
@keyframes intro-tape{to{clip-path:inset(0)}}
@keyframes intro-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}