/* ═══════════════════════════════════════════════════════════════
   Galería de la Memoria — estilos
   Paleta: noche profunda, oro de vela y rosa tenue.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --bg-0: #07070d;
  --bg-1: #0f0d1a;
  --bg-2: #1a1424;
  --gold: #e9c892;
  --gold-soft: rgba(233, 200, 146, 0.55);
  --rose: #d9a7a0;
  --ink: #f3ecdf;
  --ink-dim: rgba(243, 236, 223, 0.62);
  --glass: rgba(14, 12, 22, 0.55);
  --glass-border: rgba(233, 200, 146, 0.18);
  --serif: "Cormorant Garamond", "Garamond", "Georgia", serif;
  --transition: 1800ms;
  --photo: 6s;
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--bg-0);
  color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  cursor: none;
}
body.ui-visible { cursor: default; }

button { font: inherit; color: inherit; }

/* ───────────────────────── Fondo luminoso ───────────────────────── */

body::before {
  content: "";
  position: fixed; inset: 0;
  background:
    radial-gradient(60% 50% at 50% 60%, rgba(233, 200, 146, 0.10), transparent 70%),
    radial-gradient(80% 70% at 20% 10%, rgba(120, 80, 140, 0.18), transparent 70%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
  z-index: 0;
  animation: breathe 14s ease-in-out infinite alternate;
}
@keyframes breathe {
  from { filter: brightness(0.92); }
  to   { filter: brightness(1.08); }
}

#particles {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.9;
}

/* ───────────────────────── Escenario ───────────────────────── */

#stage {
  position: fixed; inset: 0;
  z-index: 2;
}

.layer {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity var(--transition) var(--ease-soft);
  will-change: opacity;
}
.layer.active { opacity: 1; }

.layer .backdrop,
.layer .photo,
.layer video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}

.layer .backdrop {
  object-fit: cover;
  filter: blur(42px) saturate(1.15) brightness(0.55);
  transform: scale(1.18);
  opacity: 0.85;
}

.layer .photo {
  object-fit: contain;
  transform-origin: center;
  animation-duration: calc(var(--photo) + var(--transition) * 2);
  animation-timing-function: linear;
  animation-fill-mode: both;
}

.layer video {
  object-fit: contain;
  background: transparent;
}

/* Ken Burns — seis variantes para que nunca se sienta repetitivo */
.kb-1 { animation-name: kb-1; }
.kb-2 { animation-name: kb-2; }
.kb-3 { animation-name: kb-3; }
.kb-4 { animation-name: kb-4; }
.kb-5 { animation-name: kb-5; }
.kb-6 { animation-name: kb-6; }

@keyframes kb-1 { from { transform: scale(1.02) translate(0, 0); }       to { transform: scale(1.12) translate(-1.5%, -1%); } }
@keyframes kb-2 { from { transform: scale(1.12) translate(1.5%, 1%); }   to { transform: scale(1.02) translate(0, 0); } }
@keyframes kb-3 { from { transform: scale(1.04) translate(-2%, 0); }     to { transform: scale(1.10) translate(2%, 0.5%); } }
@keyframes kb-4 { from { transform: scale(1.10) translate(2%, -1%); }    to { transform: scale(1.04) translate(-1.5%, 1%); } }
@keyframes kb-5 { from { transform: scale(1.00) translate(0, 1.5%); }    to { transform: scale(1.09) translate(0.5%, -1.5%); } }
@keyframes kb-6 { from { transform: scale(1.11) translate(-1%, 1.5%); }  to { transform: scale(1.03) translate(1%, -0.5%); } }

#vignette {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(5, 4, 9, 0.55) 100%),
    linear-gradient(180deg, rgba(5, 4, 9, 0.25) 0%, transparent 18%, transparent 82%, rgba(5, 4, 9, 0.35) 100%);
}

/* ───────────────────────── Portada ───────────────────────── */

#intro {
  position: fixed; inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 6vh 8vw;
  background: radial-gradient(70% 60% at 50% 50%, rgba(15, 13, 26, 0.35), rgba(7, 7, 13, 0.85));
  transition: opacity 2400ms var(--ease-soft);
}
#intro.leaving { opacity: 0; pointer-events: none; }
#intro[hidden] { display: none; }

