/* v31 out there — one WebGL world + a scroll-cut film edit: orbit, portal, films, hologram (markup in index.html, motion in v31-space.js + v31-space-film.js) */
/* light only behind the arriving card; dark below it, so a mobile toolbar collapse never shows a light band under the pin */
#space.space{--sp-t1:var(--t-d2);--sp-t2:var(--t-h1);--sp-t3:clamp(1.8rem,2.9vw,3.2rem);--sp-in:cubic-bezier(.16,1,.3,1);--sp-out:cubic-bezier(.7,0,.84,0);position:relative;height:780vh;color:#fff;background:linear-gradient(180deg,var(--bg) 0 100vh,var(--stage) 100vh);background:linear-gradient(180deg,var(--bg) 0 100svh,var(--stage) 100svh)}
#space .space__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#02030a;will-change:clip-path;isolation:isolate}
#space .sp__gl,#space .sp__gl canvas{position:absolute;inset:0;width:100%!important;height:100%!important}
#space .sp__gl canvas{display:block}
/* scrims for the header and the copy; --end (last 8%) melts the bottom into the lab's stage colour. Vignette + grain live in the WebGL pass */
#space .space__pin::after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(0deg,rgba(12,13,18,var(--end,0)) 0%,rgba(12,13,18,calc(var(--end,0) * .9)) 12%,rgba(12,13,18,calc(var(--end,0) * .6)) 26%,rgba(12,13,18,calc(var(--end,0) * .28)) 40%,rgba(12,13,18,0) 62%),
    linear-gradient(0deg,rgba(2,3,10,.55) 0%,rgba(2,3,10,.2) 22%,rgba(2,3,10,0) 40%),linear-gradient(180deg,rgba(2,3,10,.5) 0%,rgba(2,3,10,0) 18%)}

/* the film edit — full-frame <video> shots stacked in cut order; the layer is clipped to the portal window's projected outline */
#space .sp__film{position:absolute;inset:0;z-index:1;visibility:hidden;overflow:hidden;pointer-events:none;contain:strict}
#space .sp__shot{position:absolute;inset:0;overflow:hidden;visibility:hidden}
#space .sp__shot video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;will-change:transform;transform-origin:50% 50%}
#space .sp__shot--corridor video{transform-origin:52% 54%}
#space .sp__shot--iss video{transform-origin:68% 46%}
#space .sp__shot--window video{transform-origin:50% 56%}
/* one grade over every film, like the hologram: a blue monochrome — the colour layer takes the footage's hue + saturation into the
   electric-blue family and keeps its luminance (highlights still clip to white); a soft-light layer above deepens the blacks */
#space .sp__shot{isolation:isolate}
#space .sp__shot::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(165deg,#2438f5,#4f66ff 55%,#7d8bff);mix-blend-mode:color;opacity:1}
#space .sp__shot::before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:rgba(47,69,255,.25);mix-blend-mode:soft-light}
#space .sp__iris{position:absolute;left:50%;top:50%;width:0;height:0;border-radius:50%;transform:translate(-50%,-50%);opacity:0;pointer-events:none;
  box-shadow:0 0 0 1px rgba(226,232,255,.9),0 0 26px 4px rgba(107,128,255,.55),inset 0 0 70px 12px rgba(125,139,255,.4)}
#space .sp__bloom{position:absolute;inset:-12%;opacity:0;pointer-events:none;background:radial-gradient(78% 78% at 52% 50%,#fff 0%,#eef1ff 26%,rgba(160,172,255,.92) 55%,rgba(47,69,255,.75) 100%)}
/* while a film fills the frame the canvas turns into a transparent overlay (star streaks, grain, vignette) above it */
#space .space__pin.sp--ov .sp__gl{z-index:2}
#space .sp__css{position:absolute;inset:0;z-index:2;pointer-events:none;visibility:hidden;perspective-origin:50% 50%}
#space .sp__css--holo{mix-blend-mode:screen}
#space .sp__cam{position:absolute;left:0;top:0;transform-style:preserve-3d}
#space .sp__holo{position:absolute;left:0;top:0;backface-visibility:hidden}

