/* =======================================================
   ANIMACIONES DE SCROLL — HOJA DE ESTILOS COMPLETA
   (Fade + Blur + Wipe + Zoom)
   ======================================================= */

/* -----------------------------
   Variables de animación
   ----------------------------- */
:root {
  --scroll-fade-duration: 0.8s;
  --scroll-fade-ease: ease;
  --scroll-fade-translate: 20px;
  --scroll-fade-blur: 8px; /* Intensidad del blur inicial */

  /* Wipe */
  --wipe-duration: 0.8s;
  --wipe-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --wipe-offset: 12px;

  /* Zoom */
  --zoom-duration: 0.85s;
  --zoom-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --zoom-scale: 0.94;
  --zoom-translate: 10px;
}

/* -----------------------------
   Preferencias de movimiento
   ----------------------------- */
@media (prefers-reduced-motion: reduce) {
  .scroll-fade,
  .scroll-fade-children,
  .scroll-fade-children > *,
  .scroll-animate,
  .scroll-animate-left,
  .scroll-animate-right,
  .scroll-animate-scale,
  .scroll-reveal,
  .scroll-reveal-left,
  .scroll-reveal-right,
  .scroll-reveal-scale,
  .scroll-reveal-title,
  .scroll-reveal-card,
  .scroll-reveal-image,
  .scroll-reveal-fade,
  .scroll-wipe,
  .scroll-wipe-left,
  .scroll-wipe-right,
  .scroll-wipe-top,
  .scrub-wipe,
  .scroll-zoom,
  .scroll-zoom-children,
  .scroll-zoom-children > * {
    transition: none !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    opacity: 1 !important;
    animation: none !important;
  }
}

/* -------------------------------------------------------
   1) Fade + translateY + BLUR
   ------------------------------------------------------- */
