/* ==========================================================================
   Full-screen reels, floating nav, no nav underline. Began as an experiment
   (0.55.0), the main layout since 0.56.0 (2026-09-24). See
   inc/hero-experiment.php for the brief and how to switch it off.
   Loaded after every other sheet, so plain specificity wins; the few
   !importants below beat the synced sheet's own nav states, which script.js
   swaps on scroll (.nav--scrolled-dark) and which would repaint the bar.
   ========================================================================== */

/* 1. NO CHARTREUSE LINES ON THE NAV — every page. The main items keep their
      grey-to-white hover and active colour; only the rule under them goes.
      (The dropdown items' side edges are the sub-menu's, not the bar's, and
      stay — kill them too with `.nav-dropdown .sub-nav-link { border-left-
      color: transparent !important; }` if that is what was meant.) */
.site-nav .nav-link::after {
  display: none !important;
}

/* 2. THE REEL FILLS THE VIEWPORT. svh so a phone's collapsing toolbar does
      not leave the bottom of the reel under it; vh for browsers without it.
      object-fit: cover (already on both) does the cropping, so every screen
      shape crops a different slice of the 16:9 master — on a portrait phone
      that is roughly the middle third of the frame. The nav clearance goes:
      nothing sits over the reel now. */
.rfn-hero-full .ent-reel,
.rfn-hero-full .brand-reel {
  padding-top: 0;
}

.rfn-hero-full .ent-reel-video,
.rfn-hero-full .brand-reel-video {
  height: 100vh;
  height: 100svh;
}

/* The Brands placeholder was centred in the reel below the nav's height. */
.rfn-hero-full .brand-reel-pending {
  top: 50%;
}

/* 3. THE NAV FLOATS — no bar, border, blur or shadow, in any scroll state. */
.rfn-hero-full .site-nav,
.rfn-hero-full .site-nav.nav--dark,
.rfn-hero-full .site-nav.nav--scrolled-dark {
  background: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

/* A TOP VIGNETTE behind the floating nav (0.55.1, Kay: "add a top gradient
   vignette below the logo/nav once that appears so it's easier to see").
   Darkened twice on request: 0.8 / 0.55 / 0.2 → 0.9 / 0.68 / 0.3 (0.55.2)
   → 0.95 / 0.78 / 0.4 (0.55.5). A gradient, not a bar: black at the top edge fading to nothing about two
   nav-heights down, with an eased middle stop so it has no visible bottom
   edge. It is a pseudo-element of the nav, so it fades in and out with it —
   hidden over the reel, there once the nav appears. z-index -1 inside the
   nav's own stacking context puts it behind the logo and links but above the
   page; the dropdown panels (z-index 1001) stay on top of it. */
.rfn-hero-full .site-nav::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--nav-height) * 2.25);
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.95) 0%,
    rgba(0, 0, 0, 0.78) 40%,
    rgba(0, 0, 0, 0.4) 72%,
    rgba(0, 0, 0, 0) 100%
  );
}

/* With no bar behind it the nav sits straight on artwork and copy, so it
   also carries a soft shadow of its own to stay legible. Not a bar — delete these
   two rules to see it bare. */
.rfn-hero-full .site-nav .nav-link:not(.nav-cta) {
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.75);
}

.rfn-hero-full .site-nav .nav-logo-img,
.rfn-hero-full .site-nav .nav-hamburger {
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.6));
}

/* 4. …AND IS OUT OF SIGHT UNTIL THE PAGE SCROLLS.
      hero-experiment.js sets .rfn-nav-revealed on the first scroll and
      clears it back at the very top — since 0.55.5 (Kay: "show it as soon as
      the page scrolls, don't wait until the video has passed"); it used to
      wait for the reel's bottom edge to pass the top of the viewport.
      Opacity + pointer-events rather than visibility:hidden, so a keyboard
      user tabbing in still reaches the nav — :focus-within brings it back. */
.rfn-hero-full:not(.rfn-nav-revealed) .site-nav:not(:focus-within) {
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
}