.intro-inner { max-width: 900px; }

#intro [data-intro] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 2200ms var(--ease-soft), transform 2200ms var(--ease-soft), letter-spacing 3000ms var(--ease-soft);
}
#intro [data-intro].in { opacity: 1; transform: translateY(0); }

.intro-eyebrow {
  margin: 0 0 1.4rem;
  font-size: clamp(0.95rem, 1.6vw, 1.35rem);
  font-weight: 300;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold-soft);
}

.intro-name {
  margin: 0;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(3rem, 9vw, 8rem);
  line-height: 1.05;
  letter-spacing: 0.12em;
  color: var(--ink);
  text-shadow: 0 0 40px rgba(233, 200, 146, 0.25);
}
.intro-name.in { letter-spacing: 0.04em; }

.intro-nick {
  margin: 0.6rem 0 0;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.2rem, 2.6vw, 2.1rem);
  letter-spacing: 0.14em;
  color: var(--gold);
}
:root[data-theme="cielo"] .intro-nick { color: var(--rose-deep); }

.intro-rule {
  width: 0;
  height: 1px;
  margin: 2rem auto;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transition: width 2600ms var(--ease-soft), opacity 1500ms;
}
.intro-rule.in { width: min(360px, 60vw); }

.intro-years {
  margin: 0;
  font-size: clamp(1.1rem, 2.2vw, 1.8rem);
  letter-spacing: 0.3em;
  color: var(--gold);
  font-weight: 300;
}

.intro-line {
  margin: 2.4rem 0 0;
  min-height: 2.6em;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.25rem, 2.8vw, 2.3rem);
  line-height: 1.35;
  color: var(--ink-dim);
}

.intro-hint {
  position: absolute;
  bottom: 5vh; left: 0; right: 0;
  margin: 0;
  font-size: 0.9rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(243, 236, 223, 0.28);
  animation: hint 4s ease-in-out infinite;
}
@keyframes hint {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 0.7; }
}

/* ───────────────────────── Cierre ───────────────────────── */

#closing {
  position: fixed; inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  padding: 10vh 10vw;
  text-align: center;
  background: rgba(7, 7, 13, 0.72);
  opacity: 0;
  pointer-events: none;
  transition: opacity 2400ms var(--ease-soft);
}
#closing.show { opacity: 1; }

.closing-text {
  margin: 0;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.8rem, 5vw, 4.2rem);
  color: var(--ink);
  letter-spacing: 0.06em;
  text-shadow: 0 0 50px rgba(233, 200, 146, 0.3);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 2400ms var(--ease-soft) 400ms, transform 2400ms var(--ease-soft) 400ms;
}
#closing.show .closing-text { opacity: 1; transform: none; }

/* ───────────────────────── Avisos ───────────────────────── */

#notice {
  position: fixed; inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  padding: 10vh 10vw;
  text-align: center;
}
#notice[hidden] { display: none; }
.notice-text {
  margin: 0;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.2rem, 2.6vw, 2rem);
  color: var(--ink-dim);
  max-width: 40ch;
  line-height: 1.5;
}

/* ───────────────────────── Interfaz ───────────────────────── */

#ui {
  position: fixed; inset: 0;
  z-index: 7;
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms var(--ease-soft);
}
body.ui-visible #ui { opacity: 1; }
body.ui-visible #ui > * { pointer-events: auto; }

.pill {
  position: absolute;
  top: max(18px, env(safe-area-inset-top));
  right: max(22px, env(safe-area-inset-right));
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: 0.95rem;
  letter-spacing: 0.25em;
  color: var(--ink-dim);
}

#controls {
  position: absolute;
  left: 50%;
  bottom: max(26px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}

#controls button {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background 250ms, transform 250ms;
  -webkit-tap-highlight-color: transparent;
}
#controls button:hover,
#controls button:focus-visible { background: rgba(233, 200, 146, 0.12); outline: none; }
#controls button:active { transform: scale(0.92); }
#controls button[aria-pressed="true"] { background: rgba(233, 200, 146, 0.2); }

