/* Only transform and opacity ever move in the page: an animated blur or filter makes a page feel slow. */
:root {
  --ink: #eef4ff;
  --ink-2: rgba(238, 244, 255, .72);
  --line: rgba(238, 244, 255, .28);
  --deep: #04060d;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --gutter: clamp(22px, 5.4vw, 104px);
  --out: cubic-bezier(.16, 1, .3, 1);
  --both: cubic-bezier(.76, 0, .24, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--deep); -webkit-text-size-adjust: 100%; scrollbar-width: none; }
::-webkit-scrollbar { display: none; }
body { margin: 0; color: var(--ink); font-family: var(--sans); background: var(--deep); -webkit-font-smoothing: antialiased; overflow-x: clip; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.015em; font-size: 1.07em; }
h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }

/* ---------- Plain page: no WebGL, or the visitor asked for less motion. Everything readable, every category reachable. ---------- */
#space, .pill, .rail, .hint, .back, .still { display: none; }
.gate { min-height: 70svh; display: flex; flex-direction: column; justify-content: center; padding: var(--gutter); }
.plane { padding: 6vh var(--gutter); }
.door { padding: 8vh var(--gutter); }

.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 9;
  display: flex; justify-content: space-between; align-items: center;
  padding: clamp(18px, 2.2vw, 34px) var(--gutter);
  font-size: clamp(.95rem, 1.05vw, 1.1rem); letter-spacing: -.01em;
}
.brand { font-weight: 500; }
.bar-link { padding: .5em 0; opacity: .85; transition: opacity .25s; }
.bar-link:hover { opacity: 1; }

.gate-title { margin: 0; font-weight: 500; letter-spacing: -.04em; line-height: 1; font-size: clamp(3rem, 5.6vw, 7rem); }
.line { display: inline-block; overflow: hidden; vertical-align: top; padding: .03em .07em .16em; margin: 0 -.07em -.14em; }
.line > span { display: inline-block; }

.plane h2 { font-weight: 500; letter-spacing: -.04em; line-height: 1.02; font-size: clamp(3rem, 6.2vw, 7.2rem); text-shadow: 0 2px 34px rgba(2, 4, 12, .6); }
.say { margin-top: .75em; font-family: var(--serif); font-style: italic; line-height: 1.12; font-size: clamp(1.6rem, 2.7vw, 3.1rem); text-shadow: 0 1px 26px rgba(2, 4, 12, .75); }
.more { margin-top: 1em; color: var(--ink-2); line-height: 1.42; max-width: 30em; font-size: clamp(1.02rem, 1.2vw, 1.3rem); letter-spacing: -.01em; text-shadow: 0 1px 20px rgba(2, 4, 12, .8); }
.see { display: inline-block; margin-top: 1.5em; padding-bottom: .22em; border-bottom: 1px solid var(--line); font-size: clamp(1rem, 1.15vw, 1.25rem); letter-spacing: -.01em; }
.see i { display: inline-block; font-style: normal; transition: transform .35s var(--out); }
.go:hover .see i { transform: translateX(.35em); }
.cta {
  display: inline-block; margin-top: 1.5em; padding: 1.05em 2.3em; border-radius: 999px;
  background: var(--ink); color: #0a1226; font-weight: 500; letter-spacing: -.01em; font-size: clamp(1.05rem, 1.25vw, 1.3rem);
  transition: transform .35s var(--out);
}
.cta:hover { transform: scale(1.05); }

