:root {
  color-scheme: light;
  --bg:            oklch(1 0 0);
  --bg-sunken:     oklch(0.979 0.003 250);
  --surface:       oklch(1 0 0);
  --text:          oklch(0.23 0.016 256);
  --text-2:        oklch(0.515 0.015 256);
  --text-3:        oklch(0.645 0.013 256);
  --hairline:      oklch(0.912 0.005 256);
  --hairline-soft: oklch(0.948 0.004 256);
  --accent:        oklch(0.48 0.155 248);
  --accent-hover:  oklch(0.42 0.155 248);
  --accent-ink:    oklch(0.985 0.005 248);
  --accent-soft:   oklch(0.962 0.022 248);
  --glow:          oklch(0.62 0.13 248 / 0.16);

  --measure: 1120px;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg:            oklch(0.175 0.012 258);
  --bg-sunken:     oklch(0.205 0.013 258);
  --surface:       oklch(0.215 0.013 258);
  --text:          oklch(0.965 0.004 256);
  --text-2:        oklch(0.735 0.012 256);
  --text-3:        oklch(0.605 0.013 256);
  --hairline:      oklch(0.305 0.013 258);
  --hairline-soft: oklch(0.262 0.013 258);
  --accent:        oklch(0.70 0.145 248);
  --accent-hover:  oklch(0.78 0.135 248);
  --accent-ink:    oklch(0.17 0.03 248);
  --accent-soft:   oklch(0.265 0.045 248);
  --glow:          oklch(0.62 0.13 248 / 0.22);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  font: 100%/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-text-size-adjust: 100%;
}

body {
  background: #000;
  color: var(--text);
  overflow-x: hidden;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--accent-soft); color: var(--text); }

@font-face {
  font-family: "PP Editorial Old";
  src: url("/fonts/PPEditorialOld-Ultralight.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

.display {
  font-family: "PP Editorial Old", ui-serif, Georgia, serif;
  font-style: normal;
  font-weight: 400;
  font-size: min(clamp(3.3rem, 1.68rem + 6.48vw, 6.9rem), 13.2svh);
  line-height: 0.98;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.lede {
  font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.25rem);
  line-height: 1.5;
  letter-spacing: -0.006em;
  color: var(--text-2);
  text-wrap: pretty;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6875rem 1.375rem;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.008em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 140ms ease-out, border-color 140ms ease-out,
              transform 100ms ease-out;
}

.btn:active { transform: scale(0.97); }

.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); }

.btn-ghost {
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--text);
}
.btn-ghost:hover { border-color: var(--text-3); }

.btn-sm { padding: 0.4375rem 0.875rem; font-size: 0.875rem; }

.wall {
  --gap: max(3px, 0.35vw);
  position: fixed;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: max(100vw, 100vh * 16 / 9);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  padding: var(--gap);
  background: #000;
}

html, body { background: #000; }

.tile {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 16 / 9;
  border-radius: clamp(4px, 0.5vw, 10px);
  overflow: hidden;
  background: #000;
}

.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid oklch(1 0 0 / 0.08);
  border-radius: inherit;
  pointer-events: none;
}

.crt .tile:not(.on, .lit, .off) > * { visibility: hidden; }
.tile.dark > * { visibility: hidden; }

.tile { cursor: pointer; }

.crt .tile.on :is(video, img) {
  animation:
    crt-open 950ms cubic-bezier(0.2, 0.7, 0.2, 1) both,
    crt-dip 950ms linear both;
}

.crt .tile.on::before,
.crt .tile.off::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    repeating-linear-gradient(transparent 0 2px, oklch(0 0 0 / 0.4) 2px 3px),
    oklch(0.97 0.01 250);
  pointer-events: none;
  animation:
    crt-open 950ms cubic-bezier(0.2, 0.7, 0.2, 1) both,
    crt-glare 1300ms ease-out both;
}

.crt .tile.off :is(video, img) {
  animation: crt-close 380ms both;
}

