/* ============================================================
   Aura Viva — gallery themes
   ============================================================
   1. Scheme ownership: when a theme is active (html[data-theme]),
      force the theme's light/dark scheme onto the chrome (menu,
      header, icons) regardless of the OS preference. These rules
      are gated on [data-theme], so the default (no theme) gallery
      keeps following the OS via the existing @media queries —
      zero regression.
   2. Atmosphere: per-theme layered light (soft radial glows,
      vignettes, film grain) painted on a fixed pseudo-element
      behind the motif + content. Pure CSS — no JS involved.
   3. Motif: falling-particle ambiance. Two nested spans per
      particle: the outer falls, the inner drifts sideways and
      rotates on its own period → organic, never-synchronized
      motion. Depth tiers (near/mid/far) add parallax.
   4. Per-theme splash loading symbols + accent aura.
   ============================================================ */

/* ---- 1. Scheme ownership ----
   The view-mode chrome (base/menu/modal/toast/public) keys its
   light/dark styling off html.av-scheme-light / .av-scheme-dark
   (set by JS) instead of @media, so a forced theme overrides the OS.
   Header icons follow the theme's text color in any themed scheme. */
html[data-theme] .icon-button svg {
  color: var(--av-fg);
}

/* ---- 2. Atmosphere (per-theme layered light) ----
   --av-atmo holds each theme's light composition. It is painted:
     · behind the gallery on a fixed body::before (z -2, under the
       motif at -1, over the body's base gradient), and
     · onto the splash, so the loading screen already breathes.
   Layer alphas are deliberately gentle — the photos are the show. */

html[data-theme] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image: var(--av-atmo, none);
}

/* Film grain on dark themes only — kills gradient banding and adds a
   quiet, cinematic texture. (Light themes don't band; skip the dust.) */
