/* ========================================
   FILM: Promo film band and YouTube lightbox
   ======================================== */

/* ---- Band ---- */
/* .hero uses the same matte as a light .section, so the page alternates
   light/dark from the hero all the way down. Inserting any section between
   the hero and #about would flip the parity of everything below it, so the
   film deliberately sits OUTSIDE the two-tone rhythm with a matte of its
   own. Every other section keeps the tone it had before the film existed.

   Do not give this band .section--dark or plain .section: the first merges
   into #about below it, the second merges into the hero above it.

   Composited over grass.png (average RGB 113,149,44) the two existing
   tones land at luma 53.6 (light .section and .hero) and luma 25.5
   (.section--dark). They are only 28 apart, so there is NO usable middle
   band: any matte between them reads as one or the other. The film has to
   sit clear on one side. Bright enough to clear the light tone would mean
   luma 64+, a glaring grass field on a dark broadcast site, so it goes
   deep instead. Every stop below stays under luma 15.4, leaving at least
   10 points of clearance from #about.

   An earlier version swept from luma 12 to 43 and so passed straight
   through .section--dark at its 45% stop, which is why the band merged
   into #about. Keep the whole ramp inside the deep zone.

   It is still a vignette, just a shallow one: 8.4 to 15.4. Read with the
   warm spill thrown by .film__stage, the band is a darkened room around a
   lit screen. Still the pitch, just with the lights down. */
.section.film::after {
  background: radial-gradient(
    ellipse 100% 95% at 50% 50%,
    rgba(0, 8, 1, 0.98) 0%,     /* #020B02, luma  8.4 */
    rgba(0, 11, 1, 0.975) 55%,  /* #030E02, luma 10.8 */
    rgba(0, 15, 1, 0.965) 100%  /* #041403, luma 15.4 */
  );
}


/* ---- Stage ---- */
/* Held at an exact 16:9, the same ratio as the film, so "cover" never
   actually crops and no letterbox bars are ever drawn. Height is controlled
   by capping the width against the viewport height, which keeps the whole
   stage on screen without distorting the ratio. Because there are no bars,
   the stage never bleeds its own background into the picture, which is what
   frees the band around it to be green rather than black. */
.film__stage {
  position: relative;
  width: min(100%, 1600px, calc((100vh - var(--nav-height) - 6rem) * 16 / 9));
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  cursor: pointer;
  isolation: isolate;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  /* Second shadow is the screen spill: it renders above the section matte,
     so it reads as light thrown onto the pitch by the film itself. */
  box-shadow: var(--shadow-elevated),
              0 0 100px 12px rgba(255, 107, 0, 0.09);
  /* Only ever visible in the moment before the poster paints. Tuned to the
     film's own near-black background rather than to the page. */
  background-color: #101010;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}

.film__stage:hover {
  border-color: var(--border-accent);
  box-shadow: var(--shadow-elevated),
              0 0 140px 24px rgba(255, 107, 0, 0.17);
}

.film__teaser {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 800ms var(--ease-out);
}

/* Crossfades up over the poster once the teaser can actually play,
   so there is never a flash of black between the two. */
.film__stage.is-playing .film__teaser { opacity: 1; }


/* ---- Scrim ---- */
/* Light touch: the film is already near-black, so this only needs to
   protect the control cluster along the bottom edge. */
.film__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.88) 0%,
      rgba(0, 0, 0, 0.5) 14%,
      rgba(0, 0, 0, 0) 36%
    ),
    radial-gradient(
      ellipse 120% 80% at 50% 45%,
      rgba(0, 0, 0, 0) 55%,
      rgba(0, 0, 0, 0.32) 100%
    );
  transition: opacity var(--duration-base) var(--ease-out);
}

.film__stage:hover .film__scrim { opacity: 0.8; }


