/* ================================================================
   Módulos globales — reusables por cualquier pieza
   Escena de fondo (scene) + Movimiento (sceneMove) + Efecto (fx)
   Portado del motor cartaviva/card.css, extraído para ser reusable
   como carga externa (no cuenta al peso <50KB del index.html de la
   pieza). Todas las piezas usan las mismas clases: pega la capa
   .cm-scene y .cm-fx en el DOM y aplica las clases desde JS.
   Reglas R48 (scene/sceneMove/fx) — SIEMPRE Pro.
   ================================================================ */

/* -------- ESCENA (scene): capa de fondo detrás de la tarjeta ---- */
.cm-scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.cm-scene-liso { background: transparent; }
.cm-scene-glow { background: radial-gradient(45% 40% at 50% 42%, color-mix(in oklab, var(--accent, #c9a06a), transparent 82%), transparent 70%); }
.cm-scene-aurora {
  background:
    linear-gradient(160deg, color-mix(in oklab, var(--accent), transparent 85%), transparent 45%),
    radial-gradient(55% 45% at 82% 8%, color-mix(in oklab, #6a86c9, transparent 80%), transparent 60%),
    radial-gradient(55% 45% at 12% 88%, color-mix(in oklab, var(--accent), transparent 84%), transparent 60%);
}
.cm-scene-bokeh {
  background:
    radial-gradient(circle 70px at 22% 28%, color-mix(in oklab, var(--accent), transparent 78%), transparent 70%),
    radial-gradient(circle 100px at 76% 62%, color-mix(in oklab, var(--accent), transparent 86%), transparent 70%),
    radial-gradient(circle 46px at 62% 18%, color-mix(in oklab, var(--accent), transparent 80%), transparent 70%),
    radial-gradient(circle 60px at 35% 78%, color-mix(in oklab, var(--accent), transparent 88%), transparent 70%);
  filter: blur(2px);
}
.cm-scene-vineta { background: radial-gradient(72% 72% at 50% 48%, transparent 38%, rgba(0,0,0,.6) 100%); }
.cm-scene-estrellas { background: radial-gradient(50% 50% at 50% 38%, color-mix(in oklab, var(--accent), transparent 88%), transparent 70%); }
.cm-scene-estrellas b {
  position: absolute; width: var(--sz, 2px); height: var(--sz, 2px); border-radius: 50%;
  background: #fff; opacity: var(--o, .6); box-shadow: 0 0 4px #fff;
  animation: cm-star 3s ease-in-out var(--d, 0s) infinite;
}
@keyframes cm-star { 0%,100%{ opacity: calc(var(--o, .6) * .25); } 50%{ opacity: var(--o, .6); } }

/* -------- MOVIMIENTO DEL FONDO (sceneMove) --------------------- */
.cm-scenemv-deriva { transform: scale(1.16); animation: cm-bgdrift 22s ease-in-out infinite alternate; will-change: transform; }
.cm-scenemv-pulso  { animation: cm-bgpulse 8s ease-in-out infinite; will-change: transform; }
.cm-scenemv-giro   { transform: scale(1.45); transform-origin: center; animation: cm-bgspin 70s linear infinite; will-change: transform; }
@keyframes cm-bgdrift { from { transform: scale(1.16) translate(-3%, -2%); } to { transform: scale(1.2) translate(3%, 2%); } }
@keyframes cm-bgpulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes cm-bgspin  { from { transform: scale(1.45) rotate(0deg); } to { transform: scale(1.45) rotate(360deg); } }

/* -------- EFECTOS (fx): partículas + barrido -------------------- */
.cm-fx { position: absolute; inset: 0; z-index: 7; pointer-events: none; overflow: hidden; }
.cm-fx i { position: absolute; width: var(--sz, 3px); height: var(--sz, 3px); }
.cm-fx-destellos i {
  border-radius: 50%; background: radial-gradient(circle, #fff 0%, var(--accent) 55%, transparent 70%);
  box-shadow: 0 0 6px var(--accent); opacity: 0;
  animation: cm-twinkle var(--t, 4s) ease-in-out var(--d, 0s) infinite;
}
@keyframes cm-twinkle { 0%,100%{ opacity:0; transform:scale(.3); } 50%{ opacity:.95; transform:scale(1); } }
.cm-fx-brasas i {
  top: auto; bottom: -8px; border-radius: 50%;
  background: radial-gradient(circle, #ffe1b0, #e8742a 55%, transparent 70%);
  box-shadow: 0 0 7px #e8742a; opacity: 0;
  animation: cm-ember var(--t, 5s) linear var(--d, 0s) infinite;
}
@keyframes cm-ember {
  0%{ transform: translateY(0) translateX(0) scale(1); opacity:0; }
  12%{ opacity:.95; } 85%{ opacity:.5; }
  100%{ transform: translateY(-520px) translateX(14px) scale(.3); opacity:0; }
}
.cm-fx-corazones i {
  top: auto; bottom: -16px; width: auto; height: auto; line-height: 1;
  color: var(--accent); font-size: var(--sz, 12px); opacity: 0;
  animation: cm-heart var(--t, 6s) ease-in var(--d, 0s) infinite;
}
@keyframes cm-heart {
  0%{ transform: translateY(0) rotate(-6deg); opacity:0; }
  16%{ opacity:.85; }
  100%{ transform: translateY(-520px) rotate(8deg); opacity:0; }
}
.cm-fx-brillo::after {
  content: ""; position: absolute; inset: 0; z-index: 7; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, color-mix(in oklab, var(--accent), white 35%) 50%, transparent 62%);
  background-size: 280% 280%; mix-blend-mode: screen;
  animation: cm-shimmer 5s ease-in-out infinite;
}
@keyframes cm-shimmer {
  0%{ background-position: 130% 0; opacity:0; }
  35%{ opacity:.4; } 70%{ opacity:0; }
  100%{ background-position: -130% 0; opacity:0; }
}

@media (prefers-reduced-motion: reduce) {
  .cm-scene, .cm-scene *, .cm-fx, .cm-fx * { transition: none !important; animation: none !important; }
}