/* ==========================================================================
   NORTH POLE GRAMS — CINEMATIC GATEWAY (homepage)
   Sits between Matchday Five and Breakfast of Champions.
   Self-contained: every class is prefixed .np- so nothing here can affect
   video-break, Matchday Five, or Breakfast of Champions.
   ========================================================================== */

.np-gateway {
  --np-paper: var(--paper, #EAE7E0);
  --np-ink: var(--ink, #1B1B18);
  --np-pitch: var(--pitch, #3F5233);
  --np-hairline: var(--hairline, #C9C3B8);
  --np-night: #0A0D11;
  --np-snow: #CFC9BB;
  /* Matches the supplied MP4: 1920 x 816 px. */
  --np-video-ratio: 1920 / 816;

  position: relative;
  background: var(--np-paper);
}

/* ---------- Threshold: ordinary paper world -> winter night ---------- */

.np-threshold {
  height: clamp(56px, 9vw, 140px);
  background: linear-gradient(to bottom, var(--np-paper) 0%, var(--np-night) 100%);
}

/* ---------- Stage (the footage) ---------- */

.np-stage {
  background: var(--np-night);
  padding-bottom: clamp(18px, 2.4vw, 32px);
}

.np-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: var(--np-video-ratio);
  max-height: 88vh;
  background: var(--np-night);
  overflow: hidden;
}

/* contain (not cover) so no part of the story is ever cropped,
   whatever the final aspect ratio turns out to be. Dark letterboxing
   blends into the night background. */
.np-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--np-night);
}

/* ---------- Sound control (lives BELOW the footage, never over it) ---------- */

.np-controls {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 16px clamp(24px, 6vw, 110px) 0;
}

.np-sound-btn {
  position: relative;
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(207, 201, 187, 0.35);
  padding: 0 0 6px;
  cursor: pointer;
  color: var(--np-snow);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color 0.3s ease, border-color 0.3s ease;
}

/* Invisible hit area: the control stays small and editorial, but the tappable
   zone is about 45px tall (and clear of the footage above it). */
.np-sound-btn::after {
  content: "";
  position: absolute;
  top: -11px;
  bottom: -11px;
  left: -12px;
  right: -12px;
}

.np-sound-btn:hover,
.np-sound-btn:focus-visible {
  color: #FFFFFF;
  border-bottom-color: rgba(255, 255, 255, 0.8);
}

.np-sound-btn:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.7);
  outline-offset: 6px;
}

.np-sound-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.np-sound-icon .np-waves {
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* Waves hidden whenever sound is not currently on */
.np-sound-btn[data-state="idle"] .np-waves,
.np-sound-btn[data-state="muted-playing"] .np-waves,
.np-sound-btn[data-state="ended"] .np-waves {
  opacity: 0.25;
}

/* ---------- Invitation (editorial caption, on paper) ---------- */

.np-invite {
  background: var(--np-paper);
  text-align: center;
  padding: clamp(4rem, 10vw, 7rem) 6vw clamp(4.5rem, 10vw, 7.5rem);
}

.np-eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--np-pitch);
  margin-bottom: 8px;
}

.np-invite h2 {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.25;
  color: var(--np-ink);
  max-width: 26ch;
  margin: 0 auto 14px;
  text-wrap: balance;
}

.np-invite-sub {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: -0.01em;
  color: var(--caption, #6B6862);
  margin-bottom: 26px;
}

.np-invite a {
  color: var(--np-ink);
  text-decoration: none;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  border-bottom: 1px solid var(--np-ink);
  padding-bottom: 4px;
}

.np-invite a:hover,
.np-invite a:focus-visible {
  color: var(--np-pitch);
  border-bottom-color: var(--np-pitch);
}

/* ---------- Existing fixed header + counter fade away from the footage ----------
   Classes are set on <html> by north-pole-gateway.js only while the film is
   actually near those elements. Nothing else on the site is changed. */

.brand-overlay,
.hud {
  transition: opacity 0.45s ease;
}

html.np-hide-brand .brand-overlay,
html.np-hide-hud .hud {
  opacity: 0;
}

/* ---------- Visually hidden (screen-reader description of the film) ---------- */

.np-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Small screens ---------- */

@media (max-width: 700px) {
  .np-video-frame {
    max-height: none;
  }
  .np-controls {
    padding-top: 14px;
  }
  .np-invite h2 {
    max-width: 20ch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .np-sound-btn,
  .np-sound-icon .np-waves,
  .brand-overlay,
  .hud {
    transition: none;
  }
}