/* ---- Corner framing ticks ---- */
.film__tick {
  position: absolute;
  width: 26px;
  height: 26px;
  z-index: 2;
  border: 1px solid var(--color-gold);
  opacity: 0.38;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-out);
}

.film__tick--tl {
  top: var(--space-lg);
  left: var(--space-lg);
  border-right: 0;
  border-bottom: 0;
}

.film__tick--tr {
  top: var(--space-lg);
  right: var(--space-lg);
  border-left: 0;
  border-bottom: 0;
}

.film__tick--bl {
  bottom: var(--space-lg);
  left: var(--space-lg);
  border-right: 0;
  border-top: 0;
}

.film__tick--br {
  bottom: var(--space-lg);
  right: var(--space-lg);
  border-left: 0;
  border-top: 0;
}

.film__stage:hover .film__tick { opacity: 0.72; }


/* ---- Control cluster ---- */
.film__controls {
  position: absolute;
  z-index: 3;
  left: clamp(1.25rem, 3.5vw, 3rem);
  right: clamp(1.25rem, 3.5vw, 3rem);
  bottom: clamp(1.25rem, 3vw, 2.5rem);
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.film__play {
  position: relative;
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-cream);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}

.film__play svg {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  z-index: 1;
}

/* Pulse ring draws the eye without animating the film itself */
.film__play::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-orange);
  animation: film-pulse 2.6s var(--ease-out) infinite;
  pointer-events: none;
}

@keyframes film-pulse {
  0%   { transform: scale(1);   opacity: 0.65; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}

.film__stage:hover .film__play {
  color: var(--color-orange);
  transform: scale(1.07);
}

.film__play:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 5px;
  border-radius: var(--radius-full);
}

.film__caption {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.film__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.film__label {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 1rem + 1.6vw, 2.4rem);
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-white);
}

.film__meta {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-muted);
  letter-spacing: 0.04em;
}


/* ---- Contained variant (sub-pages) ---- */
/* Already bounded by .container, so it takes the full width it is given. */
.film--contained .film__stage {
  width: 100%;
}


/* ---- Lightbox ---- */
/* Scroll lock uses a class, not an inline style: nav.js owns
   document.body.style.overflow for the mobile menu and resets it to ''. */
body.film-open { overflow: hidden; }

.film-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(0, 0, 0, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base) var(--ease-out),
              visibility var(--duration-base) var(--ease-out);
}

.film-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.film-lightbox__frame {
  position: relative;
  width: min(92vw, 1600px);
  aspect-ratio: 16 / 9;
  max-height: 86vh;
  background: #000;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-elevated);
  transform: scale(0.96);
  transition: transform var(--duration-base) var(--ease-out);
}

.film-lightbox.is-open .film-lightbox__frame { transform: scale(1); }

.film-lightbox__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.film-lightbox__close {
  position: absolute;
  top: clamp(0.75rem, 2.5vw, 1.75rem);
  right: clamp(0.75rem, 2.5vw, 1.75rem);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  background: rgba(0, 0, 0, 0.5);
  color: var(--color-cream);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}

.film-lightbox__close:hover {
  color: var(--color-orange);
  border-color: var(--border-accent);
}

.film-lightbox__close:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 3px;
}

.film-lightbox__close svg {
  width: 20px;
  height: 20px;
  display: block;
}


/* ---- Responsive ---- */
@media (max-width: 768px) {
  .film__tick { display: none; }

  .film__play {
    width: 54px;
    height: 54px;
  }

  .film__controls {
    gap: var(--space-sm);
  }

  .film__stage:hover .film__play { transform: none; }
}

@media (max-width: 480px) {
  .film__play {
    width: 46px;
    height: 46px;
  }

  .film__eyebrow { letter-spacing: 0.14em; }
}


/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .film__play::after { animation: none; }

  .film__teaser,
  .film__scrim,
  .film__tick,
  .film__play,
  .film-lightbox,
  .film-lightbox__frame {
    transition: none;
  }
}