/* ═══════════════════════════════════════════════════════════════
   El Solitario v3 — Evolución cinematográfica
   Extiende solitario-v2.1.css. No modifica estilos base.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. INTRO: FONDO NEGRO CINEMATOGRÁFICO ─────────────────── */
/* El fondo dorado rompía la sensación de "archivo secreto".
   Se sustituye por negro profundo con acentos dorados. */

.intro {
  background: #050505;
  color: var(--paper);
}

.intro-inner { color: var(--paper); }

.intro-vignette {
  background: radial-gradient(circle at 50% 42%,
    transparent 0%, transparent 27%,
    rgba(0,0,0,.08) 48%, rgba(0,0,0,.80) 100%);
}

.intro-rays {
  background: conic-gradient(from 0deg at 50% 43%,
    transparent 0deg, rgba(216,168,45,.05) 8deg,
    transparent 17deg, rgba(216,168,45,.03) 31deg,
    transparent 43deg);
}

/* mix-blend-mode: multiply sobre negro = invisible.
   Se cambia a normal para mostrar la máscara correctamente. */
.intro-mask img {
  mix-blend-mode: normal;
  filter: drop-shadow(0 18px 55px rgba(216,168,45,.25))
          drop-shadow(0 0 80px rgba(216,168,45,.08));
}

.intro-mask-aura { background: rgba(216,168,45,.18); }

.intro-mask-ring {
  border-color: rgba(216,168,45,.22);
}
.intro-mask-ring:before { border-color: rgba(216,168,45,.12) !important; }
.intro-mask-ring:after  { border-color: rgba(216,168,45,.10) !important; }

.intro-mask-glint {
  background: linear-gradient(90deg, transparent, rgba(255,249,215,.72), transparent);
}

.intro-particles i {
  background: rgba(216,168,45,.68);
  box-shadow: 0 0 10px rgba(216,168,45,.45);
}

.intro-overline  { color: rgba(216,168,45,.80); }
.intro-name      { color: var(--paper); }
.intro-name > strong { color: var(--gold-bright); }
.intro-subtitle  { color: var(--muted); }
.intro-dates     { color: #686b5d; }
.intro-audio-note{ color: #686b5d; }

.loader-number        { color: var(--gold); }
.intro-loader .label  { color: var(--muted); }

.intro-skip {
  border-color: rgba(216,168,45,.32);
  color: var(--paper);
  background: none;
}

.intro-skip:hover,
.intro-skip:focus-visible {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
  outline-color: var(--gold);
}

#assetProgress {
  background: rgba(255,255,255,.08);
}
#assetProgress::-webkit-progress-bar { background: rgba(255,255,255,.08); }
#assetProgress::-webkit-progress-value {
  background: var(--gold);
  transition: width .3s;
}
#assetProgress::-moz-progress-bar { background: var(--gold); }

