/* =========================================================
   CAPITAL DJs — Prototipo v2.1 · css/hero.css (solo la home)
   La primera pantalla (brief v2.1 §1): el logo de CAPITAL DJs, solo,
   grande y sobre blanco. Después, la fiesta: "El logo es la ventana"
   (la B; la escogió Alan el 1-oct-2026). Las fotos se ven dentro de
   las letras, la ventana crece hasta llenar la pantalla y el logo
   queda en blanco encima.

   Cómo funciona:
   - La entrada del logo es CSS puro. El <script> del <head> pone
     html.intro-js + html.intro-play y la animación arranca con el
     primer pintado, sin esperar a GSAP ni a ningún CDN.
   - js/hero.js pone las fotos, la ventana y el scroll (el logo se
     encoge y se va al nav mientras la fiesta sube encima de la foto).
   - Sin JS: logo fijo y una foto velada.
   - Movimiento reducido = modo suave (1-oct-2026): el logo aparece con un
     fundido y la foto velada fija funde detrás; sin zoom de ventana, sin
     Ken Burns y sin viaje del logo al nav (abajo, al final).
   - Solo se anima transform y opacity (más el color del logo).
   ========================================================= */

/* ---------- la pantalla ---------- */
.intro { position: relative; height: 100vh; height: 100svh; }
/* Con movimiento: un tramo extra de scroll (--intro-run) para que el logo viaje al nav.
   La sección que sigue (la fiesta) se encima a ese tramo con margin negativo y queda DEBAJO del
   escenario: sube como una hoja y js/hero.js recorta la foto justo en su borde. Así la fiesta
   entra en cuanto empieza el scroll y nunca queda una pantalla en blanco (Alan, 2-oct).
   El escenario va encima (z-index) pero transparente y sin eventos: el blanco de la entrada
   lo pinta .intro__bg, que es lo que se recorta. --intro-run ≥ 100 % de la pantalla: en la
   primera vista la fiesta queda justo abajo del borde (lo primero que se ve es solo el logo). */
:root { --intro-vh: 100vh; --intro-run: 104vh; }
@supports (height: 1svh) { :root { --intro-vh: 100svh; --intro-run: 104svh; } }
html.intro-js .intro {
  height: calc(var(--intro-vh) + var(--intro-run));
  z-index: 2;
  pointer-events: none;
  background-color: transparent;
}
html.intro-js .intro + * { margin-top: calc(-1 * var(--intro-run)); }

.intro__stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  display: grid; place-items: center;
  overflow: hidden;
  background: #fff; color: #0b0b0b;
  isolation: isolate;
}
html.intro-js .intro__stage { background: transparent; }