/* the hologram: the glass astronaut as an electric-blue / white hologram (grey source × a blue colour layer), revealed from the floor up (--rv); light scanlines that ease off once it has formed */
#space .sp__holo{width:600px;height:900px;--rv:0}
#space .sp__hm{position:absolute;inset:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(0deg,#000 calc(var(--rv) * 100%),transparent calc(var(--rv) * 100% + 6%)),radial-gradient(56% 58% at 50% 44%,#000 58%,transparent 100%),linear-gradient(180deg,#000 0 80%,transparent 95%);
  mask-image:linear-gradient(0deg,#000 calc(var(--rv) * 100%),transparent calc(var(--rv) * 100% + 6%)),radial-gradient(56% 58% at 50% 44%,#000 58%,transparent 100%),linear-gradient(180deg,#000 0 80%,transparent 95%);
  -webkit-mask-composite:source-in,source-in;mask-composite:intersect}
#space .sp__hm img{position:absolute;max-width:none;top:0;left:-5.5%;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.15) brightness(1.08)}
#space .sp__hm img.sp__ghost{filter:grayscale(1) brightness(.95);opacity:.22;transform:translate3d(3px,0,0)}
#space .sp__hm::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,#2f45ff,#4f66ff 50%,#c7cdff);mix-blend-mode:color;opacity:0}
#space .sp__hm.is-ld::before{opacity:.9}
#space .sp__hm::after{content:'';position:absolute;inset:0;z-index:2;background:repeating-linear-gradient(0deg,rgba(0,0,0,.26) 0 1px,transparent 1px 5px);opacity:calc(1 - var(--rv) * .6);animation:spScan 6s linear infinite}
@keyframes spScan{to{background-position:0 -200px}}
#space .sp__scan{position:absolute;left:10%;right:10%;height:3px;bottom:calc(var(--rv) * 100% - 2px);border-radius:3px;
  background:linear-gradient(90deg,transparent,#b9c4ff 20%,#fff 50%,#b9c4ff 80%,transparent);box-shadow:0 0 18px 6px rgba(92,112,255,.8),0 0 60px 20px rgba(47,69,255,.45);
  opacity:calc(min(1, var(--rv) * 20) * min(1, (1 - var(--rv)) * 20))}

/* letterbox — scrubbed closed through the orbit and the window */
#space .sp__lb{position:absolute;left:0;right:0;z-index:3;height:var(--lb,0px);background:#010206;pointer-events:none}
#space .sp__lb--t{top:0}#space .sp__lb--b{bottom:0}

