/* ============================================
   SISTEMA DE ANIMACIONES DE TEXTO SPLIT
   ============================================ */

/* Base: Ocultar palabras antes de animar */
[class*="split-animation-"] .word {
  display: inline-block;
  will-change: transform, opacity;
}

/* EFECTO 1: Fade desde abajo (estilo Quside) */
.split-animation-fade-up .word {
  opacity: 0;
  transform: translateY(100%);
}

.split-animation-fade-up.animate .word {
  opacity: 1;
  transform: translateY(0);
  transition: all var(--animation-duration, 800ms) cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-delay: calc(var(--animation-delay, 0ms) + (var(--word-index) * var(--stagger, 50ms)));
}

/* EFECTO 2: Fade desde arriba */
.split-animation-fade-down .word {
  opacity: 0;
  transform: translateY(-50px);
}

.split-animation-fade-down.animate .word {
  opacity: 1;
  transform: translateY(0);
  transition: all var(--animation-duration, 600ms) ease-out;
  transition-delay: calc(var(--animation-delay, 0ms) + (var(--word-index) * var(--stagger, 80ms)));
}

/* EFECTO 3: Fade desde la izquierda */
.split-animation-slide-left .word {
  opacity: 0;
  transform: translateX(-50px);
}

.split-animation-slide-left.animate .word {
  opacity: 1;
  transform: translateX(0);
  transition: all var(--animation-duration, 700ms) cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: calc(var(--animation-delay, 0ms) + (var(--word-index) * var(--stagger, 60ms)));
}

/* EFECTO 4: Fade desde la derecha */
.split-animation-slide-right .word {
  opacity: 0;
  transform: translateX(50px);
}

.split-animation-slide-right.animate .word {
  opacity: 1;
  transform: translateX(0);
  transition: all var(--animation-duration, 700ms) cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: calc(var(--animation-delay, 0ms) + (var(--word-index) * var(--stagger, 60ms)));
}

/* EFECTO 5: Escala + Fade */
.split-animation-scale .word {
  opacity: 0;
  transform: scale(0.5);
}

.split-animation-scale.animate .word {
  opacity: 1;
  transform: scale(1);
  transition: all var(--animation-duration, 600ms) cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition-delay: calc(var(--animation-delay, 0ms) + (var(--word-index) * var(--stagger, 70ms)));
}

/* EFECTO 6: Blur + Fade */
.split-animation-blur .word {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(30px);
}

.split-animation-blur.animate .word {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  transition: all var(--animation-duration, 900ms) ease-out;
  transition-delay: calc(var(--animation-delay, 0ms) + (var(--word-index) * var(--stagger, 60ms)));
}

/* EFECTO 7: Rotación 3D X */
.split-animation-rotate-x .word {
  opacity: 0;
  transform: rotateX(90deg) translateY(20px);
  transform-origin: center bottom;
}

.split-animation-rotate-x.animate .word {
  opacity: 1;
  transform: rotateX(0deg) translateY(0);
  transition: all var(--animation-duration, 800ms) cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-delay: calc(var(--animation-delay, 0ms) + (var(--word-index) * var(--stagger, 50ms)));
}

/* EFECTO 8: Flip 3D Y */
.split-animation-flip {
  perspective: 1000px;
}

.split-animation-flip .word {
  opacity: 0;
  transform: rotateY(180deg);
  transform-style: preserve-3d;
}

.split-animation-flip.animate .word {
  opacity: 1;
  transform: rotateY(0deg);
  transition: all var(--animation-duration, 800ms) ease-out;
  transition-delay: calc(var(--animation-delay, 0ms) + (var(--word-index) * var(--stagger, 60ms)));
}

/* EFECTO 9: Bounce (rebote) */
.split-animation-bounce .word {
  opacity: 0;
  transform: translateY(-100px);
}

.split-animation-bounce.animate .word {
  opacity: 1;
  transform: translateY(0);
  transition: all var(--animation-duration, 800ms) cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition-delay: calc(var(--animation-delay, 0ms) + (var(--word-index) * var(--stagger, 80ms)));
}