/* The category pages */
.door h2 { font-weight: 500; letter-spacing: -.04em; line-height: 1; font-size: clamp(3.2rem, 7.4vw, 8.4rem); }
.lead { margin-top: .55em; font-family: var(--serif); font-style: italic; line-height: 1.14; font-size: clamp(1.5rem, 2.6vw, 2.9rem); color: var(--ink-2); }
.tiles { margin-top: clamp(34px, 6vh, 70px); display: grid; gap: clamp(14px, 1.5vw, 26px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.tile { position: relative; aspect-ratio: 16 / 10; border-radius: 16px; padding: 20px 22px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(238, 244, 255, .12); transition: transform .45s var(--out); }
.tile:hover { transform: translateY(-5px); }
.tile b { font-weight: 500; font-size: clamp(1.15rem, 1.5vw, 1.55rem); letter-spacing: -.02em; }
.tile span { font-size: .85rem; color: var(--ink-2); padding: .22em .7em; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--line); }
.t1 { background: linear-gradient(140deg, #2a4066, #070b16 75%); }
.t2 { background: linear-gradient(140deg, #1c5390, #060a15 75%); }
.t3 { background: linear-gradient(140deg, #3d5c7d, #070d18 75%); }
.t4 { background: linear-gradient(140deg, #16496f, #050b13 75%); }
.t5 { background: linear-gradient(140deg, #34427c, #080a18 75%); }
.t6 { background: linear-gradient(140deg, #4c6c88, #0a1017 75%); }
.cards { margin-top: clamp(34px, 6vh, 70px); display: grid; gap: clamp(14px, 1.5vw, 26px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); }
.card { border-radius: 16px; padding: clamp(24px, 2.4vw, 40px); background: rgba(238, 244, 255, .045); box-shadow: inset 0 0 0 1px rgba(238, 244, 255, .12); }
.card small { display: block; margin-bottom: .9em; color: var(--ink-2); font-size: .95rem; }
.card h3 { font-weight: 500; letter-spacing: -.025em; font-size: clamp(1.5rem, 2.1vw, 2.3rem); }
.card p { margin-top: .7em; color: var(--ink-2); line-height: 1.45; font-size: clamp(1.02rem, 1.2vw, 1.25rem); }

/* ---------- The film ---------- */
.motion #space { display: block; position: fixed; left: 0; top: 0; width: 100%; height: 100lvh; z-index: 0; }
.motion.locked, .motion.locked body, .motion.in-door, .motion.in-door body { overflow: hidden; overscroll-behavior: none; }

.motion .gate { position: fixed; inset: 0; z-index: 4; padding: 0; min-height: 0; display: block; text-align: center; touch-action: none; overflow: hidden; }
.motion .gate[hidden] { display: none; }
.motion .still { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 46.7%; }
.merging .still { visibility: hidden; }   /* gone once the cream covers the screen, so the cream fades onto the next scene */
.motion .gate-title { position: absolute; left: var(--gutter); right: var(--gutter); top: clamp(78px, 13.5vh, 170px); text-shadow: 0 2px 44px rgba(2, 4, 12, .5); transition: transform 1s var(--both), opacity .55s ease; }
.motion .line > span { transform: translateY(116%); }
.ready .line > span { animation: up 1.3s var(--out) forwards; animation-delay: calc(.1s + var(--i) * .09s); }
@keyframes up { to { transform: none; } }

/* The button sits on the still's vanishing point */
.motion .pill {
  position: absolute; left: 50%; top: 46.7%; translate: -50% -50%; display: inline-flex; padding: .95em 2.7em;
  appearance: none; border: 0; background: none; color: var(--ink); cursor: pointer;
  font: 500 clamp(1.02rem, 1.2vw, 1.3rem) var(--sans); letter-spacing: -.01em; opacity: 0;
}
.ready .pill { animation: show .9s ease .85s forwards; }
@keyframes show { to { opacity: 1; } }
.pill span { position: relative; z-index: 1; transition: opacity .3s ease; }
.pill::before, .pill::after { content: ""; position: absolute; inset: 0; border-radius: 999px; will-change: transform, opacity; transition: transform 1.05s var(--both), opacity .5s ease; }
.pill::before { background: rgba(238, 244, 255, .1); box-shadow: inset 0 0 0 1px rgba(238, 244, 255, .6); }
.pill::after { background: #e6f0ff; opacity: 0; }
.pill:hover::before { transform: scale(1.07); }
.pill:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; border-radius: 999px; }

.entering .pill { opacity: 1; animation: none; }
.entering .gate-title { transform: scale(1.5); opacity: 0; }
.entering .pill span { opacity: 0; }
.entering .pill::before, .entering .pill::after { transform: scale(var(--grow, 30)); }
.entering .pill::after { opacity: 1; }
.merging .pill::before { opacity: 0; }
.merging .pill::after { opacity: 0; transition: transform 1.05s var(--both), opacity 1s ease; }

.motion #flight { position: relative; z-index: 2; height: 760vh; }
.motion .stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.motion .plane {
  position: absolute; top: 0; bottom: 0; left: var(--gutter); right: var(--gutter); padding: 0;
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0; visibility: hidden; will-change: transform, opacity; pointer-events: none;
}
.motion .plane.live .go, .motion .plane.live .cta { pointer-events: auto; }
.motion .plane.center { align-items: center; text-align: center; }
.motion .go { display: block; }

/* The wide screen: the planet on one side, the words on the other */
@media (min-aspect-ratio: 1/1) {
  .motion .plane.left { right: auto; width: min(47vw, 900px); }
  .motion .plane.right { left: auto; width: min(47vw, 900px); align-items: flex-end; text-align: right; }
  .motion .plane.right .more { margin-left: auto; }
}
@media (max-aspect-ratio: 1/1) {
  .motion .plane { justify-content: flex-end; padding-bottom: 13svh; }
  .motion .plane.center { justify-content: center; padding-bottom: 0; }
  .motion .pill { padding: .85em 2.1em; }
  .line { display: block; }
}

.motion .hint { display: block; position: absolute; left: 0; right: 0; bottom: 4.5svh; margin: 0; text-align: center; font-size: .95rem; letter-spacing: -.005em; color: var(--ink-2); opacity: 0; transition: opacity .6s ease; }
.motion.inside .hint { opacity: 1; }
.motion.moved .hint { opacity: 0; }

.motion .rail { display: block; position: fixed; z-index: 3; right: clamp(12px, 2vw, 30px); top: calc(50% - 60px); width: 1px; height: 120px; background: var(--line); opacity: 0; transition: opacity .6s ease; }
.motion.inside .rail { opacity: 1; }
.motion.in-door .rail { opacity: 0; }
.rail i { display: block; width: 100%; height: 100%; background: var(--ink); transform: scaleY(0); transform-origin: top; }

.motion .door {
  position: fixed; inset: 0; z-index: 8; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  padding: clamp(92px, 13vh, 150px) var(--gutter) 90px; background: #05070f;
  display: none; opacity: 0; transform: translateY(26px); transition: opacity .5s ease, transform .7s var(--out);
}
.motion .door.mounted { display: block; }
.motion .door.open { opacity: 1; transform: none; }
.motion .back { display: inline-block; margin-bottom: clamp(26px, 5vh, 56px); font-size: clamp(1rem, 1.15vw, 1.2rem); color: var(--ink-2); transition: color .25s; }
.motion .back:hover { color: var(--ink); }

#dbg { position: fixed; left: 10px; bottom: 10px; z-index: 20; font: 12px/1.3 ui-monospace, Consolas, monospace; color: #9f9; background: rgba(0, 0, 0, .6); padding: 4px 8px; border-radius: 4px; }