/* copy beats — gated, then played: a time-based rise when the scroll crosses the in-gate, a quick exit at the out-gate (v31-space-ui.js) */
#space .sp__txt{position:absolute;inset:0;z-index:4;pointer-events:none}
#space .sp__beat{position:absolute;visibility:hidden;isolation:isolate;transition:visibility 0s linear .8s}
#space .sp__beat.is-in{visibility:visible;transition-delay:0s}
#space .sp__beat.sp-snap,#space .sp__beat.sp-snap *,#space .sp__beat.sp-snap::before{transition:none!important}
#space .sp__beat::before{content:'';position:absolute;inset:-40% -24%;z-index:-1;pointer-events:none;opacity:0;transition:opacity .5s var(--sp-out);background:radial-gradient(closest-side,rgba(2,3,10,.55),rgba(2,3,10,.22) 55%,transparent)}
#space .sp__beat.is-in::before{opacity:1;transition:opacity .9s var(--sp-in)}
#space .sp__k{display:block;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--acidsoft,#c7cdff);margin:0 0 1.2rem;opacity:0;transform:translate3d(0,10px,0);transition:opacity .3s var(--sp-out),transform .45s var(--sp-out)}
#space .sp__beat.is-in .sp__k{opacity:1;transform:none;transition:opacity .6s var(--sp-in),transform .9s var(--sp-in)}
/* three sizes: display (warp, the close), statements, film captions */
#space .sp__beat h2{margin:0;font-weight:400;font-size:var(--sp-t2);line-height:.96;letter-spacing:-.05em;text-shadow:0 2px 40px rgba(2,3,10,.45)}
#space .sp__beat--4 h2,#space .sp__beat--8 h2{font-size:var(--sp-t1);line-height:.9;letter-spacing:-.056em}
#space .sp__beat--3 h2,#space .sp__beat--5 h2,#space .sp__beat--6 h2{font-size:var(--sp-t3);line-height:1;letter-spacing:-.045em}
#space .sp__beat .ln{display:block;overflow:hidden;padding:0 .04em .16em;margin:0 -.04em -.16em}
#space .sp__beat .ln>span{display:inline-block;will-change:transform;transform:translate3d(0,112%,0);transition:transform .45s var(--sp-out) calc(var(--r,0) * 40ms),opacity .45s linear calc(var(--r,0) * 40ms)}
#space .sp__beat.is-in .ln>span{transform:none;opacity:1;transition:transform .9s var(--sp-in) calc(80ms + var(--i,0) * 80ms),opacity .5s ease calc(80ms + var(--i,0) * 80ms)}
#space .sp__beat.is-post .ln>span{transform:translate3d(0,-40%,0);opacity:0}
#space .sp__beat em{font-style:normal;color:var(--acid2)}
#space .sp__beat p,#space .sp__m,#space .sp__cta{opacity:0;transform:translate3d(0,12px,0);transition:opacity .3s var(--sp-out),transform .45s var(--sp-out)}
#space .sp__beat.is-in p,#space .sp__beat.is-in .sp__m{opacity:1;transform:none;transition:opacity .5s ease .35s,transform .9s var(--sp-in) .35s}
#space .sp__beat.is-in .sp__cta{opacity:1;transform:none;pointer-events:auto;transition:opacity .5s ease .45s,transform .9s var(--sp-in) .45s}
#space .sp__beat p{margin:1.5rem 0 0;max-width:25rem;font-size:1.02rem;line-height:1.5;color:rgba(232,236,255,.86)}
#space .sp__m{display:block;margin:1.3rem 0 0;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(232,236,255,.72)}
#space .sp__beat--1{right:var(--pad);top:50%;transform:translateY(-46%);text-align:right;max-width:50vw}
#space .sp__beat--1 .ln,#space .sp__beat--5 .ln{margin-right:0;padding-right:.07em}
#space .sp__beat--2{left:var(--pad);top:50%;transform:translateY(-50%);max-width:52vw}
#space .sp__beat--3{left:var(--pad);bottom:calc(10vh + 3.4rem);max-width:30rem}
#space .sp__beat--4{left:0;right:0;top:50%;transform:translateY(-50%);text-align:center}
#space .sp__beat--5{right:var(--pad);bottom:calc(10vh + 3.4rem);text-align:right;max-width:44rem}
#space .sp__beat--6{left:var(--pad);bottom:calc(10vh + 3.4rem);max-width:40rem}
#space .sp__beat--7{left:var(--pad);bottom:clamp(4.6rem,12vh,7.5rem);max-width:40rem}
#space .sp__beat--8{left:var(--pad);top:50%;transform:translateY(-46%);max-width:52vw}
/* beats over the films get a denser scrim */
#space .sp__beat--f::before{inset:-45% -28%;background:radial-gradient(closest-side,rgba(2,3,10,.72),rgba(2,3,10,.34) 55%,transparent)}
#space .sp__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
#space .sp__cta .pill b{width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 12px 2px rgba(255,255,255,.6)}
#space .sp__cta .pill--acid:hover b{background:var(--acid);box-shadow:none}
#space .sp__cta .pill--line{background:rgba(255,255,255,.07);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.26);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
#space .sp__cta .pill--line::before{background:#fff}
#space .sp__cta .pill--line:hover{color:var(--ink)}

