@font-face { font-family: "Mona"; src: url("/fonts/mona.woff2") format("woff2"); font-weight: 200 900; font-stretch: 75% 125%; font-display: swap; }

:root {
  /* silicon: cool graphite and silver, one electric touch */
  --bg: #060912;
  --ink: #eef4ff;
  --silver: #d3dce8;
  --dim: rgba(238, 244, 255, .34);
  --accent: #3ad8ff;
  --accent-2: #2f6bff;
  --accent-hi: #a6efff;
  --ease: cubic-bezier(.22, .61, .21, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--bg); color: var(--ink); overflow: hidden; }
body { font-family: "Mona", system-ui, sans-serif; font-stretch: 112%; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; background: var(--bg); }

/* ---------- loader: deep navy lit by drifting electric light; the T stands in 3D over a glowing floor and its
   stem fills with light as the film loads ---------- */
#loader { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(34px, 6vh, 64px); z-index: 20; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 110%, #0d1a3a 0%, #070c1c 45%, #050811 100%); transition: opacity 1.6s var(--ease), visibility 0s 1.6s; }
#loader.gone { opacity: 0; visibility: hidden; }
#loader .aura { position: absolute; inset: 0; filter: blur(70px); pointer-events: none; }
#loader .aura i { position: absolute; border-radius: 50%; mix-blend-mode: screen; opacity: .55; }
#loader .aura i:nth-child(1) { width: 62vmax; height: 46vmax; left: -12vmax; top: 18vh; background: radial-gradient(closest-side, rgba(47, 107, 255, .75), transparent); animation: drift1 17s ease-in-out infinite alternate; }
#loader .aura i:nth-child(2) { width: 52vmax; height: 40vmax; right: -14vmax; top: -6vh; background: radial-gradient(closest-side, rgba(58, 216, 255, .55), transparent); animation: drift2 21s ease-in-out infinite alternate; }
#loader .aura i:nth-child(3) { width: 40vmax; height: 30vmax; left: 30vw; bottom: -18vh; background: radial-gradient(closest-side, rgba(122, 92, 255, .4), transparent); animation: drift3 25s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(14vw, -8vh) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-16vw, 12vh) scale(.9); } }
@keyframes drift3 { to { transform: translate(-10vw, -10vh) scale(1.2); } }
/* a perspective grid floor receding into the light */
#loader .floor { position: absolute; left: -50%; right: -50%; bottom: -4vh; height: 44vh; pointer-events: none;
  background-image: linear-gradient(rgba(120, 190, 255, .42) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 190, 255, .42) 1px, transparent 1px); background-size: 64px 64px;
  transform: perspective(520px) rotateX(64deg); transform-origin: 50% 100%; animation: floor 6s linear infinite;
  -webkit-mask-image: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, .55) 35%, transparent 80%); mask-image: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, .55) 35%, transparent 80%); }
@keyframes floor { to { background-position: 0 64px; } }
/* the mined plate: a GPU die in 3D under the logo, its cores lighting up with the load */
#ldie { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; opacity: 0; transition: opacity 1.4s var(--ease); }
#ldie.on { opacity: 1; }
#loader > .logo3d, #loader > .gate { position: relative; z-index: 1; }
.gate { display: grid; place-items: center; min-width: 200px; min-height: 52px; }
.gate > * { grid-area: 1 / 1; }
.pct { display: flex; align-items: baseline; gap: 2px; font-weight: 250; font-stretch: 112%; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: .02em;
  text-shadow: 0 0 24px rgba(58, 170, 255, .45); transition: opacity .6s var(--ease), filter .6s var(--ease), transform .6s var(--ease); }