html.av-scheme-dark[data-theme] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* The splash carries the same atmosphere over the theme gradient. */
html[data-theme] .splash {
  background:
    var(--av-atmo, radial-gradient(1000px 600px at 50% 30%, rgba(255, 255, 255, 0.06), transparent 70%)),
    linear-gradient(160deg, var(--av-bg-1, #171a1f), var(--av-bg-2, #0f1115));
}

/* — Dark themes: glowing auras + a soft vignette for depth. — */

/* Navidad — candle-gold star glow, pine mist, hearth warmth. */
html[data-theme="navidad"] {
  --av-atmo:
    radial-gradient(1100px 700px at 82% -12%, rgba(213, 168, 88, 0.20), transparent 60%),
    radial-gradient(900px 620px at 10% 110%, rgba(88, 132, 100, 0.26), transparent 62%),
    radial-gradient(720px 520px at 50% 42%, rgba(244, 236, 221, 0.05), transparent 65%),
    radial-gradient(140% 100% at 50% 50%, transparent 55%, rgba(7, 13, 9, 0.52) 100%);
}

/* Año Nuevo — champagne burst over midnight, a whisper of indigo. */
html[data-theme="anonuevo"] {
  --av-atmo:
    radial-gradient(1050px 680px at 78% -10%, rgba(212, 175, 55, 0.22), transparent 58%),
    radial-gradient(820px 560px at 6% 22%, rgba(118, 108, 178, 0.10), transparent 60%),
    radial-gradient(640px 440px at 32% 112%, rgba(218, 156, 74, 0.10), transparent 60%),
    radial-gradient(140% 100% at 50% 50%, transparent 52%, rgba(2, 4, 8, 0.58) 100%);
}

/* Día del Padre — a bronze reading-lamp glow over slate. */
html[data-theme="diapadre"] {
  --av-atmo:
    radial-gradient(1000px 660px at 14% -10%, rgba(176, 141, 87, 0.20), transparent 60%),
    radial-gradient(880px 600px at 92% 108%, rgba(96, 118, 142, 0.14), transparent 62%),
    radial-gradient(700px 500px at 55% 40%, rgba(232, 226, 214, 0.045), transparent 65%),
    radial-gradient(140% 100% at 50% 50%, transparent 55%, rgba(10, 13, 17, 0.5) 100%);
}

/* — Light themes: tinted corner washes + a white center lift. — */

/* San Valentín — rose light from above, deeper rose beneath. */
html[data-theme="sanvalentin"] {
  --av-atmo:
    radial-gradient(1000px 700px at 85% -8%, rgba(226, 152, 168, 0.30), transparent 60%),
    radial-gradient(900px 650px at 4% 108%, rgba(196, 108, 128, 0.20), transparent 62%),
    radial-gradient(720px 520px at 45% 38%, rgba(255, 255, 255, 0.34), transparent 66%);
}

/* Día de la Madre — mauve morning light, peach warmth. */
html[data-theme="diamadre"] {
  --av-atmo:
    radial-gradient(1000px 700px at 12% -8%, rgba(192, 132, 151, 0.26), transparent 60%),
    radial-gradient(880px 640px at 94% 110%, rgba(232, 176, 144, 0.22), transparent 62%),
    radial-gradient(720px 520px at 50% 40%, rgba(255, 255, 255, 0.34), transparent 66%);
}

/* Cumpleaños — party light: coral, sage and gold, softly mixed. */
html[data-theme="cumpleanos"] {
  --av-atmo:
    radial-gradient(950px 660px at 88% -8%, rgba(199, 127, 82, 0.24), transparent 58%),
    radial-gradient(860px 620px at 2% 106%, rgba(122, 154, 110, 0.20), transparent 60%),
    radial-gradient(700px 500px at 8% -6%, rgba(199, 154, 63, 0.16), transparent 55%),
    radial-gradient(720px 520px at 50% 42%, rgba(255, 255, 255, 0.32), transparent 66%);
}

/* Aniversario — champagne shimmer, warm and celebratory. */
html[data-theme="aniversario"] {
  --av-atmo:
    radial-gradient(1050px 700px at 80% -10%, rgba(199, 154, 63, 0.22), transparent 58%),
    radial-gradient(880px 620px at 8% 110%, rgba(212, 168, 138, 0.18), transparent 62%),
    radial-gradient(720px 520px at 48% 40%, rgba(255, 255, 255, 0.36), transparent 66%);
}

/* Mascota — honey-warm afternoon light. */
html[data-theme="mascota"] {
  --av-atmo:
    radial-gradient(1000px 680px at 84% -8%, rgba(178, 140, 96, 0.24), transparent 60%),
    radial-gradient(860px 620px at 6% 108%, rgba(138, 109, 79, 0.16), transparent 62%),
    radial-gradient(720px 520px at 46% 40%, rgba(255, 250, 240, 0.34), transparent 66%);
}

/* Invierno — pale ice light from above, frost lift, cool base. */
html[data-theme="invierno"] {
  --av-atmo:
    radial-gradient(1050px 700px at 78% -10%, rgba(126, 150, 168, 0.26), transparent 60%),
    radial-gradient(860px 620px at 6% 110%, rgba(94, 118, 138, 0.16), transparent 62%),
    radial-gradient(740px 540px at 45% 36%, rgba(255, 255, 255, 0.42), transparent 66%);
}

/* Primavera — fresh green from below, blossom pink from above. */
html[data-theme="primavera"] {
  --av-atmo:
    radial-gradient(980px 680px at 86% -8%, rgba(201, 135, 154, 0.20), transparent 60%),
    radial-gradient(920px 660px at 6% 110%, rgba(122, 154, 110, 0.26), transparent 62%),
    radial-gradient(720px 520px at 46% 38%, rgba(255, 255, 255, 0.36), transparent 66%);
}

/* Verano — one big golden sun, sand-warm below. */
html[data-theme="verano"] {
  --av-atmo:
    radial-gradient(1150px 760px at 84% -14%, rgba(222, 158, 92, 0.30), transparent 60%),
    radial-gradient(880px 620px at 4% 112%, rgba(199, 127, 82, 0.14), transparent 62%),
    radial-gradient(720px 520px at 42% 40%, rgba(255, 252, 240, 0.32), transparent 66%);
}

/* Otoño — amber light through leaves, rust beneath. */
html[data-theme="otono"] {
  --av-atmo:
    radial-gradient(1020px 700px at 82% -10%, rgba(190, 118, 66, 0.26), transparent 60%),
    radial-gradient(880px 640px at 4% 110%, rgba(140, 84, 46, 0.18), transparent 62%),
    radial-gradient(720px 520px at 46% 40%, rgba(255, 246, 230, 0.30), transparent 66%);
}

/* ---- 3. Motif (falling-particle ambiance) ---- */

.av-motif {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: -1; /* behind gallery content, above the atmosphere + gradient */
}

/* Splash variant sits inside the splash overlay, behind its text. */
.av-motif--splash {
  position: absolute;
  z-index: 1;
}
.splash .splash__inner {
  position: relative;
  z-index: 2;
}

/* Outer span — the fall. Peak opacity comes from the depth tier (--mo). */
.av-motif__p {
  position: absolute;
  top: -10vh;
  line-height: 1;
  opacity: 0;
  color: var(--av-accent, #ffffff);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  animation-name: avMotifFall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform, opacity;
}

/* Inner span — sideways drift + rotation on its own period. */
.av-motif__i {
  display: inline-block;
  animation-name: avMotifDrift; /* gentle pendulum by default */
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  will-change: transform;
}

/* Depth tiers → parallax: far particles are fainter and softly blurred. */
.av-motif__p--d0 { --mo: 0.62; }
.av-motif__p--d1 { --mo: 0.45; filter: blur(0.35px); }
.av-motif__p--d2 { --mo: 0.32; filter: blur(0.75px); }

/* Vertical fall + fade — horizontal life lives on the inner span. */
@keyframes avMotifFall {
  0%   { transform: translateY(-10vh); opacity: 0; }
  10%  { opacity: var(--mo, 0.5); }
  88%  { opacity: var(--mo, 0.5); }
  100% { transform: translateY(112vh); opacity: 0; }
}

/* Pendulum sway — hearts, sparkles. */
@keyframes avMotifDrift {
  0%, 100% { transform: translateX(-10px) rotate(-14deg); }
  50%      { transform: translateX(10px) rotate(14deg); }
}

/* Tumble — full spin + sideways drift; loops cleanly at 360°. */
@keyframes avMotifDriftSpin {
  0%   { transform: translateX(-9px) rotate(0deg); }
  25%  { transform: translateX(7px)  rotate(90deg); }
  50%  { transform: translateX(-5px) rotate(180deg); }
  75%  { transform: translateX(9px)  rotate(270deg); }
  100% { transform: translateX(-9px) rotate(360deg); }
}

/* Snow, leaves, petals and confetti tumble; the rest sway. */
[data-theme="navidad"] .av-motif__i,
[data-theme="invierno"] .av-motif__i,
[data-theme="otono"] .av-motif__i,
[data-theme="diamadre"] .av-motif__i,
[data-theme="primavera"] .av-motif__i,
[data-theme="cumpleanos"] .av-motif__i {
  animation-name: avMotifDriftSpin;
  animation-timing-function: linear;
}

/* ---- Per-theme particle palettes ----
   Base color first, then --c1/--c2/--c3 variants so the field mixes
   naturally (assigned round-robin in core.js makeMotifLayer). */

/* Snowfalls — white flakes; navidad slips in the odd golden one. */
[data-theme="navidad"] .av-motif__p,
[data-theme="invierno"] .av-motif__p {
  color: rgba(255, 255, 255, 0.92);
  text-shadow: none;
}
[data-theme="navidad"] .av-motif__p--c3 { color: rgba(231, 193, 122, 0.95); }
[data-theme="invierno"] .av-motif__p--c2 { color: rgba(168, 195, 214, 0.95); }

/* San Valentín — roses in three depths. */
[data-theme="sanvalentin"] .av-motif__p { color: #C76B7E; }
[data-theme="sanvalentin"] .av-motif__p--c1 { color: #D98FA3; }
[data-theme="sanvalentin"] .av-motif__p--c3 { color: #A8475B; }

/* Día de la Madre — mauve petals, light and deep. */
[data-theme="diamadre"] .av-motif__p { color: #C9879A; }
[data-theme="diamadre"] .av-motif__p--c1 { color: #DBA8B8; }
[data-theme="diamadre"] .av-motif__p--c3 { color: #B06A80; }

/* Primavera — green petals with blossom-pink strays. */
[data-theme="primavera"] .av-motif__p { color: #8DA77E; }
[data-theme="primavera"] .av-motif__p--c1 { color: #C9879A; }
[data-theme="primavera"] .av-motif__p--c2 { color: #A8BC96; }
[data-theme="primavera"] .av-motif__p--c3 { color: #D9A8B8; }

/* Otoño — a spread of turning leaves. */
[data-theme="otono"] .av-motif__p { color: #B0703E; }
[data-theme="otono"] .av-motif__p--c1 { color: #8F5A34; }
[data-theme="otono"] .av-motif__p--c2 { color: #C08A52; }
[data-theme="otono"] .av-motif__p--c3 { color: #96683F; }

/* Cumpleaños — true multicolor confetti. */
[data-theme="cumpleanos"] .av-motif__p { color: #C77F52; }
[data-theme="cumpleanos"] .av-motif__p--c1 { color: #7A9A6E; }
[data-theme="cumpleanos"] .av-motif__p--c2 { color: #A8475B; }
[data-theme="cumpleanos"] .av-motif__p--c3 { color: #C79A3F; }

/* Año Nuevo / Aniversario — gold sparkle with champagne highlights. */
[data-theme="anonuevo"] .av-motif__p--c1 { color: #E7D9A8; }
[data-theme="aniversario"] .av-motif__p--c1 { color: #D4A88A; }

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

/* ---- 4. Per-theme splash loading symbols ---- */

.halo--themed {
  position: relative;
  z-index: 0;
}

/* Soft pulsing aura behind the themed symbol. */
.halo--themed::before {
  content: "";
  position: absolute;
  inset: -16%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--av-accent, #FFD778) 0%, transparent 60%);
  opacity: 0.2;
  filter: blur(8px);
  animation: ssGlowPulse 2.8s ease-in-out infinite;
}
@keyframes ssGlowPulse {
  0%, 100% { opacity: 0.14; transform: scale(0.92); }
  50%      { opacity: 0.28; transform: scale(1.05); }
}

.halo--themed .av-splash-svg {
  width: 100%;
  height: 100%;
  display: block;
  color: var(--av-accent, #FFD778);
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.16));
}
/* Animated parts pivot around their own centre, cross-browser. */
.av-splash-svg .ss-grow,
.av-splash-svg .ss-star,
.av-splash-svg .ss-heart,
.av-splash-svg .ss-flake,
.av-splash-svg .ss-sun,
.av-splash-svg .ss-rays,
.av-splash-svg .ss-leaf,
.av-splash-svg .ss-flame,
.av-splash-svg [class^="ss-spark"] {
  transform-box: fill-box;
  transform-origin: center;
}

/* Christmas tree — gentle breathe + twinkling star */
.av-splash-svg .ss-grow { animation: ssBreathe 2.6s ease-in-out infinite; }
.av-splash-svg .ss-star { animation: ssTwinkle 1.5s ease-in-out infinite; }

/* Heart — heartbeat */
.av-splash-svg .ss-heart { animation: ssBeat 1.3s ease-in-out infinite; }

/* Snowflake — slow spin */
.av-splash-svg .ss-flake { animation: ssSpin 12s linear infinite; }

/* Spring flower — gentle sway, pivoting at the stem base */
.av-splash-svg .ss-flower3 {
  animation: ssSway 3.6s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center bottom;
}

/* Summer sun — rotating rays + breathing disc */
.av-splash-svg .ss-rays { animation: ssSpin 14s linear infinite; }
.av-splash-svg .ss-sun { animation: ssBreathe 2.8s ease-in-out infinite; }

/* Leaf — sway */
.av-splash-svg .ss-leaf { animation: ssSway 2.8s ease-in-out infinite; }

/* Sparkles — staggered twinkle */
.av-splash-svg .ss-spark-main { animation: ssTwinkle 1.6s ease-in-out infinite; }
.av-splash-svg .ss-spark-2 { animation: ssTwinkle 1.6s ease-in-out 0.5s infinite; }
.av-splash-svg .ss-spark-3 { animation: ssTwinkle 1.6s ease-in-out 0.9s infinite; }

/* Cake — flickering flame */
.av-splash-svg .ss-flame { animation: ssFlicker 0.85s ease-in-out infinite; }

@keyframes ssBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes ssTwinkle { 0%, 100% { transform: scale(0.85); opacity: 0.5; } 50% { transform: scale(1.15); opacity: 1; } }
@keyframes ssBeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.14); } 30% { transform: scale(1); } 45% { transform: scale(1.1); } 60% { transform: scale(1); } }
@keyframes ssSpin { to { transform: rotate(360deg); } }
@keyframes ssSway { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes ssFlicker { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.18, 1.28); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .halo--themed::before { animation: none; }
  .av-splash-svg .ss-grow,
  .av-splash-svg .ss-star,
  .av-splash-svg .ss-heart,
  .av-splash-svg .ss-flake,
  .av-splash-svg .ss-flower3,
  .av-splash-svg .ss-sun,
  .av-splash-svg .ss-rays,
  .av-splash-svg .ss-leaf,
  .av-splash-svg .ss-flame,
  .av-splash-svg [class^="ss-spark"] {
    animation: none;
  }
}