/* ========================================
   Z-INDEX SCALE — single source of truth
   Keep every stacking value ≤ 9999. Edit here, not in component files.
   Order (low → high):
     fade < progress < player < explore-footer < modal < navbar
     < drag-hint < drawer-overlay < drawer < loader
   ======================================== */
:root {
  --z-fade: 9000;            /* content fade strips under bars */
  --z-progress: 9100;       /* scroll / drag progress bars */
  --z-player: 9200;         /* music player + reader/config controls */
  --z-explore-footer: 9300; /* mobile explore button (resting) */
  --z-modal: 9500;          /* intro / unified modal overlays */
  --z-navbar: 9600;         /* top navbar; footer raised over a modal */
  --z-drag-hint: 9650;      /* exhibit drag hint (above navbar blur) */
  --z-drawer-overlay: 9800; /* mobile explore drawer backdrop */
  --z-drawer: 9900;         /* mobile explore drawer panel (top UI) */
  --z-loader: 9990;         /* full-screen page loader */
  --z-orient-lock: 9999;    /* "rotate to portrait" lock — above everything */
}

/* ========================================
   PORTRAIT-ONLY LOCK (phones)
   Blocks landscape on small screens with a rotate prompt.
   ======================================== */
.orientation-lock {
  display: none;
}

/* Touch devices only (pointer: coarse) — never desktop/web, even if the
   browser window is short and wide. */
@media (orientation: landscape) and (max-height: 600px) and (pointer: coarse) {
  .orientation-lock {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: var(--z-orient-lock);
    background: #202020;
    color: #f6f6f6;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    text-align: center;
    padding: 24px;
  }

  .orientation-lock svg {
    width: 38px;
    height: 38px;
    opacity: 0.85;
  }

  .orientation-lock p {
    margin: 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.6;
    color: rgba(246, 246, 246, 0.85);
    max-width: 260px;
  }
}

/* ========================================
   TOP NAVBAR - Shared Component
   ======================================== */

.top-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  gap: 24px;
  z-index: var(--z-navbar);
  background: transparent;
  /* Always visible — no scroll-based hiding. Background handled by the
     progressive-blur layers below. */
}

/* ========================================
   PROGRESSIVE BLUR
   ======================================== */
.navbar-blur {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* Extends below the bar so content focuses in gradually as it scrolls out. */
  height: calc(100% + 48px);
  z-index: 0;
  pointer-events: none;
}

/* Keep the logo / links / exit above the blur layers. */
.top-navbar > :not(.navbar-blur) {
  position: relative;
  z-index: 1;
}

.navbar-blur-layer {
  position: absolute;
  inset: 0;
}

/* Each layer blurs harder and is masked to a band nearer the top, so the
   cumulative blur ramps strong → clear from top to bottom. */
.navbar-blur-layer:nth-child(1) {
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 80%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 80%, transparent 100%);
}
.navbar-blur-layer:nth-child(2) {
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 78%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 78%);
}
.navbar-blur-layer:nth-child(3) {
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 30%, transparent 58%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 30%, transparent 58%);
}
.navbar-blur-layer:nth-child(4) {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 38%);
          mask-image: linear-gradient(to bottom, #000 0%, transparent 38%);
}

/* Site-gray tint that fades out below the bar. */
.navbar-blur-tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(32, 32, 32, 0.75) 0%,
    rgba(32, 32, 32, 0.55) 55%,
    rgba(32, 32, 32, 0) 100%
  );
}

.navbar-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Center navigation links */
.navbar-links {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.navbar-link {
  font-family: 'early-sans-variable', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 100%;
  letter-spacing: 0;
  text-align: center;
  color: #f6f6f6;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.57;
  transition: opacity 0.2s ease;
}

.navbar-link:hover,
.navbar-link.active {
  opacity: 1;
}

.navbar-logo img {
  width: 126px;
  height: 55px;
}

.navbar-exit {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  font-family: 'Archivo', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0%;
  text-transform: uppercase;
  color: #f6f6f6;
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.navbar-exit:hover {
  opacity: 1;
}

.navbar-exit svg {
  width: 16px;
  height: 16px;
}

/* ========================================
   RESPONSIVE - SMALL DESKTOP / TABLET
   ======================================== */
@media (max-width: 1024px) {
  .navbar-links {
    gap: 24px;
  }

  .navbar-link {
    font-size: 13px;
  }
}

/* ========================================
   RESPONSIVE - TABLET
   ======================================== */
@media (max-width: 768px) {
  .top-navbar {
    padding: 16px;
  }

  /* Mobile keeps logo + exit only; the bottom explore drawer handles nav. */
  .navbar-links {
    display: none;
  }

  /* Shorter blur reach on mobile so page-top UI (e.g. posters back arrow)
     clears it sooner. */
  .navbar-blur {
    height: calc(100% + 16px);
  }

  .navbar-logo img {
    width: 100px;
    height: 44px;
  }

  .navbar-exit {
    font-size: 12px;
  }
}

/* ========================================
   RESPONSIVE - MOBILE
   ======================================== */
@media (max-width: 480px) {
  .top-navbar {
    padding: 12px;
  }

  .navbar-logo img {
    width: 100px;
    height: 44px;
  }

  .navbar-exit {
    font-size: 11px;
    gap: 6px;
  }

  .navbar-exit svg {
    width: 14px;
    height: 14px;
  }
}