#controls svg {
  width: 22px; height: 22px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#controls [data-action="toggle"] svg { width: 26px; height: 26px; }

#controls .sep {
  width: 1px; height: 26px;
  margin: 0 6px;
  background: var(--glass-border);
}

/* Iconos alternos */
.ic-play, .ic-muted { display: none; }
body.paused .ic-pause { display: none; }
body.paused .ic-play  { display: block; }
body.muted  .ic-sound { display: none; }
body.muted  .ic-muted { display: block; }
body.no-music [data-action="music"] { display: none; }

/* Barra de progreso */
#progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: rgba(243, 236, 223, 0.08);
}
#progress span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--rose), var(--gold));
  box-shadow: 0 0 12px rgba(233, 200, 146, 0.6);
}
#progress span.animate {
  transition: width var(--photo) linear;
}

/* Tira de miniaturas */
#filmstrip {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(max(26px, env(safe-area-inset-bottom)) + 80px);
  display: flex;
  gap: 10px;
  padding: 12px 24px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 400ms var(--ease-soft), transform 400ms var(--ease-soft);
  pointer-events: none !important;
}
#filmstrip::-webkit-scrollbar { display: none; }
body.filmstrip-open #filmstrip { opacity: 1; transform: none; pointer-events: auto !important; }

#filmstrip .thumb {
  flex: 0 0 auto;
  width: 112px; height: 72px;
  border: 0;
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-2);
  opacity: 0.55;
  cursor: pointer;
  position: relative;
  transition: opacity 250ms, transform 250ms, box-shadow 250ms;
  scroll-snap-align: center;
}
#filmstrip .thumb img,
#filmstrip .thumb video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
#filmstrip .thumb.video::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at center, rgba(0,0,0,0.35), transparent 60%);
}
#filmstrip .thumb.video::before {
  content: "▶";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--ink);
  font-size: 1.1rem;
  z-index: 1;
  text-shadow: 0 0 8px rgba(0,0,0,0.8);
}
#filmstrip .thumb:hover { opacity: 0.9; }
#filmstrip .thumb.current {
  opacity: 1;
  transform: scale(1.06);
  box-shadow: 0 0 0 1.5px var(--gold), 0 8px 24px rgba(0,0,0,0.5);
}

/* ───────────────────────── Responsivo / accesibilidad ───────────────────────── */

@media (max-width: 600px) {
  #controls button { width: 42px; height: 42px; }
  #controls .sep { margin: 0 2px; }
  #filmstrip .thumb { width: 84px; height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .layer .photo { animation: none !important; }
  body::before { animation: none; }
  .intro-hint { animation: none; opacity: 0.5; }
}

/* ═══════════════════════════════════════════════════════════════
   Tema "cielo" — amanecer suave con nubes que derivan
   ═══════════════════════════════════════════════════════════════ */

:root[data-theme="cielo"] {
  --bg-0: #c9d6ea;
  --bg-1: #e3d6e6;
  --bg-2: #f3dccb;
  --gold: #b9893f;
  --gold-soft: rgba(185, 137, 63, 0.75);
  --rose: #e48ea8;
  --rose-deep: #c9607f;
  --ink: #3a3450;
  --ink-dim: rgba(58, 52, 80, 0.72);
  --glass: rgba(255, 255, 255, 0.42);
  --glass-border: rgba(255, 255, 255, 0.75);
}

:root[data-theme="cielo"] body { background: var(--bg-0); }