/* EFECTO 10: Elastic */
.split-animation-elastic .word {
  opacity: 0;
  transform: scale(0);
}

.split-animation-elastic.animate .word {
  opacity: 1;
  transform: scale(1);
  transition: all var(--animation-duration, 1000ms) cubic-bezier(0.68, -0.6, 0.32, 1.6);
  transition-delay: calc(var(--animation-delay, 0ms) + (var(--word-index) * var(--stagger, 50ms)));
}

/* EFECTO 11: Typewriter */
.split-animation-typewriter .word {
  opacity: 0;
  transform: translateX(-10px);
}

.split-animation-typewriter.animate .word {
  opacity: 1;
  transform: translateX(0);
  transition: all var(--animation-duration, 300ms) ease;
  transition-delay: calc(var(--animation-delay, 0ms) + (var(--word-index) * var(--stagger, 150ms)));
}

/* EFECTO 12: Glitch */
.split-animation-glitch .word {
  opacity: 0;
  transform: translateX(-20px) skewX(-10deg);
}

.split-animation-glitch.animate .word {
  opacity: 1;
  transform: translateX(0) skewX(0);
  transition: all var(--animation-duration, 400ms) cubic-bezier(0.87, 0, 0.13, 1);
  transition-delay: calc(var(--animation-delay, 0ms) + (var(--word-index) * var(--stagger, 40ms)));
}

/* ============================================
   VARIANTES RÁPIDAS PARA BRICKS BUILDER
   Solo añadir 2 clases: efecto + variante
   ============================================ */

/* ========== VELOCIDADES ========== */

.split-instant {
  --animation-delay: 0ms;
  --animation-duration: 300ms;
  --stagger: 20ms;
}

.split-fast {
  --animation-delay: 0ms;
  --animation-duration: 500ms;
  --stagger: 30ms;
}

.split-normal {
  --animation-delay: 0ms;
  --animation-duration: 800ms;
  --stagger: 50ms;
}

.split-slow {
  --animation-delay: 0ms;
  --animation-duration: 1200ms;
  --stagger: 80ms;
}

.split-elegant {
  --animation-delay: 300ms;
  --animation-duration: 1000ms;
  --stagger: 70ms;
}

.split-dramatic {
  --animation-delay: 500ms;
  --animation-duration: 1500ms;
  --stagger: 100ms;
}

/* ========== DELAYS PREDEFINIDOS ========== */

.split-delay-0 { --animation-delay: 0ms; }
.split-delay-200 { --animation-delay: 200ms; }
.split-delay-300 { --animation-delay: 300ms; }
.split-delay-500 { --animation-delay: 500ms; }
.split-delay-700 { --animation-delay: 700ms; }
.split-delay-1000 { --animation-delay: 1000ms; }
.split-delay-1500 { --animation-delay: 1500ms; }
.split-delay-2000 { --animation-delay: 2000ms; }
.split-delay-2500 { --animation-delay: 2500ms; }
.split-delay-3000 { --animation-delay: 3000ms; }

/* ========== STAGGER (cascada) PREDEFINIDOS ========== */

.split-stagger-none { --stagger: 0ms; }          /* Todas a la vez */
.split-stagger-minimal { --stagger: 10ms; }      /* Casi a la vez */
.split-stagger-tight { --stagger: 20ms; }        /* Muy juntas */
.split-stagger-compact { --stagger: 30ms; }      /* Juntas */
.split-stagger-normal { --stagger: 50ms; }       /* Normal */
.split-stagger-relaxed { --stagger: 80ms; }      /* Espaciadas */
.split-stagger-loose { --stagger: 120ms; }       /* Muy espaciadas */
.split-stagger-dramatic { --stagger: 200ms; }    /* Efecto dramático */

/* ========== DURACIONES PREDEFINIDAS ========== */

.split-duration-quick { --animation-duration: 300ms; }
.split-duration-fast { --animation-duration: 500ms; }
.split-duration-medium { --animation-duration: 800ms; }
.split-duration-slow { --animation-duration: 1200ms; }
.split-duration-glacial { --animation-duration: 2000ms; }

