/* ==========================================================================
   Therapy Sessions — shell styles
   ========================================================================== */

:root {
  --cream: #f4ecd8;
  --cream-hover: #fff8e6;
  --ink: #111111;
  --night: #0b0d24;
  --night-2: #151a3d;
  --amber: #f2b35a;
  --text: #f4ecd8;
  --text-dim: rgba(244, 236, 216, 0.72);
  --focus: #f2b35a;
  --font: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

html, body {
  margin: 0;
  height: 100%;
  background: var(--night);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

body { overflow: hidden; }

img { display: block; max-width: 100%; }

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

[hidden] { display: none !important; }

/* ==========================================================================
   Homepage hero

   The street art (1672x941) is scaled to cover the viewport. On wide screens the
   logo and controls are pinned to the layout of the approved mockup, in art pixels
   (--px = one art pixel), so the composition holds at any size.
   ========================================================================== */

.hero {
  position: fixed;
  inset: 0;
  overflow: hidden;
  container-type: size;
  background: var(--night);

  --sw: max(100cqw, 100cqh * 1.77683);   /* stage width  (cover) */
  --sh: max(100cqh, 100cqw * 0.56280);   /* stage height (cover) */
  --sl: calc((100cqw - var(--sw)) * 0.12); /* crop mostly from the right (bike side) */
  --st: calc((100cqh - var(--sh)) * 0.10); /* crop mostly from the bottom */
  --px: calc(var(--sw) / 1672);
}

.hero-bg {
  position: absolute;
  left: var(--sl);
  top: var(--st);
  width: var(--sw);
  height: var(--sh);
  background: url("../assets/horns-records-clean.webp?v=10") center / 100% 100% no-repeat;
}

/* Scene clips sit exactly over the still (same stage box), invisible until playing.
   The wrapper keeps the crossfade stacking (is-top) below the logo and controls. */
.hero-scene { position: absolute; inset: 0; isolation: isolate; pointer-events: none; }
.hero-video {
  position: absolute;
  left: var(--sl);
  top: var(--st);
  width: var(--sw);
  height: var(--sh);
  object-fit: fill;
  opacity: 0;
  pointer-events: none;
  /* nudges the clips onto the still if they came out framed slightly differently
     (set per scene in shared/scene.js -> align) */
  transform: translate(var(--scene-x, 0%), var(--scene-y, 0%)) scale(var(--scene-scale, 1));
}
/* Dissolve between clips (and from the still into the first clip). Keep the
   duration in step with `crossfade` in shared/scene.js. */
.hero-video.is-on { opacity: 1; transition: opacity 0.8s ease-in-out; }
.hero-video.is-top { z-index: 1; }

.hero-scrim--mobile { display: none; }

/* Your logo with ink/paper colors swapped (cream letters, black outline), in the spot the
   approved mockup's lettering occupied. */
.hero-logo {
  position: absolute;
  margin: 0;
  left: calc(var(--sl) + var(--px) * 92);
  top: calc(var(--st) + var(--px) * 198);
  width: calc(var(--px) * 606);
  filter: drop-shadow(0 calc(var(--px) * 4) calc(var(--px) * 14) rgba(0, 0, 0, 0.45));
}
.hero-logo img { width: 100%; height: auto; }

.hero-watch {
  position: absolute;
  left: calc(var(--sl) + var(--px) * 247);
  top: calc(var(--st) + var(--px) * 424);
  width: calc(var(--px) * 275);
  height: calc(var(--px) * 61);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0 1em;
  white-space: nowrap;
  border: 0;
  border-radius: calc(var(--px) * 4);
  background: var(--cream);
  color: var(--ink);
  font: 600 max(calc(var(--px) * 22), 14px) / 1 var(--font);
  cursor: pointer;
  box-shadow: 0 calc(var(--px) * 6) calc(var(--px) * 20) rgba(0, 0, 0, 0.35);
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.hero-watch svg { width: 1.2em; height: 1.2em; fill: currentColor; flex: none; }
.hero-watch:hover { background: var(--cream-hover); transform: translateY(-1px); }
.hero-watch:active { transform: translateY(0); }

.hero-explore {
  position: absolute;
  left: calc(var(--sl) + var(--px) * 384);
  top: calc(var(--st) + var(--px) * 517);
  transform: translate(-50%, -50%);
  padding: 0.35em 0.5em;
  white-space: nowrap;
  color: var(--text);
  text-decoration: none;
  font: 500 max(calc(var(--px) * 19), 14px) / 1.2 var(--font);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}
.hero-explore span { display: inline-block; transition: transform 0.15s ease; }
.hero-explore:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.hero-explore:hover span { transform: translateX(3px); }

/* Nav row ends where the mockup's "Newbury" ended, but never runs off-screen
   when the sides are cropped. */
.hero-nav {
  position: absolute;
  top: calc(var(--st) + var(--px) * 41);
  right: max(16px, calc(100cqw - var(--sl) - var(--px) * 1642));
  transform: translateY(-50%);
  display: flex;
  gap: calc(var(--px) * 26);
}

.hero-nav-link {
  padding: 0.4em 0.5em;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  font: 500 max(calc(var(--px) * 18), 14px) / 1.2 var(--font);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}
.hero-nav-link:hover { text-decoration: underline; text-underline-offset: 0.25em; }

.hero-sound {
  position: absolute;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px 0 12px;
  border: 1px solid rgba(244, 236, 216, 0.18);
  border-radius: 999px;
  background: rgba(8, 10, 24, 0.45);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--text);
  font: 500 14px / 1 var(--font);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.hero-sound:hover { background: rgba(8, 10, 24, 0.65); border-color: rgba(244, 236, 216, 0.32); }
.hero-sound svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hero-sound .hero-sound-speaker { fill: currentColor; stroke: none; }
.hero-sound .hero-sound-waves { display: none; }
.hero-sound[aria-pressed="true"] .hero-sound-waves { display: inline; }
.hero-sound[aria-pressed="true"] .hero-sound-mute { display: none; }

/* --------------------------------------------------------------------------
   Portrait / narrow: crop the street to Clarence and stack the UI above him.
   -------------------------------------------------------------------------- */
@media (max-aspect-ratio: 13/10) {
  .hero {
    --sl: clamp(calc(100cqw - var(--sw)), calc(50cqw - var(--sw) * 0.605), 0px);
    --st: 0px;
  }

  /* Darkens the top of the crop so the logo and buttons read over the Horn's sign */
  .hero-scrim--mobile {
    display: block;
    position: absolute;
    inset: 0 0 auto 0;
    height: 62%;
    pointer-events: none;
    background: linear-gradient(to bottom,
      rgba(8, 10, 30, 0.92) 0%,
      rgba(8, 10, 30, 0.80) 45%,
      rgba(8, 10, 30, 0) 100%);
  }

  .hero-nav {
    top: max(12px, env(safe-area-inset-top));
    right: 12px;
    transform: none;
    gap: 4px;
  }
  .hero-nav-link {
    padding: 10px 12px;
    font-size: 16px;
  }

  .hero-logo {
    left: 50%;
    top: calc(max(12px, env(safe-area-inset-top)) + 64px);
    transform: translateX(-50%);
    width: min(88vw, 520px);
  }

  .hero-watch {
    left: 50%;
    top: calc(max(12px, env(safe-area-inset-top)) + 64px + min(88vw, 520px) * 0.2927 + 28px);
    transform: translateX(-50%);
    width: auto;
    height: 52px;
    padding: 0 28px;
    border-radius: 6px;
    font-size: 18px;
  }
  .hero-watch:hover { transform: translateX(-50%) translateY(-1px); }
  .hero-watch:active { transform: translateX(-50%); }

  .hero-explore {
    left: 50%;
    top: calc(max(12px, env(safe-area-inset-top)) + 64px + min(88vw, 520px) * 0.2927 + 28px + 52px + 34px);
    font-size: 17px;
    padding: 10px 12px;
  }
}

/* ==========================================================================
   Boot sequence
   ========================================================================== */

.boot {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: #050508;
  cursor: pointer;
  transition: opacity 0.45s ease;
}

.boot-static {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  opacity: 0.9;
  transition: opacity 0.5s ease;
}
.boot.is-logo .boot-static { opacity: 0.28; }

.boot-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom,
    rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.28) 3px, rgba(0, 0, 0, 0) 4px);
}

