/* ─────────────────────────────────────────────────────────────
   Elleva — capa cinemática (scroll storytelling)
   Todo lo que oculta contenido vive bajo html.has-motion, que solo
   se activa si el visitante no pidió "reducir movimiento". Si el JS
   no carga, functions.php quita esa clase a los 4 s y el sitio se ve
   exactamente como la versión estática.
   ───────────────────────────────────────────────────────────── */

/* Lenis (scroll suave) */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Evita el "flash" antes de que arranque la intro */
html.has-motion .rise-in { animation: none; }
html.has-motion:not(.motion-ready) .hero-intro [data-hero-fade],
html.has-motion:not(.motion-ready) .hero-intro [data-hero-title],
html.has-motion:not(.motion-ready) .hero-intro [data-hero-photo] { visibility: hidden; }

/* Barra de progreso de lectura */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px; z-index: 60; pointer-events: none;
}
.scroll-progress span {
  display: block; height: 100%; width: 100%;
  background: var(--taupe);
  transform: scaleX(0); transform-origin: 0 50%;
}
html:not(.motion-ready) .scroll-progress { display: none; }

/* Nav que se esconde al bajar y reaparece al subir */
.site-nav { will-change: transform; }
.site-nav.is-hidden { transform: translateY(-100%); }
.site-nav { transition: all 0.35s ease, transform 0.5s cubic-bezier(.16,1,.3,1); }

/* Capa de parallax dentro de cada foto enmarcada */
.framed-photo .parallax-layer {
  position: absolute;
  left: 0; right: 0;
  top: -12%; bottom: -12%;
}
.framed-photo .parallax-layer img { height: 100%; }
.framed-photo .photo-caption { z-index: 1; }

/* Líneas de SplitText con máscara */
.split-line { padding-bottom: 0.08em; margin-bottom: -0.08em; }

/* Método: contador grande + riel de progreso */
.method-counter {
  display: none;
  align-items: baseline;
  gap: 14px;
  margin-top: 48px;
  font-family: var(--font-display);
  color: var(--taupe);
  font-weight: 300;
  line-height: 1;
}
.method-counter-window {
  display: inline-block;
  height: 1em;
  overflow: hidden;
  font-size: clamp(72px, 9vw, 120px);
}
.method-counter-current { display: inline-block; }
.method-counter-total { font-size: 14px; letter-spacing: 0.2em; opacity: 0.5; font-family: var(--font-sans); }
.method-list { position: relative; }
.method-rail {
  display: none;
  position: absolute; left: -28px; top: 18px; bottom: 18px;
  width: 1px; background: rgba(201,168,118,0.15);
}
.method-rail-fill {
  position: absolute; inset: 0;
  background: var(--taupe);
  transform: scaleY(0); transform-origin: 50% 0;
}
html.method-pinned .method-counter { display: flex; }
html.method-pinned .method-rail { display: block; }
html.method-pinned .pillar.is-active .pillar-num { opacity: 1; }

/* Filosofía: palabras que se "encienden" al hacer scroll */
[data-scrub-words] .word { display: inline-block; }

/* Fondo shader del contacto */
.shader-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity 1.2s ease;
}
.shader-bg.is-live { opacity: 1; }

/* Botones magnéticos */
.magnetic { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .shader-bg { display: none; }
  .site-nav.is-hidden { transform: none; }
}

/* Mientras el Método está fijado, ocupa toda la pantalla */
html.method-pinned .method-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
}
html.method-pinned .method-section > div { width: 100%; }