/* film slate: rec · title · chapter · scrubber (a tick per chapter) · camera · timecode · skip. Only the scrubber and the skip take the pointer */
#space .sp__cap{position:absolute;left:var(--pad);right:var(--pad);bottom:1.5rem;z-index:5;display:flex;align-items:center;gap:1.5rem;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(228,232,255,.72);pointer-events:none;font-variant-numeric:tabular-nums;opacity:0;visibility:hidden}
#space .sp__cap b{font-weight:400;color:#fff}
#space .sp__ch{color:#fff;white-space:nowrap}
#space .sp__bar{flex:1;height:24px;position:relative;cursor:pointer;pointer-events:auto}
#space .sp__bar::before,#space .sp__bar i{content:'';position:absolute;left:0;right:0;top:50%;height:1px}
#space .sp__bar::before{background:rgba(255,255,255,.2)}
#space .sp__bar i{background:linear-gradient(90deg,#4f66ff,#c7cdff);transform-origin:0 50%;transform:scaleX(var(--pr,0))}
#space .sp__tick{position:absolute;top:50%;width:18px;height:24px;margin:-12px 0 0 -9px;padding:0;border:0;border-radius:4px;background:none;cursor:pointer;color:inherit}
#space .sp__tick::before{content:'';position:absolute;left:50%;top:50%;width:1px;height:7px;transform:translate(-50%,-50%);background:rgba(255,255,255,.42);transition:height .3s var(--sp-in),background-color .3s}
#space .sp__tick.done::before{background:#7d8bff}
#space .sp__tick.on::before{height:11px;background:#fff}
#space .sp__tick:hover::before,#space .sp__tick:focus-visible::before{height:14px;background:#fff}
#space .sp__tick:focus-visible{outline:1px solid #7d8bff;outline-offset:1px}
#space .sp__tick::after{content:attr(data-n);position:absolute;left:50%;bottom:calc(100% + 6px);transform:translate(-50%,4px);white-space:nowrap;padding:.42rem .7rem;border-radius:999px;background:rgba(12,13,18,.84);color:#fff;font-size:.66rem;letter-spacing:.08em;line-height:1;opacity:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(125,139,255,.4);transition:opacity .2s,transform .35s var(--sp-in)}
#space .sp__tick:first-child::after{left:0;transform:translate(0,4px)}
#space .sp__tick:hover::after,#space .sp__tick:focus-visible::after{opacity:1;transform:translate(-50%,0)}
#space .sp__tick:first-child:hover::after,#space .sp__tick:first-child:focus-visible::after{transform:none}
#space .sp__skip{pointer-events:auto;font:inherit;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.7);background:none;border:0;border-radius:4px;padding:.55rem 0 .55rem .3rem;margin:-.55rem 0;cursor:pointer;white-space:nowrap;transition:color .25s}
#space .sp__skip:hover,#space .sp__skip:focus-visible{color:#fff}
#space .sp__skip:focus-visible{outline:1px solid #7d8bff;outline-offset:2px}
#space .sp__skip i{display:inline-block;margin-left:.3em;font-style:normal;transition:transform .4s var(--sp-in)}
#space .sp__skip:hover i{transform:translate3d(0,3px,0)}
#space .sp__rec{display:inline-flex;align-items:center;gap:.55rem;color:#fff}
#space .sp__rec::before{content:'';width:7px;height:7px;border-radius:50%;background:#6b80ff;box-shadow:0 0 10px rgba(107,128,255,.9);animation:spRec 1.8s steps(2,jump-none) infinite}
@keyframes spRec{50%{opacity:.25}}

/* no WebGL: the deep-field photo as a still, graded blue, copy on top */
#space.no-gl .space__pin{background:#02030a url(../img/space/deep-field.jpg?v=333) 50% 22%/cover no-repeat}
#space.no-gl .space__pin::before{content:'';position:absolute;inset:0;background:linear-gradient(165deg,rgba(47,69,255,.55),rgba(2,3,10,.55));mix-blend-mode:multiply}
#space.no-gl .sp__css{display:none}