/* ========== PRESETS COMPLETOS ========== */

/* Hero principal - rápido e impactante */
.split-hero {
  --animation-delay: 0ms;
  --animation-duration: 600ms;
  --stagger: 40ms;
}

/* Subtítulo - aparece después del hero */
.split-subtitle {
  --animation-delay: 400ms;
  --animation-duration: 700ms;
  --stagger: 50ms;
}

/* Quote/Testimonial - efecto typewriter */
.split-quote {
  --animation-delay: 0ms;
  --animation-duration: 300ms;
  --stagger: 150ms;
}

/* Call to Action - con punch */
.split-cta {
  --animation-delay: 200ms;
  --animation-duration: 800ms;
  --stagger: 80ms;
}

/* Título elegante - suave y premium */
.split-elegant-title {
  --animation-delay: 300ms;
  --animation-duration: 1000ms;
  --stagger: 70ms;
}

/* Título de sección - estándar */
.split-section-title {
  --animation-delay: 0ms;
  --animation-duration: 700ms;
  --stagger: 50ms;
}

/* Descripción/Párrafo - sutil */
.split-description {
  --animation-delay: 500ms;
  --animation-duration: 500ms;
  --stagger: 30ms;
}

/* Feature title - moderno */
.split-feature {
  --animation-delay: 0ms;
  --animation-duration: 600ms;
  --stagger: 45ms;
}

/* Portfolio title - creativo */
.split-portfolio {
  --animation-delay: 0ms;
  --animation-duration: 900ms;
  --stagger: 60ms;
}

/* ========== VARIANTES ADICIONALES (NUEVAS) ========== */

/* Cinematic - para presentaciones importantes */
.split-cinematic {
  --animation-delay: 800ms;
  --animation-duration: 1800ms;
  --stagger: 120ms;
}

/* Flash - ultra rápido para efectos de impacto */
.split-flash {
  --animation-delay: 0ms;
  --animation-duration: 250ms;
  --stagger: 15ms;
}

/* Reveal - lento pero sin delay inicial */
.split-reveal {
  --animation-delay: 0ms;
  --animation-duration: 1400ms;
  --stagger: 90ms;
}

/* Signature - como si se escribiera a mano */
.split-signature {
  --animation-delay: 300ms;
  --animation-duration: 400ms;
  --stagger: 180ms;
}

/* Cascade - efecto cascada pronunciado */
.split-cascade {
  --animation-delay: 0ms;
  --animation-duration: 600ms;
  --stagger: 150ms;
}

/* Wave - efecto ola con spacing */
.split-wave {
  --animation-delay: 0ms;
  --animation-duration: 700ms;
  --stagger: 100ms;
}

/* Punch - para CTAs agresivos */
.split-punch {
  --animation-delay: 0ms;
  --animation-duration: 400ms;
  --stagger: 40ms;
}

/* Whisper - muy sutil y suave */
.split-whisper {
  --animation-delay: 200ms;
  --animation-duration: 1200ms;
  --stagger: 60ms;
}

/* Thunder - rápido con delay */
.split-thunder {
  --animation-delay: 300ms;
  --animation-duration: 350ms;
  --stagger: 25ms;
}

/* Luxury - premium y pausado */
.split-luxury {
  --animation-delay: 600ms;
  --animation-duration: 1600ms;
  --stagger: 100ms;
}

/* ========== COMBINACIONES ESPECÍFICAS ========== */

/* Hero con blur - muy elegante */
.split-hero-blur {
  --animation-delay: 0ms;
  --animation-duration: 900ms;
  --stagger: 60ms;
}

/* CTA urgente - muy rápido */
.split-cta-urgent {
  --animation-delay: 0ms;
  --animation-duration: 400ms;
  --stagger: 30ms;
}

/* Título premium - lento y elegante */
.split-premium {
  --animation-delay: 500ms;
  --animation-duration: 1200ms;
  --stagger: 80ms;
}

