/* Orion Word Game, homepage. Plain CSS: no build step, no outside requests, no fonts to load. */

:root{
  --ink:#f3f1ee; --dim:#a4a3b2; --bg:#07070c; --line:rgba(255,255,255,.10);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue","Segoe UI",Roboto,Arial,sans-serif;
  --wide:.34em;               /* tracking of the small capitals, echoing the logotype */
}
*{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
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-weight:300;font-size:clamp(28px,3.6vw,48px);line-height:1.12;letter-spacing:.005em;margin:0 0 20px;text-wrap:balance}
h3{font-weight:400;font-size:24px;line-height:1.2;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) - .5) * 2, 1);   /* 0 until the hero is half scrolled, then 0 to 1: the exit */
  --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 */

  position:relative;height:100vh;height:100svh;min-height:600px;overflow:hidden;isolation:isolate;
  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}
.plate img{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}
.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 picture{display:contents}
.hero__grid{z-index:1;opacity:var(--grid);transform:translate3d(0,calc(var(--sy) * -7vh * var(--move)),0);
  -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;z-index:2;left:calc((var(--hw) - var(--d)) / 2);top:var(--ly);width:var(--d);height:var(--d);
  transform:translate3d(0,var(--pin),0) scale(var(--grow));opacity:calc(1 - var(--e) * 1.15);will-change:transform,opacity}
.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{--follow:calc(var(--sy) * 9vh * var(--move) - var(--pin))}   /* the art inside keeps up with the art behind */
.lens__plate--r{transform:translate3d(0,var(--follow),0) scale(calc(var(--mag) * (1 - var(--disp))))}
.lens__plate--g{transform:translate3d(0,var(--follow),0) scale(var(--mag))}
.lens__plate--b{transform:translate3d(0,var(--follow),0) scale(calc(var(--mag) * (1 + var(--disp))))}
.lens__plate--grid{opacity:calc(var(--grid) * .9);transform:translate3d(0,calc(var(--sy) * -7vh * var(--move) - var(--pin)),0) scale(var(--mag))}

.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;z-index:4;left:50%;top:var(--lock-top);width:var(--lock-w);margin:0;
  transform:translate3d(-50%,var(--pin),0) scale(var(--grow));opacity:calc(1 - var(--e) * 1.15);will-change:transform,opacity}
.lockup img{width:100%;height:auto;filter:drop-shadow(0 6px 18px rgba(0,0,0,.45)) blur(calc(var(--e) * 5px))}

.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;
  transform:translate3d(0,calc(var(--sy) * -6vh),0)}
.tagline{font-weight:300;font-size:clamp(22px,2.7vw,40px);line-height:1.18;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:hidden;height:clamp(320px,52vh,560px);display:flex;align-items:center;justify-content:center;margin:clamp(10px,3vw,40px) 0 0}
.journey__bg{position:absolute;inset:0}
.journey__bg img{position:relative;z-index:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;opacity:.7;transform:translate3d(0,calc(var(--vp,0) * 12%),0) scale(1.26);will-change:transform}
/* the fade is painted with the page colour, top and bottom, so it is smooth in every browser and centred on the lockup */
.journey__bg::before,.journey__bg::after{content:"";position:absolute;z-index:1;left:0;right:0;height:60%;pointer-events:none}
.journey__bg::before{top:0;background:linear-gradient(to bottom,var(--bg) 0%,rgba(7,7,12,.92) 18%,rgba(7,7,12,.6) 48%,rgba(7,7,12,.25) 76%,rgba(7,7,12,0) 100%)}
.journey__bg::after{bottom:0;background:linear-gradient(to top,var(--bg) 0%,rgba(7,7,12,.92) 18%,rgba(7,7,12,.6) 48%,rgba(7,7,12,.25) 76%,rgba(7,7,12,0) 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(70vw,360px);min-width:0;height:auto;aspect-ratio:3 / 4;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:hidden;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). */
.gbadge__outer{transform:translate3d(0,calc(var(--vp,0) * -6%),0)}
.gbadge__inner{transform:translate3d(0,calc(var(--vp,0) * -4%),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%,-50%);filter:drop-shadow(0 4px 14px rgba(0,0,0,.5))}
.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%,-50%)}

.foot{border-top:1px solid var(--line);padding:44px 0 60px;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 a{color:var(--dim)}
.foot__small{font-size:12.5px;line-height:1.55;color:#7d7c8a;max-width:720px;margin:10px auto 0}

/* 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)}}

/* 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,.lens,.lockup,.hero__cta{transform:none}
  .lens{opacity:1}
  .lockup{transform:translateX(-50%);opacity:1}
  .avatars,.avatars img{animation:none}
  .journey__bg img,.journey__logo{transform:none;opacity:1}
  .hero__blur{opacity:0}
  .hero__grid{transform:none}
  .closing__bg .slide{animation:none}
  .gbadge__outer,.gbadge__inner{transform:none}
  .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}
}