@media(max-width:760px),(max-aspect-ratio:9/10){
  #space.space{height:680vh}
  /* every beat sits low, above the slate and clear of the home indicator; headlines stay within three lines */
  #space .sp__beat,#space .sp__beat--1,#space .sp__beat--2,#space .sp__beat--3,#space .sp__beat--4,#space .sp__beat--5,#space .sp__beat--6,#space .sp__beat--7,#space .sp__beat--8{left:var(--pad);right:var(--pad);top:auto;bottom:calc(4.8rem + env(safe-area-inset-bottom,0px));transform:none;max-width:none;text-align:left}
  #space .sp__beat h2,#space .sp__beat--3 h2,#space .sp__beat--5 h2,#space .sp__beat--6 h2{font-size:clamp(2rem,9.6vw,3rem);line-height:.98}
  #space .sp__beat--4 h2,#space .sp__beat--8 h2{font-size:clamp(2.6rem,13vw,4rem)}
  #space .sp__beat .ln>span{white-space:nowrap}
  #space .sp__beat--1 .ln,#space .sp__beat--5 .ln{margin-right:-.04em;padding-right:.04em}
  #space .sp__k{margin-bottom:.9rem}
  #space .sp__beat p{font-size:.95rem;margin-top:.9rem}
  #space .sp__m{margin-top:.9rem}
  #space .sp__cta{margin-top:1.2rem}
  #space .sp__cap{bottom:calc(1.1rem + env(safe-area-inset-bottom,0px));gap:.9rem;font-size:.68rem}
  /* the copy sits low on phones: a deeper floor scrim keeps planet rims, rings and bright film frames off the type */
  #space .space__pin::after{background:linear-gradient(0deg,rgba(12,13,18,var(--end,0)) 0%,rgba(12,13,18,calc(var(--end,0) * .9)) 12%,rgba(12,13,18,calc(var(--end,0) * .6)) 26%,rgba(12,13,18,calc(var(--end,0) * .28)) 40%,rgba(12,13,18,0) 62%),
    linear-gradient(0deg,rgba(2,3,10,.74) 0%,rgba(2,3,10,.5) 24%,rgba(2,3,10,.18) 42%,rgba(2,3,10,0) 56%),linear-gradient(180deg,rgba(2,3,10,.5) 0%,rgba(2,3,10,0) 14%)}
  #space .sp__rec,#space .sp__slate,#space .sp__cr,#space .sp__tc{display:none}
  #space .sp__skip{font-size:.68rem}
}
@media(prefers-reduced-motion:reduce){
  #space .sp__iris,#space .sp__bloom{display:none}#space .sp__rec::before,#space .sp__hm::after{animation:none}#space .space__pin{will-change:auto}
  #space .sp__beat .ln>span,#space .sp__beat.is-post .ln>span{transform:none;opacity:1}
  #space .sp__beat{opacity:0;transition:opacity .3s,visibility 0s linear .3s}#space .sp__beat.is-in{opacity:1;transition:opacity .3s,visibility 0s}
}
/* short landscape windows (phones on their side, squat browser windows): type scales with height; the closing beat sits above the slate, clear of the header */
@media (max-height:520px) and (min-aspect-ratio:9/10){
  #space .sp__beat h2,#space .sp__beat--3 h2,#space .sp__beat--5 h2,#space .sp__beat--6 h2{font-size:clamp(1.8rem,10vh,3rem)}
  #space .sp__beat--4 h2,#space .sp__beat--8 h2{font-size:clamp(2.2rem,14vh,3.6rem)}
  #space .sp__beat--8{top:auto;bottom:3.2rem;transform:none}
  #space .sp__beat p,#space .sp__m{display:none}
  #space .sp__cta{margin-top:.9rem}
  #space .sp__k{margin-bottom:.6rem}
}