/* ════════════════════════════════════════════════════════════════════════
   nav.css — site header (sticky glass), navigation, language toggle.
   The .site-header is the trickiest piece of UI on the site — see
   "Windshield Solarband Glass" comment block below.
   ════════════════════════════════════════════════════════════════════════ */

/* ==========================================
   SITE HEADER — Windshield Solarband Glass
   Single backdrop-filter layer on ::before with mask-image to vary
   blur density top-to-bottom (DENSE top, clear bottom). No multi-
   layer compositing seams — the mask does what stacked pseudos
   were trying to do, but cleanly.
   ========================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 2000;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "brand . navtoggle lang";
  align-items: center;
  gap: 12px;
  padding: 14px var(--pad-x);
  /* Baseline tint so the navbar never goes fully transparent — keeps
     a touch of dark even at the bottom edge. The ::before solarband
     sits on top and ramps from dense top to this baseline at bottom. */
  background: rgba(11, 11, 13, 0.10);
  isolation: isolate;
  overflow: hidden;
  border-bottom: none;
  transition: padding 220ms ease;
}

/* v3.15.3: on mobile the hamburger → X rotation needs the header to
   not clip the rotated bars. The glass pseudo-element is inset:0 so
   overflow:visible is safe. Desktop keeps overflow:hidden. */
@media (max-width: 899px) {
  .site-header {
    overflow: visible;
  }
}

/* Background overlay — handles the solarband color & glass blur.
   Single layer; the mask-image modulates where the backdrop-filter
   actually applies (FULL at top → weaker toward 60% down). */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  /* Smooth Solarband Gradient Curve (inverted):
     0%–15%   : Dark solarband (92–75% opacity)
     15%–75%  : Translucent fade (48–22% opacity)
     75%–100% : Crystal clear (4–0% opacity) */
  background: linear-gradient(
    to bottom,
    rgba(11, 11, 13, 0.92) 0%,
    rgba(11, 11, 13, 0.75) 15%,
    rgba(11, 11, 13, 0.48) 35%,
    rgba(11, 11, 13, 0.22) 65%,
    rgba(11, 11, 13, 0.04) 85%,
    rgba(11, 11, 13, 0)    100%
  );

  /* Single glass blur layer — avoids multi-layer edge artifacts.
     Mask makes the blur FULL at top, weaker toward the bottom
     (the navbar reads as a dark solarband at the very top, fading
     to a clear edge where it meets the page). */
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);

  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1)   0%,
    rgba(0, 0, 0, 0.3) 60%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1)   0%,
    rgba(0, 0, 0, 0.3) 60%
  );

  transition: background 220ms ease, backdrop-filter 220ms ease,
              -webkit-mask-image 220ms ease, mask-image 220ms ease;
}

/* Single-layer architecture: hide ::after so it can't render. */
.site-header::after {
  display: none;
}

/* ==========================================
   SCROLLED STATE — JS adds .is-scrolled once window.scrollY > 4.
   Slightly higher density when page content scrolls underneath.
   ========================================== */
.site-header.is-scrolled {
  background: rgba(11, 11, 13, 0.18);
  padding-top: 10px;
  padding-bottom: 10px;
}

.site-header.is-scrolled::before {
  background: linear-gradient(
    to bottom,
    rgba(11, 11, 13, 0.98) 0%,
    rgba(11, 11, 13, 0.78) 25%,
    rgba(11, 11, 13, 0.45) 60%,
    rgba(11, 11, 13, 0.15) 85%,
    rgba(11, 11, 13, 0.05) 100%
  );

  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
}

/* While the mobile nav is open, lift the header above the overlay
   so the brand and lang toggle stay visible. overflow: visible
   keeps the rotated X arms inside the hamburger from being clipped
   by the header's overflow:hidden. */
.site-header:has(+ .nav-mobile.is-open) {
  z-index: 2010;
  background: var(--c-bg);
  overflow: visible;
}

/* Brand block */
.brand {
  grid-area: brand;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 16px;
  white-space: nowrap;
  /* Subtle dark text-shadow keeps the brand legible when scrolling over
     bright content (e.g. bright poster gradients, light-bg sections).
     0 1px 2px = a soft drop shadow; matches the cinematic vibe without
     looking like an outline. */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

/* ──────────────── Desktop nav ──────────────── */

.nav-desktop {
  display: none;
}

.nav-desktop a {
  padding: 0;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-fg-dim);
  border: none;
  background: none;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  /* Subtle text-shadow keeps nav links readable when the user scrolls
     and bright content (poster gradients, light-bg sections) passes
     under the header. Soft drop shadow, no outline. */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  transition: color 160ms ease, text-shadow 160ms ease;
}

.nav-desktop a:hover,
.nav-desktop a:focus-visible {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
}

