/* =============================================================================
   THE LANDING

   A scroll-driven page: a pinned hero that opens through a mask, a pinned
   section where the scroll wheel runs a real market's tape, two character
   spotlights that drift on parallax, a horizontal wall of the roster, and a
   closing message that wipes in.

   The layout follows the structure of a cinematic game landing page. The art
   does not: there is no game footage or artwork anywhere here. The sky is
   drawn on a canvas and every character plate is generated from the character's
   own name.
   ========================================================================== */

.landing {
  background: #000;
  overflow-x: hidden;
}

.landing main {
  background:
    linear-gradient(180deg,
      #000 0%,
      var(--violet-2) 22%,
      var(--violet) 44%,
      #180b28 62%,
      #0a0713 82%,
      #000 100%);
}

.eyebrow {
  display: block;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 16px;
}

/* ================================================================= NAV === */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px clamp(16px, 3vw, 34px);
  transition: background 0.3s ease, border-color 0.3s ease;
  border-bottom: 1px solid transparent;
}
.nav.solid {
  background: rgba(4, 3, 8, 0.82);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.nav .brand { display: flex; align-items: center; text-decoration: none; }
.nav .brand img { height: 46px; width: auto; display: block; }
.nav-mid {
  display: flex; gap: 18px; margin-left: 14px;
  font-size: 11px; color: var(--muted);
  overflow: hidden; white-space: nowrap;
}
.nav-mid b { color: var(--ink); font-weight: 500; }
.nav-links { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.nav-links a {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); text-decoration: none;
  padding: 9px 12px; border-radius: 6px;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a.cta { color: #0a0a0b; background: var(--yellow); font-weight: 700; }
.nav-links a.cta:hover { background: #fff; }

@media (max-width: 780px) {
  .nav-mid { display: none; }
  .nav-links a:not(.cta) { display: none; }
}

/* ================================================================ HERO === */
.hero-section {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: #000;
}

/* The whole scene sits behind a mask that opens as you scroll. */
.mask-wrapper {
  position: absolute;
  inset: 0;
  -webkit-mask-image: radial-gradient(circle at 50% 52%, #000 46%, transparent 52%);
  mask-image: radial-gradient(circle at 50% 52%, #000 46%, transparent 52%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  will-change: mask-size, opacity;
}

.sky { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transform-origin: 50% 50%; }

.grain {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.28;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}

.hero-inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  text-align: center; padding: 0 20px clamp(70px, 21vh, 250px);
}
/* A soft scrim so the line under the wordmark stays readable over whatever
   part of the sunset happens to be behind it. */
/* A photograph, if the folder has one, sits exactly where the drawn sky does. */
.sky[hidden] { display: none; }
img.sky { object-fit: cover; }

.hero-inner::before {
  content: '';
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(78vmax, 100vw); height: min(46vmax, 62vh);
  top: auto; bottom: -6vh; transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(6, 2, 12, 0.72) 0%, rgba(6, 2, 12, 0.34) 55%, transparent 76%);
  pointer-events: none;
}
/* Everything in the hero has to sit inside the opening in the mask, so the
   type is sized against the same unit the mask is. */
.hero-inner > * { position: relative; max-width: min(46vmax, 88vw); }

.title-logo { margin: 0; line-height: 0; }
.title-logo img {
  width: min(19vmax, 46vw); height: auto; display: block;
  filter: drop-shadow(0 18px 44px rgba(0, 0, 0, 0.55));
}

.hero-line {
  margin: 26px 0 0;
  font-size: clamp(13px, 1.3vw, 17px);
  color: rgba(255, 255, 255, 0.86);
}

.hero-play {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 26px; padding: 11px 18px 11px 12px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  text-decoration: none; color: #fff;
  backdrop-filter: blur(6px);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.hero-play:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }
.hero-play .mono { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.play-dot {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--yellow);
  position: relative;
}
.play-dot::after {
  content: ''; position: absolute; top: 50%; left: 54%;
  transform: translate(-50%, -50%);
  border-left: 7px solid #0a0a0b;
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
}

/* The flash of the wordmark as the mask finishes opening. */
.overlay-logo {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
}
.overlay-logo img { width: min(46vmax, 84vw); height: auto; }

/* What is underneath, revealed once the scene has gone. */
.entrance-message {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 30px; text-align: center; padding: 0 24px;
  /* Hidden until the hero has finished opening: the timeline animates this
     gradient outwards, which wipes the message in from the middle. */
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 0%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 0%);
}
.entrance-message p {
  margin: 0;
  max-width: 22ch;
  font-family: var(--display);
  font-size: clamp(28px, 5.2vw, 68px);
  line-height: 1.02;
  text-transform: uppercase;
  color: #fff;
}
.coming { display: flex; gap: 26px; flex-wrap: wrap; justify-content: center; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--pink); }

/* ========================================================== SECTION ART === */

/* Sections that carry a photograph put it behind a scrim, because the copy on
   top of it has to stay readable at every window size. The image is fixed to
   the section rather than the page, so it does not fight the pinned panels. */
/* `position` is deliberately not set here: the entrance message is already
   absolutely positioned inside the hero, and overriding that would collapse
   it to the height of its own text. */
.shot { isolation: isolate; }

/* The image is one viewport tall and sticks while its section scrolls past.
   Sizing it to the section instead would mean `cover` scaling a photograph up
   by three or five times on the long sections, which is what makes a picture
   look soft and zoomed in. */
.shot .shot-art {
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
}
.shot .shot-bg {
  position: sticky; top: 0;
  height: 100vh; width: 100%;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.shot .shot-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 4, 16, 0.86) 0%, rgba(8, 4, 16, 0.16) 26%, rgba(8, 4, 16, 0.16) 74%, rgba(8, 4, 16, 0.86) 100%),
    linear-gradient(90deg, rgba(8, 4, 16, 0.62) 0%, rgba(8, 4, 16, 0.04) 52%, rgba(8, 4, 16, 0.22) 100%);
}
.shot.right .shot-bg::after {
  background:
    linear-gradient(180deg, rgba(8, 4, 16, 0.78) 0%, rgba(8, 4, 16, 0.06) 28%, rgba(8, 4, 16, 0.06) 72%, rgba(8, 4, 16, 0.78) 100%),
    linear-gradient(270deg, rgba(8, 4, 16, 0.52) 0%, rgba(8, 4, 16, 0.00) 50%, rgba(8, 4, 16, 0.14) 100%);
}