.boot-logo {
  position: relative;
  width: min(78vw, 720px);
  height: auto;
  clip-path: inset(0 100% 0 0);
  filter: drop-shadow(0 0 24px rgba(0, 0, 0, 0.8));
}
.boot.is-logo .boot-logo {
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.75s cubic-bezier(0.65, 0, 0.35, 1);
}
.boot.is-flicker .boot-logo { animation: boot-flicker 0.6s steps(1, end) both; }

@keyframes boot-flicker {
  0%   { opacity: 1; }
  12%  { opacity: 0.25; transform: translateX(-3px); }
  20%  { opacity: 1;    transform: none; }
  34%  { opacity: 0.55; filter: brightness(1.8) drop-shadow(0 0 24px rgba(0, 0, 0, 0.8)); }
  42%  { opacity: 1;    filter: drop-shadow(0 0 24px rgba(0, 0, 0, 0.8)); }
  58%  { opacity: 0.15; }
  64%  { opacity: 1; }
  100% { opacity: 1; }
}

.boot.is-out { opacity: 0; pointer-events: none; }
.boot.is-out .boot-logo { transform: scaleY(0.02) scaleX(1.15); transition: transform 0.35s ease-in; }

.boot-skip {
  position: absolute;
  bottom: max(20px, env(safe-area-inset-bottom));
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: rgba(244, 236, 216, 0.55);
}