/* Cielo: azul pálido arriba, lavanda, durazno en el horizonte */
:root[data-theme="cielo"] body::before {
  background:
    radial-gradient(70% 45% at 50% 100%, rgba(255, 205, 215, 0.7), transparent 70%),
    radial-gradient(60% 40% at 15% 15%, rgba(255, 255, 255, 0.55), transparent 70%),
    radial-gradient(40% 35% at 85% 70%, rgba(243, 182, 200, 0.45), transparent 70%),
    linear-gradient(180deg, #a9c3e3 0%, #d0d1ea 36%, #ead3e0 62%, #f7dcdc 84%, #fbe4d8 100%);
  animation: breathe-sky 18s ease-in-out infinite alternate;
}
@keyframes breathe-sky {
  from { filter: brightness(0.97) saturate(0.95); }
  to   { filter: brightness(1.04) saturate(1.08); }
}

/* Las nubes van por encima de las fotos pero solo asoman por los bordes */
:root[data-theme="cielo"] #particles {
  z-index: 3;
  opacity: 1;
  transition: -webkit-mask-image 2s, mask-image 2s;
}
:root[data-theme="cielo"] body.gallery-active #particles {
  opacity: 0.8;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.9) 0%, transparent 18%, transparent 80%, rgba(0,0,0,0.95) 100%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,0.9) 0%, transparent 18%, transparent 80%, rgba(0,0,0,0.95) 100%);
}

/* El fondo difuminado se funde con el cielo en vez de oscurecerlo */
:root[data-theme="cielo"] .layer .backdrop {
  filter: blur(48px) saturate(1.05) brightness(1.05);
  opacity: 0.55;
}
:root[data-theme="cielo"] #vignette {
  background:
    radial-gradient(120% 90% at 50% 50%, transparent 60%, rgba(255, 255, 255, 0.28) 100%),
    linear-gradient(180deg, rgba(255,255,255,0.14) 0%, transparent 16%, transparent 86%, rgba(255, 236, 220, 0.18) 100%);
}

/* Portada y cierre sobre bruma clara */
:root[data-theme="cielo"] #intro {
  background: radial-gradient(70% 60% at 50% 50%, rgba(255, 255, 255, 0.35), rgba(236, 228, 240, 0.55));
}
:root[data-theme="cielo"] .intro-name { text-shadow: 0 2px 30px rgba(255, 255, 255, 0.9), 0 0 70px rgba(228, 142, 168, 0.45); }
:root[data-theme="cielo"] .intro-rule { background: linear-gradient(90deg, transparent, var(--rose-deep) 30%, var(--gold) 50%, var(--rose-deep) 70%, transparent); }
:root[data-theme="cielo"] .intro-years { color: var(--rose-deep); }
:root[data-theme="cielo"] .intro-eyebrow { color: rgba(201, 96, 127, 0.8); }
:root[data-theme="cielo"] .intro-hint { color: rgba(58, 52, 80, 0.45); }
:root[data-theme="cielo"] #closing { background: rgba(240, 232, 240, 0.62); }
:root[data-theme="cielo"] .closing-text { text-shadow: 0 2px 30px rgba(255, 255, 255, 0.9); }

/* Interfaz en cristal claro */
:root[data-theme="cielo"] #controls,
:root[data-theme="cielo"] .pill {
  box-shadow: 0 10px 40px rgba(80, 70, 110, 0.18);
  color: var(--ink-dim);
}
:root[data-theme="cielo"] #controls button:hover,
:root[data-theme="cielo"] #controls button:focus-visible { background: rgba(255, 255, 255, 0.55); }
:root[data-theme="cielo"] #controls button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.7); }
:root[data-theme="cielo"] #controls svg { stroke: var(--gold); }
:root[data-theme="cielo"] #progress { background: rgba(58, 52, 80, 0.12); }
:root[data-theme="cielo"] #progress span { background: linear-gradient(90deg, var(--rose), var(--rose-deep)); box-shadow: 0 0 12px rgba(228, 142, 168, 0.6); }
:root[data-theme="cielo"] #controls svg { stroke: var(--rose-deep); }
:root[data-theme="cielo"] #filmstrip .thumb.current { box-shadow: 0 0 0 1.5px var(--rose-deep), 0 8px 24px rgba(80, 70, 110, 0.3); }
:root[data-theme="cielo"] #filmstrip .thumb { background: rgba(255,255,255,0.5); }
:root[data-theme="cielo"] #filmstrip .thumb.current { box-shadow: 0 0 0 1.5px var(--gold), 0 8px 24px rgba(80, 70, 110, 0.3); }