/* ── Design tokens (shared across all pages) ──
   Fluid values: 1920px desktop max → 390px mobile min              */
:root {
  /* Typography — unified scale (2026-07 audit): one token per content
     role, so near-identical sizes stop drifting apart page to page. */
  --fs-display:     clamp(30px, 4.06vw, 78px);             /* 78→30  page titles / big headlines   */
  --fs-featured-lg: clamp(32px, 2.92vw, 56px);             /* 56→32  large statement (tour hero)   */
  --fs-featured:    clamp(26px, 1.31vw + 20.9px, 46px);    /* 46→26  featured headings/statements  */
  --fs-body:        clamp(18px, 0.92vw + 14.43px, 32px);   /* 32→18  body copy (adopted from Bio)  */
  --fs-ui:          clamp(18px, 0.39vw + 16.47px, 24px);   /* 24→18  tables, selects, control text */
  --fs-meta:        clamp(14px, 0.39vw + 12.47px, 20px);   /* 20→14  meta / caption / credits      */
  --fs-product:     clamp(18px, 0.26vw + 16.98px, 22px);   /* 22→18  product names/prices          */
  --fs-section-head: var(--fs-ui);                         /* alias kept for existing usages       */

  /* Spacing */
  --gap-rows: clamp(32px, 2.61vw + 21.82px, 72px);  /* 72→32  vertical gap between content rows */
  --pad-x:    clamp(20px, 5vw, 96px);                /* 96→20  horizontal page padding           */
}

/* ── Scroll reveal ── */
.sr {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}
.sr--in {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .sr { opacity: 1; transform: none; transition: none; }
}

/* ── Hide scrollbar visually (scroll still works) ── */
html {
  scrollbar-width: none;
  background: #0d0902;
}
html::-webkit-scrollbar { display: none; }

/* ── Content entry animation ──
   Mirrors the original site's mechanism: exit is instant, the fixed
   background swaps imperceptibly (same cached image on every page), and
   ONLY the content fades in. bg-wrap / bg-overlay / bottom-nav are
   intentionally excluded — they must appear at t=0 with no animation.

   Elements start hidden and stay hidden until ".is-ready" is added:
   - nav.js adds it on the next frame for ordinary content (instant reveal).
   - page-hero.js adds it to its own section once the hero's video/image
     has actually loaded, so Bio/CHOIR never flash text before the visual
     is ready — no separate full-page curtain needed.

   0.4s + this bezier ≈ Framer's spring { duration: 0.4, bounce: 0.2 }.
   Use [data-page-content] on any future page content wrapper.        */
.hero,
.music-platforms,
.page-heading,
[data-page-content] {
  opacity: 0;
}
.hero.is-ready,
.music-platforms.is-ready,
.page-heading.is-ready,
[data-page-content].is-ready {
  animation: page-entry 0.4s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}
@keyframes page-entry {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero, .music-platforms, .page-heading, [data-page-content] { animation: none; opacity: 1; }
}

/* ── Scroll-hide nav (activated by scroll-nav.js on overflow pages) ── */
.bottom-nav    { transition: transform 0.35s ease; }
.menu-toggle   { transition: transform 0.38s cubic-bezier(0.4,0,0.2,1), opacity 0.3s ease; }
.nav--scroll-hidden    { transform: translateY(160%); }
.toggle--scroll-hidden { opacity: 0; pointer-events: none; }

/* ── White tint on non-home pages ── */
body.show-close .bg-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.16);
  pointer-events: none;
}

/* ── Nav container ── */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 9; mix-blend-mode: screen;
  padding: 0 2.08vw 1.1vw 2.08vw;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

/* ── Social ── */
.nav-social {
  display: flex; flex-direction: row; align-items: center;
  gap: 0.73vw;
}
.nav-social a, .nav-social span {
  font-family: "PP Neue Montreal Book", sans-serif;
  font-size: var(--fs-meta);
  letter-spacing: 0.05em; text-transform: uppercase;
  color: #fff; line-height: 1; white-space: nowrap;
  transition: opacity 0.2s;
}
.nav-social a:hover { opacity: 0.5; }

/* ── Pills ── */
.nav-links { display: flex; align-items: center; gap: 0.521vw; }

.nav-btn {
  font-family: "Slack Light", sans-serif;
  font-weight: 300;
  font-size: clamp(12px, 2.7vw, 52px);
  line-height: 1;
  color: #fff;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.18em 0.52em calc(0.32em + 2px);
  border: clamp(1.3px, 0.094vw, 1.9px) solid rgba(255,255,255,0.85);
  border-radius: 100em;
  background: transparent;
  text-decoration: none;
  transition: background 0.18s, color 0.18s;
}
.nav-btn--active,
.nav-btn:hover {
  background: #fff;
  color: #000;
}