/* The photograph stays visible, so the columns that carry copy bring their own
   pool of shade with them rather than dimming the whole picture. */
.shot .tape-copy, .shot .spot-copy { position: relative; }
.shot .tape-copy::before, .shot .spot-copy::before {
  content: '';
  position: absolute; inset: -10% -14%; z-index: -1;
  background: radial-gradient(ellipse at 34% 50%, rgba(6, 3, 12, 0.94) 0%, rgba(6, 3, 12, 0.78) 42%, transparent 76%);
}
.shot.right .spot-copy::before {
  background: radial-gradient(ellipse at 66% 50%, rgba(6, 3, 12, 0.94) 0%, rgba(6, 3, 12, 0.78) 42%, transparent 76%);
}

.entrance-message .shot-bg { background-image: url('../assets/sections/entrance.webp'); }
.tape-section .shot-bg    { background-image: url('../assets/sections/mechanism.webp'); }
.spot-a .shot-bg          { background-image: url('../assets/sections/jason.webp'); }
.spot-b .shot-bg          { background-image: url('../assets/sections/lucia.webp'); }
.cast-section .shot-bg    { background-image: url('../assets/sections/cast.webp'); }

/* ================================================================ TAPE === */
.tape-section { position: relative; }
/* The artwork lives in here rather than on the section, because the section's
   box also contains the scroll spacer the pin runs over: several screens tall,
   which would force `cover` to blow the photograph up by five times. */
.tape-pin {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: center;
  padding: 90px clamp(20px, 5vw, 80px);
}
@media (max-width: 900px) { .tape-pin { grid-template-columns: 1fr; gap: 30px; } }

