/**
 * Homepage nav: always transparent.
 *
 * The built global CSS contains unscoped `.nav{...!important}` rules that
 * paint a white+blur backdrop, plus a `.nav.scrolled` state that does the
 * same when the user scrolls. Both would break the homepage's design
 * where the nav is meant to float over the dark hero video. Override
 * here — scoped to the homepage body class — so the nav stays fully
 * transparent at rest AND after scroll.
 */

/* At the very top of the hero (not scrolled yet): fully transparent —
   no background, no gradient, no blur, no edge of any kind. The nav
   just floats over the video. */
body.is-home .nav:not(.scrolled),
body.home .nav:not(.scrolled) {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}

/* Transparent-state text: white with a slightly stronger drop-shadow
   (since the gradient no longer backs it up) for legibility over
   bright clouds / sky frames of the hero video. Constrained to
   `:not(.scrolled)` so the scrolled state can fall through to the
   global `.nav.scrolled .nav-links a` rule which paints it dark on
   the white/blur backdrop. */
body.is-home .nav:not(.scrolled) .nav-links a,
body.is-home .nav:not(.scrolled) .mega-trigger,
body.home .nav:not(.scrolled) .nav-links a,
body.home .nav:not(.scrolled) .mega-trigger {
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 0 1px rgba(0, 0, 0, 0.4);
}