/* ---------------------------------------------------------------
   What Movie Tonight
   The whole job of this stylesheet is to make a 16:9 YouTube iframe
   fill any viewport edge to edge, and to hide everything else.
   --------------------------------------------------------------- */

:root {
  --ink: #fff;
  --dim: rgba(255, 255, 255, .38);
  --pad: max(22px, env(safe-area-inset-left, 0px) + 18px);
  --pad-b: max(22px, env(safe-area-inset-bottom, 0px) + 18px);
  --cut: 90ms;
  --font: "Helvetica Neue", Inter, ui-sans-serif, system-ui, -apple-system,
          "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #000;
  color: var(--ink);
  font-family: var(--font);
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

#stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #000;
  cursor: pointer;
}

/* --- The cover crop -------------------------------------------------
   A YouTube embed is rigidly 16:9 and letterboxes itself in any other
   shape — which is every phone held upright. So the frame is oversized
   past the viewport in whichever direction is short and centred, letting
   the edges crop: object-fit: cover, hand-built, since iframes don't
   support it.

   Two things this has to survive, both learned on a real iPhone:

   1. The iframe is not the video. YouTube's mobile player reserves a
      strip for its title and letterboxes the video into what is left, so
      an iframe sized exactly to the viewport still shows black bands with
      "| A24" sitting in the top one. The fix is to overscan hard enough
      that those bands land off screen — see OVERSCAN in app.js.
   2. iOS viewport units lie. vh is the large viewport, dvh shifts as
      Safari's chrome slides, and neither matches what you can actually
      see at the moment the player lays out.

   So app.js measures the stage in real pixels and sets these in px. The
   rules below are only what applies before that first measurement.
   -------------------------------------------------------------------- */
.layer {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw;          /* 100 / (16/9) */
  min-width: 177.7778vh;    /* 100 * (16/9) */
  min-height: 100vh;
  transform: translate(-50%, -50%);
  transform-origin: center;
  overflow: hidden;         /* the window; the player is oversized behind it */
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
  transition: opacity var(--cut) linear;
}

@supports (height: 100dvh) {
  .layer {
    min-width: 177.7778dvh;
    min-height: 100dvh;
  }
}

.layer.is-active { opacity: 1; }
.layer iframe,
.layer > div { width: 100%; height: 100%; border: 0; display: block; }
/* app.js takes over both once it has measured. */

/* Catches every click, tap and hover so the player underneath never
   reacts — no pause on click, no title bar on hover, no click-through
   to youtube.com. */
#shield {
  position: absolute;
  inset: 0;
  z-index: 30;
  background: transparent;
  border: 0;
  cursor: pointer;
}
#shield:focus { outline: none; }
#shield:focus-visible { outline: 2px solid rgba(255,255,255,.5); outline-offset: -6px; }

/* Just enough darkness at the bottom edge for text to survive a bright frame. */
#scrim {
  position: absolute;
  inset: auto 0 0 0;
  height: 42vh;
  z-index: 20;
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms ease;
  background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,.32) 38%, transparent);
}
#scrim.show { opacity: 1; }

/* --- Title card ----------------------------------------------------- */
#titlecard {
  position: absolute;
  left: var(--pad);
  right: calc(var(--pad) + 118px);   /* never runs into the ghost word */
  bottom: var(--pad-b);
  z-index: 40;
  max-width: 720px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 520ms ease, transform 520ms cubic-bezier(.2,.7,.3,1);
}
#titlecard.show { opacity: 1; transform: none; }

#tc-title {
  margin: 0;
  font-size: clamp(26px, 5.4vw, 58px);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.02;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0,0,0,.6);
}
#tc-meta {
  margin: 8px 0 0;
  font-size: clamp(11px, 1.5vw, 13px);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
  text-shadow: 0 2px 20px rgba(0,0,0,.7);
}

/* --- Sound pill ----------------------------------------------------- */
#soundpill {
  position: absolute;
  top: max(20px, env(safe-area-inset-top, 0px) + 16px);
  right: var(--pad);
  z-index: 45;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px 9px 12px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  color: #fff;
  background: rgba(20,20,20,.5);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
  cursor: pointer;
  animation: breathe 2.6s ease-in-out infinite;
  transition: opacity 400ms ease, transform 400ms ease;
}
#soundpill svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
#soundpill svg .spk { fill: currentColor; stroke: none; }
#soundpill[hidden] { display: none; }

