/* ==========================================================================
   GULPY — Animations (animations.css)
   Keyframes + reveal utilities. Kept subtle on purpose: nothing norak.
   Effects wired here: loading dots, floating fruit, fade-up reveal,
   image reveal, button ripple, scroll cue, marquee. Counters are JS-driven.
   ========================================================================== */

/* ------------------------------------------------------------- KEYFRAMES */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

@keyframes dotBounce {
  0%, 60%, 100% { transform: translateY(0);     opacity: .55; }
  30%           { transform: translateY(-14px);  opacity: 1;   }
}

@keyframes float {
  0%, 100% { transform: translateY(0)    rotate(0deg); }
  50%      { transform: translateY(-14px) rotate(4deg); }
}

@keyframes cue {
  0%   { transform: translate(-50%, 0);   opacity: 1; }
  70%  { transform: translate(-50%, 12px); opacity: 0; }
  100% { transform: translate(-50%, 0);   opacity: 0; }
}

@keyframes ripple { to { transform: scale(3.2); opacity: 0; } }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ----------------------------------------------- SCROLL REVEAL UTILITIES */
/* Applied via data-anim="fade-up" etc.; .is-inview added by scroll.js */
[data-anim] {
  opacity: 0;
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  will-change: opacity, transform;
}
[data-anim="fade-up"]    { transform: translateY(28px); }
[data-anim="fade-in"]    { transform: none; }
[data-anim="fade-right"] { transform: translateX(-28px); }
[data-anim="fade-left"]  { transform: translateX(28px); }
[data-anim="zoom-in"]    { transform: scale(.94); }

[data-anim].is-inview {
  opacity: 1;
  transform: none;
}

/* Stagger children when parent carries data-stagger */
[data-stagger] > * { transition-delay: calc(var(--i, 0) * 90ms); }

/* Image reveal — clip wipe */
.reveal-img {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1s var(--ease);
}
.reveal-img.is-inview { clip-path: inset(0 0 0 0); }

/* ---------------------------------------------------------------- MARQUEE */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; width: max-content; animation: marquee 26s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }

/* ------------------------------------------- REDUCED MOTION (accessibility) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-anim] { opacity: 1 !important; transform: none !important; }
  .reveal-img { clip-path: none !important; }
  .float, .loader__dots i, .hero__cue .track::after { animation: none !important; }
}