/* Orion Word Game, homepage. Plain CSS: no build step, no outside requests; two small font files of our own (assets/fonts, OFL). */

:root{
  --ink:#f3f1ee; --dim:#a4a3b2; --bg:#07070c; --line:rgba(255,255,255,.10);
  /* the type: titles in Archivo Expanded Light, the game's own face; everything else in Montserrat (the system face is the fallback for both) */
  --font:'Montserrat',-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue","Segoe UI",Roboto,Arial,sans-serif;
  --font-display:'Archivo Expanded',-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue","Segoe UI",Roboto,Arial,sans-serif;
  --wide:.34em;               /* tracking of the small capitals, echoing the logotype */
}
@font-face{font-family:'Archivo Expanded';font-weight:300;font-style:normal;font-display:swap;src:url(../assets/fonts/archivo-expanded-light.woff2?v=2) format('woff2')}   /* titles and the letters in the blocks (OFL, assets/fonts) */
@font-face{font-family:'Montserrat';font-weight:100 900;font-style:normal;font-display:swap;src:url(../assets/fonts/montserrat.woff2) format('woff2')}   /* one variable file, every weight (OFL) */
*{box-sizing:border-box}
/* nothing may make the page wider than the screen: iPhone Safari lets a finger pan into (and pinch out to) any extra width, and "hidden"
   on the body does not stop it there; "clip" does, and clips without making a scroll box */
html{background:var(--bg);-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.65 var(--font);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video{display:block;max-width:100%}
a{color:inherit}
a:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:6px}
::selection{background:#fff;color:#0a0a10}
::-moz-selection{background:#fff;color:#0a0a10}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.dim{color:var(--dim)}
.eyebrow{font:600 12px/1.2 var(--font);letter-spacing:var(--wide);text-transform:uppercase;color:var(--dim);margin:0 0 18px}
h2{font:300 clamp(24px,3vw,40px)/1.16 var(--font-display);letter-spacing:.005em;margin:0 0 20px;text-wrap:balance}
h3{font:300 20px/1.25 var(--font-display);margin:0 0 10px}
p{margin:0 0 14px}

/* ============================================================================================
   HERO. Every look-and-feel number of the glass is a variable in this one block.
   Open the page with ?tune at the end of the address to move them with sliders.
   ============================================================================================ */
.hero{
  --d-scale:1.05;              /* glass size */
  --cyk:-.195;                 /* glass centre: share of its diameter above (minus) or below the top edge */
  --lock-scale:1.02;            /* lockup width as a share of the glass */
  --frost:0px;                 /* blur inside the glass */
  --mag:1;                  /* magnification */
  --disp:.018;                 /* dispersion: how far the colours split */
  --tint-top:.44;              /* dark tint, upper part of the visible glass */
  --tint-bot:.71;              /* dark tint, at the bottom rim */
  --rim:.57;                    /* rim light strength */
  --rim-w:1px;               /* rim light thickness */
  --glow:0;                  /* light pooling at the bottom, fading upwards */
  --ghost:0;                  /* the logo seen under the glass */
  --ghost-drop:-.06;           /* how far that under-logo is dropped (share of the glass) */
  --ghost-blur:0px;
  --move:3;                    /* scroll parallax amount; 0 switches it off */
  --top-shade:.8;              /* fade to dark at the very top, so the lockup stands out */
  --grid:1;                    /* the block grid: strength */
  --grid-fade:100%;             /* where the grid has faded out completely, from the top */

  /* geometry, worked out from the numbers above (home.js replaces --hw/--hh with exact pixels) */
  --hw:100vw; --hh:100vh; --hh:100svh;
  --d:calc(clamp(340px,50vw,900px) * var(--d-scale));
  --cy:calc(var(--d) * var(--cyk));
  --ly:calc(var(--d) * (var(--cyk) - .5));
  --lock-w:calc(var(--d) * var(--lock-scale));
  --lock-top:calc(var(--d) * (.465 + var(--cyk)) - var(--lock-w) * 262 / 1383);
  --sy:0;                      /* scroll progress, 0 to 1, set by home.js. Exact: everything locked to the page or the screen reads it */
  --ss:var(--sy);              /* the same progress, eased by home.js for a mouse wheel (it scrolls in steps): growth, exit and soft copy read it */
  --q:clamp(0, var(--ss) * 2, 1);          /* 0 to 1 over the first half of the hero: the glass and lockup grow */
  --p:clamp(0, (var(--ss) - .6) * 2.5, 1);   /* 0 until the hero is six tenths scrolled, then 0 to 1: the exit (the glass is carried a little further) */
  --e:calc(var(--p) * var(--p) * (3 - 2 * var(--p)));   /* the exit, eased in and out so it never jerks */
  --grow:calc(1 + var(--q) * .15);
  --pin:calc(var(--sy) * var(--hh) - var(--e) * var(--hh) * 1.1);   /* glass and lockup stay put, then leave upwards */

  --spill:36vh;                /* how far the blocks run on below the hero, into the next section (the grid's parallax takes 21vh of it back) */
  position:relative;height:100vh;height:100svh;min-height:600px;overflow:visible;overflow-x:clip;isolation:isolate;   /* the layers are 8 % wider than the hero: cut at the sides, free to spill below */
  background:#05050a url(../assets/keyart-blur.webp) center / cover no-repeat;   /* a tiny soft copy shows at once, while the sharp art loads */
}
@media (max-width:720px){
  .hero{--d:calc(min(100vw,520px) * .98 * var(--d-scale));--cyk:-.14}
}

.plate{position:absolute;inset:-4%;will-change:transform}
.hero__clip{position:absolute;inset:0;overflow:hidden;z-index:0}
.hero__stage{position:absolute;inset:0;overflow:hidden;z-index:2;pointer-events:none}
.plate img,.plate video{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 2.6s ease}
.slide.on{opacity:1}
.lens__set{position:absolute;inset:0;isolation:isolate;opacity:0;transition:opacity 2.6s ease}
.lens__set.on{opacity:1}
/* the blocks: plain elements, each fading on the compositor (js/blocks.js); the board lines a CSS background */
.blocks-lattice,.blocks-layer{position:absolute;inset:0;pointer-events:none}
.pz{position:absolute;inset:0;will-change:opacity}
.bk{position:absolute;will-change:opacity}
.bk__i{position:absolute;inset:0;background-size:100% 100%;background-repeat:no-repeat;display:flex;align-items:center;justify-content:center;will-change:opacity}
.bk--glass .bk__i{background-image:url(../assets/block-glass.png)}
.bk--solid .bk__i{background-image:url(../assets/block-solid.png)}
.bk__i span{font-family:'Archivo Expanded','Archivo',sans-serif;font-weight:300;color:#fff;line-height:1}
.hero__grid{z-index:1;opacity:var(--grid);will-change:transform;top:-4%;left:-4%;right:-4%;bottom:calc(-1 * var(--spill));
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.85) 32%,transparent var(--grid-fade));mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.85) 32%,transparent var(--grid-fade))}