/* ── Close X ── */
.nav-close {
  display: flex;
  justify-content: flex-end; align-items: center;
  font-size: clamp(12px, 2.7vw, 52px);
  opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.nav-close a {
  color: #fff; display: flex; align-items: center;
  transition: transform 0.2s ease;
}
.nav-close a:hover  { transform: scale(0.9); }
.nav-close a:active { transform: scale(0.8); }
.nav-close svg { height: 1.5em; width: 1.5em; display: block; padding: 8px; box-sizing: border-box; }
@media (prefers-reduced-motion: reduce) {
  .nav-close a { transition: none; }
}
body.show-close .nav-close { opacity: 1; pointer-events: auto; }
body.menu-open .nav-close { opacity: 0 !important; pointer-events: none !important; }

/* ── Menu toggle button ── */
.menu-toggle {
  position: fixed;
  top: 2.083vw; right: 2.083vw;
  width: clamp(32px, 2vw, 38px); height: clamp(32px, 2vw, 38px);
  background: none; border: none; padding: 0; cursor: pointer; z-index: 200;
  transform-origin: center center;
  /* Springy rotation into the X — same bounce feel as page-entry */
  transition: transform 0.5s cubic-bezier(0.34, 1.3, 0.64, 1);
  display: flex; align-items: center; justify-content: center;
}
.menu-toggle:hover       { transform: scale(1.1); }
.menu-toggle.open        { transform: rotate(45deg); }
.menu-toggle.open:hover  { transform: rotate(45deg) scale(1.1); }
.menu-toggle:active           { transform: scale(0.85); }
.menu-toggle.open:active      { transform: rotate(45deg) scale(0.8); }
.menu-toggle svg         { width: 100%; height: 100%; display: block; overflow: visible; }
@media (prefers-reduced-motion: reduce) {
  .menu-toggle { transition: none; }
}

body.menu-open .bottom-nav { z-index: 160; }
body.menu-open .nav-links,
body.menu-open .nav-close {
  opacity: 0; pointer-events: none; transition: opacity 0.2s;
}

/* ── Hero ── */
.hero {
  position: fixed; top: 0; left: 0; right: 0; z-index: 5;
  padding: 1.67vw 2.08vw 0 2.08vw;
}
.hero h1 {
  font-family: "PP Neue Montreal Book", sans-serif;
  font-weight: 400; font-size: var(--fs-display);
  line-height: 1.10; color: #fff; width: 80%;
}
.hero h1 .sl { font-family: "Slack Light", sans-serif; font-weight: 300; }
.hero--hidden { opacity: 0; pointer-events: none; }

/* ── Tablet + Mobile (<960px): ocultar social ── */
@media (max-width: 959px) {
  .nav-social { display: none; }
}

/* ── Tablet (600–959px) ── */
@media (min-width: 600px) and (max-width: 959px) {
  .bottom-nav {
    display: flex; justify-content: space-between; align-items: center;
    gap: 20px; padding: 0 2.08vw 2vw 2.08vw;
  }
  .nav-links { flex: 0 1 auto; min-width: 0; }
  .nav-close  { flex: 0 0 auto; }
  .nav-close svg { padding: 0; }
  .bottom-nav .nav-btn { font-size: clamp(22px, 3.6vw, 40px); padding: 6px 14px 10px; }
}

/* ── Mobile (<600px) ── */
@media (max-width: 599px) {
  .hero { padding: 24px 20px 0 20px; }
  .hero h1 { font-size: clamp(40px, 9.2vw, 44px); width: 85%; }

  .bottom-nav {
    display: flex; align-items: flex-end; justify-content: space-between;
    padding: 0 20px 24px 20px;
  }
  .nav-links {
    flex: 1 0 0; flex-wrap: wrap; align-items: flex-end;
    justify-content: flex-start; gap: 8px; padding-right: 20px;
  }
  .bottom-nav .nav-btn { font-size: 30px; padding: 8px 17px 12px; border-width: 1.8px; }
  .nav-close { flex: 0 0 auto; width: auto; padding: 2px; }
  .nav-close svg { height: 44px; width: 44px; padding: 0; }
  .menu-toggle { top: 32px; right: 20px; width: 32px; height: 32px; }
}

/* ── Pantalla baja (≤700px alto, mobile) ── */
@media (max-height: 700px) and (max-width: 599px) {
  .bottom-nav .nav-btn { font-size: 26px; padding: 6px 14px 10px; }
  .nav-close { flex: 0 0 auto; width: auto; }
  .nav-close svg { height: 36px; width: 36px; padding: 0; }
}