/* CVH-ALMAS-UNIFICAR v3.0 · 2026-06-06
   Sistema global aplicado a TODA la web salvo HOME 1764 (que tiene su propio sistema legacy inline).
   Reemplaza el dorado plano "inventado" v2 por la SPEC REAL extraída de HOME 1764:
     · Núcleo: #ffffff → #f8fdff → cyan rgba(190,232,255,.95) → dorado rgba(212,175,55,.42)
     · Glow 4 capas: white / white-cyan / cyan / dorado
     · Animaciones: cvhHomeEmberRise + cvhSoulPulse + cvhSoulCoreBeat + cvhSoulHaloBeat
   Cantidad reducida (vs 28 en home): 14 desktop. Selectores compatibles con el wrapper
   existente `[data-cvh-almas]` que ya inyecta el theme/post_content de capilla.

   Fuente: docs Drive CVH-MS8-46-ALMAS-LEGACY-SPEC.md + post_content 1764 (líneas 1193-1469).
   Performance: solo transform/opacity GPU + will-change + contain:paint. Sin filter animado pesado en N grande.
*/

/* ─── CONTENEDOR GLOBAL ─────────────────────────────────────────────────────── */
/* Acepta wrapper antiguo (.cvh-almas-bg, [data-cvh-almas]) y el del spec (.cvh-home-embers, [data-home-embers]) */
.cvh-almas-bg,
[data-cvh-almas],
.cvh-home-embers,
[data-home-embers] {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.9;
  contain: paint;
  will-change: transform;
}

/* Pseudo-elementos ambientales — dorado/ámbar (spec exacto §2.1) */
.cvh-almas-bg::before,
[data-cvh-almas]::before,
.cvh-home-embers::before,
[data-home-embers]::before {
  content: "";
  position: absolute;
  inset: -10vh -10vw;
  pointer-events: none;
  mix-blend-mode: screen;
  transform: translate3d(0,0,0);
  background:
    radial-gradient(ellipse 360px 190px at 12% 18%, rgba(255,192,77,0.13), transparent 66%),
    radial-gradient(ellipse 300px 180px at 82% 16%, rgba(212,175,55,0.10), transparent 68%),
    radial-gradient(ellipse 420px 220px at 70% 72%, rgba(255,165,0,0.09), transparent 70%),
    radial-gradient(ellipse 260px 170px at 20% 86%, rgba(240,234,214,0.055), transparent 72%);
  opacity: 0.72;
  filter: blur(0.25px);
  animation: cvhHomeAmbientDrift 34s ease-in-out infinite alternate;
}

.cvh-almas-bg::after,
[data-cvh-almas]::after,
.cvh-home-embers::after,
[data-home-embers]::after {
  content: "";
  position: absolute;
  inset: -10vh -10vw;
  pointer-events: none;
  mix-blend-mode: screen;
  transform: translate3d(0,0,0);
  background:
    radial-gradient(circle at 18% 26%, rgba(255,222,148,0.26) 0 1.2px, transparent 3.4px),
    radial-gradient(circle at 38% 64%, rgba(212,175,55,0.20) 0 1px, transparent 3px),
    radial-gradient(circle at 74% 32%, rgba(255,192,77,0.24) 0 1.1px, transparent 3.2px),
    radial-gradient(circle at 88% 78%, rgba(240,234,214,0.16) 0 0.9px, transparent 2.8px),
    radial-gradient(circle at 8%  74%, rgba(212,175,55,0.18) 0 1px, transparent 3px);
  opacity: 0.42;
  filter: blur(0.18px);
  animation: cvhHomeAmbientPulse 8s ease-in-out infinite;
}

/* ─── ALMA INDIVIDUAL — SPEC REAL R6.2L_SOULS_FINAL (§2.2) ──────────────────── */
/* Clases viejas .cvh-alma siguen mapeadas para no romper si alguna página las usa.
   Las nuevas son .cvh-home-ember (las que el JS unificado crea). */