/* ──────────────── Mobile nav overlay ────────────────
   Pattern: hidden by default. When .is-open is added by JS, the
   nav becomes a fullscreen overlay (fixed, 100vw x 100vh), positioned
   at top:0 so it covers the entire viewport including under the header.
   The header sits ABOVE this overlay (z-index 110 > 100), so brand +
   lang toggle + X (hamburger) remain visible.
   The overlay itself is flex-column with: top row (brand-area, sits under
   the header at top:64px), middle (centered big links), bottom (CTA).
   The nav element is OUT of the header grid (no grid-area) so it doesn't
   affect the header layout at all when hidden. */

.nav-mobile {
  /* Hidden default — but use visibility:hidden + opacity:0 + pointer-events:none
     so we can animate cleanly without a layout shift. */
  position: fixed;
  inset: 0;
  /* Force full viewport height including on iOS Safari where 100vh is unreliable. */
  min-height: 100vh;
  min-height: 100dvh;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
  isolation: isolate;
  padding: 80px var(--pad-x) 24px; /* top padding leaves room for the sticky header */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  /* Animation: fast fade + tiny scale. Total ~180ms — feels responsive. */
  opacity: 0;
  visibility: hidden;
  transform: scale(1.02);
  transition: opacity 0.18s ease, visibility 0s linear 0.18s, transform 0.18s ease;
  pointer-events: none;
}

.nav-mobile.is-open {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition: opacity 0.18s ease, visibility 0s linear 0s, transform 0.18s ease;
  pointer-events: auto;
}

.nav-mobile a {
  display: block;
  padding: 18px 8px;
  font-family: var(--font-display);
  font-size: clamp(28px, 8vw, 40px);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  border-bottom: 1px solid var(--c-border);
  /* Stagger animation: each link slides in slightly after the previous one.
     Inline style on each link sets --i; CSS uses it for delay. */
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.22s ease var(--i, 0s), transform 0.22s ease var(--i, 0s);
}

.nav-mobile.is-open a {
  opacity: 1;
  transform: translateY(0);
}

/* When nav is closed, reverse the stagger timing so links slide out */
.nav-mobile:not(.is-open) a {
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.nav-mobile a:hover, .nav-mobile a:focus-visible {
  color: var(--c-accent);
}

/* CTA pinned to bottom of the fullscreen menu */
.nav-mobile .btn {
  width: 100%;
  max-width: 360px;
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Animated similarly to links but slightly later */
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.22s ease 0.24s, transform 0.22s ease 0.24s, background 0.18s ease, color 0.18s ease;
}

.nav-mobile.is-open .btn {
  opacity: 1;
  transform: translateY(0);
}

.nav-mobile:not(.is-open) .btn {
  transition: opacity 0.12s ease, transform 0.12s ease;
}

/* ──────────────── hamburger button — visible only on mobile ──────────────── */
.nav-toggle {
  grid-area: navtoggle;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  position: relative;
  z-index: 2020;
  overflow: visible;
  /* Small right margin keeps the icon from touching the
     viewport edge on phones with tight gutters. */
  margin-right: 4px;
}

/* v3.15.3: SVG icons for menu and close. Replaces the previous
   CSS-only bars because rotated bars were being clipped on mobile
   Safari/Chrome. SVG lines render cleanly and can be resized via
   the SVG width/height attributes. */
.nav-toggle .nav-icon {
  display: block;
  width: 24px;
  height: 24px;
  color: currentColor;
}

.nav-toggle .icon-close {
  display: none;
}

.nav-toggle[aria-expanded="true"] .icon-menu {
  display: none;
}

.nav-toggle[aria-expanded="true"] .icon-close {
  display: block;
}

/* ──────────────── Language toggle (EN · ES) — always visible ──────────────── */
.lang-toggle {
  grid-area: lang;
  display: inline-flex;
  border: 1px solid color-mix(in srgb, #fff 18%, transparent);
  border-radius: 999px;
  padding: 2px;
  font-size: 12px;
  font-weight: 700;
  background: color-mix(in srgb, #000 18%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.lang-toggle button {
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--c-fg-dim);
  min-width: 36px;
  min-height: 32px;
  letter-spacing: 0;
}

.lang-toggle button[aria-pressed="true"] {
  background: var(--c-accent);
  color: var(--c-bg);
}

.lang-toggle button[aria-pressed="false"]:hover {
  color: var(--c-fg);
}

/* ──────────────── Desktop layout ──────────────── */
@media (min-width: 900px) {
  /* Re-show the desktop nav. Hide the hamburger. */
  .site-header {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "brand nav lang";
    padding: 18px 32px;
    gap: 20px;
  }

  .nav-desktop {
    display: flex;
    flex-direction: row;
    gap: 24px;
    grid-area: nav;
    justify-content: center;
    align-items: center;
  }

  /* Mobile nav (fullscreen overlay) — hide entirely on desktop */
  .nav-mobile {
    display: none;
  }

  .nav-toggle {
    display: none;
  }

  .lang-toggle {
    grid-area: lang;
  }
}