/* =====================================================================
   SparkCMS Animations Library v1.0
   ---------------------------------------------------------------------
   Librería de animaciones reusables adaptables por CSS variables.
   Cada preset es independiente — inclúyelo solo cuando lo uses.

   VARIABLES (override por sitio/template vía :root o por componente):
     --spark-c1   : color primario (default var(--brand-primary, #4f46e5))
     --spark-c2   : color secundario (default var(--brand-secondary, #7c3aed))
     --spark-c3   : color accent (default var(--brand-accent, #6366f1))
     --spark-speed: multiplicador de velocidad (default 1; 0.5 = doble rápido)
     --spark-font-display : fuente heading (default var(--font-display))

   USO: aplica clases como `spark-anim-*` al elemento. Todas respetan
        prefers-reduced-motion automáticamente.
   ===================================================================== */

:root {
  --spark-c1: var(--brand-primary, #4f46e5);
  --spark-c2: var(--brand-secondary, #7c3aed);
  --spark-c3: var(--brand-accent, #6366f1);
  --spark-speed: 1;
}

/* =====================================================================
   1. ORB PULSE — fondo radial animado (heros, CTAs)
   ===================================================================== */
.spark-orb {
  position: absolute;
  width: var(--orb-size, 360px);
  height: var(--orb-size, 360px);
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--spark-c1) 45%, transparent) 0%,
    color-mix(in srgb, var(--spark-c2) 20%, transparent) 40%,
    transparent 70%);
  filter: blur(var(--orb-blur, 50px));
  animation: spark-orb-pulse calc(6s * var(--spark-speed)) cubic-bezier(.4, 0, .2, 1) infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes spark-orb-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 0.85; transform: scale(1.12); }
}
.spark-orb--sm { --orb-size: 200px; }
.spark-orb--lg { --orb-size: 500px; --orb-blur: 70px; }

/* =====================================================================
   2. FLOATING CARDS — pila de 3 tarjetas flotantes con rotación (hero editorial)
   ===================================================================== */
.spark-floating-cards {
  position: relative;
  perspective: 1400px;
}
.spark-fcard {
  position: absolute;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 16px;
  box-shadow:
    0 20px 40px -14px rgba(15, 23, 42, 0.18),
    0 6px 12px -6px rgba(15, 23, 42, 0.08);
  transition: transform 0.6s cubic-bezier(.22, 1, .36, 1), box-shadow 0.4s;
  will-change: transform;
}
html.dark .spark-fcard {
  background: rgba(15, 23, 42, 0.82);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 20px 40px -14px rgba(0, 0, 0, 0.6),
    0 6px 12px -6px rgba(0, 0, 0, 0.3);
}
.spark-fcard--1 {
  top: 30px; left: 0;  width: 260px; padding: 18px 20px;
  transform: rotate(-6deg);
  animation: spark-float-a calc(6s * var(--spark-speed)) ease-in-out infinite;
  z-index: 2;
}
.spark-fcard--2 {
  top: 150px; left: 60px; width: 300px; padding: 18px 20px;
  transform: rotate(2deg) scale(1.06);
  animation: spark-float-b calc(7.5s * var(--spark-speed)) ease-in-out infinite;
  z-index: 3;
}
.spark-fcard--3 {
  top: 290px; left: 30px; width: 260px; padding: 18px 20px;
  transform: rotate(5deg);
  animation: spark-float-c calc(5.5s * var(--spark-speed)) ease-in-out infinite;
  z-index: 2;
}
@keyframes spark-float-a { 0%,100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(-6deg) translateY(-14px); } }
@keyframes spark-float-b { 0%,100% { transform: rotate(2deg) scale(1.06) translateY(0); } 50% { transform: rotate(2deg) scale(1.06) translateY(-20px); } }
@keyframes spark-float-c { 0%,100% { transform: rotate(5deg) translateY(0); } 50% { transform: rotate(5deg) translateY(-10px); } }