/* ── Línea dorada de apertura ── */
.intro-line {
  position: absolute;
  left: 50%;
  top: 17%;
  width: min(320px, 58vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  animation: intro-line-appear 2s .25s var(--ease) forwards;
  pointer-events: none;
}

@keyframes intro-line-appear {
  0%   { opacity: 0; transform: translateX(-50%) scaleX(0); }
  25%  { opacity: .85; }
  80%  { transform: translateX(-50%) scaleX(1); opacity: .55; }
  100% { transform: translateX(-50%) scaleX(1); opacity: .38; }
}

@media (prefers-reduced-motion: reduce) {
  .intro-line {
    animation: none;
    opacity: .38;
    transform: translateX(-50%) scaleX(1);
  }
}

/* ── 2. GRANO CINEMATOGRÁFICO ────────────────────────────────── */
/* Textura de película, muy sutil. Oculto con reduced-motion. */

.grain {
  position: fixed;
  inset: 0;
  z-index: 890;
  pointer-events: none;
  opacity: .036;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  animation: grain-move .38s steps(2) infinite;
}

@keyframes grain-move {
  0%   { background-position:   0px   0px; }
  25%  { background-position: -55px  35px; }
  50%  { background-position:  65px -40px; }
  75%  { background-position: -40px  60px; }
  100% { background-position:  55px -55px; }
}

@media (prefers-reduced-motion: reduce) { .grain { display: none; } }

/* ── 3. CURSOR PERSONALIZADO ─────────────────────────────────── */
/* Solo en dispositivos de puntero fino (mouse). Dorado, minimalista. */

.cursor,
.cursor-ring {
  display: none;
  position: fixed;
  left: 0; top: 0;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}

.cursor {
  z-index: 9999;
  width: 7px; height: 7px;
  background: var(--gold);
  transition: width .2s ease, height .2s ease,
              background .2s ease, border .2s ease, opacity .3s ease;
}

.cursor-ring {
  z-index: 9998;
  width: 30px; height: 30px;
  border: 1px solid rgba(216,168,45,.35);
  transition: width .3s ease, height .3s ease, opacity .3s ease;
}

.cursor[data-state="hover"] {
  width: 46px; height: 46px;
  background: transparent;
  border: 1px solid rgba(239,208,113,.75);
}

.cursor-ring[data-state="hover"] {
  width: 58px; height: 58px;
  opacity: 0;
}

@media (pointer: fine) and (min-width: 801px) {
  html,
  html a,
  html button,
  html [data-gallery] {
    cursor: none;
  }
  .cursor, .cursor-ring { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .cursor, .cursor-ring { display: none !important; }
  html, html a, html button { cursor: auto !important; }
}

/* ── 4. SECCIÓN CLÍMAX 1986 ─────────────────────────────────── */
/* Sección autónoma entre La Historia y La Galería.
   Diseñada para ser el momento más emotivo de la experiencia.
   Negro absoluto, tipografía grande, mínimo. */

.climax {
  background: #000;
  padding: clamp(90px, 13vw, 200px) var(--gutter) clamp(90px, 13vw, 200px);
  text-align: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Año de fondo — casi invisible, establece ambiente */
.climax-bg-year {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 400 clamp(200px, 38vw, 660px)/1 var(--display);
  color: #0d0d0d;
  pointer-events: none;
  user-select: none;
  letter-spacing: -.04em;
  will-change: transform;
}

.climax-inner {
  position: relative;
  z-index: 2;
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(22px, 4vw, 54px);
}

.climax-label {
  font-size: 10px;
  letter-spacing: .25em;
  font-weight: 600;
  color: var(--gold);
  line-height: 1;
  margin: 0;
}

.climax-headline {
  font: 400 clamp(72px, 12vw, 190px)/.92 var(--display);
  letter-spacing: -.025em;
  color: var(--paper);
  margin: 0;
}

/* Línea divisoria dorada */
.climax-divider {
  width: 1px;
  height: clamp(50px, 7vw, 110px);
  background: linear-gradient(to bottom, transparent, rgba(216,168,45,.45), transparent);
  flex-shrink: 0;
}

.climax-hombre {
  font: 400 clamp(28px, 4.2vw, 62px)/1 var(--display);
  color: var(--muted);
  letter-spacing: .02em;
  margin: 0;
}

.climax-leyenda {
  font: 400 clamp(28px, 4.2vw, 62px)/1 var(--display);
  color: var(--gold);
  letter-spacing: .02em;
  margin: 0;
}

/* Ocultar antes de revelar (cuando JS está activo) */
.js [data-climax] { opacity: 0; }

/* Reduced-motion: mostrar inmediatamente sin animación */
@media (prefers-reduced-motion: reduce) {
  .js [data-climax] { opacity: 1 !important; }
}

/* Mobile */
@media (max-width: 620px) {
  .climax {
    padding: clamp(55px, 15vw, 90px) var(--gutter);
  }
  .climax-inner {
    gap: clamp(16px, 5vw, 28px);
  }
}

/* ── 5. MEJORAS MENORES ──────────────────────────────────────── */

/* Nav activa más clara */
.navigation a[aria-current] {
  color: var(--gold-bright);
}

/* Timeline item activo — fondo muy sutil */
.timeline-item.in-view {
  background: rgba(216,168,45,.022);
  border-radius: 4px;
}

/* Galería lightbox — caption más legible */
.lightbox figcaption {
  font-size: 11px;
  line-height: 1.78;
  text-align: center;
  color: #b0b3a1;
}

/* Focus visible en sección light */
.section-light *:focus-visible { outline-color: #725710; }