.crt .tile.off::before {
  animation:
    crt-close 380ms both,
    crt-flash 380ms linear both;
}

@keyframes crt-close {
  0%   { transform: scale(1, 1); animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.4); }
  35%  { transform: scale(1, 0.008); animation-timing-function: cubic-bezier(0.3, 0, 0.7, 1); }
  75%  { transform: scale(0.02, 0.008); animation-timing-function: ease-in; }
  100% { transform: scale(0.001, 0.001); }
}

@keyframes crt-flash {
  0%       { opacity: 0; }
  25%, 100% { opacity: 1; }
}

@keyframes crt-open {
  0%   { transform: scale(0.001, 0.001); }
  4%   { transform: scale(0.02, 0.008); }
  20%  { transform: scale(1, 0.008); }
  42%, 100% { transform: scale(1, 1); }
}

@keyframes crt-glare {
  0%, 15% { opacity: 1; }
  32%     { opacity: 0.6; }
  42%     { opacity: 0.12; }
  50%     { opacity: 0.32; }
  100%    { opacity: 0; }
}

@keyframes crt-dip {
  0%, 38% { opacity: 1; }
  44%     { opacity: 0.45; }
  52%, 100% { opacity: 1; }
}

.tile.flicker :is(video, img) {
  animation: crt-flicker 1100ms steps(1, end) both;
}

.tile.flicker::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(transparent 0 40%, oklch(1 0 0 / 0.22) 46%, oklch(1 0 0 / 0.05) 54%, transparent 60%) 0 0 / 100% 250% no-repeat,
    repeating-linear-gradient(transparent 0 2px, oklch(0 0 0 / 0.45) 2px 3px);
  pointer-events: none;
  animation:
    crt-flicker-lines 1100ms steps(1, end) both,
    crt-roll 1100ms linear both;
}

@keyframes crt-flicker {
  0%   { opacity: 1; transform: none; filter: none; }
  5%   { opacity: 0.3; filter: brightness(1.9) contrast(1.4); }
  8%   { opacity: 1; transform: translateX(-2%); filter: none; }
  12%  { opacity: 0.12; transform: none; }
  15%  { opacity: 0.9; transform: translateX(1.2%) skewX(-3deg); filter: saturate(0) brightness(1.3); }
  20%  { opacity: 0.45; transform: translateY(-3%); }
  24%  { opacity: 1; transform: none; filter: none; }
  52%  { opacity: 0.35; transform: scaleY(1.03) translateY(1.5%); filter: brightness(1.5); }
  55%  { opacity: 1; transform: none; filter: none; }
  70%  { opacity: 0.7; transform: translateX(-0.6%); }
  73%, 100% { opacity: 1; transform: none; filter: none; }
}

@keyframes crt-flicker-lines {
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  24%  { opacity: 0.6; }
  52%  { opacity: 1; }
  58%  { opacity: 0.4; }
  75%, 100% { opacity: 0; }
}

@keyframes crt-roll {
  from { background-position: 0 100%, 0 0; }
  to   { background-position: 0 0, 0 0; }
}

.tile :is(video, img) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tile-title {
  position: absolute;
  inset: auto 0 0;
  padding: 4cqi 2.2cqi 1.7cqi;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: clamp(9px, 5.6cqi, 13px);
  font-weight: 500;
  line-height: 1.3;
  color: #fff;
  background: linear-gradient(oklch(0 0 0 / 0), oklch(0 0 0 / 0.65));
  opacity: 0;
  transition: opacity 200ms ease-in-out;
  pointer-events: none;
}

@media (hover: hover) {
  .tile:hover .tile-title { opacity: 1; }
}

.tile.off .tile-title,
.tile.dark .tile-title {
  opacity: 0;
  transition-duration: 120ms;
}

@media (hover: hover) {
  .tile.on:hover .tile-title {
    opacity: 1;
    transition: opacity 150ms ease-out 400ms;
  }
}

