/* Frontrow — scroll-driven hero (Home only).
   Layout model: <section id="top" class="fr-track"> is a tall scroll track; .fr-stage is pinned (sticky)
   inside it while the visitor scrubs through clips A→E, then it unpins and the page continues. */

:root {
  --fr-bg: #131415;              /* page background — the hero fades into this on exit */
  --fr-u: max(100vh, 620px);     /* one "screen" of scroll = one clip (matches the old hero's min-height) */
  --fr-clips: 5;                 /* clips A–E, one screen of scroll each */
  --fr-face: 0;                  /* extra scroll (in screens) for the mobile-only face step */
  --fr-hold: 0.4;                /* screens the finished frame is held while the exit gradient rises */
  --fr-ease: cubic-bezier(.22, .61, .36, 1);
  --fr-hint: rgba(175, 186, 172, 0.7);
}
@supports (height: 100svh) {
  /* svh = the *small* viewport, so the stage never resizes when a phone's URL bar hides/shows */
  :root { --fr-u: max(100svh, 620px); }
}
@media (max-width: 767px) {
  :root { --fr-face: 0.4; }      /* ~40vh: slice eases onto the black sheep's face */
}

/* ── scroll lock while the intro plays ──
   scrollbar-gutter keeps the layout width identical so nothing shifts when the lock toggles. */
html.fr-lock { overflow: hidden; scrollbar-gutter: stable; }
html.fr-lock body { overflow: hidden; touch-action: none; overscroll-behavior: none; }

/* ── lock the page to vertical-only touch scrolling, always ──
   The hero video is never wider than the stage (object-fit: cover crops it, in CSS below — no JS transform
   moves it sideways), so there's nothing here for a scroll gesture to slide sideways. This lock is still kept
   as a defensive backstop against the browser's own horizontal rubber-band/pan triggering on an off-vertical
   swipe. `overflow-x: clip` further up in the page isn't enough on its own (unreliable on older Safari).
   Only ever on <body>, never <html>: giving <html> itself any non-"visible" overflow value takes it out of
   the special browser quirk where the document scrolls the viewport on body's behalf, and turns <html> into
   its OWN scroll container capped at the viewport's height — silently breaking the whole page's scroll
   (everything past one screen becomes unreachable). body is safe; it stays a normal in-flow element. */
body { overflow-x: hidden; overscroll-behavior-x: none; touch-action: pan-y; }

.fr-track {
  position: relative;
  width: 100%;
  height: calc(var(--fr-u) * (1 + var(--fr-clips) + var(--fr-face) + var(--fr-hold)));
  /* no overflow here: overflow:hidden on a sticky parent would stop the pin working */
  touch-action: pan-y; /* belt-and-braces, same reasoning as body above */
}
.fr-stage {
  position: sticky;
  top: 0;
  width: 100%;
  height: var(--fr-u);
  overflow: hidden;
  touch-action: pan-y;
  background: radial-gradient(120% 90% at 50% 20%, #24262A 0%, #131415 70%);
}

/* ── scrubbed layers (stills + videos), stacked inside .fr-scrub ──
   .fr-scrub-inner is always exactly the stage's own size — never wider — so object-fit: cover below does
   all the cropping natively, with zero JS-driven movement of any kind, at any scroll speed or angle: its
   transform is set once (to 'none') and never touched again, so no will-change hint is needed here — that
   would only ask iOS to keep an extra composited layer alive for an animation that never happens. */
.fr-scrub { position: absolute; inset: 0; overflow: hidden; opacity: 0; pointer-events: none; }
.fr-scrub-inner { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.fr-scrub-inner .fr-media {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
.fr-scrub-inner .fr-vid { opacity: 0; }
.fr-scrub-inner .fr-img { opacity: 0; }
/* Default object-position (50% 50%, i.e. dead centre) is used deliberately — a single scene has to work for
   every moment of the story (barn interior, the chase, the sheep's face…), and centre is the only crop that
   never looks arbitrarily off for any of them. No mobile override here on purpose. */

/* ── hero copy: fades out on the first scroll input, back in when returning to the top ── */
.fr-scrolled .fr-herotext {
  opacity: 0 !important;
  transform: translateY(-14px) !important;
  pointer-events: none;
  transition-duration: 0.45s !important;
}
.fr-hint { transition: opacity 0.4s ease; }
.fr-scrolled .fr-hint { opacity: 0; }

/* ── UI layer: skip link, loading state, exit gradient ── */
.fr-ui { position: absolute; inset: 0; pointer-events: none; }
.fr-exit {
  position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(180deg, rgba(19,20,21,0) 42%, var(--fr-bg) 100%);
}

.fr-skip {
  position: absolute; left: 50%; bottom: 24px; z-index: 3;
  transform: translateX(-50%);
  padding: 10px 14px;
  border: 0; background: none; cursor: pointer; pointer-events: auto;
  font: 600 11px/1 inherit; font-family: inherit;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(175, 186, 172, 0.85);
  border-bottom: 1px solid rgba(175, 186, 172, 0.35);
  opacity: 0; transition: opacity 0.6s ease 0.4s, color 0.2s ease;
  -webkit-tap-highlight-color: transparent; /* iOS: no grey flash over a video background when tapped */
}
.fr-skip.is-on { opacity: 1; }
.fr-skip:hover, .fr-skip:focus-visible { color: #FDF8F0; outline: none; border-bottom-color: #FDF8F0; }

.fr-load {
  position: absolute; left: 50%; bottom: 24px; z-index: 3; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--fr-hint);
  opacity: 0; transition: opacity 0.35s ease;
}
.fr-load.is-on { opacity: 1; }
.fr-load i { display: block; width: 92px; height: 1px; background: rgba(175, 186, 172, 0.25); position: relative; overflow: hidden; }
.fr-load i b { position: absolute; inset: 0; background: #F9ECD9; transform-origin: 0 0; transform: scaleX(var(--fr-load, 0)); }

@media (max-width: 767px) {
  .fr-skip, .fr-load { bottom: max(24px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .fr-skip { display: none; }
}