/* =========================================================
   SunnyShoots — animations.css
   @keyframes, transition utilities, and motion-driven classes.
   Respects prefers-reduced-motion at the bottom of this file.
   ========================================================= */

/* -------------------------------
   1. SCROLL REVEAL
-------------------------------- */
.reveal-up {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
}

.reveal-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger helper — applied via inline custom property by animations.js */
.reveal-up {
  transition-delay: var(--reveal-delay, 0ms);
}

/* -------------------------------
   2. AMBIENT BACKGROUND DRIFT
-------------------------------- */
@keyframes ambientDrift1 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(40px, 60px) scale(1.08);
  }
}

@keyframes ambientDrift2 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-50px, -30px) scale(1.05);
  }
}

@keyframes ambientDrift3 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(30px, -50px) scale(1.1);
  }
}

.ambient-bg__glow--1 {
  animation: ambientDrift1 22s ease-in-out infinite;
}

.ambient-bg__glow--2 {
  animation: ambientDrift2 26s ease-in-out infinite;
}

.ambient-bg__glow--3 {
  animation: ambientDrift3 30s ease-in-out infinite;
}

/* Hero mesh gradients — subtle aurora movement */
@keyframes heroMeshDrift1 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(30px, 40px) scale(1.06);
  }
}

@keyframes heroMeshDrift2 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-35px, 25px) scale(1.04);
  }
}

@keyframes heroMeshDrift3 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(20px, -35px) scale(1.08);
  }
}

.hero__mesh--1 {
  animation: heroMeshDrift1 18s ease-in-out infinite;
}

.hero__mesh--2 {
  animation: heroMeshDrift2 21s ease-in-out infinite;
}

.hero__mesh--3 {
  animation: heroMeshDrift3 24s ease-in-out infinite;
}

/* -------------------------------
   3. SCROLL CUE
-------------------------------- */
@keyframes scrollCueBounce {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.6;
  }
  50% {
    transform: translateY(6px);
    opacity: 1;
  }
}

.hero__scroll-cue-dot {
  display: inline-block;
  animation: scrollCueBounce 2.2s ease-in-out infinite;
}

/* -------------------------------
   4. TOP RATED SPARKLE
-------------------------------- */
@keyframes sparkleTwinkle {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(0.9) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.15) rotate(20deg);
  }
}

.trust-item__sparkle {
  animation: sparkleTwinkle 2.4s ease-in-out infinite;
}

/* -------------------------------
   5. MARQUEE (BRANDS)
-------------------------------- */
@keyframes marqueeScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.marquee__track {
  animation: marqueeScroll 32s linear infinite;
}

.marquee[data-paused="true"] .marquee__track {
  animation-play-state: paused;
}

/* -------------------------------
   6. FEATURED WORK CAROUSEL
-------------------------------- */
@keyframes carouselScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.carousel__track {
  animation: carouselScroll 45s linear infinite;
}

.carousel[data-paused="true"] .carousel__track {
  animation-play-state: paused;
}

/* -------------------------------
   7. PORTFOLIO FILTER TRANSITIONS
-------------------------------- */
.portfolio-item {
  animation: portfolioItemIn var(--duration-slow) var(--ease-out) both;
}

@keyframes portfolioItemIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* -------------------------------
   8. COUNTER PULSE (subtle, on completion)
-------------------------------- */
@keyframes counterSettle {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.04);
  }
  100% {
    transform: scale(1);
  }
}

.trust-item__number.is-settled {
  display: inline-block;
  animation: counterSettle 320ms var(--ease-out);
}

/* -------------------------------
   9. INTRO VIDEO — SCRUB & CONTROLS FADE
-------------------------------- */
.intro-video__fullscreen {
  transition:
    opacity var(--duration-base) var(--ease-default),
    background var(--duration-fast) var(--ease-default);
}

.intro-video__scrub-fill {
  transition: width var(--duration-fast) linear;
}

/* -------------------------------
   10. REDUCED MOTION SUPPORT
-------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .marquee__track,
  .carousel__track {
    animation: none !important;
    transform: none !important;
  }

  .reveal-up {
    opacity: 1;
    transform: none;
  }

  .ambient-bg__glow,
  .hero__mesh,
  .hero__scroll-cue-dot,
  .trust-item__sparkle {
    animation: none !important;
  }
}