.spark-fcard__tag {
  display: inline-block; font-size: 10px; font-weight: 800;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--spark-c1);
  background: color-mix(in srgb, var(--spark-c1) 12%, transparent);
  padding: 4px 8px; border-radius: 999px; margin-bottom: 10px;
}
.spark-fcard__title {
  font-family: var(--spark-font-display, var(--font-display, 'Playfair Display'), serif);
  font-size: 15px; font-weight: 700; line-height: 1.3;
  color: rgb(15, 23, 42); letter-spacing: -0.01em; margin-bottom: 10px;
}
html.dark .spark-fcard__title { color: rgb(241, 245, 249); }
.spark-fcard__meta {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: rgb(100, 116, 139);
}
html.dark .spark-fcard__meta { color: rgb(148, 163, 184); }
.spark-fcard__dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--spark-c1);
  animation: spark-dot-blink calc(1.6s * var(--spark-speed)) ease-in-out infinite;
}
@keyframes spark-dot-blink { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } }

/* =====================================================================
   3. DOTS FIELD — partículas decorativas con órbitas
   ===================================================================== */
.spark-dot {
  position: absolute; border-radius: 50%;
  background: var(--spark-c1); z-index: 1; pointer-events: none;
}
.spark-dot--a { width: 8px; height: 8px; animation: spark-orbit-a calc(9s * var(--spark-speed)) linear infinite; }
.spark-dot--b { width: 5px; height: 5px; opacity: 0.7; animation: spark-orbit-b calc(12s * var(--spark-speed)) linear infinite; }
.spark-dot--c { width: 10px; height: 10px; opacity: 0.55; animation: spark-orbit-c calc(11s * var(--spark-speed)) linear infinite; }
@keyframes spark-orbit-a { from { transform: translate(0,0); } 33% { transform: translate(10px, -14px); } 66% { transform: translate(-8px, 6px); } to { transform: translate(0,0); } }
@keyframes spark-orbit-b { from { transform: translate(0,0); } 50% { transform: translate(-14px, -10px); } to { transform: translate(0,0); } }
@keyframes spark-orbit-c { from { transform: translate(0,0); } 50% { transform: translate(12px, -8px); } to { transform: translate(0,0); } }

/* =====================================================================
   4. KEN BURNS — zoom lento en fondos de imagen (heros con fotos)
   ===================================================================== */
.spark-ken-burns {
  animation: spark-ken-burns calc(10s * var(--spark-speed)) cubic-bezier(.22, 1, .36, 1) both;
  transform-origin: center center;
}
@keyframes spark-ken-burns {
  from { transform: scale(1.12); }
  to   { transform: scale(1); }
}
.spark-ken-burns--loop {
  animation: spark-ken-burns-loop calc(16s * var(--spark-speed)) ease-in-out infinite alternate;
}
@keyframes spark-ken-burns-loop {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.08) translate(-1%, -1%); }
}

/* =====================================================================
   5. TYPEWRITER — texto que aparece letra a letra (ver JS para texto dinámico)
   CSS-only version: usa ch-based width animation
   ===================================================================== */
.spark-typewriter {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid var(--spark-c1);
  animation:
    spark-tw-type calc(3s * var(--spark-speed)) steps(40, end) both,
    spark-tw-caret 0.75s step-end infinite;
  max-width: fit-content;
}
@keyframes spark-tw-type { from { width: 0; } to { width: 100%; } }
@keyframes spark-tw-caret { 50% { border-right-color: transparent; } }

/* =====================================================================
   6. GRADIENT TEXT SWEEP — headlines con gradient animado
   ===================================================================== */