/* ---- the glass ---- */
.lens{position:absolute;left:calc((var(--hw) - var(--d)) / 2);top:var(--ly);width:var(--d);height:var(--d);will-change:transform}
.lens::before{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 22px 60px 4px rgba(0,0,0,.5)}
.lens__glass{position:absolute;inset:0;border-radius:50%;overflow:hidden;-webkit-clip-path:circle(50% at 50% 50%);clip-path:circle(50% at 50% 50%);background:#000;isolation:isolate}
.lens__frost{position:absolute;inset:-48px;filter:blur(var(--frost))}
.lens__plate{position:absolute;
  left:calc(48px - (var(--hw) - var(--d)) / 2 - var(--hw) * .04);top:calc(48px - var(--ly) - var(--hh) * .04);
  width:calc(var(--hw) * 1.08);height:calc(var(--hh) * 1.08);
  transform-origin:50% calc(var(--cy) + var(--hh) * .04);mix-blend-mode:screen;will-change:transform}
.lens__plate img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.lens__plate--r{--ps:calc(var(--mag) * (1 - var(--disp)))}
.lens__plate--g{--ps:var(--mag)}
.lens__plate--b{--ps:calc(var(--mag) * (1 + var(--disp)))}
.lens__plate--grid{--ps:var(--mag);opacity:calc(var(--grid) * .9)}

.lens__ghost{position:absolute;left:calc(48px + var(--d) / 2 - var(--lock-w) / 2);
  top:calc(48px - var(--ly) + var(--lock-top) + var(--d) * var(--ghost-drop));width:var(--lock-w);aspect-ratio:1383 / 262;
  -webkit-mask:url(../assets/orion-lockup-hero.svg) center / 100% 100% no-repeat;mask:url(../assets/orion-lockup-hero.svg) center / 100% 100% no-repeat;
  transform-origin:50% calc(var(--cy) - var(--lock-top) - var(--d) * var(--ghost-drop));
  mix-blend-mode:screen;opacity:var(--ghost);filter:blur(var(--ghost-blur))}
.lens__ghost--r{background:#ff2020;transform:scale(calc(1.03 * (1 - var(--disp) * 1.5)))}
.lens__ghost--g{background:#20ff20;transform:scale(1.03)}
.lens__ghost--b{background:#2030ff;transform:scale(calc(1.03 * (1 + var(--disp) * 1.5)))}

.lens__tint{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(5,7,20,var(--tint-top)) 60%,rgba(16,13,40,var(--tint-bot)) 100%)}
.lens__glow{position:absolute;inset:0;mix-blend-mode:screen;background:radial-gradient(72% 44% at 50% 103%,rgba(200,214,255,var(--glow)),rgba(200,214,255,0) 70%)}

/* the rim: a hair of light on the bottom edge that fades away upwards, with a faint colour split either side */
.lens__rim{position:absolute;inset:0;border-radius:50%;padding:var(--rim-w);pointer-events:none;
  background:linear-gradient(to top,rgba(255,255,255,var(--rim)) 0%,rgba(255,255,255,calc(var(--rim) * .5)) 12%,rgba(255,255,255,calc(var(--rim) * .14)) 30%,rgba(255,255,255,0) 48%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
}
.lens__rim--c{inset:-1.5px;mix-blend-mode:screen;background:linear-gradient(to top,rgba(110,225,255,calc(var(--rim) * .6)),rgba(110,225,255,0) 28%)}
.lens__rim--m{inset:1.5px;mix-blend-mode:screen;background:linear-gradient(to top,rgba(255,110,190,calc(var(--rim) * .55)),rgba(255,110,190,0) 28%)}

/* ---- the lockup, over the glass ---- */
.lockup{position:absolute;left:calc(50% - var(--lock-w) / 2);top:var(--lock-top);width:var(--lock-w);margin:0;will-change:transform}
.lockup img{width:100%;height:auto;filter:drop-shadow(0 6px 18px rgba(0,0,0,.45))}

.hero__top{position:absolute;z-index:3;left:0;right:0;top:0;height:48%;pointer-events:none;background:linear-gradient(to bottom,rgba(4,4,9,var(--top-shade)),rgba(4,4,9,calc(var(--top-shade) * .55)) 38%,rgba(4,4,9,0))}
.hero__shade{position:absolute;z-index:3;left:0;right:0;bottom:0;height:54%;background:linear-gradient(to top,var(--bg) 2%,rgba(7,7,12,.7) 36%,rgba(7,7,12,0))}
.hero__grain{position:absolute;z-index:5;inset:0;background:url(../assets/grain.png) 0 0 / 160px 160px;opacity:.10;mix-blend-mode:overlay;pointer-events:none}

.hero__cta{position:absolute;z-index:6;left:0;right:0;bottom:clamp(56px,10vh,112px);padding:0 24px;text-align:center;will-change:transform,opacity}

/* ---- scroll motion: two engines, one look ----
   The glass and the lockup are held to the screen while the hero scrolls away under them (the "pin"), grow a little, then
   leave upwards and fade (the "exit"); the art sinks, its soft copy fades in, the block grid rises; the art inside the glass
   keeps up with the art behind it (the "counter" undoes the exit for the plates, as before).
   Modern browsers (Safari 26, Chrome 115, Firefox 144 and later) drive all of it from the scroll position itself, in CSS
   (scroll-driven animations): the compositor moves the pins, so nothing can lag a frame behind the page, which is the
   drag and flicker that scripted parallax shows on an iPhone. Older browsers get the same motion from home.js, which
   writes --sy (exact) and --ss (eased for a mouse wheel) on every scroll. */
.pin{position:absolute;inset:0;pointer-events:none;will-change:transform}
.pin--lens{z-index:2}
.pin--lockup{z-index:4}
.exit{position:absolute;inset:0;will-change:transform,opacity}
.lens__counter{position:absolute;inset:0;will-change:transform}
/* the scripted engine: its transforms are written as plain rules (home.js feeds --sy, --ss, --e, --grow); in a browser with
   scroll-driven animations the animations below simply win over them, and html.legacy (the ?legacy address) switches
   them off again so both engines can be compared on the same phone */
html.legacy .hero__bg,html.legacy .hero__blur,html.legacy .hero__grid,html.legacy .pin,html.legacy .exit,html.legacy .lens,html.legacy .lens__counter,html.legacy .lens__plate,html.legacy .lockup,html.legacy .lockup img,html.legacy .hero__cta,
html.legacy .journey__logo,html.legacy .gbadge__outer,html.legacy .gbadge__inner,html.legacy .gbadge__orion,html.legacy .gbadge__wg{animation:none!important}
@supports (animation-timeline: scroll()) or (not (animation-timeline: scroll())){
  .hero__bg{transform:translate3d(0,calc(var(--sy) * 9vh * var(--move)),0)}
  .hero__blur{opacity:calc(var(--ss) * 1.6);transform:translate3d(0,calc(var(--sy) * 9vh * var(--move)),0)}
  .hero__grid{transform:translate3d(0,calc(var(--sy) * -7vh * var(--move)),0)}
  .pin{transform:translate3d(0,calc(var(--sy) * var(--hh)),0)}
  .exit{transform:translate3d(0,calc(var(--e) * var(--hh) * -1.1),0);opacity:calc(1 - var(--e) * 1.15)}
  .lens{transform:scale(var(--grow))}
  .lens__counter{transform:translate3d(0,calc(var(--e) * var(--hh) * 1.1),0)}
  .lens__plate{transform:translate3d(0,calc(var(--sy) * 9vh * var(--move) - var(--sy) * var(--hh)),0) scale(var(--ps))}
  .lens__plate--grid{transform:translate3d(0,calc(var(--sy) * -7vh * var(--move) - var(--sy) * var(--hh)),0) scale(var(--ps))}
  .lockup{transform:scale(var(--grow))}
  .lockup img{filter:drop-shadow(0 6px 18px rgba(0,0,0,.45)) blur(calc(var(--e) * 5px))}
  .hero__cta{transform:translate3d(0,calc(var(--sy) * -6vh),0);opacity:calc(1 - clamp(0, (var(--sy) - .15) / .27, 1))}
}
@supports (animation-timeline: scroll()){
  .hero{view-timeline:--hero block}
  .hero__bg,.hero__blur,.hero__grid,.pin,.exit,.lens,.lens__counter,.lens__plate,.lockup,.lockup img,.hero__cta{
    animation-timeline:--hero;animation-range:exit 0% exit 100%;animation-fill-mode:both;animation-timing-function:linear}
  .hero__bg{animation-name:h-sink}
  .hero__blur{animation-name:h-sink,h-soft}
  .hero__grid{animation-name:h-rise}
  .pin{animation-name:h-pin}
  .exit{animation-name:h-exit}
  .lens{animation-name:h-grow}
  .lens__counter{animation-name:h-counter}
  .lens__plate{animation-name:h-follow}
  .lens__plate--grid{animation-name:h-follow-grid}
  .lockup{animation-name:h-grow-lockup}
  .lockup img{animation-name:h-blur}
  .hero__cta{animation-name:h-cta}
  /* the parts of the page that drift against the scroll: the Journey I band and the bottom glass, each on its own view timeline */
  .journey{view-timeline:--journey block}
  .journey__logo{animation:j-logo linear both;animation-timeline:--journey;animation-range:cover 0% cover 100%}
  .gbadge{view-timeline:--badge block}
  /* the badge's depth runs while it rises to the middle of the screen (cover 0 to 50 %) and holds there: it never overshoots downwards */
  .gbadge__outer{animation:b-outer linear both;animation-timeline:--badge;animation-range:cover 0% cover 50%}
  .gbadge__inner{animation:b-inner linear both;animation-timeline:--badge;animation-range:cover 0% cover 50%}
  .gbadge__orion,.gbadge__wg{animation:b-logo linear both;animation-timeline:--badge;animation-range:cover 0% cover 50%}
}
@keyframes h-sink{to{transform:translate3d(0,calc(9vh * var(--move)),0)}}
@keyframes h-soft{0%{opacity:0}62.5%{opacity:1}100%{opacity:1}}
@keyframes h-rise{to{transform:translate3d(0,calc(-7vh * var(--move)),0)}}
@keyframes h-pin{to{transform:translate3d(0,var(--hh),0)}}
@keyframes h-exit{0%,60%{transform:translate3d(0,0,0);opacity:1;animation-timing-function:ease-in-out}94%{opacity:0}100%{transform:translate3d(0,calc(var(--hh) * -1.1),0);opacity:0}}
@keyframes h-grow{0%{transform:scale(1)}50%,100%{transform:scale(1.15)}}
@keyframes h-counter{0%,60%{transform:translate3d(0,0,0);animation-timing-function:ease-in-out}100%{transform:translate3d(0,calc(var(--hh) * 1.1),0)}}
@keyframes h-follow{from{transform:translate3d(0,0,0) scale(var(--ps))}to{transform:translate3d(0,calc(9vh * var(--move) - var(--hh)),0) scale(var(--ps))}}
@keyframes h-follow-grid{from{transform:translate3d(0,0,0) scale(var(--ps))}to{transform:translate3d(0,calc(-7vh * var(--move) - var(--hh)),0) scale(var(--ps))}}
@keyframes h-grow-lockup{0%{transform:scale(1)}50%,100%{transform:scale(1.15)}}
@keyframes h-blur{0%,60%{filter:drop-shadow(0 6px 18px rgba(0,0,0,.45)) blur(0px)}100%{filter:drop-shadow(0 6px 18px rgba(0,0,0,.45)) blur(5px)}}
@keyframes h-cta{0%{opacity:1}15%{opacity:1}42%{opacity:0}100%{transform:translate3d(0,-6vh,0);opacity:0}}
@keyframes j-bg{from{transform:translate3d(0,12%,0) scale(1.26)}to{transform:translate3d(0,-12%,0) scale(1.26)}}
@keyframes j-logo{0%{transform:translate3d(0,110px,0) scale(.94);opacity:.3}50%{transform:translate3d(0,0,0) scale(1);opacity:1}100%{transform:translate3d(0,-110px,0) scale(.94);opacity:.3}}
@keyframes b-outer{from{transform:translate3d(0,14%,0)}to{transform:translate3d(0,0,0)}}
@keyframes b-inner{from{transform:translate3d(0,8%,0)}to{transform:translate3d(0,0,0)}}
@keyframes b-logo{from{transform:translate(-50%,calc(-50% - 2.4vh))}to{transform:translate(-50%,-50%)}}

.tagline{font:300 clamp(19px,2.2vw,32px)/1.22 var(--font-display);margin:0 0 26px;text-wrap:balance;text-shadow:0 2px 24px rgba(0,0,0,.55)}
/* "journey": silver like the logotype (white above, #c7c7c7 below), with a slow light passing through it every eight seconds.
   Two backgrounds clipped to the letters: the light (a soft band on a strip 2.5 times the word's width, slid across, hidden just
   past either end) over the silver. The light takes about 2.8 s to cross, at a near-even pace, then rests. */
.tagline__journey{font-style:normal}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .tagline__journey{
    background-image:linear-gradient(105deg,rgba(255,255,255,0) 41%,rgba(255,255,255,.95) 50%,rgba(255,255,255,0) 59%),linear-gradient(to bottom,#fff 30%,#c7c7c7 80%);
    background-size:250% 100%,100% 100%;background-repeat:no-repeat;background-position:100% 0,0 0;
    -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
    text-shadow:none;            /* a text shadow would paint over the clipped silver */
    animation:sweep 8s cubic-bezier(.4,.15,.6,.85) 2.4s infinite}
  .tagline__journey::selection{-webkit-text-fill-color:#0a0a10}
}
@keyframes sweep{0%{background-position:100% 0,0 0}35%,100%{background-position:0 0,0 0}}
.hero.away .tagline__journey{animation-play-state:paused}
/* while the hero is out of sight (home.js adds .away), the animated grid and the glass are not drawn at all */
.hero.away .hero__grid,.hero.away .lens{visibility:hidden}
.hero__note{font:600 11px/1.4 var(--font);letter-spacing:var(--wide);text-transform:uppercase;color:var(--dim);margin:16px 0 0}
.certified{display:inline-flex;flex-direction:column;align-items:center;gap:7px;margin:22px 0 0}
.certified img{width:88px;height:auto;opacity:.95}
.certified span{font:300 10px/1 var(--font);letter-spacing:.46em;text-transform:uppercase;color:var(--dim);padding-left:.46em}
.certified--center{display:flex;margin:28px auto 0}

/* App Store button. With Apple's official badge file present, the image shows and the text hides. */
.store{display:inline-block;text-decoration:none;border-radius:12px}
.store img{height:56px;width:auto}
.store img + .store__text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.store__text{display:inline-block;padding:15px 26px;border-radius:999px;font-weight:500;font-size:16px;letter-spacing:.02em;
  background:linear-gradient(to bottom,rgba(255,255,255,.10),rgba(255,255,255,.04));
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.55),inset 0 0 0 1px rgba(255,255,255,.14),0 10px 30px rgba(0,0,0,.4);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

/* ============================================================================================
   THE REST OF THE PAGE
   ============================================================================================ */
/* the trailer's glow is wider than a phone screen: clip it at the sides of the page, or phones widen the page to fit it
   and it can be pushed sideways. "clip" (not "hidden") cuts the sides only and does not make main a scroll box. */
main{overflow-x:clip}
.band{padding:clamp(72px,11vw,150px) 0}
.band--tight{padding:clamp(28px,5vw,64px) 0}

.split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,6vw,96px);align-items:center}
.split__media{display:flex;justify-content:center}
@media (max-width:820px){.split{grid-template-columns:1fr}.split__text{text-align:center}}

/* shared "glass edge": the same bottom rim light as the hero lens */
.phone,.card,.strip img{position:relative}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,255,255,.6),rgba(255,255,255,.16) 36%,rgba(255,255,255,.07) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}

.phone-stage{position:relative;display:flex;justify-content:center;align-items:center;width:100%}
.phone{position:relative;z-index:1;display:block;padding:0;border:0;cursor:pointer;width:min(300px,68vw);aspect-ratio:720 / 1560;border-radius:38px;background:#000;box-shadow:0 40px 90px rgba(0,0,0,.6)}
.phone:focus-visible{outline:2px solid #fff;outline-offset:8px}

.phone video{width:100%;height:100%;object-fit:cover;border-radius:38px;display:block}
.phone::after{content:"";position:absolute;inset:-5px;border-radius:43px;border:1px solid rgba(255,255,255,.5);pointer-events:none}
.phone__glow{position:absolute;z-index:0;left:50%;top:50%;width:min(330%,960px);height:160%;transform:translate(-50%,-50%);pointer-events:none;opacity:.85;
  filter:blur(44px) saturate(1.35) brightness(1.15);
  -webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 66%);mask-image:radial-gradient(ellipse at center,#000 30%,transparent 66%)}

/* every soft-edged mask: the gradient must not tile outside the box, or scaled art inside shows through with hard edges */
.hero__grid{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}
.journey__bg,.closing__bg{overflow:hidden}

/* the Journey I header: a thin band, space art fading in and out, the logo drifting against it as you scroll */
.journey{position:relative;overflow:clip;height:clamp(400px,66vh,700px);display:flex;align-items:center;justify-content:center;margin:0}
.journey__bg{position:absolute;inset:0}
.journey{background:var(--bg)}
/* the background is the nebula clip, and it does not play: the scroll moves its frames (home.js, section 5b); the poster stands until it is loaded */
/* the clip sits in a soft frame: three veils painted in the page colour lie over it (a wide ellipse, then the straight top and bottom,
   then the sides), so its picture dies away into the page on every side. Painted, not masked: Chromium applies no CSS mask to a playing
   video (the clip's own black is a shade lighter than the page, and showed as a lit rectangle); paint works the same in every browser */
.journey__bg video{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;opacity:.92}
.journey__veil{position:absolute;inset:0;pointer-events:none}
.journey__veil--r{background:radial-gradient(ellipse 60% 56% at 50% 50%,rgba(7,7,12,0) 0%,rgba(7,7,12,.1) 30%,rgba(7,7,12,.5) 62%,rgba(7,7,12,.85) 86%,var(--bg) 100%)}
.journey__veil--y{background:linear-gradient(to bottom,var(--bg) 0%,rgba(7,7,12,.65) 14%,rgba(7,7,12,0) 32%,rgba(7,7,12,0) 68%,rgba(7,7,12,.65) 86%,var(--bg) 100%)}
.journey__veil--x{background:linear-gradient(to right,var(--bg) 0%,rgba(7,7,12,.6) 9%,rgba(7,7,12,0) 20%,rgba(7,7,12,0) 80%,rgba(7,7,12,.6) 91%,var(--bg) 100%)}
.journey__logo{position:relative;z-index:2;width:min(74vw,760px);height:auto;filter:drop-shadow(0 10px 34px rgba(0,0,0,.7));
  transform:translate3d(0,calc(var(--vp,0) * -110px),0) scale(calc(1 - var(--vpa,0) * .06));opacity:calc(1.1 - var(--vpa,0) * .8);will-change:transform,opacity}
.cinema{position:fixed;inset:0;z-index:10000;background:#000;display:flex;align-items:center;justify-content:center}
.cinema[hidden]{display:none}
.cinema__video{width:auto;height:100%;max-width:100%;object-fit:contain;background:#000}
.cinema__video::-webkit-media-controls-overlay-play-button{display:none}
.cinema__close{position:absolute;top:14px;right:14px;z-index:1;width:44px;height:44px;border-radius:22px;border:1px solid rgba(255,255,255,.35);background:rgba(20,20,26,.7);color:#fff;font:300 28px/1 var(--font);cursor:pointer}
.cinema__close:focus-visible{outline:2px solid #fff;outline-offset:3px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:820px){.cards{grid-template-columns:1fr}}
.card{padding:26px 28px 26px;border-radius:24px;overflow:hidden;background:linear-gradient(to bottom,rgba(255,255,255,.075),rgba(160,170,255,.03) 55%,rgba(0,0,0,.22) 100%)}
.card p:last-child{margin:0;color:var(--dim)}
.card__art{position:relative;height:150px;display:flex;align-items:center;justify-content:center;margin:-26px -28px 14px;padding:0 28px}
.card__sky{position:absolute;left:0;right:0;top:0;height:100%;width:100%;object-fit:cover;opacity:.55;pointer-events:none}
.card__art::after{content:"";position:absolute;left:0;right:0;bottom:0;height:72%;pointer-events:none;background:linear-gradient(to bottom,rgba(17,17,24,0),rgba(17,17,24,.7) 55%,rgba(17,17,24,1) 100%)}
.card__logo{position:relative;z-index:1;filter:drop-shadow(0 8px 22px rgba(0,0,0,.6))}
.card__logo--journey{width:min(82%,250px);height:auto}
.card__logo--fragments{width:min(66%,190px);height:auto}
.card__art--avatars{padding:0}
.avatars{position:relative;z-index:1;display:flex;justify-content:center;width:100%;padding-right:22px}
.avatars img{width:96px;height:96px;margin-right:-22px;animation:bob 7s ease-in-out infinite;filter:drop-shadow(0 10px 18px rgba(0,0,0,.5))}
.avatars img:nth-child(4n+2){animation-delay:-2s}.avatars img:nth-child(4n+3){animation-delay:-4s}.avatars img:nth-child(4n){animation-delay:-6s}
@keyframes bob{0%,100%{transform:translateY(3px)}50%{transform:translateY(-3px)}}

/* free scrolling, no snap points: snapping fought the glide after a mouse drag and jumped to another picture.
   position:relative makes the strip the pictures' offsetParent, which home.js measures the loop from. */
.strip{position:relative;display:flex;align-items:flex-start;gap:16px;overflow-x:auto;padding:4px 24px 16px;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
@media (hover:hover) and (pointer:fine){.strip{cursor:grab}}
.strip.dragging{cursor:grabbing;user-select:none;-webkit-user-select:none}
.strip.dragging img{pointer-events:none}
.strip::-webkit-scrollbar{display:none}
.strip:focus-visible{outline:2px solid rgba(255,255,255,.8);outline-offset:-2px}
.strip img{flex:none;width:min(84vw,432px);min-width:0;height:auto;aspect-ratio:1080 / 1584;object-fit:cover;border-radius:20px}
.strip__title{margin:0 0 8px}
.strip__sub{margin:0 0 22px}
@media (min-width:1200px){.strip{padding-left:calc((100vw - 1120px) / 2 + 24px);padding-right:calc((100vw - 1120px) / 2 + 24px)}}

.closing{position:relative;overflow:clip;text-align:center}
.closing .wrap{position:relative;z-index:1}
.closing__bg{position:absolute;z-index:0;left:0;right:0;top:0;bottom:0;opacity:.62}
.closing__bg::before,.closing__bg::after{content:"";position:absolute;z-index:1;left:0;right:0;pointer-events:none}
.closing__bg::before{top:0;height:48%;background:linear-gradient(to bottom,#07070c 0%,rgba(7,7,12,.85) 25%,rgba(7,7,12,.4) 62%,rgba(7,7,12,0) 100%)}
.closing__bg::after{bottom:0;height:34%;background:linear-gradient(to top,#07070c 0%,rgba(7,7,12,.8) 30%,rgba(7,7,12,0) 100%)}

.closing__bg .slide{width:100%;height:100%;object-fit:cover;animation:drift 48s ease-in-out infinite alternate}
.closing__bg.away .slide{animation-play-state:paused}   /* out of sight: home.js adds .away */
@keyframes drift{from{transform:scale(1)}to{transform:scale(1.09)}}
.closing h2{margin-bottom:28px}
.gbadge{
  /* —— the bottom glass, all in one place (the tuner edits these) —— */
  --gb-scale:1;                /* overall size */
  --gb-inner:61;               /* inner disc, percent of the outer */
  --gb-rim:.12;                 /* rim line strength */
  --gb-reflect:.24;            /* top and bottom reflections */
  --gb-frost:2.5px;            /* blur inside the inner disc */
  --gb-tint:0;               /* dark tint of the inner disc */
  --gb-fill:0;               /* fill of the outer disc */
  --gb-orion-w:73.5;             /* ORION width, percent of the outer disc */
  --gb-orion-y:46.5;           /* ORION centre, percent from the top */
  --gb-wg-w:40.5;                /* WORD GAME width */
  --gb-wg-y:58.5;                /* WORD GAME centre */
  position:relative;width:calc(min(500px,78vw) * var(--gb-scale));aspect-ratio:1;margin:0 auto 26px}
.gbadge__outer{position:absolute;inset:0;border-radius:50%;background:rgba(255,255,255,var(--gb-fill));-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,var(--gb-rim)),0 0 90px rgba(0,0,0,.45)}
.gbadge__outer::before{content:"";position:absolute;inset:0;border-radius:50%;opacity:calc(var(--gb-reflect) * .45);
  background:radial-gradient(circle at 50% 50%,transparent 64%,rgba(255,255,255,.9) 100%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 14%,transparent 40%,transparent 60%,#000 86%,#000 100%);mask-image:linear-gradient(to bottom,#000 0,#000 14%,transparent 40%,transparent 60%,#000 86%,#000 100%)}
.gbadge__inner{position:absolute;left:calc(50% - var(--gb-inner) * .5%);top:calc(50% - var(--gb-inner) * .5%);width:calc(var(--gb-inner) * 1%);height:calc(var(--gb-inner) * 1%);border-radius:50%;
  -webkit-backdrop-filter:blur(var(--gb-frost));backdrop-filter:blur(var(--gb-frost));
  background:linear-gradient(to bottom,rgba(8,8,20,var(--gb-tint)),rgba(8,8,20,calc(var(--gb-tint) * .35)) 55%,rgba(255,255,255,.05));
  box-shadow:inset 0 0 0 2px rgba(255,255,255,calc(var(--gb-rim) + .08)),0 0 70px rgba(0,0,0,.5)}
/* the reflections: crescents that follow the rim, top and bottom, so they stay concentric */
.gbadge__inner::before{content:"";position:absolute;inset:0;border-radius:50%;opacity:var(--gb-reflect);pointer-events:none;
  background:radial-gradient(circle at 50% 50%,transparent 56%,rgba(255,255,255,.95) 100%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 18%,transparent 46%,transparent 54%,#000 82%,#000 100%);mask-image:linear-gradient(to bottom,#000 0,#000 18%,transparent 46%,transparent 54%,#000 82%,#000 100%)}
/* depth: as the page scrolls the two discs drift at different rates behind the steady type, the outer one more.
   --vp comes from home.js ([data-parallax] on .gbadge): 0 when the badge is mid-screen, so the discs line up with the type there.
   The travel is a share of each disc's own size (about 30px and 12px per screen height on the full-size badge). */
/* the discs rise into place from below, the logotype comes down from above; all three meet at the centre and stay (nothing ever crosses below it) */
.gbadge__outer{transform:translate3d(0,calc(max(var(--vp,0),0) * 14%),0)}
.gbadge__inner{transform:translate3d(0,calc(max(var(--vp,0),0) * 8%),0)}
.gbadge__orion{position:absolute;left:50%;top:calc(var(--gb-orion-y) * 1%);width:calc(var(--gb-orion-w) * 1%);height:auto;transform:translate(-50%,calc(-50% - max(var(--vp,0),0) * 2.4vh));filter:drop-shadow(0 4px 14px rgba(0,0,0,.5));will-change:transform}
.gbadge__wg{position:absolute;left:50%;top:calc(var(--gb-wg-y) * 1%);width:calc(var(--gb-wg-w) * 1%);height:auto;transform:translate(-50%,calc(-50% - max(var(--vp,0),0) * 2.4vh));will-change:transform}

.foot{border-top:1px solid var(--line);padding:44px 0 calc(60px + env(safe-area-inset-bottom,0px));text-align:center}
.foot__links{display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:center;margin:0 0 18px;font:600 12px/1.4 var(--font);letter-spacing:.22em;text-transform:uppercase}
.foot__links a{text-decoration:none;color:var(--ink);opacity:.86;padding:6px 0}
.foot__links a:hover{opacity:1}
.foot__links--social{gap:6px 20px;flex-wrap:nowrap}
.foot__links--social a{color:var(--dim);display:inline-flex;padding:7px}
.foot__links--social a:hover{color:var(--ink)}
.foot__links--social svg{display:block;width:18px;height:18px;fill:currentColor}
.foot__small{font-size:12.5px;line-height:1.55;color:#7d7c8a;max-width:720px;margin:10px auto 0}
/* phones: the footer is a short colophon, not a screen. Two tight rows of links, the legal lines small and dim. */
@media (max-width:720px){
  .foot{padding:26px 0 calc(28px + env(safe-area-inset-bottom,0px))}
  .foot .wrap{padding:0 18px}
  .foot__links{gap:2px 16px;margin:0 0 6px;font-size:10.5px;letter-spacing:.16em}
  .foot__links a{padding:5px 0}
  .foot__links--social{margin-bottom:14px;gap:4px 14px}
  .foot__links--social svg{width:17px;height:17px}
  .foot__small{font-size:10.5px;line-height:1.5;margin:6px auto 0;color:#6b6a78}
}

/* the seams between sections: each section's content rises softly into place the first time it comes into view.
   home.js adds .reveal to <html> (so without JavaScript nothing is ever hidden) and .in to each [data-reveal] as it enters;
   content already on screen when the page opens is never hidden. Opacity and transform only, nothing that repaints. */
.reveal [data-reveal]{transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform 1.1s cubic-bezier(.22,.61,.36,1)}
.reveal [data-reveal]:not(.in){opacity:0;transform:translate3d(0,26px,0)}

/* larger screens get a larger page: everything below the hero scales up */
/* (the strip's side padding is measured in vw, which the zoom enlarges too: divided back, so its first picture lines up with the heading) */
@media (min-width:1700px){main,.foot{zoom:1.18}.strip{padding-left:calc((100vw / 1.18 - 1120px) / 2 + 24px);padding-right:calc((100vw / 1.18 - 1120px) / 2 + 24px)}}
@media (min-width:2200px){main,.foot{zoom:1.4}.strip{padding-left:calc((100vw / 1.4 - 1120px) / 2 + 24px);padding-right:calc((100vw / 1.4 - 1120px) / 2 + 24px)}}

/* touch screens: the lockup leaves without its blur (a filter animated frame by frame costs a phone dearly and reads as nothing at that size) */
@media (hover:none),(pointer:coarse){.lockup img{animation:none!important;filter:drop-shadow(0 6px 18px rgba(0,0,0,.45))!important}}

/* people who ask their device for less motion get a still page */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero{--move:0}
  .hero__bg,.hero__blur,.hero__grid,.pin,.exit,.lens,.lens__counter,.lens__plate,.lockup,.lockup img,.hero__cta,.journey__logo,.gbadge__outer,.gbadge__inner,.gbadge__orion,.gbadge__wg{animation:none!important}
  .hero__bg,.hero__blur,.pin,.exit,.lens,.lens__counter,.hero__cta{transform:none}
  .exit,.hero__cta{opacity:1}
  .lockup{transform:none}
  .lockup img{filter:drop-shadow(0 6px 18px rgba(0,0,0,.45))}
  .avatars,.avatars img{animation:none}
  .journey__bg video,.journey__logo{transform:none;opacity:.92}
  .hero__blur{opacity:0}
  .hero__grid{transform:none}
  .closing__bg .slide{animation:none}
  .gbadge__outer,.gbadge__inner{transform:none}
  .gbadge__orion,.gbadge__wg{transform:translate(-50%,-50%)}
  .tagline__journey{animation:none;background:none;color:#fff;-webkit-text-fill-color:currentColor;
    text-shadow:0 0 18px rgba(255,255,255,.28),0 2px 24px rgba(0,0,0,.55)}   /* still: simply brighter */
}
/* belt and braces: with reduced motion, or on paper, revealed content is always there */
@media (prefers-reduced-motion:reduce),print{
  [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
}