/* Tech/startup - rápido y moderno */
.split-tech {
  --animation-delay: 0ms;
  --animation-duration: 500ms;
  --stagger: 35ms;
}

/* Storytelling - pausado, narrativo */
.split-story {
  --animation-delay: 300ms;
  --animation-duration: 1000ms;
  --stagger: 120ms;
}

/* Landing impact - primera impresión fuerte */
.split-impact {
  --animation-delay: 0ms;
  --animation-duration: 550ms;
  --stagger: 45ms;
}

/* Teaser - genera intriga */
.split-teaser {
  --animation-delay: 700ms;
  --animation-duration: 1100ms;
  --stagger: 130ms;
}

/* Express - rápido pero legible */
.split-express {
  --animation-delay: 0ms;
  --animation-duration: 450ms;
  --stagger: 25ms;
}

/* Museum - para contenido cultural/artístico */
.split-museum {
  --animation-delay: 500ms;
  --animation-duration: 1400ms;
  --stagger: 90ms;
}

/* Promo - para ofertas/promociones */
.split-promo {
  --animation-delay: 100ms;
  --animation-duration: 500ms;
  --stagger: 50ms;
}

/* ========== RESPONSIVE ADJUSTMENTS ========== */

/* En móvil, hacer animaciones más rápidas */
@media (max-width: 767px) {
  [class*="split-animation-"] .word {
    transition-duration: 500ms !important;
  }
  
  .split-slow .word,
  .split-dramatic .word,
  .split-elegant .word,
  .split-cinematic .word,
  .split-reveal .word,
  .split-luxury .word {
    transition-duration: 700ms !important;
  }
  
  /* Reducir stagger en móvil para animaciones muy espaciadas */
  .split-cascade,
  .split-wave,
  .split-signature,
  .split-luxury {
    --stagger: 80ms !important;
  }
}

/* En desktop, respetar los tiempos completos */
@media (min-width: 768px) {
  [class*="split-animation-"] .word {
    /* Los tiempos ya están definidos en las variables CSS */
  }
}

/* Tablets - valores intermedios */
@media (min-width: 768px) and (max-width: 1024px) {
  .split-dramatic,
  .split-cinematic,
  .split-luxury {
    --animation-duration: 1200ms;
  }
}

/* ========== UTILITIES ========== */

/* Forzar que se anime más rápido */
.split-turbo {
  --animation-duration: 300ms !important;
  --stagger: 20ms !important;
}

/* Forzar que se anime muy lento */
.split-ultra-slow {
  --animation-duration: 2000ms !important;
  --stagger: 150ms !important;
}

/* Sin delay (override) */
.split-no-delay {
  --animation-delay: 0ms !important;
}

/* Con mucho stagger (efecto muy cascada) */
.split-heavy-stagger {
  --stagger: 200ms !important;
}

/* Con poco stagger (casi a la vez) */
.split-light-stagger {
  --stagger: 20ms !important;
}

/* Animación simultánea (todas las palabras a la vez) */
.split-simultaneous {
  --stagger: 0ms !important;
}

/* Muy pausado */
.split-pause {
  --animation-delay: 1000ms !important;
}

/* ========== ANIMACIONES PERSONALIZADAS POR USO ========== */

/* Para headlines de noticias */
.split-headline {
  --animation-delay: 0ms;
  --animation-duration: 550ms;
  --stagger: 40ms;
}

/* Para títulos de blog */
.split-article {
  --animation-delay: 200ms;
  --animation-duration: 700ms;
  --stagger: 55ms;
}

/* Para precios/números importantes */
.split-price {
  --animation-delay: 300ms;
  --animation-duration: 600ms;
  --stagger: 70ms;
}

/* Para nombres de productos */
.split-product {
  --animation-delay: 0ms;
  --animation-duration: 650ms;
  --stagger: 50ms;
}

/* Para títulos de eventos */
.split-event {
  --animation-delay: 400ms;
  --animation-duration: 800ms;
  --stagger: 60ms;
}