/* Once sound is on the pill stops instructing and becomes a plain toggle:
   still there, always, but down to an icon. */
#soundpill.compact { padding: 9px; animation: none; opacity: .55; }
#soundpill.compact:hover, #soundpill.compact:focus-visible { opacity: 1; }
#soundpill.compact #soundlabel { display: none; }
#soundpill.is-on .cross { display: none; }
#soundpill:not(.is-on) .waves { display: none; }

@keyframes breathe {
  0%, 100% { opacity: .72; }
  50%      { opacity: 1; }
}

/* --- The ghost corner ------------------------------------------------ */
#corner {
  position: absolute;
  right: var(--pad);
  bottom: var(--pad-b);
  z-index: 45;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

#watch,
#genreword {
  padding: 8px 2px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: lowercase;
  color: rgba(255,255,255,.4);
  text-shadow: 0 1px 16px rgba(0,0,0,.8);
  cursor: pointer;
  transition: color 260ms ease;
}
#watch { color: rgba(255,255,255,.58); text-decoration: none; }
#watch:hover, #watch:focus-visible,
#genreword:hover, #genreword:focus-visible { color: #fff; outline: none; }

/* --- Genre panel: the trailer keeps playing behind it --------------- */
#genrepanel {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 8vh var(--pad);
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(22px) saturate(.7);
  -webkit-backdrop-filter: blur(22px) saturate(.7);
  opacity: 0;
  transition: opacity 240ms ease;
}
#genrepanel.show { opacity: 1; }
#genrepanel[hidden] { display: none; }

#seenline {
  margin-top: 34px;
  padding: 7px 2px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: lowercase;
  color: rgba(255, 255, 255, .32);
  cursor: pointer;
  transition: color 220ms ease;
}
#seenline:hover, #seenline:focus-visible { color: rgba(255, 255, 255, .8); outline: none; }
#seenline[hidden] { display: none; }

#genrepanel { grid-auto-rows: min-content; align-content: center; justify-items: center; }

#genrelist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: 4px 34px;
  max-width: 900px;
}
#genrelist button {
  border: 0;
  background: none;
  padding: 6px 0;
  font: inherit;
  font-size: clamp(24px, 6vw, 46px);
  font-weight: 600;
  letter-spacing: -.02em;
  text-transform: lowercase;
  color: rgba(255,255,255,.42);
  cursor: pointer;
  transition: color 160ms ease;
}
#genrelist button:hover,
#genrelist button:focus-visible { color: #fff; outline: none; }
#genrelist button[aria-current="true"] { color: #fff; }
#genrelist button[aria-current="true"]::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: -2px;
  background: currentColor;
}

/* --- Boot dots ------------------------------------------------------ */
#boot {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: #000;
  transition: opacity 400ms ease;
}
#boot.gone { opacity: 0; pointer-events: none; }
#boot .dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,.75);
  animation: bob 1.1s ease-in-out infinite;
}
#boot .dot:nth-child(2) { animation-delay: .14s; }
#boot .dot:nth-child(3) { animation-delay: .28s; }
@keyframes bob {
  0%, 60%, 100% { opacity: .18; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-4px); }
}

/* --- Autoplay-blocked fallback (iOS Low Power Mode, strict settings) - */
#tapstart {
  position: absolute;
  inset: 0;
  z-index: 55;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
#tapstart[hidden] { display: none; }
#tapstart button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 26px 16px 20px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .04em;
  color: #000;
  background: #fff;
  cursor: pointer;
}
#tapstart svg { width: 20px; height: 20px; fill: currentColor; }

#allgone {
  position: absolute;
  inset: 0;
  z-index: 55;
  display: grid;
  place-items: center;
  margin: 0;
  background: #000;
  color: rgba(255,255,255,.5);
  font-size: 14px;
  letter-spacing: .06em;
}
#allgone[hidden] { display: none; }

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