.tape-copy h2 {
  font-size: clamp(34px, 5.4vw, 76px);
  color: var(--yellow);
}
.tape-copy p {
  margin-top: 22px;
  font-size: clamp(14px, 1.5vw, 17px);
  color: rgba(255, 255, 255, 0.66);
  max-width: 52ch;
}
.tape-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px; margin-top: 34px;
}
.tape-stats div {
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 12px; padding: 12px 14px;
  background: rgba(14, 8, 26, 0.40);
  backdrop-filter: blur(12px) saturate(135%);
  -webkit-backdrop-filter: blur(12px) saturate(135%);
}
.tape-stats span { display: block; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); }
.tape-stats b { font-size: 17px; font-weight: 500; }

.tape-chart {
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: rgba(14, 8, 26, 0.42);
  padding: 14px;
  backdrop-filter: blur(13px) saturate(135%);
  -webkit-backdrop-filter: blur(13px) saturate(135%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 24px 60px rgba(0, 0, 0, 0.45);
}
.tape-chart-head { display: flex; justify-content: space-between; font-size: 12px; letter-spacing: 0.1em; padding-bottom: 10px; }
.tape-chart-head #tapeSym { color: var(--pink); }
#tapeCanvas { display: block; width: 100%; height: clamp(260px, 42vh, 420px); }
.tape-scrub { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); padding-top: 10px; }
.tape-caption { margin-top: 16px; font-size: 11px; line-height: 1.6; letter-spacing: 0.02em; color: var(--dim); max-width: 52ch; }

/* ============================================================ SPOTLIGHT == */
.spot {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 6vw, 90px);
  align-items: center;
  padding: clamp(80px, 14vh, 190px) clamp(20px, 5vw, 80px);
}
@media (max-width: 900px) {
  .spot { grid-template-columns: 1fr; gap: 34px; }
  .spot-b .spot-art { order: 2; }
}

.spot-copy h2 {
  font-size: clamp(40px, 7vw, 108px);
  color: var(--yellow);
  line-height: 0.9;
}
.spot-copy h3 {
  font-family: var(--sans);
  font-size: clamp(17px, 2vw, 24px);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.3;
  color: #fff;
  margin: 20px 0 0;
  max-width: 24ch;
}
.spot-copy p { margin-top: 18px; color: rgba(255, 255, 255, 0.62); max-width: 50ch; }
.spot-copy .btn { display: inline-block; margin-top: 26px; text-decoration: none; }

.spot-art { position: relative; min-height: 380px; }
.img-box { position: relative; display: grid; gap: 18px; justify-items: center; }

.spot-plate {
  width: min(300px, 62vw);
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.6));
}
.spot-plate .plate { width: 100%; height: auto; border-radius: 14px; }