.cvh-alma,
.cvh-home-ember {
  position: absolute;
  z-index: 1;
  bottom: -40px;
  width: var(--ember-size, 5px);
  height: var(--ember-size, 5px);
  border-radius: 999px;
  /* Gradient EXACTO del spec: blanco → blanco-cyan → cyan → dorado CVH */
  background: radial-gradient(circle,
    #ffffff 0 18%,
    #f8fdff 19% 30%,
    rgba(190,232,255,.95) 31% 46%,
    rgba(212,175,55,.42) 47% 68%,
    transparent 70%
  );
  /* Glow 4 capas — EXACTO del spec */
  box-shadow:
    0 0 calc(var(--ember-size) * .75) rgba(255,255,255,1),
    0 0 calc(var(--ember-size) * 1.6) rgba(235,250,255,.95),
    0 0 calc(var(--ember-size) * 3.2) rgba(120,200,255,.65),
    0 0 calc(var(--ember-size) * 5.4) rgba(212,175,55,.32);
  filter: saturate(1.25) brightness(1.35);
  opacity: var(--ember-opacity, .92);
  animation:
    cvhHomeEmberRise var(--ember-duration, 22s) linear infinite,
    cvhSoulPulse var(--ember-pulse, 3.8s) ease-in-out infinite;
  animation-delay: var(--ember-delay, 0s);
  will-change: transform, opacity, filter;
}

/* Núcleo blanco palpitante (§2.3) */
.cvh-alma::before,
.cvh-home-ember::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: max(3px, calc(var(--ember-size) * .42));
  height: max(3px, calc(var(--ember-size) * .42));
  transform: translate(-50%,-50%);
  border-radius: 999px;
  background: #ffffff;
  box-shadow:
    0 0 3px #ffffff,
    0 0 8px rgba(255,255,255,1),
    0 0 16px rgba(210,245,255,.95),
    0 0 28px rgba(120,200,255,.72);
  opacity: .98;
  animation: cvhSoulCoreBeat var(--ember-pulse, 3.8s) ease-in-out infinite;
}

/* Halo screen-blend grande (§2.4) */
.cvh-alma::after,
.cvh-home-ember::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: calc(var(--ember-size) * 5.5);
  height: calc(var(--ember-size) * 5.5);
  min-width: 18px;
  min-height: 18px;
  transform: translate(-50%,-50%);
  border-radius: 999px;
  background: radial-gradient(circle,
    rgba(255,255,255,.55) 0 6%,
    rgba(205,240,255,.38) 7% 24%,
    rgba(212,175,55,.20) 25% 48%,
    transparent 70%
  );
  filter: blur(2px);
  opacity: .75;
  mix-blend-mode: screen;
  animation: cvhSoulHaloBeat var(--ember-pulse, 3.8s) ease-in-out infinite;
}

/* Variante --bright (saturada — 1 cada 5) §2.6 */
.cvh-home-ember--bright {
  background: radial-gradient(circle at 50% 50%,
    #FFFFFF 0 30%,
    rgba(236,250,255,1) 31% 43%,
    rgba(255,255,255,0.54) 44% 49%,
    rgba(255,222,148,0.48) 60%,
    rgba(255,165,0,0.18) 75%,
    transparent 88%
  );
  box-shadow:
    0 0 7px #ffffff,
    0 0 17px rgba(226,250,255,.90),
    0 0 34px rgba(255,207,112,.54),
    0 0 62px rgba(212,175,55,.30);
}

/* Capas marcadoras (sin reglas adicionales según spec §2.6) */
.cvh-home-ember--soft {}
.cvh-home-ember--large {}
.cvh-home-ember--huge {}

/* ─── CONTENIDO CVH SOBRE ALMAS ─────────────────────────────────────────────── */
#cvh-cd-page { position: relative; z-index: 2; }