/* ---------- el fondo: fotos, velo y sombra ---------- */
.intro__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* con movimiento, el blanco de la entrada va aquí: se recorta junto con la foto */
html.intro-js .intro__bg { background: #fff; }
.intro__photos { position: absolute; inset: 0; overflow: hidden; transition: opacity 2.4s ease; }
html.intro-js .intro__photos:not(.is-in) { opacity: 0; }
.intro__photos.is-now { transition: none; }
/* la marca es blanco y negro: las fotos van en grises aunque Brenda las mande a color */
.intro__photos img { filter: grayscale(1); }
.intro__still, .intro__still img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 40%;
}
.intro__slides { position: absolute; inset: 0; }
.intro__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease; }
.intro__slide.is-on { opacity: 1; }
.intro__slide img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transform: scale(1.04); will-change: transform;
}
/* el velo blanco solo va en el modo estático (sin JS o movimiento reducido): ahí el logo se queda negro */
.intro__veil { position: absolute; inset: 0; background: #fff; opacity: .82; }
html.intro-js .intro__veil { display: none; }
.intro__shade { position: absolute; inset: 0; background: #0b0b0b; opacity: 0; transition: opacity 1.2s ease; }
.intro__shade.is-on { opacity: .42; }

/* ---------- el logo ---------- */
.intro__mark {
  position: relative; z-index: 2;
  width: 46vw; max-width: 820px; /* antes 84vw: más chico y centrado (Alan, 7-oct-2026) */
  aspect-ratio: 350.23 / 48.38;
  margin-top: -2vh;
  transform-origin: 0 0;
}
html.intro-js .intro__mark { will-change: transform; }
.intro__logo {
  position: relative; z-index: 1;
  display: block; width: 100%; height: 100%;
  overflow: visible;
  color: #0b0b0b;
  transition: color .7s ease;
}
html.intro-dark .intro__logo { color: #fff; }
.intro__logo path { transform-box: fill-box; transform-origin: 50% 50%; }
/* --i: orden de izquierda a derecha · --d: distancia al centro */
.intro__logo path:nth-of-type(1)  { --i: 0; --d: -4.5; }
.intro__logo path:nth-of-type(2)  { --i: 1; --d: -3.5; }
.intro__logo path:nth-of-type(3)  { --i: 2; --d: -2.5; }
.intro__logo path:nth-of-type(4)  { --i: 3; --d: -1.5; }
.intro__logo path:nth-of-type(5)  { --i: 4; --d: -.5; }
.intro__logo path:nth-of-type(6)  { --i: 5; --d: .5; }
.intro__logo path:nth-of-type(7)  { --i: 6; --d: 1.5; }
.intro__logo path:nth-of-type(8)  { --i: 7; --d: 2.5; }
.intro__logo path:nth-of-type(9)  { --i: 8; --d: 3.5; }
.intro__logo path:nth-of-type(10) { --i: 9; --d: 4.5; }

/* antes de entrar (solo si el <head> dijo que hay entrada) */
html.intro-js:not(.intro-play) .intro__logo path { opacity: 0; }

/* la entrada: las letras llegan juntas, como título de película */
@keyframes cdj-in-track {
  from { opacity: 0; transform: translateX(calc(var(--d) * 7px)); }
  55% { opacity: 1; }
  to { opacity: 1; transform: none; }
}
html.intro-play .intro__logo path { animation: cdj-in-track 1.9s cubic-bezier(.16, 1, .3, 1) .25s both; }

/* estados que pone hero.js: letras huecas → vuelven en blanco · fijo */
@keyframes cdj-out-fade { to { opacity: 0; } }
html.intro-play .intro__mark .intro__logo.is-hollow path {
  animation: cdj-out-fade .9s ease both;
  animation-delay: calc(var(--i) * .07s);
}
/* al volver en blanco sobre la foto, el logo completo aparece suave:
   de invisible a difuminado a nítido (pedido de Alan, 2-oct: más sutil que las letras subiendo) */
@keyframes cdj-in-focus {
  0%   { opacity: 0; filter: blur(18px); }
  45%  { opacity: .7; filter: blur(6px); }
  100% { opacity: 1; filter: none; }
}
html.intro-play .intro__mark .intro__logo.is-rise {
  animation: cdj-in-focus 1.6s cubic-bezier(.25, .1, .25, 1) .15s both;
  will-change: opacity, filter;
}
html.intro-play .intro__mark .intro__logo.is-rise path { animation: none; opacity: 1; transform: none; }
html.intro-js .intro__mark .intro__logo.is-settled path { animation: none; opacity: 1; transform: none; }
/* ya se vio en esta sesión (intro-seen, lo pone el <head>): el logo llega fijo, sin entrada */
html.intro-seen .intro__mark .intro__logo path { animation: none; opacity: 1; transform: none; }

/* ---------- la plantilla blanca con el logo calado ---------- */
.intro__stencil {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  overflow: visible;
  /* el centro del palo de la I: por ahí entra la cámara */
  transform-origin: 36.23% 42.58%;
  will-change: transform;
}
.intro__stencil.is-zoom { transform: scale(var(--zoom, 60)); transition: transform 1.5s cubic-bezier(.7, 0, .84, 0); }
.intro__stencil[hidden] { display: none; }

/* ---------- "Desliza" / "Baja" ---------- */
/* el texto según el dispositivo (5-oct-2026): «Desliza» con dedo (tablet acostada), «Baja» con mouse o
   trackpad, que no deslizan sino hacen scroll. Es CSS: funciona antes del JS y siempre sale uno solo */
.intro__cue .cue-fine { display: none; }
@media (hover: hover) and (pointer: fine) {
  .intro__cue .cue-touch { display: none; }
  .intro__cue .cue-fine { display: inline; }
}
.intro__cue {
  position: absolute; z-index: 3; left: 50%; bottom: 28px;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  margin: 0;
  font: 400 10px/1 var(--mono); letter-spacing: .08em; text-indent: .08em; text-transform: uppercase;
  color: #7a7a7a;
  transition: opacity .6s ease, color .7s ease;
}
.intro__cue i { position: relative; display: block; width: 1px; height: 40px; background: rgba(0, 0, 0, .14); overflow: hidden; }
.intro__cue i::after {
  content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%;
  background: currentColor; animation: cdj-scroll-cue 1.8s var(--ease-io) infinite;
}
html.intro-dark .intro__cue { color: rgba(255, 255, 255, .82); }
html.intro-dark .intro__cue i { background: rgba(255, 255, 255, .25); }
html.cue-away .intro__cue { opacity: 0; }

/* la nota de las fotos: siempre flotando, nunca empuja al logo */
.intro__stage > .nota {
  position: absolute; z-index: 60;
  top: calc(var(--nav-h) + 14px); right: 18px; bottom: auto; left: auto;
  margin: 0; max-width: 380px;
  pointer-events: auto; /* la pantalla no recibe eventos (la fiesta sube debajo); la nota sí (scroll interno) */
}

/* ---------- el resto de la página entra después del logo ---------- */
html.intro-js .cdj-nav { transition: transform .55s var(--ease-out), color .3s ease, opacity 1.1s ease .1s, visibility 0s; }
html.intro-js .wa-float,
html.intro-js .notes-toggle,
html.intro-js .intro__stage > .nota { transition: opacity 1s ease .45s, visibility 0s, transform .25s var(--ease-out); }
html.intro-js:not(.intro-done) .cdj-nav,
html.intro-js:not(.intro-done) .wa-float,
html.intro-js:not(.intro-done) .notes-toggle,
html.intro-js:not(.intro-done) .intro__cue,
html.intro-js:not(.intro-done) .intro__stage > .nota {
  opacity: 0; visibility: hidden;
  /* red de seguridad: si hero.js no llega, todo aparece solo a los 10 s */
  animation: cdj-intro-failsafe .01s linear 10s forwards;
}
@keyframes cdj-intro-failsafe { to { opacity: 1; visibility: visible; } }
/* la nota de las fotos se va en cuanto empieza el scroll: la fiesta sube debajo de ella
   (en celular tapaba la frase y el botón de WhatsApp; en escritorio se encimaba con la nota del hero).
   Al volver arriba reaparece con su transición de siempre */
html.cue-away .intro__stage > .nota { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease, visibility 0s linear .3s; }

/* el logo del nav aparece cuando el grande "aterriza" en él */
html.hero-ready:not(.logo-docked):not(.menu-open) .cdj-nav__logo { opacity: 0; pointer-events: none; }
/* …y mientras viaja, el nav va sin su barra esmerilada (2-oct-2026). El logo grande vive en la primera
   pantalla, DEBAJO del nav: el último tramo del viaje (de ~70 % en adelante) lo hacía bajo la barra blanca
   al 94 % con blur, y se veía un logo gris y borroso flotando junto a «MENÚ» hasta aterrizar (Alan, en
   su iPhone). Sin la barra, el logo llega nítido; la barra vuelve en cuanto aterriza (logo-docked). En el
   tramo del viaje lo que sube debajo (la fiesta) todavía no llega a la altura del nav. */
html.intro-js.hero-ready:not(.logo-docked):not(.menu-open) .cdj-nav::before { opacity: 0; }
/* con teclado, el logo del nav se ve cuando tiene el foco (brief §3: foco visible) */
html.hero-ready:not(.logo-docked):not(.menu-open) .cdj-nav__logo:focus-visible { opacity: 1; pointer-events: auto; }
html.hero-ready .cdj-nav__logo { transition: none; }
html.logo-docked .intro__mark { visibility: hidden; }
/* mientras la foto llena la pantalla, el nav va en blanco */
html.intro-dark .cdj-nav { --bg: #0b0b0b; --fg: #ffffff; --fg-2: #d4d4d4; --fg-3: #8f8f8f; --rule: #2a2a2a; --logo-invert: 1; }

/* ---------- móvil ---------- */
@media (max-width: 860px) {
  .intro__mark { width: 72vw; margin-top: -1vh; }
  .intro__cue { display: none; }
  .intro__stage > .nota {
    top: auto; bottom: 62px; left: 12px; right: 84px;
    max-width: none; font-size: 11px;
    transform: none;
    /* nunca sube más allá del logo (alto 0.138·ancho = 9.9vw con 72vw, centrado): si no cabe, scroll interno */
    max-height: calc(50vh - 5vw - 70px); max-height: calc(50svh - 5vw - 70px);
    overflow-y: auto;
  }
}
/* celular acostado: la nota, abajo, entre el botón de las notas y el WhatsApp (arriba tapaba el logo) */
@media (max-width: 860px) and (max-height: 500px) {
  .intro__stage > .nota {
    bottom: 12px; left: 288px; font-size: 10.5px;
    max-height: calc(50vh - 5vw - 20px); max-height: calc(50svh - 5vw - 20px);
  }
}

/* ---------- movimiento reducido = modo suave: el logo funde, la foto velada fija funde detrás ----------
   (1-oct-2026; antes quedaba todo quieto). Solo opacidad: nada crece, se desliza ni hace zoom.
   Es CSS puro: también corre si el JS no llega. */
@media (prefers-reduced-motion: reduce) {
  .intro__photos, .intro__slide, .intro__shade, .intro__logo, .intro__cue { transition: none !important; }
  .intro__cue i::after { animation: none; }
  .intro__logo { animation: cdj-soft-in 1.2s cubic-bezier(.25, .1, .25, 1) .15s both; }
  .intro__still { animation: cdj-soft-in 1.6s ease-out .45s both; }
}
@keyframes cdj-soft-in { from { opacity: 0; } }
@media print {
  .intro, html.intro-js .intro { height: auto; }
  html.intro-js .intro + * { margin-top: 0; }
  .intro__stage { position: relative; height: 60vh; }
  .intro__bg { display: none !important; }
}