.scroll-fade {
  opacity: 0;
  transform: translateY(var(--scroll-fade-translate));
  filter: blur(var(--scroll-fade-blur));
  transition: opacity var(--scroll-fade-duration) var(--scroll-fade-ease),
    transform var(--scroll-fade-duration) var(--scroll-fade-ease),
    filter var(--scroll-fade-duration) var(--scroll-fade-ease);
  will-change: opacity, transform, filter;
  backface-visibility: hidden;
}
.scroll-fade.in-view {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.scroll-fade:nth-child(1) {
  transition-delay: 0.1s;
}
.scroll-fade:nth-child(2) {
  transition-delay: 0.2s;
}
.scroll-fade:nth-child(3) {
  transition-delay: 0.3s;
}
.scroll-fade:nth-child(4) {
  transition-delay: 0.4s;
}
.scroll-fade:nth-child(5) {
  transition-delay: 0.5s;
}

/* -------------------------------------------------------
   2) Fade en cascada para hijos
   ------------------------------------------------------- */
.scroll-fade-children > * {
  opacity: 0;
  transform: translateY(var(--scroll-fade-translate));
  filter: blur(var(--scroll-fade-blur));
  transition: opacity var(--scroll-fade-duration) var(--scroll-fade-ease),
    transform var(--scroll-fade-duration) var(--scroll-fade-ease),
    filter var(--scroll-fade-duration) var(--scroll-fade-ease);
  will-change: opacity, transform, filter;
  backface-visibility: hidden;
}
.scroll-fade-children.in-view > * {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.scroll-fade-children.in-view > *:nth-child(1) {
  transition-delay: 0.1s;
}
.scroll-fade-children.in-view > *:nth-child(2) {
  transition-delay: 0.2s;
}
.scroll-fade-children.in-view > *:nth-child(3) {
  transition-delay: 0.3s;
}
.scroll-fade-children.in-view > *:nth-child(4) {
  transition-delay: 0.4s;
}
.scroll-fade-children.in-view > *:nth-child(5) {
  transition-delay: 0.5s;
}

/* -------------------------------------------------------
   3) Legacy / compatibilidad
   ------------------------------------------------------- */
.scroll-animate {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.scroll-animate.in-view {
  opacity: 1;
  transform: translateY(0);
}

.scroll-animate-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.scroll-animate-left.in-view {
  opacity: 1;
  transform: translateX(0);
}

.scroll-animate-right {
  opacity: 0;
  transform: translateX(50px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.scroll-animate-right.in-view {
  opacity: 1;
  transform: translateX(0);
}

.scroll-animate-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.scroll-animate-scale.in-view {
  opacity: 1;
  transform: scale(1);
}

/* Delays legacy */
.scroll-animate:nth-child(1) {
  transition-delay: 0.1s;
}
.scroll-animate:nth-child(2) {
  transition-delay: 0.2s;
}
.scroll-animate:nth-child(3) {
  transition-delay: 0.3s;
}
.scroll-animate:nth-child(4) {
  transition-delay: 0.4s;
}
.scroll-animate:nth-child(5) {
  transition-delay: 0.5s;
}

/* -------------------------------------------------------
   4) Scroll-reveal (fade suave)
   ------------------------------------------------------- */
.scroll-reveal,
.scroll-reveal-fade {
  opacity: 0;
  transform: translateY(var(--scroll-fade-translate));
  filter: blur(var(--scroll-fade-blur));
  transition: opacity var(--scroll-fade-duration) var(--scroll-fade-ease),
    transform var(--scroll-fade-duration) var(--scroll-fade-ease),
    filter var(--scroll-fade-duration) var(--scroll-fade-ease);
  will-change: opacity, transform, filter;
  backface-visibility: hidden;
}
.scroll-reveal.in-view,
.scroll-reveal-fade.in-view {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.scroll-reveal-left,
.scroll-reveal-right {
  opacity: 0;
  transform: translateY(var(--scroll-fade-translate));
  filter: blur(var(--scroll-fade-blur));
  transition: opacity var(--scroll-fade-duration) var(--scroll-fade-ease),
    transform var(--scroll-fade-duration) var(--scroll-fade-ease),
    filter var(--scroll-fade-duration) var(--scroll-fade-ease);
}
.scroll-reveal-left.in-view,
.scroll-reveal-right.in-view {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.scroll-reveal-scale {
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  filter: blur(var(--scroll-fade-blur));
  transition: opacity var(--scroll-fade-duration) var(--scroll-fade-ease),
    transform var(--scroll-fade-duration) var(--scroll-fade-ease),
    filter var(--scroll-fade-duration) var(--scroll-fade-ease);
}
.scroll-reveal-scale.in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}
.scroll-reveal-title,
.scroll-reveal-card,
.scroll-reveal-image {
  opacity: 0;
  transform: translateY(var(--scroll-fade-translate));
  filter: blur(var(--scroll-fade-blur));
  transition: opacity var(--scroll-fade-duration) var(--scroll-fade-ease),
    transform var(--scroll-fade-duration) var(--scroll-fade-ease),
    filter var(--scroll-fade-duration) var(--scroll-fade-ease);
}
.scroll-reveal-title.in-view,
.scroll-reveal-card.in-view,
.scroll-reveal-image.in-view {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.scroll-reveal-title:nth-child(1),
.scroll-reveal-card:nth-child(1),
.scroll-reveal-image:nth-child(1) {
  transition-delay: 0.1s;
}
.scroll-reveal-title:nth-child(2),
.scroll-reveal-card:nth-child(2),
.scroll-reveal-image:nth-child(2) {
  transition-delay: 0.2s;
}
.scroll-reveal-title:nth-child(3),
.scroll-reveal-card:nth-child(3),
.scroll-reveal-image:nth-child(3) {
  transition-delay: 0.3s;
}

/* -------------------------------------------------------
   5) Wipe (clip-path)
   ------------------------------------------------------- */
.scroll-wipe {
  opacity: 0;
  transform: translateY(var(--wipe-offset));
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--wipe-duration) var(--wipe-ease),
    opacity var(--wipe-duration) var(--wipe-ease),
    transform var(--wipe-duration) var(--wipe-ease);
}
.scroll-wipe.in-view {
  opacity: 1;
  transform: translateY(0);
  clip-path: inset(0 0 0 0);
}
.scroll-wipe.out-view {
  opacity: 0;
  transform: translateY(calc(var(--wipe-offset) * -0.4));
  clip-path: inset(0 0 100% 0);
}
.scroll-wipe-left {
  opacity: 0;
  transform: translateX(calc(var(--wipe-offset) * -1));
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--wipe-duration) var(--wipe-ease),
    opacity var(--wipe-duration) var(--wipe-ease),
    transform var(--wipe-duration) var(--wipe-ease);
}
.scroll-wipe-left.in-view {
  opacity: 1;
  transform: translateX(0);
  clip-path: inset(0 0 0 0);
}
.scroll-wipe-left.out-view {
  opacity: 0;
  transform: translateX(calc(var(--wipe-offset) * 0.4));
  clip-path: inset(0 100% 0 0);
}
.scroll-wipe-right {
  opacity: 0;
  transform: translateX(var(--wipe-offset));
  clip-path: inset(0 0 0 100%);
  transition: clip-path var(--wipe-duration) var(--wipe-ease),
    opacity var(--wipe-duration) var(--wipe-ease),
    transform var(--wipe-duration) var(--wipe-ease);
}
.scroll-wipe-right.in-view {
  opacity: 1;
  transform: translateX(0);
  clip-path: inset(0 0 0 0);
}
.scroll-wipe-right.out-view {
  opacity: 0;
  transform: translateX(calc(var(--wipe-offset) * -0.4));
  clip-path: inset(0 0 0 100%);
}
.scroll-wipe-top {
  opacity: 0;
  transform: translateY(calc(var(--wipe-offset) * -1));
  clip-path: inset(100% 0 0 0);
  transition: clip-path var(--wipe-duration) var(--wipe-ease),
    opacity var(--wipe-duration) var(--wipe-ease),
    transform var(--wipe-duration) var(--wipe-ease);
}
.scroll-wipe-top.in-view {
  opacity: 1;
  transform: translateY(0);
  clip-path: inset(0 0 0 0);
}
.scroll-wipe-top.out-view {
  opacity: 0;
  transform: translateY(calc(var(--wipe-offset) * 0.4));
  clip-path: inset(100% 0 0 0);
}
.scroll-wipe:nth-child(1) {
  transition-delay: 0.05s;
}
.scroll-wipe:nth-child(2) {
  transition-delay: 0.12s;
}
.scroll-wipe:nth-child(3) {
  transition-delay: 0.18s;
}
.scroll-wipe:nth-child(4) {
  transition-delay: 0.24s;
}

/* -------------------------------------------------------
   6) Zoom / Scale-in
   ------------------------------------------------------- */
.scroll-zoom {
  opacity: 0;
  transform: translateY(var(--zoom-translate)) scale(var(--zoom-scale));
  transition: opacity var(--zoom-duration) var(--zoom-ease),
    transform var(--zoom-duration) var(--zoom-ease);
  will-change: opacity, transform;
}
.scroll-zoom.in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.scroll-zoom-children > * {
  opacity: 0;
  transform: translateY(var(--zoom-translate)) scale(var(--zoom-scale));
  transition: opacity var(--zoom-duration) var(--zoom-ease),
    transform var(--zoom-duration) var(--zoom-ease);
  will-change: opacity, transform;
}
.scroll-zoom-children.in-view > * {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.scroll-zoom-children.in-view > *:nth-child(1) {
  transition-delay: 0.06s;
}
.scroll-zoom-children.in-view > *:nth-child(2) {
  transition-delay: 0.12s;
}
.scroll-zoom-children.in-view > *:nth-child(3) {
  transition-delay: 0.18s;
}
.scroll-zoom-children.in-view > *:nth-child(4) {
  transition-delay: 0.24s;
}
.scroll-zoom-children.in-view > *:nth-child(5) {
  transition-delay: 0.3s;
}

/* -------------------------------------------------------
   7) Utilidades
   ------------------------------------------------------- */
.is-visible,
.force-in-view {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  clip-path: none !important;
}
.is-hidden {
  opacity: 0 !important;
  pointer-events: none;
}