Video — Landing Documentary

:root {
  --bg: #0a0a0b;
  --surface: #141416;
  --surface-2: #1c1c1f;
  --amber: #ffb020;
  --amber-d: #e6971a;
  --red: #ff4d4d;
  --ink: #f4f4f6;
  --muted: #8a8a92;
  --line: rgba(255, 255, 255, 0.10);
  --line-2: rgba(255, 255, 255, 0.18);
  --white: #fff;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { margin: 0; line-height: 1.05; letter-spacing: -0.02em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.tc { font-family: var(--mono); letter-spacing: 0.02em; }

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ---------- scrubber ---------- */
.scrubber {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.06);
  z-index: 200;
}
.scrubber__fill {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--amber-d), var(--amber));
  box-shadow: 0 0 12px rgba(255, 176, 32, 0.6);
  transition: width 0.08s linear;
}

/* ---------- topbar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px clamp(16px, 4vw, 48px);
  background: rgba(10, 10, 11, 0.72);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.01em;
}
.brand__thin { color: var(--muted); font-weight: 500; }
.brand__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 10px var(--amber);
}
.topnav { display: flex; align-items: center; gap: 6px; }
.topnav a {
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  border-radius: var(--r-sm);
  transition: color 0.18s, background 0.18s;
}
.topnav a:hover { color: var(--ink); background: var(--surface-2); }
.topnav__cta {
  color: var(--bg) !important;
  background: var(--amber);
  font-weight: 700 !important;
}
.topnav__cta:hover { background: var(--amber-d) !important; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: min(88vh, 760px);
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}
.bar {
  position: absolute;
  left: 0; right: 0;
  height: 8%;
  min-height: 34px;
  background: #000;
  z-index: 5;
}
.bar--top { top: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.04); }
.bar--bottom { bottom: 0; border-top: 1px solid rgba(255, 255, 255, 0.04); }
.hero__still {
  position: absolute;
  inset: -4% -6%;
  z-index: 1;
  background:
    radial-gradient(120% 90% at 70% 20%, rgba(255, 176, 32, 0.18), transparent 55%),
    linear-gradient(180deg, #16232b 0%, #0e161b 45%, #0a0d10 100%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.03) 0 2px, transparent 2px 9px);
  filter: saturate(1.05);
  animation: pan 28s ease-in-out infinite alternate;
}
@keyframes pan {
  from { transform: scale(1.08) translate3d(-1.5%, -1%, 0); }
  to   { transform: scale(1.14) translate3d(1.5%, 1%, 0); }
}
.hero__grain {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(90% 70% at 50% 60%, transparent 40%, rgba(0,0,0,0.55) 100%),
    linear-gradient(0deg, rgba(0,0,0,0.35), rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.25));
  mix-blend-mode: multiply;
}
.hero__inner {
  position: relative;
  z-index: 6;
  text-align: center;
  padding: 24px;
  max-width: 820px;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 20px;
}
.eyebrow__rec {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 10px var(--red);
  animation: rec 1.6s steps(1) infinite;
}
@keyframes rec { 50% { opacity: 0.25; } }
.hero h1 {
  font-size: clamp(52px, 12vw, 132px);
  font-weight: 800;
  letter-spacing: -0.04em;
  text-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.hero__logline {
  margin: 22px auto 30px;
  max-width: 46ch;
  font-size: clamp(15px, 2.4vw, 19px);
  color: rgba(244, 244, 246, 0.86);
}
.hero__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
}
.play {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 24px 13px 20px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: rgba(20, 20, 22, 0.6);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: transform 0.18s, border-color 0.18s, background 0.18s;
}
.play svg { color: var(--amber); transition: transform 0.18s; }
.play__ring {
  position: absolute;
  inset: -1px;
  border-radius: 999px;
  border: 1px solid var(--amber);
  opacity: 0;
  transform: scale(1);
}
.play:hover { transform: translateY(-2px); border-color: var(--amber); background: rgba(28,28,31,0.8); }
.play:hover svg { transform: scale(1.15); }
.play:active { transform: translateY(0); }
.play.is-playing .play__ring { animation: ripple 1.1s ease-out infinite; }
@keyframes ripple {
  0% { opacity: 0.5; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.35); }
}
.hero__meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
}
.hero__meta .tc { color: var(--ink); }
.dot { color: var(--line-2); }

/* ---------- laurels marquee ---------- */
.laurels {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
}
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track {
  display: flex;
  gap: 48px;
  list-style: none;
  margin: 0;
  padding: 22px 24px;
  width: max-content;
  animation: scroll-x 26s linear infinite;
}
.marquee.is-paused .marquee__track { animation-play-state: paused; }
@keyframes scroll-x { to { transform: translateX(-50%); } }
.laurel {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}
.laurel__leaf {
  color: var(--amber);
  font-size: 22px;
  transform: translateY(1px);
}
.laurel b { display: block; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.laurel small {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- shared section ---------- */
section { padding: clamp(56px, 8vw, 104px) clamp(16px, 4vw, 48px); }
.section-head { max-width: 760px; margin: 0 auto clamp(28px, 5vw, 48px); }
.section-head__kicker {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--amber);
  margin-bottom: 14px;
}
.section-head h2 { font-size: clamp(28px, 5vw, 46px); font-weight: 800; }
.section-head p { margin-top: 12px; color: var(--muted); font-size: 15px; }

/* ---------- synopsis ---------- */
.synopsis {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(24px, 5vw, 56px);
  max-width: 1000px;
  margin: 0 auto;
  align-items: start;
}
.synopsis__mark {
  font-family: var(--mono);
  font-size: clamp(48px, 9vw, 96px);
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 1px var(--line-2);
  line-height: 0.8;
}
.synopsis__body h2 { font-size: clamp(26px, 4.5vw, 40px); margin-bottom: 20px; }
.lede { font-size: clamp(16px, 2.4vw, 20px); color: rgba(244,244,246,0.9); max-width: 60ch; }
.lede em { color: var(--amber); font-style: italic; }
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 36px;
  border-top: 1px solid var(--line);
  padding-top: 28px;
}
.stat { display: flex; flex-direction: column; gap: 4px; }
.stat__n { font-size: clamp(26px, 4vw, 38px); font-weight: 700; color: var(--amber); }
.stat__l {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- stills grid ---------- */
.stills { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  max-width: 1120px;
  margin: 0 auto;
}
.still {
  position: relative;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  color: var(--ink);
  text-align: left;
  background: var(--surface-2);
  transition: transform 0.22s ease, border-color 0.22s;
}
.still__img {
  position: absolute; inset: 0;
  transition: transform 0.5s ease, filter 0.3s;
  filter: saturate(0.9) contrast(1.05);
}
.still:hover { transform: translateY(-4px); border-color: var(--line-2); }
.still:hover .still__img { transform: scale(1.07); filter: saturate(1.1) contrast(1.08); }
.still:focus-visible { border-color: var(--amber); }
.still__grad {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,0.72));
  z-index: 1;
}
.still__cap {
  position: absolute;
  left: 12px; bottom: 11px; right: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.still__cap b { font-size: 13px; font-weight: 600; }
.still__cap .tc {
  font-size: 11px;
  color: var(--amber);
  background: rgba(0,0,0,0.5);
  padding: 3px 7px;
  border-radius: var(--r-sm);
}
.still__badge {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 2;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(10,10,11,0.7);
  border: 1px solid var(--line-2);
  padding: 3px 8px;
  border-radius: 999px;
}

/* ---------- director ---------- */
.director {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
  max-width: 960px;
  margin: 0 auto;
}
.director__portrait {
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(255,176,32,0.22), transparent 55%),
    linear-gradient(160deg, #2a2118, #14100c 70%);
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.director__quote { margin: 0; position: relative; }
.quote-mark {
  position: absolute;
  top: -34px; left: -8px;
  font-size: 100px;
  line-height: 1;
  color: var(--line-2);
  font-family: Georgia, serif;
}
.director__quote p {
  font-size: clamp(18px, 3vw, 27px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.director__quote footer { margin-top: 22px; display: flex; flex-direction: column; gap: 3px; }
.director__name { font-weight: 700; font-size: 15px; }
.director__role { font-size: 12px; letter-spacing: 0.1em; color: var(--amber); text-transform: uppercase; }

/* ---------- booking ---------- */
.book {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 64px);
  max-width: 1080px;
  margin: 0 auto;
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(28px, 5vw, 56px) !important;
}
.book__copy h2 { font-size: clamp(26px, 4vw, 38px); margin: 4px 0 16px; }
.book__copy p { color: rgba(244,244,246,0.85); max-width: 42ch; }
.book__copy em { color: var(--amber); font-style: normal; }
.book__list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; }
.book__list li {
  position: relative;
  padding-left: 26px;
  font-size: 14px;
  color: var(--muted);
}
.book__list li::before {
  content: "▸";
  position: absolute;
  left: 4px;
  color: var(--amber);
}
.book__form { display: grid; gap: 16px; }
.field { display: grid; gap: 7px; }
.field label {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.field input, .field select {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.field input::placeholder { color: #55555c; }
.field input:focus, .field select:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(255,176,32,0.18);
}
.field input.invalid { border-color: var(--red); box-shadow: 0 0 0 3px rgba(255,77,77,0.18); }
.submit {
  margin-top: 4px;
  padding: 14px 20px;
  background: var(--amber);
  color: var(--bg);
  border: none;
  border-radius: var(--r-md);
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: transform 0.16s, background 0.18s;
}
.submit:hover { background: var(--amber-d); transform: translateY(-2px); }
.submit:active { transform: translateY(0); }
.book__fine { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ---------- footer ---------- */
.foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 28px clamp(16px, 4vw, 48px);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}
.foot__brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; color: var(--ink); }
.foot__links { display: flex; gap: 18px; }
.foot__links a:hover { color: var(--amber); }

/* ---------- lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(6px, 2vw, 24px);
  padding: clamp(12px, 4vw, 48px);
  background: rgba(4, 4, 5, 0.92);
  backdrop-filter: blur(8px);
  animation: fade 0.2s ease;
}
.lightbox[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.lightbox__stage {
  margin: 0;
  width: min(1000px, 100%);
  justify-self: center;
}
.lightbox__img {
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: var(--r-md);
  border: 1px solid var(--line-2);
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.lightbox__cap {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  font-size: 14px;
}
.lightbox__cap .tc { color: var(--amber); font-size: 13px; }
.lightbox__close {
  position: absolute;
  top: clamp(12px, 3vw, 28px);
  right: clamp(12px, 3vw, 28px);
}
.lightbox__close, .lightbox__nav {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: rgba(20,20,22,0.7);
  color: var(--ink);
  font-size: 22px;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, transform 0.18s;
}
.lightbox__close:hover, .lightbox__nav:hover {
  background: var(--amber);
  color: var(--bg);
  border-color: var(--amber);
}
.lightbox__nav:active { transform: scale(0.92); }

/* ---------- toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 20px);
  z-index: 400;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--amber);
  border-radius: var(--r-md);
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 18px 44px rgba(0,0,0,0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- responsive ---------- */
@media (max-width: 820px) {
  .synopsis { grid-template-columns: 1fr; }
  .synopsis__mark { display: none; }
  .director { grid-template-columns: 1fr; text-align: left; }
  .director__portrait { max-width: 180px; }
  .book { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
  .topnav a:not(.topnav__cta) { display: none; }
  .hero { min-height: 78vh; }
  .hero__actions { gap: 14px; }
  .hero__meta { width: 100%; justify-content: center; }
  .marquee__track { gap: 32px; padding: 18px; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .grid { grid-template-columns: 1fr; }
  .foot { flex-direction: column; align-items: flex-start; }
  .lightbox { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .lightbox__nav--prev { position: absolute; bottom: 18px; left: 18px; }
  .lightbox__nav--next { position: absolute; bottom: 18px; right: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  html { scroll-behavior: auto; }
}

(function () {
  "use strict";

  /* ---------- toast helper ---------- */
  var toastEl = document.getElementById("toast");
  var toastTimer;
  function toast(msg) {
    if (!toastEl) return;
    toastEl.textContent = msg;
    toastEl.classList.add("show");
    clearTimeout(toastTimer);
    toastTimer = setTimeout(function () {
      toastEl.classList.remove("show");
    }, 2800);
  }

  /* ---------- film stills data ---------- */
  var STILLS = [
    { title: "First light, Nazaré", tc: "00:04:11", tag: "Reel A", g: "linear-gradient(160deg,#1c2f3a,#0d1418)" },
    { title: "The mending nets", tc: "00:19:38", tag: "Reel A", g: "linear-gradient(160deg,#3a2a18,#160f08)" },
    { title: "High water", tc: "00:41:02", tag: "Reel B", g: "linear-gradient(160deg,#122430,#0a0f14)" },
    { title: "Ana at the wall", tc: "00:57:26", tag: "Reel B", g: "linear-gradient(160deg,#2c2622,#131010)" },
    { title: "The last harbour", tc: "01:12:49", tag: "Reel C", g: "linear-gradient(160deg,#1a2b2b,#0b1212)" },
    { title: "Storm coming in", tc: "01:29:03", tag: "Reel C", g: "linear-gradient(160deg,#26201a,#100c08)" },
    { title: "Empty chairs", tc: "01:38:57", tag: "Reel D", g: "linear-gradient(160deg,#1f2733,#0c1017)" },
    { title: "Coast at dusk", tc: "01:46:10", tag: "Reel D", g: "linear-gradient(160deg,#332419,#15100a)" }
  ];

  function stillBg(g) {
    return g + ",repeating-linear-gradient(115deg,rgba(255,255,255,0.03) 0 2px,transparent 2px 10px)";
  }

  /* ---------- build stills grid ---------- */
  var grid = document.getElementById("grid");
  STILLS.forEach(function (s, i) {
    var btn = document.createElement("button");
    btn.className = "still";
    btn.setAttribute("role", "listitem");
    btn.setAttribute("aria-label", "Open still: " + s.title + " at " + s.tc);
    btn.dataset.index = String(i);
    btn.innerHTML =
      '<div class="still__img" style="background:' + stillBg(s.g) + '"></div>' +
      '<span class="still__badge">' + s.tag + "</span>" +
      '<div class="still__grad"></div>' +
      '<div class="still__cap"><b>' + s.title + '</b><span class="tc">' + s.tc + "</span></div>";
    btn.addEventListener("click", function () {
      openLightbox(i);
    });
    grid.appendChild(btn);
  });

  /* ---------- lightbox ---------- */
  var lb = document.getElementById("lightbox");
  var lbImg = document.getElementById("lbImg");
  var lbCap = document.getElementById("lbCap");
  var lbTc = document.getElementById("lbTc");
  var current = 0;
  var lastFocus = null;

  function renderLightbox() {
    var s = STILLS[current];
    lbImg.style.background = stillBg(s.g);
    lbCap.textContent = s.title;
    lbTc.textContent = s.tc;
  }
  function openLightbox(i) {
    current = i;
    lastFocus = document.activeElement;
    renderLightbox();
    lb.hidden = false;
    document.body.style.overflow = "hidden";
    document.getElementById("lbClose").focus();
  }
  function closeLightbox() {
    lb.hidden = true;
    document.body.style.overflow = "";
    if (lastFocus && lastFocus.focus) lastFocus.focus();
  }
  function step(dir) {
    current = (current + dir + STILLS.length) % STILLS.length;
    renderLightbox();
  }
  document.getElementById("lbClose").addEventListener("click", closeLightbox);
  document.getElementById("lbPrev").addEventListener("click", function () { step(-1); });
  document.getElementById("lbNext").addEventListener("click", function () { step(1); });
  lb.addEventListener("click", function (e) {
    if (e.target === lb) closeLightbox();
  });
  document.addEventListener("keydown", function (e) {
    if (lb.hidden) return;
    if (e.key === "Escape") closeLightbox();
    else if (e.key === "ArrowLeft") step(-1);
    else if (e.key === "ArrowRight") step(1);
  });

  /* ---------- scroll scrubber ---------- */
  var fill = document.getElementById("scrubberFill");
  var bar = document.querySelector(".scrubber");
  function onScroll() {
    var h = document.documentElement.scrollHeight - window.innerHeight;
    var p = h > 0 ? Math.min(1, window.scrollY / h) : 0;
    fill.style.width = (p * 100).toFixed(2) + "%";
    bar.setAttribute("aria-valuenow", String(Math.round(p * 100)));
  }
  window.addEventListener("scroll", onScroll, { passive: true });
  onScroll();

  /* ---------- hero play toggle ---------- */
  var playBtn = document.getElementById("playBtn");
  var heroTc = document.getElementById("heroTc");
  var playing = false;
  var runtimeTimer;
  var elapsed = 0;
  function fmt(sec) {
    var h = Math.floor(sec / 3600);
    var m = Math.floor((sec % 3600) / 60);
    var s = Math.floor(sec % 60);
    function p(n) { return (n < 10 ? "0" : "") + n; }
    return p(h) + ":" + p(m) + ":" + p(s);
  }
  playBtn.addEventListener("click", function () {
    playing = !playing;
    playBtn.classList.toggle("is-playing", playing);
    var label = playBtn.querySelector(".play__label");
    if (playing) {
      label.textContent = "Playing trailer…";
      toast("▶ Trailer rolling — this is a static demo");
      runtimeTimer = setInterval(function () {
        elapsed += 1;
        heroTc.textContent = fmt(elapsed);
        if (elapsed >= 137) { // ~2:17 trailer
          playBtn.click();
        }
      }, 250);
    } else {
      label.textContent = "Watch trailer";
      clearInterval(runtimeTimer);
      elapsed = 0;
      heroTc.textContent = "01:47:22";
    }
  });

  /* ---------- pause marquee on hover/focus ---------- */
  var marquee = document.getElementById("marquee");
  // duplicate laurels so the -50% loop is seamless
  var track = marquee.querySelector(".marquee__track");
  track.innerHTML += track.innerHTML;
  ["mouseenter", "focusin"].forEach(function (ev) {
    marquee.addEventListener(ev, function () { marquee.classList.add("is-paused"); });
  });
  ["mouseleave", "focusout"].forEach(function (ev) {
    marquee.addEventListener(ev, function () { marquee.classList.remove("is-paused"); });
  });

  /* ---------- booking form ---------- */
  var form = document.getElementById("bookForm");
  form.addEventListener("submit", function (e) {
    e.preventDefault();
    var venue = form.venue;
    var email = form.email;
    var ok = true;
    [venue, email].forEach(function (f) { f.classList.remove("invalid"); });
    if (!venue.value.trim()) { venue.classList.add("invalid"); ok = false; }
    var emailOk = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.value.trim());
    if (!emailOk) { email.classList.add("invalid"); ok = false; }
    if (!ok) {
      toast("Please add a venue and a valid email.");
      (venue.classList.contains("invalid") ? venue : email).focus();
      return;
    }
    toast("Thanks — booking request sent for " + venue.value.trim() + " ✓");
    form.reset();
  });

  /* ---------- smooth anchor focus for a11y ---------- */
  document.querySelectorAll('a[href^="#"]').forEach(function (a) {
    a.addEventListener("click", function (e) {
      var id = a.getAttribute("href").slice(1);
      var target = document.getElementById(id);
      if (target) {
        e.preventDefault();
        target.scrollIntoView({ behavior: "smooth", block: "start" });
        target.setAttribute("tabindex", "-1");
        setTimeout(function () { target.focus({ preventScroll: true }); }, 400);
      }
    });
  });
})();

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>The Long Coast — A Documentary Film</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link
    href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap"
    rel="stylesheet"
  />
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="scrubber" role="progressbar" aria-label="Reading progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
    <span class="scrubber__fill" id="scrubberFill"></span>
  </div>

  <header class="topbar">
    <a class="brand" href="#top">
      <span class="brand__dot" aria-hidden="true"></span>
      Rincón <span class="brand__thin">Films</span>
    </a>
    <nav class="topnav" aria-label="Primary">
      <a href="#synopsis">Synopsis</a>
      <a href="#stills">Stills</a>
      <a href="#director">Director</a>
      <a class="topnav__cta" href="#book">Book a screening</a>
    </nav>
  </header>

  <main id="top">
    <!-- HERO -->
    <section class="hero" aria-labelledby="hero-title">
      <div class="bar bar--top" aria-hidden="true"></div>
      <div class="hero__still" id="heroStill" aria-hidden="true"></div>
      <div class="hero__grain" aria-hidden="true"></div>
      <div class="hero__inner">
        <p class="eyebrow"><span class="eyebrow__rec" aria-hidden="true"></span> Official Selection · 2026</p>
        <h1 id="hero-title">The Long<br />Coast</h1>
        <p class="hero__logline">
          A year on a vanishing shoreline, told through the fishermen who refuse to leave it.
        </p>
        <div class="hero__actions">
          <button class="play" id="playBtn" aria-label="Play trailer for The Long Coast">
            <span class="play__ring" aria-hidden="true"></span>
            <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"><path d="M8 5v14l11-7z" fill="currentColor"/></svg>
            <span class="play__label">Watch trailer</span>
          </button>
          <span class="hero__meta">
            <span class="tc" id="heroTc">01:47:22</span>
            <span class="dot" aria-hidden="true">·</span>
            <span>Feature · Coastal Portugal</span>
          </span>
        </div>
      </div>
      <div class="bar bar--bottom" aria-hidden="true"></div>
    </section>

    <!-- LAURELS -->
    <section class="laurels" aria-label="Festival selections">
      <div class="marquee" id="marquee">
        <ul class="marquee__track">
          <li class="laurel"><span class="laurel__leaf" aria-hidden="true">❦</span><span><b>Sundance</b><small>Official Selection</small></span></li>
          <li class="laurel"><span class="laurel__leaf" aria-hidden="true">❦</span><span><b>Tribeca</b><small>Best Documentary</small></span></li>
          <li class="laurel"><span class="laurel__leaf" aria-hidden="true">❦</span><span><b>Sheffield DocFest</b><small>Grand Jury</small></span></li>
          <li class="laurel"><span class="laurel__leaf" aria-hidden="true">❦</span><span><b>IDFA</b><small>Audience Award</small></span></li>
          <li class="laurel"><span class="laurel__leaf" aria-hidden="true">❦</span><span><b>Hot Docs</b><small>Special Mention</small></span></li>
          <li class="laurel"><span class="laurel__leaf" aria-hidden="true">❦</span><span><b>Camden</b><small>Nominee</small></span></li>
        </ul>
      </div>
    </section>

    <!-- SYNOPSIS -->
    <section class="synopsis" id="synopsis" aria-labelledby="syn-title">
      <div class="synopsis__mark">01</div>
      <div class="synopsis__body">
        <h2 id="syn-title">The film</h2>
        <p class="lede">
          On a strip of Atlantic coast that loses two metres of land a year, four families
          haul the same nets their grandparents did. <em>The Long Coast</em> follows a single
          tide-turn of seasons as the water advances and a way of life negotiates its own ending.
        </p>
        <div class="stats">
          <div class="stat"><span class="stat__n tc">107</span><span class="stat__l">Minutes</span></div>
          <div class="stat"><span class="stat__n tc">4</span><span class="stat__l">Families</span></div>
          <div class="stat"><span class="stat__n tc">18</span><span class="stat__l">Months filming</span></div>
          <div class="stat"><span class="stat__n tc">6</span><span class="stat__l">Festival awards</span></div>
        </div>
      </div>
    </section>

    <!-- STILLS -->
    <section class="stills" id="stills" aria-labelledby="stills-title">
      <div class="section-head">
        <span class="section-head__kicker tc">// 02 — Stills</span>
        <h2 id="stills-title">From the reel</h2>
        <p>Selected frames. Click any still to open the viewer.</p>
      </div>
      <div class="grid" id="grid" role="list">
        <!-- populated by script.js -->
      </div>
    </section>

    <!-- DIRECTOR -->
    <section class="director" id="director" aria-labelledby="dir-title">
      <div class="director__portrait" aria-hidden="true"></div>
      <blockquote class="director__quote">
        <span class="quote-mark" aria-hidden="true">“</span>
        <p id="dir-title">
          I wanted the camera to wait. Not to explain the coast, but to sit with it long
          enough that you feel the water arriving. Patience is the only honest way to film loss.
        </p>
        <footer>
          <span class="director__name">Marina Vaz</span>
          <span class="director__role tc">Director · Cinematographer</span>
        </footer>
      </blockquote>
    </section>

    <!-- BOOKING CTA -->
    <section class="book" id="book" aria-labelledby="book-title">
      <div class="book__copy">
        <span class="section-head__kicker tc">// 03 — Screenings</span>
        <h2 id="book-title">Bring the film to your room</h2>
        <p>
          We license <em>The Long Coast</em> for cinemas, universities, and community screenings
          worldwide, with optional director Q&amp;A. Tell us about your venue.
        </p>
        <ul class="book__list">
          <li>DCP, ProRes &amp; streaming masters</li>
          <li>Subtitles in 9 languages</li>
          <li>Press kit &amp; poster artwork included</li>
        </ul>
      </div>
      <form class="book__form" id="bookForm" novalidate>
        <div class="field">
          <label for="venue">Venue / organisation</label>
          <input id="venue" name="venue" type="text" placeholder="e.g. Rialto Cinema" required />
        </div>
        <div class="field">
          <label for="email">Contact email</label>
          <input id="email" name="email" type="email" placeholder="[email protected]" required />
        </div>
        <div class="field">
          <label for="format">Preferred format</label>
          <select id="format" name="format">
            <option>DCP (cinema)</option>
            <option>ProRes file</option>
            <option>Secure streaming link</option>
          </select>
        </div>
        <button class="submit" type="submit">Request a booking</button>
        <p class="book__fine">We reply within two working days. No spam, ever.</p>
      </form>
    </section>
  </main>

  <footer class="foot">
    <div class="foot__brand">
      <span class="brand__dot" aria-hidden="true"></span>
      Rincón <span class="brand__thin">Films</span> — © 2026
    </div>
    <div class="foot__links">
      <a href="#top">Back to top</a>
      <a href="#synopsis">Synopsis</a>
      <a href="#book">Screenings</a>
    </div>
  </footer>

  <!-- LIGHTBOX -->
  <div class="lightbox" id="lightbox" role="dialog" aria-modal="true" aria-label="Film still viewer" hidden>
    <button class="lightbox__close" id="lbClose" aria-label="Close viewer">✕</button>
    <button class="lightbox__nav lightbox__nav--prev" id="lbPrev" aria-label="Previous still">‹</button>
    <figure class="lightbox__stage">
      <div class="lightbox__img" id="lbImg"></div>
      <figcaption class="lightbox__cap">
        <span class="tc" id="lbTc">00:00:00</span>
        <span id="lbCap">Still</span>
      </figcaption>
    </figure>
    <button class="lightbox__nav lightbox__nav--next" id="lbNext" aria-label="Next still">›</button>
  </div>

  <div class="toast" id="toast" role="status" aria-live="polite"></div>

  <script src="script.js"></script>
</body>
</html>