/* ============================================================
   SHOWREEL
   Two players, on purpose:

     - the ambient reel in state C (framed, muted, scroll-driven,
       no chrome) — its layout lives in hero.css, only the opener
       is here;
     - this full-bleed overlay, which a click opens. That click is
       the user gesture browsers require before a video may carry
       sound, so the overlay starts unmuted.

   Control marks are hairlines on a gradient scrim: no discs, no
   borders, no fills. Keep it that way — a pill here reads as a
   different site.
   ============================================================ */

/* ---- inline opener (sits on the state-C frame) ---- */
.showreel-open {
  position: absolute;
  right: clamp(10px, 1.2vw, 18px);
  bottom: clamp(10px, 1.2vw, 18px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: clamp(10px, 0.78vw, 12px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* The reel underneath is unpredictable footage; the drop shadow keeps
     the mark legible over a blown-out frame without adding a plate. */
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.75);
  filter: drop-shadow(0 1px 10px rgba(0, 0, 0, 0.75));
  opacity: 0.78;
  transition: opacity 0.25s ease;
}
.showreel-open:hover,
.showreel-open:focus-visible { opacity: 1; }
.showreel-open-label { line-height: 1; }

/* ---- overlay ----
   A native <dialog> opened with showModal(): the platform supplies the
   focus trap, Esc-to-close and top-layer placement, so none of that is
   hand-rolled here. What is left is undoing the UA's centred, bordered
   box so it can go full-bleed. */
.showreel-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: #000;
  color: #fff;
  /* The page behind is scroll-choreographed; swallow gestures so a
     stray swipe cannot re-run the hero underneath the overlay. */
  touch-action: none;
}
.showreel-overlay:focus { outline: none; }
.showreel-overlay[open] {
  animation: showreelFadeIn 0.32s cubic-bezier(.2, .7, .2, 1);
}
.showreel-overlay::backdrop { background: #000; }
@keyframes showreelFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Absolute against the fixed overlay, so the percentages resolve against a
   definite box. Centring this as a grid item instead collapses the track to
   zero and the video with it. */
.showreel-overlay video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  cursor: pointer;
}

/* ---- back / close ---- */
.showreel-back {
  position: fixed;
  top: clamp(16px, 2.4svh, 32px);
  left: clamp(16px, 2.2vw, 32px);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 8px 6px 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: clamp(11px, 0.85vw, 13px);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.8);
  filter: drop-shadow(0 1px 10px rgba(0, 0, 0, 0.8));
  opacity: 0.9;
  transition: opacity 0.2s ease;
}
.showreel-back:hover,
.showreel-back:focus-visible { opacity: 1; }

/* ---- control bar ---- */
.showreel-controls {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
  /* Tall top padding so the scrim fades in high while the marks stay
     a flat 32px off the bottom edge. */
  padding: clamp(56px, 10svh, 100px) clamp(16px, 2.2vw, 32px) clamp(16px, 2.4svh, 32px);
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
  color: #fff;
}
.showreel-ctl {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: currentColor;
  cursor: pointer;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}
.showreel-ctl:hover,
.showreel-ctl:focus-visible { opacity: 1; }

/* Icon pairs — JS flips `is-playing` / `is-muted` on the overlay. */
.showreel-overlay .icon-pause,
.showreel-overlay.is-playing .icon-play { display: none; }
.showreel-overlay.is-playing .icon-pause { display: block; }
.showreel-overlay .icon-muted,
.showreel-overlay.is-muted .icon-sound { display: none; }
.showreel-overlay.is-muted .icon-muted { display: block; }
.showreel-overlay .icon-fs-exit,
.showreel-overlay.is-fullscreen .icon-fs-enter { display: none; }
.showreel-overlay.is-fullscreen .icon-fs-exit { display: block; }

.showreel-time {
  flex: none;
  font-size: clamp(11px, 0.85vw, 13px);
  letter-spacing: 0.08em;
  /* Equal-width digits so the bar does not twitch as the clock runs. */
  font-variant-numeric: tabular-nums;
  opacity: 0.9;
}

/* ---- scrub ----
   A real <input type="range"> so drag, click-to-seek, arrow keys and
   screen readers all work without hand-rolling any of it. Only the
   skin is custom; --played (0..1, set by JS) paints the elapsed part,
   because WebKit has no track-progress pseudo-element. */
.showreel-scrub {
  flex: 1 1 auto;
  min-width: 0;
  height: 16px;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.showreel-scrub:focus { outline: none; }
.showreel-scrub:focus-visible { outline: 1px solid #fff; outline-offset: 4px; }

.showreel-scrub::-webkit-slider-runnable-track {
  height: 2px;
  border-radius: 2px;
  background:
    linear-gradient(#fff, #fff) 0 / calc(var(--played, 0) * 100%) 100% no-repeat,
    #6f6f6f;
}
.showreel-scrub::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -7px;
  border: 0;
  border-radius: 50%;
  background: #fff;
}
.showreel-scrub::-moz-range-track {
  height: 2px;
  border-radius: 2px;
  background: #6f6f6f;
}
.showreel-scrub::-moz-range-progress {
  height: 2px;
  border-radius: 2px;
  background: #fff;
}
.showreel-scrub::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 50%;
  background: #fff;
}

/* ---- narrow ----
   At phone width the clock is the first thing to go; the scrub needs
   the room more than the reader needs a running total. */
@media (max-width: 560px) {
  .showreel-time { display: none; }
  .showreel-controls { gap: 16px; }
  .showreel-back span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .showreel-overlay { animation: none; }
  .showreel-open,
  .showreel-back,
  .showreel-ctl { transition: none; }
}