/* ==========================================================================
   animations.css — Keyframes, transitions, scroll-triggered styles
   ========================================================================== */


/* ==========================================================================
   1. HERO KEYFRAMES
   ========================================================================== */

@keyframes scrollBounce {
  0%, 100% { transform: scaleY(1); opacity: 0.5; }
  50% { transform: scaleY(1.3); opacity: 1; }
}

@keyframes loaderBall {
  0%   { left: 8px;               top: 45%; }
  25%  { left: calc(100% - 16px); top: 20%; }
  50%  { left: 8px;               top: 12%; }
  75%  { left: calc(100% - 16px); top: 70%; }
  100% { left: 8px;               top: 45%; }
}

@keyframes loaderPaddleLeft {
  0%   { top: 45%;  transform: translateY(-50%); }
  50%  { top: 12%;  transform: translateY(-50%); }
  100% { top: 45%;  transform: translateY(-50%); }
}

@keyframes loaderPaddleRight {
  0%   { top: 50%;  transform: translateY(-50%); }
  25%  { top: 20%;  transform: translateY(-50%); }
  75%  { top: 70%;  transform: translateY(-50%); }
  100% { top: 50%;  transform: translateY(-50%); }
}


/* ==========================================================================
   2. GSAP SCROLL ANIMATION OVERRIDES
   ========================================================================== */

[data-animate]:not(.hero [data-animate]):not(.cs-hero [data-animate]) {
  opacity: 0;
  transition: none;
}


/* ==========================================================================
   3. MICRO-INTERACTION KEYFRAMES
   ========================================================================== */

@keyframes grainShift {
  0%   { background-position: 0 0; }
  25%  { background-position: -128px 64px; }
  50%  { background-position: 64px -128px; }
  75%  { background-position: -64px 128px; }
  100% { background-position: 0 0; }
}

@keyframes arrowBounce {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(4px); }
}

@keyframes clockSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes stripeSlide {
  from { background-position: 0 0; }
  to   { background-position: 30px 30px; }
}

.hover-btn:hover .hover-btn__hover-content svg {
  animation: arrowBounce 0.8s ease-in-out infinite;
}

.work-card__soon-icon {
  animation: clockSpin 8s linear infinite;
  display: inline-block;
}

.work-card__image--soon {
  animation: stripeSlide 3s linear infinite;
}


/* ==========================================================================
   4. ACCESSIBILITY
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}