.pct b { font-weight: 250; font-size: 34px; min-width: 2.4ch; text-align: right; }
.pct i { font-style: normal; font-size: 16px; color: var(--dim); }
#loader.ready .pct { opacity: 0; filter: blur(6px); transform: translateY(-6px); }
.logo3d { --s: min(38vmin, 260px); margin-top: -10vh; position: relative; width: var(--s); height: var(--s); transform-style: preserve-3d;
  transform: perspective(900px) rotateX(var(--rx, 10deg)) rotateY(var(--ry, -16deg)); transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.logo3d svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.logo3d .arm { fill: #eef4ff; filter: drop-shadow(0 0 14px rgba(150, 210, 255, .35)); }
.logo3d .stem-bg { fill: rgba(238, 244, 255, .1); stroke: rgba(238, 244, 255, .35); stroke-width: .6; }
.logo3d .stem { fill: url(#lg); filter: drop-shadow(0 0 10px rgba(58, 216, 255, .8)); }
/* a pool of light on the floor under the T */
.logo3d::after { content: ""; position: absolute; left: 6%; right: 6%; top: 92%; height: 26%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(58, 170, 255, .38), rgba(47, 107, 255, .12) 55%, transparent); filter: blur(6px); transform: translateZ(-30px) rotateX(70deg); }
#loader.ready .logo3d .arm { animation: armglow 3.2s var(--ease) infinite 1s; }
@keyframes armglow { 50% { filter: drop-shadow(0 0 22px rgba(150, 220, 255, .7)); } }

#discover { position: relative; padding: 15px 30px 16px; border-radius: 999px; font-size: 13px; font-weight: 400; font-stretch: 118%; letter-spacing: .3em; text-indent: .3em; color: var(--ink);
  border: 1px solid rgba(211, 220, 232, .26); background: rgba(255, 255, 255, .04); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  opacity: 0; transform: translateY(8px); filter: blur(6px); pointer-events: none;
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease), filter 1.2s var(--ease), color .4s, border-color .4s, box-shadow .4s, background .4s; }
#loader.ready #discover { opacity: 1; transform: none; filter: none; pointer-events: auto; transition-delay: .5s, .5s, .5s, 0s, 0s, 0s, 0s; }
#discover:hover { color: #fff; border-color: rgba(58, 216, 255, .7); background: linear-gradient(90deg, rgba(47, 107, 255, .25), rgba(58, 216, 255, .2)); box-shadow: 0 0 34px rgba(58, 180, 255, .4), inset 0 1px 0 rgba(255, 255, 255, .12); }

/* ---------- chrome (hidden until Discover) ---------- */
.top, .chapters, .sound { opacity: 0; transition: opacity 2.2s var(--ease) 1.2s; }
body.live .top, body.live .chapters, body.live .sound { opacity: 1; }
.top { position: fixed; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: max(26px, env(safe-area-inset-top)) clamp(18px, 3.4vw, 46px) 0; z-index: 10; pointer-events: none; }
.top > * { pointer-events: auto; }
.mark { display: block; width: 34px; height: 34px; opacity: .95; filter: drop-shadow(0 0 12px rgba(58, 180, 255, .35)); transition: opacity .4s; }
.mark:hover { opacity: 1; }
.mark img { display: block; width: 100%; height: 100%; }
.open {
  position: relative; font-size: 13px; font-weight: 400; font-stretch: 115%; letter-spacing: .08em; padding: 11px 20px 12px; border-radius: 3px;
  border-radius: 999px; color: var(--ink); background: rgba(20, 26, 35, .35); border: 1px solid rgba(211, 220, 232, .24); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); transition: border-color .5s, box-shadow .5s, color .5s, background .5s;
}
.open:hover, .open.call { border-color: rgba(58, 216, 255, .7); color: #fff; box-shadow: 0 0 26px rgba(58, 170, 255, .32), inset 0 0 14px rgba(58, 216, 255, .1); background: linear-gradient(90deg, rgba(47, 107, 255, .28), rgba(58, 216, 255, .2)); }
.open.call { animation: call 2.4s var(--ease) infinite; }
@keyframes call { 50% { box-shadow: 0 0 36px rgba(57, 213, 255, .45), inset 0 0 18px rgba(57, 213, 255, .14); } }

/* ---------- chapter numbers ---------- */
.chapters { position: fixed; left: clamp(14px, 3.2vw, 44px); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 6px; z-index: 10; }
.chapters button { position: relative; display: flex; align-items: center; gap: 12px; padding: 7px 4px; font-size: 11px; font-weight: 300; font-stretch: 112%; letter-spacing: .14em; color: var(--ink); opacity: .22; transition: opacity .6s var(--ease), color .6s; }
.chapters button::after { content: ""; width: 0; height: 1px; background: linear-gradient(90deg, var(--accent), transparent); transition: width .9s var(--ease); }
.chapters button:hover { opacity: .62; }
.chapters button.on { opacity: .95; color: var(--accent-hi); }
.chapters button.on::after { width: calc(6px + 22px * var(--p, 1)); transition: width .25s linear; }
.chapters button.next { animation: nudge 2.2s var(--ease) infinite; }
@keyframes nudge { 0%, 100% { opacity: .22; } 50% { opacity: .8; text-shadow: 0 0 12px rgba(57, 213, 255, .75); } }

/* ---------- subtitles ---------- */
.subs { position: fixed; left: 0; right: 0; bottom: max(10vh, calc(env(safe-area-inset-bottom) + 48px)); display: flex; justify-content: center; z-index: 9; pointer-events: none; padding: 0 clamp(56px, 10vw, 160px); }
/* a soft shadow behind the words, so they read over any picture (a bright dawn, a white robot) */
.subs::before { content: ""; position: absolute; left: 50%; bottom: -40px; width: min(1100px, 92vw); height: 190px; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(50% 50% at 50% 60%, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); opacity: 0; transition: opacity .5s var(--ease); }
.subs:has(p:not(.out))::before { opacity: 1; }
.subs p { position: relative; max-width: 40ch; text-align: center; font-size: clamp(17px, 1.9vw, 27px); line-height: 1.42; font-weight: 300; font-stretch: 108%; letter-spacing: .012em; color: var(--ink); text-shadow: 0 1px 16px rgba(0, 0, 0, .85), 0 0 2px rgba(0, 0, 0, .6); transition: opacity .32s var(--ease), filter .32s var(--ease); }
.subs p.out { opacity: 0; filter: blur(4px); }
.subs span { display: inline-block; opacity: 0; filter: blur(5px); transform: translateY(.18em); transition: opacity .38s var(--ease), filter .5s var(--ease), transform .5s var(--ease); white-space: pre; }
.subs span.on { opacity: 1; filter: none; transform: none; }

/* ---------- sound ---------- */
.sound { position: fixed; right: clamp(18px, 3.4vw, 46px); bottom: max(26px, env(safe-area-inset-bottom)); display: flex; align-items: flex-end; gap: 3px; height: 16px; padding: 10px; box-sizing: content-box; z-index: 10; }
.sound i { width: 2px; height: 100%; background: var(--ink); opacity: .55; border-radius: 1px; transform-origin: bottom; animation: eq 1.2s ease-in-out infinite; }
.sound i:nth-child(2) { animation-delay: -.4s; } .sound i:nth-child(3) { animation-delay: -.8s; } .sound i:nth-child(4) { animation-delay: -.2s; }
.sound.off i { animation: none; transform: scaleY(.15); }
@keyframes eq { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }

@media (max-width: 700px) {
  .mark { width: 26px; height: 26px; }
  .open { font-size: 12px; padding: 9px 14px 10px; }
  .chapters { left: 8px; gap: 2px; }
  .chapters button { font-size: 10px; padding: 6px 4px; }
  .subs { padding: 0 34px 0 46px; }
}
@media (prefers-reduced-motion: reduce) { .subs span { transition: opacity .2s; filter: none; transform: none; } }
/* capture mode: ?clean hides the chrome (OG images, stills) */
body.clean .top, body.clean .chapters, body.clean .subs, body.clean .sound { display: none !important; }
/* leaving for the app: the film fades to black first */
body::after { content: ""; position: fixed; inset: 0; background: #060912; opacity: 0; pointer-events: none; transition: opacity .7s cubic-bezier(.22, .61, .21, 1); z-index: 30; }
body.leaving::after { opacity: 1; pointer-events: auto; }