.play-wall {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  z-index: 3;
}
.play-wall[hidden] { display: none; }

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(120% 95% at 0% 100%,
      oklch(0 0 0 / 0.88) 0%, oklch(0 0 0 / 0.7) 30%, oklch(0 0 0 / 0.25) 58%, transparent 75%);
  pointer-events: none;
}

.intro {
  --pad: clamp(1.5rem, 1rem + 3vw, 4.5rem);
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 2;
  width: min(100%, 42rem + var(--pad));
  padding: 0 var(--pad) var(--pad);
  color: var(--text);
  pointer-events: none;
}
.intro > * { pointer-events: auto; }
.intro > * + * { margin-top: clamp(0.75rem, 2svh, 1.25rem); }
.intro h1 { margin-left: -0.11em; }
.intro .lede { max-width: 25em; color: oklch(0.86 0.008 256); text-wrap: balance; }

.hero-actions {
  display: flex;
  gap: 0.5rem 1rem;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 0.5rem;
}

.hero-fine { font-size: 0.875rem; color: oklch(0.78 0.01 256); }

.crt body::after { opacity: 0; }
.crt.intro-in body::after { opacity: 1; transition: opacity 900ms ease-out; }

.crt .intro h1,
.crt .intro .lede,
.crt .hero-actions > * {
  opacity: 0;
  transform: translateY(18px);
}

.crt.intro-in .intro h1,
.crt.intro-in .intro .lede,
.crt.intro-in .hero-actions > * {
  opacity: 1;
  transform: none;
  transition:
    opacity 600ms ease-out var(--in-delay),
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1) var(--in-delay);
}

.intro h1 { --in-delay: 250ms; }
.intro .lede { --in-delay: 370ms; }
.hero-actions .btn { --in-delay: 490ms; }
.hero-actions .hero-fine { --in-delay: 570ms; }

.count {
  font-variant-numeric: tabular-nums;
}

.count .slot {
  display: inline-block;
  height: 1.5em;
  line-height: 1.5em;
  vertical-align: top;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.count .reel {
  display: block;
}

.count .reel > span {
  display: block;
  height: 1.5em;
}

.cta {
  overflow: hidden;
  transition: width 360ms cubic-bezier(0.34, 1.36, 0.64, 1),
              background-color 140ms ease-out, transform 100ms ease-out;
}

.crt.intro-in .hero-actions > .cta {
  transition:
    opacity 600ms ease-out var(--in-delay),
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1) var(--in-delay),
    width 360ms cubic-bezier(0.34, 1.36, 0.64, 1),
    background-color 140ms ease-out;
}

.cta-label {
  display: inline-block;
  transition: opacity 160ms ease-out, transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
              filter 160ms ease-out;
}
.cta-label.out { opacity: 0; transform: translateY(-8px); filter: blur(3px); }
.cta-label.enter { opacity: 0; transform: translateY(8px); filter: blur(3px); transition: none; }

@media (prefers-reduced-motion: reduce) {
  .cta, .cta-label { transition: none; }
}

@media (max-width: 680px) {
  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .wall {
    width: max(100vw, 100vh * 4 / 9);
    grid-template-columns: repeat(2, 1fr);
  }
  body::after {
    background:
      linear-gradient(transparent 35%, oklch(0 0 0 / 0.7) 60%, oklch(0 0 0 / 0.92) 100%);
  }
}

body.doc { background: var(--bg); }
body.doc::after { content: none; }

.prose {
  width: min(100% - 2.5rem, 40rem);
  margin-inline: auto;
  padding-block: clamp(3rem, 2rem + 5vw, 6rem);
  line-height: 1.65;
}
.prose h1 {
  font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin-top: 1.5rem;
}
.prose h2 {
  font-size: 1.125rem;
  letter-spacing: -0.011em;
  margin-top: 2.25rem;
}
.prose p { color: var(--text-2); margin-top: 0.75rem; }
.prose .fine { font-size: 0.875rem; color: var(--text-3); }
.prose a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.prose .fine a { color: inherit; text-decoration: none; font-weight: 600; }