/* Hero entrance after boot */
.hero.is-entering .hero-logo,
.hero.is-entering .hero-watch,
.hero.is-entering .hero-explore,
.hero.is-entering .hero-nav { animation: hero-in 0.6s ease both; }
.hero.is-entering .hero-watch   { animation-delay: 0.08s; }
.hero.is-entering .hero-explore { animation-delay: 0.14s; }
@keyframes hero-in { from { opacity: 0; } to { opacity: 1; } }

/* ==========================================================================
   Rooms
   ========================================================================== */

.room-layer {
  position: fixed;
  inset: 0;
  z-index: 10;
  overflow: auto;
  background: var(--night);
  animation: room-in 0.35s ease both;
}
@keyframes room-in { from { opacity: 0; } to { opacity: 1; } }

/* ==========================================================================
   Episode player
   ========================================================================== */

.player {
  width: min(960px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 1px solid rgba(244, 236, 216, 0.14);
  border-radius: 10px;
  background: #0e1029;
  color: var(--text);
  overflow: auto;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.player::backdrop { background: rgba(3, 4, 14, 0.82); }
.player[open] { animation: room-in 0.2s ease both; }

.player-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 12px 12px 20px;
}
.player-title { margin: 0; font-size: 18px; font-weight: 600; }

.player-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.player-close:hover { background: rgba(244, 236, 216, 0.1); }
.player-close svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; }

.player-screen {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
}
.player-screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.player-missing {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 8px;
  padding: 24px;
  text-align: center;
}
.player-missing strong { font-size: 18px; font-weight: 600; }
.player-missing span { color: var(--text-dim); font-size: 14px; }
.player-missing code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: var(--amber);
}

.player-list {
  list-style: none;
  margin: 0;
  padding: 12px;
  display: grid;
  gap: 4px;
}
.player-list button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font: 500 15px / 1.3 var(--font);
  text-align: left;
  cursor: pointer;
}
.player-list button:hover { background: rgba(244, 236, 216, 0.08); }
.player-list button[aria-current="true"] { background: rgba(244, 236, 216, 0.14); }
.player-list .ep-status { margin-left: auto; font-size: 13px; color: var(--text-dim); }

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}