/* ========================================
   RAVENCOREX MAG - SCROLL ANIMATIONS
   Premium scroll-triggered animations
   ======================================== */

/* Base Animation States */
[data-scroll-animate] {
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}

[data-scroll-animate].animated {
  opacity: 1;
}

/* Fade Up - Elemento aparece desde abajo */
[data-scroll-animate="fade-up"] {
  transform: translateY(40px);
}

[data-scroll-animate="fade-up"].animated {
  transform: translateY(0);
}

/* Fade Down - Elemento aparece desde arriba */
[data-scroll-animate="fade-down"] {
  transform: translateY(-40px);
}

[data-scroll-animate="fade-down"].animated {
  transform: translateY(0);
}

/* Fade Left - Elemento aparece desde la derecha */
[data-scroll-animate="fade-left"] {
  transform: translateX(40px);
}

[data-scroll-animate="fade-left"].animated {
  transform: translateX(0);
}

/* Fade Right - Elemento aparece desde la izquierda */
[data-scroll-animate="fade-right"] {
  transform: translateX(-40px);
}

[data-scroll-animate="fade-right"].animated {
  transform: translateX(0);
}

/* Zoom In - Elemento escala desde pequeño */
[data-scroll-animate="zoom-in"] {
  transform: scale(0.9);
}

[data-scroll-animate="zoom-in"].animated {
  transform: scale(1);
}

/* Zoom Out - Elemento escala desde grande */
[data-scroll-animate="zoom-out"] {
  transform: scale(1.1);
}

[data-scroll-animate="zoom-out"].animated {
  transform: scale(1);
}

/* Fade - Solo fade sin movimiento */
[data-scroll-animate="fade"] {
  /* Solo opacity, sin transform */
}

[data-scroll-animate="fade"].animated {
  opacity: 1;
}

/* Slide Up Big - Para hero sections */
[data-scroll-animate="slide-up-big"] {
  transform: translateY(80px);
}

[data-scroll-animate="slide-up-big"].animated {
  transform: translateY(0);
}

/* Rotate In - Rota mientras aparece */
[data-scroll-animate="rotate-in"] {
  transform: rotate(-5deg) scale(0.95);
}

[data-scroll-animate="rotate-in"].animated {
  transform: rotate(0deg) scale(1);
}

/* Flip Up - Efecto de voltear */
[data-scroll-animate="flip-up"] {
  transform: perspective(1000px) rotateX(20deg);
  transform-origin: center bottom;
}

[data-scroll-animate="flip-up"].animated {
  transform: perspective(1000px) rotateX(0deg);
}

/* Stagger Children - Para elementos en secuencia */
[data-scroll-stagger] > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-scroll-stagger].animated > *:nth-child(1) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}

[data-scroll-stagger].animated > *:nth-child(2) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
}

[data-scroll-stagger].animated > *:nth-child(3) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s;
}

[data-scroll-stagger].animated > *:nth-child(4) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.4s;
}

[data-scroll-stagger].animated > *:nth-child(5) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.5s;
}

[data-scroll-stagger].animated > *:nth-child(6) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.6s;
}

/* Speed Variations */
[data-scroll-speed="slow"] {
  transition-duration: 1.2s !important;
}

[data-scroll-speed="fast"] {
  transition-duration: 0.5s !important;
}

/* Delay Variations */
[data-scroll-delay="100"] {
  transition-delay: 0.1s;
}

[data-scroll-delay="200"] {
  transition-delay: 0.2s;
}

[data-scroll-delay="300"] {
  transition-delay: 0.3s;
}

[data-scroll-delay="400"] {
  transition-delay: 0.4s;
}

[data-scroll-delay="500"] {
  transition-delay: 0.5s;
}

[data-scroll-delay="600"] {
  transition-delay: 0.6s;
}

/* Elastic Animation - Efecto bounce suave */
[data-scroll-easing="elastic"] {
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Back Animation - Retrocede antes de avanzar */
[data-scroll-easing="back"] {
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Smooth Animation - Extra suave */
[data-scroll-easing="smooth"] {
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Special Animations for Cards */
.mag-volume-card[data-scroll-animate] {
  transition-property: opacity, transform, box-shadow;
}

.mag-volume-card[data-scroll-animate].animated {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* Special Animations for Featured Content */
.mag-volume-featured[data-scroll-animate] {
  transition-property: opacity, transform;
}

/* Section Dividers Animation */
[data-scroll-animate] .section-divider {
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  width: 0;
}

[data-scroll-animate].animated .section-divider {
  width: 100%;
}

/* Text Reveal Animation */
[data-scroll-animate="text-reveal"] {
  position: relative;
  overflow: hidden;
}

[data-scroll-animate="text-reveal"]::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--mag-bg-primary, #0E1116);
  transform: translateX(0);
  transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}

[data-scroll-animate="text-reveal"].animated::after {
  transform: translateX(100%);
}

/* Counter Animation - Para números */
[data-scroll-counter] {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-scroll-counter].animated {
  opacity: 1;
  transform: scale(1);
}

/* Gradient Progress Bar */
[data-scroll-progress] {
  position: relative;
  overflow: hidden;
}

[data-scroll-progress]::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--mag-accent, #00AEEF), var(--mag-accent-hover, #0098d4));
  transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-scroll-progress].animated::before {
  width: 100%;
}

/* Parallax Effect - Sutil */
[data-scroll-parallax] {
  transition: transform 0.3s ease-out;
  will-change: transform;
}

/* Line Draw Animation - Para bordes */
[data-scroll-line-draw] {
  position: relative;
}

[data-scroll-line-draw]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid var(--mag-accent, #00AEEF);
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  transition: clip-path 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-scroll-line-draw].animated::before {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* Blur to Clear */
[data-scroll-animate="blur-in"] {
  filter: blur(10px);
  transition: opacity 0.8s ease, transform 0.8s ease, filter 0.8s ease;
}

[data-scroll-animate="blur-in"].animated {
  filter: blur(0);
}

/* Typewriter Effect for Headings */
@keyframes typewriter {
  from { width: 0; }
  to { width: 100%; }
}

[data-scroll-typewriter] {
  overflow: hidden;
  border-right: 2px solid var(--mag-accent, #00AEEF);
  white-space: nowrap;
  width: 0;
}

[data-scroll-typewriter].animated {
  animation: typewriter 2s steps(40) forwards;
}

/* Glow Effect */
[data-scroll-glow] {
  position: relative;
  transition: all 0.6s ease;
}

[data-scroll-glow].animated {
  box-shadow: 0 0 30px rgba(0, 174, 239, 0.3);
}

/* Accessibility - Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  [data-scroll-animate],
  [data-scroll-stagger] > *,
  [data-scroll-counter],
  [data-scroll-parallax] {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  [data-scroll-animate]::after {
    display: none !important;
  }
}

/* Performance Optimization */
[data-scroll-animate],
[data-scroll-stagger],
[data-scroll-counter],
[data-scroll-parallax] {
  /* Hardware acceleration */
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Mobile Optimizations */
@media (max-width: 767px) {
  [data-scroll-animate] {
    /* Reducir movimiento en móvil para mejor performance */
    transform: translateY(20px) !important;
  }

  [data-scroll-animate="fade-left"],
  [data-scroll-animate="fade-right"] {
    /* En móvil, convertir fade-left/right a fade-up */
    transform: translateY(20px) !important;
  }

  [data-scroll-stagger].animated > * {
    /* Reducir stagger delays en móvil */
    transition-delay: 0.05s !important;
  }
}

/* Loading State - Prevenir FOUC */
.page-loading [data-scroll-animate] {
  opacity: 0 !important;
}