/* Player controls for the video page.
   Typography deliberately borrowed from .menuEl - same weight, same white,
   same #CACACA hover - so the controls read as part of the site rather than
   as player chrome. Kept out of styles.css, which stays byte-identical. */

.videoControls {
  position: fixed;
  left: 40px;
  bottom: 40px;
  z-index: 1000000;
  display: flex;
  gap: 28px;
}

.videoControls button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: 'Open Sans', sans-serif;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 1px;
  color: #FFF;
  cursor: pointer;
  text-transform: uppercase;
}

.videoControls button:hover {
  color: #CACACA;
}

.videoControls button:focus-visible {
  outline: 2px solid #FFF;
  outline-offset: 4px;
}

@media only screen and (max-width: 700px) {
  .videoControls {
    left: 20px;
    bottom: 24px;
    gap: 20px;
  }
  .videoControls button {
    font-size: 16px;
  }
}

@media only screen and (max-width: 500px) {
  .videoControls button {
    font-size: 14px;
  }
}

/* The Vimeo embed runs with controls=0, so it has no thumbnail or play button
   of its own - without this the viewer faces pure black for as long as the
   video takes to buffer (measured at ~17s on a cold load). This holds the
   video's own first frame until playback genuinely starts. */
.vimeoEmbed .videoPoster {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000 url('../img/video-poster.jpg') center / contain no-repeat;
  pointer-events: none;
  opacity: 1;
  transition: opacity 600ms ease;
}

.vimeoEmbed .videoPoster.isHidden {
  opacity: 0;
}

/* .section is position:static, so an absolutely positioned child resolves
   against the viewport and height:100% collapses to zero - which centred the
   iframe on a zero-height box and pushed half of it off-screen. */
.section.video {
  position: relative;
}

/* Full-bleed video. The embed used to sit in a 16:9 box with black bands above
   and below; this scales it to cover the viewport and crops the overflow,
   matching how the background films fill the other pages. .section already
   clips with overflow:hidden. */
.section.video .vimeoEmbed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  /* styles.css centres this box with translate(0%, -50%) for the old letterboxed
     layout; the box now fills the section, so that offset has to go. */
  transform: none;
}

.section.video .vimeoEmbed iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* whichever of these is larger wins, so the 16:9 film always covers */
  width: 100vw;
  height: 56.25vw;
  min-width: 177.78vh;
  min-height: 100vh;
  border: 0;
}

/* the holding frame has to crop the same way, or it jumps when the video appears */
.vimeoEmbed .videoPoster {
  background-size: cover;
}

/* The film now fills the screen, and a cross-origin iframe swallows every click
   before the page sees it - which left page 7 with no way to advance. This
   transparent layer sits above the iframe so clicks reach the page again. The
   controls are fixed at z-index 1000000, so they stay above this and keep
   working. */
.section.video .videoClickLayer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}