/* ─── @KEYFRAMES (spec §2.5 EXACTOS) ────────────────────────────────────────── */
@keyframes cvhHomeAmbientDrift {
  0%   { transform: translate3d(-1.4vw,  1vh,   0) scale(1);     opacity: 0.58; }
  100% { transform: translate3d( 1.6vw, -1.8vh, 0) scale(1.035); opacity: 0.78; }
}
@keyframes cvhAlmasDrift {
  0%   { transform: translate3d(-1.4vw,  1vh,   0) scale(1);     opacity: 0.58; }
  100% { transform: translate3d( 1.6vw, -1.8vh, 0) scale(1.035); opacity: 0.78; }
}

@keyframes cvhHomeAmbientPulse {
  0%, 100% { opacity: 0.28; }
  48%      { opacity: 0.46; }
}
@keyframes cvhAlmasPulse {
  0%, 100% { opacity: 0.28; }
  48%      { opacity: 0.46; }
}

@keyframes cvhHomeEmberRise {
  0%   { opacity: 0;                              transform: translate3d(0, 18px, 0) scale(var(--ember-scale-start, 1)); }
  12%  { opacity: var(--ember-opacity, 0.66); }
  48%  { opacity: var(--ember-opacity-mid, 0.54); transform: translate3d(var(--ember-sway, 18px), -48vh, 0) scale(var(--ember-scale-mid, 1.04)); }
  76%  { opacity: var(--ember-opacity-late, 0.34); }
  100% { opacity: 0;                              transform: translate3d(var(--ember-drift, 26px), -116vh, 0) scale(var(--ember-scale-end, 1.08)); }
}
@keyframes cvhAlmaRise {
  0%   { opacity: 0;                              transform: translate3d(0, 18px, 0) scale(var(--ember-scale-start, 1)); }
  12%  { opacity: var(--ember-opacity, 0.66); }
  48%  { opacity: var(--ember-opacity-mid, 0.54); transform: translate3d(var(--ember-sway, 18px), -48vh, 0) scale(var(--ember-scale-mid, 1.04)); }
  76%  { opacity: var(--ember-opacity-late, 0.34); }
  100% { opacity: 0;                              transform: translate3d(var(--ember-drift, 26px), -116vh, 0) scale(var(--ember-scale-end, 1.08)); }
}

@keyframes cvhSoulPulse {
  0%, 100% { filter: saturate(1.15) brightness(1.18); opacity: .78; }
  45%, 55% { filter: saturate(1.45) brightness(1.85); opacity: 1; }
}

@keyframes cvhSoulCoreBeat {
  0%, 100% { transform: translate(-50%,-50%) scale(.82);  opacity: .82; }
  45%, 55% { transform: translate(-50%,-50%) scale(1.35); opacity: 1; }
}

@keyframes cvhSoulHaloBeat {
  0%, 100% { transform: translate(-50%,-50%) scale(.85);  opacity: .42; }
  45%, 55% { transform: translate(-50%,-50%) scale(1.22); opacity: .92; }
}

/* ─── RESPONSIVE ────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .cvh-almas-bg,
  [data-cvh-almas],
  .cvh-home-embers,
  [data-home-embers] { opacity: 0.72; }
}

/* ─── ACCESIBILIDAD — REDUCED MOTION ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cvh-almas-bg, .cvh-almas-bg::before, .cvh-almas-bg::after,
  [data-cvh-almas], [data-cvh-almas]::before, [data-cvh-almas]::after,
  .cvh-home-embers, .cvh-home-embers::before, .cvh-home-embers::after,
  [data-home-embers], [data-home-embers]::before, [data-home-embers]::after,
  .cvh-alma, .cvh-alma::before, .cvh-alma::after,
  .cvh-home-ember, .cvh-home-ember::before, .cvh-home-ember::after {
    animation: none !important;
    transition: none !important;
  }
  .cvh-almas-bg,
  [data-cvh-almas],
  .cvh-home-embers,
  [data-home-embers] { opacity: 0 !important; }
}

/* ─── PERFORMANCE ───────────────────────────────────────────────────────────── */
.cvh-almas-bg, [data-cvh-almas], .cvh-home-embers, [data-home-embers] {
  contain: paint !important;
}
.cvh-alma, .cvh-home-ember {
  pointer-events: none !important;
}