.spark-gradient-text {
  background: linear-gradient(90deg, var(--spark-c1), var(--spark-c2), var(--spark-c1));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: spark-gradient-sweep calc(6s * var(--spark-speed)) ease-in-out infinite;
}
@keyframes spark-gradient-sweep {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* =====================================================================
   7. CARD TILT — hover 3D tilt (galerías, product cards)
   ===================================================================== */
.spark-tilt {
  transition: transform 0.5s cubic-bezier(.22,1,.36,1);
  transform-style: preserve-3d;
  will-change: transform;
}
.spark-tilt:hover {
  transform: perspective(1200px) rotateX(3deg) rotateY(-3deg) translateY(-4px);
}

/* =====================================================================
   8. SHIMMER BORDER — botones premium con borde animado
   ===================================================================== */
.spark-shimmer {
  position: relative;
  overflow: hidden;
  background: linear-gradient(100deg, var(--spark-c1) 0%, var(--spark-c2) 50%, var(--spark-c1) 100%);
  background-size: 220% 100%;
  animation: spark-shimmer-sweep calc(12s * var(--spark-speed)) ease-in-out infinite;
  color: #fff;
}
@keyframes spark-shimmer-sweep {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.spark-shimmer::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.45) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform 0.8s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.spark-shimmer:hover::after { transform: translateX(120%); }

/* =====================================================================
   9. REVEAL ON SCROLL — 4 direcciones (requiere JS o fallback class)
   ===================================================================== */
.spark-reveal {
  opacity: 0; transform: translateY(60px);
  transition: opacity 1s cubic-bezier(.22,1,.36,1), transform 1s cubic-bezier(.22,1,.36,1);
  transition-delay: var(--spark-delay, 0ms);
}
.spark-reveal--left  { transform: translateX(-60px); }
.spark-reveal--right { transform: translateX(60px); }
.spark-reveal--zoom  { transform: scale(.85); }
.spark-reveal.is-visible,
.is-visible .spark-reveal { opacity: 1; transform: none; }

/* =====================================================================
   10. COUNTER — números grandes (JS anima el valor)
   ===================================================================== */
.spark-counter {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  font-family: var(--spark-font-display, var(--font-display, 'Playfair Display'), serif);
  font-weight: 800;
  letter-spacing: -0.03em;
}

/* =====================================================================
   11. CONNECTING LINE — SVG serpenteante (decorativo entre elementos)
   ===================================================================== */
.spark-connector {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  color: var(--spark-c1);
  pointer-events: none;
  z-index: 1;
  animation: spark-connector-drift calc(14s * var(--spark-speed)) ease-in-out infinite;
}
.spark-connector path {
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-dasharray: 4 6;
  stroke-linecap: round;
  fill: none;
  opacity: 0.35;
}
@keyframes spark-connector-drift {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(4px, -6px); }
}

/* =====================================================================
   12. PULSE RING — círculos concéntricos expandiéndose (notificaciones, live)
   ===================================================================== */
.spark-pulse-ring {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.spark-pulse-ring::before,
.spark-pulse-ring::after {
  content: '';
  position: absolute; inset: 0;
  border: 2px solid var(--spark-c1);
  border-radius: 50%;
  opacity: 0;
  animation: spark-pulse-ring calc(2s * var(--spark-speed)) ease-out infinite;
}
.spark-pulse-ring::after { animation-delay: calc(1s * var(--spark-speed)); }
@keyframes spark-pulse-ring {
  0%   { transform: scale(1);   opacity: 0.7; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* =====================================================================
   13. AURORA BG — fondo con gradiente aurora (hero backgrounds)
   ===================================================================== */
.spark-aurora-bg {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 900px 500px at 20% 10%, color-mix(in srgb, var(--spark-c1) 18%, transparent), transparent 60%),
    radial-gradient(ellipse 700px 400px at 85% 30%, color-mix(in srgb, var(--spark-c2) 14%, transparent), transparent 55%);
  animation: spark-aurora-drift calc(20s * var(--spark-speed)) ease-in-out infinite;
}
@keyframes spark-aurora-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-20px, 10px) scale(1.05); }
}

/* =====================================================================
   14. MAGNETIC BUTTON — requiere JS
   (CSS base: transform smooth transition)
   ===================================================================== */
.spark-magnetic {
  display: inline-flex;
  transition: transform 0.25s cubic-bezier(.22,1,.36,1);
  will-change: transform;
}

/* =====================================================================
   Reduced motion: desactivar TODAS las animaciones (accesibilidad)
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .spark-orb,
  .spark-fcard,
  .spark-fcard--1, .spark-fcard--2, .spark-fcard--3,
  .spark-fcard__dot,
  .spark-dot, .spark-dot--a, .spark-dot--b, .spark-dot--c,
  .spark-ken-burns, .spark-ken-burns--loop,
  .spark-typewriter,
  .spark-gradient-text,
  .spark-shimmer, .spark-shimmer::after,
  .spark-pulse-ring::before, .spark-pulse-ring::after,
  .spark-aurora-bg,
  .spark-connector,
  .spark-reveal {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .spark-reveal { opacity: 1 !important; }
}