.spot-card {
  width: min(340px, 78vw);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  background: rgba(14, 8, 26, 0.40);
  backdrop-filter: blur(13px) saturate(135%);
  -webkit-backdrop-filter: blur(13px) saturate(135%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 24px 60px rgba(0, 0, 0, 0.45);
  padding: 14px 16px;
  font-family: var(--mono);
}
.spot-card .sc-top { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.spot-card .sc-px { font-size: 30px; margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.spot-card .sc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; margin-top: 12px; font-size: 11px; }
.spot-card .sc-grid div { display: flex; justify-content: space-between; }
.spot-card .sc-grid span:first-child { color: var(--dim); }

/* ================================================================ CAST === */
.cast-section { position: relative; padding: clamp(70px, 12vh, 150px) clamp(20px, 5vw, 80px); }
.cast-head h2 { font-size: clamp(30px, 4.6vw, 62px); color: #fff; }
.cast-lede { margin-top: 18px; color: rgba(255, 255, 255, 0.62); max-width: 62ch; }

.cast-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
  margin-top: 40px;
}
.cast-card {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background: rgba(14, 8, 26, 0.44);
  backdrop-filter: blur(13px) saturate(135%);
  -webkit-backdrop-filter: blur(13px) saturate(135%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.cast-card:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.cast-face { display: block; aspect-ratio: 1 / 1; overflow: hidden; }
.cast-face .plate { width: 100%; height: 100%; border-radius: 0; display: block; }
.cast-meta { display: block; padding: 14px 15px 16px; }
.cast-meta b { display: block; font-size: 15px; font-weight: 600; }
.cast-line {
  display: block; margin-top: 7px; font-size: 12.5px; line-height: 1.45;
  color: var(--muted); min-height: 3.6em;
}
.cast-px {
  display: flex; justify-content: space-between; margin-top: 12px;
  padding-top: 10px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums;
}
.cast-px i { font-style: normal; }

/* ============================================================ POSTCARD == */
.postcard-section { padding: clamp(70px, 12vh, 150px) clamp(20px, 5vw, 80px); }
.postcard {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(24px, 5vw, 60px);
  align-items: center;
  border-radius: 24px;
  padding: clamp(26px, 4vw, 54px);
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(255, 176, 196, 0.22), transparent 55%),
    radial-gradient(120% 160% at 100% 100%, rgba(255, 249, 203, 0.16), transparent 55%),
    rgba(0, 0, 0, 0.42);
  border: 1px solid var(--line-strong);
}
@media (max-width: 900px) { .postcard { grid-template-columns: 1fr; } }
.postcard-copy h2 { font-size: clamp(28px, 4.2vw, 56px); color: #fff; }
.postcard-copy p { margin-top: 18px; color: rgba(255, 255, 255, 0.66); max-width: 48ch; }

.postcard-math { border: 1px solid var(--line-strong); border-radius: 14px; padding: 20px; background: rgba(0, 0, 0, 0.5); }
.pm-line { display: flex; justify-content: space-between; gap: 14px; font-size: 12.5px; padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.pm-line span:first-child { color: var(--dim); }
.pm-eq { display: flex; justify-content: space-between; gap: 14px; font-size: 15px; padding-top: 14px; color: var(--yellow); }
.pm-note { font-size: 11px; color: var(--dim); margin: 14px 0 0; }
.pm-note b { color: var(--ink); }

.three-up { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
@media (max-width: 860px) { .three-up { grid-template-columns: 1fr; } }
.tri { border: 1px solid var(--line); border-radius: 14px; padding: 22px; background: rgba(0, 0, 0, 0.35); }
.tri .n { display: block; font-size: 11px; letter-spacing: 0.16em; color: var(--pink); margin-bottom: 14px; }
.tri h4 { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.04em; font-size: 20px; margin: 0 0 8px; }
.tri p { margin: 0; font-size: 14px; color: rgba(255, 255, 255, 0.6); }

/* =============================================================== FINAL === */
.final-section { min-height: 96vh; display: flex; align-items: center; justify-content: center; padding: 60px 24px; }
.final-message { text-align: center; }
.final-message p {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(34px, 8vw, 118px);
  line-height: 0.96;
  text-transform: uppercase;
  color: #fff;
}
.final-message p:last-child { color: var(--pink); }

/* =============================================================== OUTRO === */
.outro { padding: clamp(50px, 8vh, 110px) clamp(20px, 5vw, 80px) 60px; border-top: 1px solid var(--line); }
.outro-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: clamp(24px, 5vw, 60px); align-items: center; }
@media (max-width: 900px) { .outro-inner { grid-template-columns: 1fr; } }
.outro-cta h2 { font-size: clamp(34px, 5vw, 70px); color: var(--yellow); }
.outro-cta p { margin-top: 14px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.outro-cta .btn.big { margin-top: 24px; display: inline-block; text-decoration: none; padding: 14px 24px; font-size: 13px; }

.outro-board { overflow: hidden; background: rgba(0, 0, 0, 0.4); }
.ob-head { display: flex; justify-content: space-between; padding: 11px 14px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.ob-row { text-decoration: none; color: inherit; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.ob-row:last-child { border-bottom: none; }
.ob-row .plate { width: 26px; height: 26px; }
.ob-row b { font-size: 13px; font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-row .ob-sub { font-family: var(--mono); font-size: 10px; color: var(--dim); }
.ob-row .ob-px { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 13px; }
.ob-row .ob-px span { display: block; font-size: 11px; }

.foot-note { margin-top: 44px; font-size: 11px; line-height: 1.7; color: var(--dim); max-width: 88ch; }

/* Anybody who has asked not to be moved around gets a static page. */
@media (prefers-reduced-motion: reduce) {
  .mask-wrapper { -webkit-mask-image: none; mask-image: none; }
  .entrance-message { display: none; }
}