/* ─── B5 FIX — Footer/nav/contenido encima de partículas ─── */
.cvh-footer-premium,
.cvh-cd-footer,
.cvh-nav-premium,
footer.cvh-footer,
.cvh-f,
.cvh-footer-cd-wrap,
.site-footer,
.woodmart-footer {
  position: relative;
  z-index: 2;
}

/* ─── CVH-TANDA1B FIX 2 · MOBILE COMPOSITING-SAFE (≤768px) ─── */
/* Causa raíz bug iOS: contain:paint + will-change + position:fixed + mix-blend-mode + filter
   en 4+ pseudos = compositing layer stress → frame skip durante scroll → contenido desaparece.
   Fix: desactivar TODO el compositing pesado en móvil. */
@media (max-width: 768px) {
  .cvh-almas-bg, [data-cvh-almas],
  .cvh-home-embers, [data-home-embers] {
    contain: none !important;           /* contain:paint causa el bug */
    will-change: auto !important;        /* layer permanente innecesaria */
    z-index: 0 !important;
    opacity: 0.35 !important;            /* sutil para no saturar */
  }
  /* Quitar mix-blend y blur en pseudos móviles (los más caros) */
  .cvh-alma::after, .cvh-home-ember::after,
  .cvh-almas-bg::before, .cvh-almas-bg::after,
  [data-cvh-almas]::before, [data-cvh-almas]::after,
  .cvh-home-embers::before, .cvh-home-embers::after,
  [data-home-embers]::before, [data-home-embers]::after {
    mix-blend-mode: normal !important;
    filter: none !important;
  }
  /* Quitar filter animado saturate/brightness — sólo dejar rise composited */
  .cvh-alma, .cvh-home-ember {
    filter: none !important;
    animation-name: cvhHomeEmberRise !important;
  }
  /* Contenido SIEMPRE encima de las almas pase lo que pase en scroll */
  #cvh-cd-page {
    position: relative !important;
    z-index: 2 !important;
    isolation: isolate !important;
    background-color: #06060F !important;
  }
}

/* ─── CVH-TANDA1B FIX 2 · FADE-IN ESCALONADO ─── */
/* Apareción progresiva: cada alma materializa con un fade-in propio.
   El JS asigna --ember-delay creciente para garantizar escalonado lento. */
.cvh-alma, .cvh-home-ember {
  /* opacity inicial 0 — la animación cvhHomeEmberRise ya hace 0%{opacity:0} 12%{visible} */
  /* aquí solo aseguramos visibilidad smooth desde el principio */
  animation-fill-mode: both !important;
}

/* ─── CVH-TANDA1B FIX 2 · PAUSE ON SCROLL (defensivo iOS Safari) ─── */
/* Cuando el usuario hace scroll activo, pausamos las animaciones para que
   el navegador no compita por compositing → no hay frame skip → contenido nunca desaparece */
html.cvh-scrolling .cvh-alma,
html.cvh-scrolling .cvh-home-ember,
html.cvh-scrolling .cvh-alma::before,
html.cvh-scrolling .cvh-alma::after,
html.cvh-scrolling .cvh-home-ember::before,
html.cvh-scrolling .cvh-home-ember::after,
html.cvh-scrolling .cvh-almas-bg::before,
html.cvh-scrolling .cvh-almas-bg::after,
html.cvh-scrolling [data-cvh-almas]::before,
html.cvh-scrolling [data-cvh-almas]::after,
html.cvh-scrolling .cvh-home-embers::before,
html.cvh-scrolling .cvh-home-embers::after {
  animation-play-state: paused !important;
}