/* ============================================================
   ANIMATION UTILITIES — Fade, Slide, Stagger
   ============================================================ */

/* Base state: hidden, slightly shifted */
.fade-start {
    opacity: 0;
    transform: translateY(60px);
    transition:
        opacity 3s ease-out,
        transform 2s ease-out;
}

/* Activated state */
.fade-in {
    opacity: 1;
    transform: translateY(0);
}

/* Optional stagger delays */
.delay-1 { transition-delay: 0.15s; }
.delay-2 { transition-delay: 0.30s; }
.delay-3 { transition-delay: 0.45s; }
.delay-4 { transition-delay: 0.60s; }
.delay-0 { transition-delay: 0s; }

/* ============================================================
   ARROW ATTENTION — Squash → Jump → Rattle → Settle

   CRITICAL:
   .hs-slider-arrow is vertically centered with:
     transform: translateY(-50%)

   Therefore ALL animation frames MUST preserve that baseline
   transform, or the arrow will permanently shift vertically.
   ============================================================ */

@keyframes hs-arrow-attention {

  /* Baseline */
  0% {
    transform: translateY(-50%) scale(1) rotate(0deg);
  }

  /* Pause */
  6% {
    transform: translateY(-50%) scale(1) rotate(0deg);
  }

  /* Squash */
  16% {
    transform: translateY(-50%) scale(0.5) rotate(0deg);
  }

  /* Jump */
  28% {
    transform: translateY(calc(-50% - 18px)) scale(1.25) rotate(0deg);
  }

  /* Rattle */
  34% {
    transform: translateY(calc(-50% - 18px)) scale(1.25) rotate(-10deg);
  }

  40% {
    transform: translateY(calc(-50% - 18px)) scale(1.25) rotate(10deg);
  }

  46% {
    transform: translateY(calc(-50% - 18px)) scale(1.25) rotate(-8deg);
  }

  52% {
    transform: translateY(calc(-50% - 18px)) scale(1.25) rotate(8deg);
  }

  58% {
    transform: translateY(calc(-50% - 18px)) scale(1.25) rotate(-5deg);
  }

  64% {
    transform: translateY(calc(-50% - 18px)) scale(1.25) rotate(5deg);
  }

  70% {
    transform: translateY(calc(-50% - 18px)) scale(1.25) rotate(0deg);
  }

  /* Return */
  82% {
    transform: translateY(-50%) scale(1.15) rotate(0deg);
  }

  /* Settle */
  92% {
    transform: translateY(-50%) scale(0.97) rotate(0deg);
  }

  100% {
    transform: translateY(-50%) scale(1) rotate(0deg);
  }
}

/* Apply animation when JS adds the class */
.hs-slider-arrow.hs-arrow-attention {
  transform-origin: 50% 50%;
  will-change: transform;
  animation: hs-arrow-attention 1.05s ease-out 1;
}