/* Intro: Isra's opening sequence, in titanium. A chip draws itself, its cores fire, the loader
   fills, a cyan seam lights down the middle and the titanium doors open onto the page. Plays once
   per session, never for reduced motion, and the footer's Replay intro runs it again. */
.intro{display:none}
html.intro-on .intro{position:fixed;inset:0;z-index:100;display:block;overflow:hidden;animation:intro-gone 0s linear 2.95s forwards}
.intro .door{position:absolute;top:0;bottom:0;width:50%;background:linear-gradient(180deg,#30353D 0%,var(--door) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.intro .door.l{left:0;border-right:1px solid rgba(98,225,239,.55);animation:door-l .65s cubic-bezier(.75,0,.2,1) 2.18s forwards}
.intro .door.r{right:0;border-left:1px solid rgba(98,225,239,.55);animation:door-r .65s cubic-bezier(.75,0,.2,1) 2.18s forwards}
.intro .sweep{position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,transparent,rgba(98,225,239,.85),transparent);opacity:0;animation:sweep 1.1s ease-in-out .14s forwards}
.intro .seam{position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:linear-gradient(180deg,transparent,var(--signal-lo) 30%,var(--signal-hi) 50%,var(--signal-lo) 70%,transparent);box-shadow:0 0 24px var(--signal);opacity:0;transform:scaleY(0);animation:seam .24s ease-out 1.94s forwards,fade .27s ease-in 2.38s forwards}
.intro .core{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;animation:zoom .48s cubic-bezier(.6,0,.4,1) 2.01s forwards}
.intro .chip{width:min(1100px,92vw);height:auto;max-height:68vh;animation:chip-glow .34s ease-out 1.63s forwards}
.intro .loader{display:grid;gap:10px;width:min(420px,80vw);color:var(--fg-2);font-size:12.5px;font-weight:650;font-stretch:var(--wide);letter-spacing:.2em}
.intro .loader-row{display:flex;justify-content:space-between;opacity:0;animation:slide-in .24s ease-out .27s forwards}
.intro .loader-row span:last-child{color:var(--signal)}
.intro .bar{height:6px;border-radius:4px;background:var(--bg-2);box-shadow:var(--sh-well);overflow:hidden}
.intro .bar i{display:block;height:6px;border-radius:4px;background:linear-gradient(90deg,var(--signal-lo),var(--signal),var(--signal-hi));transform:scaleX(0);transform-origin:left;animation:fill 1.56s cubic-bezier(.4,0,.2,1) .2s forwards}
.intro .skip-intro{position:absolute;right:max(var(--pad),env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:2;height:44px;padding:0 16px;border:1px solid var(--edge);border-radius:var(--radius-key);background:linear-gradient(180deg,var(--key-a) 0%,var(--key-b) 100%);box-shadow:var(--sh-key);color:var(--fg);font-family:var(--f-sans);font-size:14px;font-weight:650;cursor:pointer}
.intro .skip-intro:hover{filter:brightness(1.08)}

/* Chip parts, timed by the delays the script writes on each element */
.intro .draw{stroke-dasharray:100;stroke-dashoffset:100;animation:draw .61s cubic-bezier(.6,0,.2,1) forwards}
.intro .pop{opacity:0;transform-box:fill-box;transform-origin:center;animation:pop .31s ease-out forwards}
.intro .die{fill-opacity:0;animation:draw .61s cubic-bezier(.6,0,.2,1) forwards,die .27s ease-out 1.63s forwards}
.intro .spike{opacity:.14;animation:spike .61s ease-out 3,on .17s ease-out 1.67s forwards}
.intro .trace-run{stroke-dasharray:4 96;stroke-dashoffset:100;opacity:0;animation:run .95s linear infinite,on .07s linear forwards}

@keyframes intro-gone{to{visibility:hidden}}
@keyframes door-l{to{transform:translateX(-102%)}}
@keyframes door-r{to{transform:translateX(102%)}}
@keyframes sweep{from{transform:translateY(-10px);opacity:0}20%{opacity:1}to{transform:translateY(100vh);opacity:0}}
@keyframes seam{0%{transform:scaleY(0);opacity:0}40%{opacity:1}100%{transform:scaleY(1);opacity:1}}
@keyframes fade{to{opacity:0}}
@keyframes zoom{0%{transform:scale(1);opacity:1;filter:blur(0)}100%{transform:scale(1.9);opacity:0;filter:blur(6px)}}
@keyframes chip-glow{to{filter:drop-shadow(0 0 36px rgba(98,225,239,.85))}}
@keyframes slide-in{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
@keyframes fill{to{transform:scaleX(1)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{0%{opacity:0;transform:scale(0)}70%{opacity:1;transform:scale(1.35)}100%{opacity:1;transform:scale(1)}}
@keyframes die{to{fill-opacity:.22}}
@keyframes spike{0%{opacity:.14}12%{opacity:1}40%{opacity:.14}100%{opacity:.14}}
@keyframes on{to{opacity:1}}

/* Hero copy rises after the doors open; without the intro it rises at once */
.hero .rise{animation-delay:calc(.1s + var(--i,0) * .12s)}
html.intro-on .hero .rise{animation-delay:calc(2.5s + var(--i,0) * .15s)}