/* ============================================
   A&D Foods — Animations
   ============================================ */

/* ---- Keyframes ---- */

@keyframes clip-reveal-up {
  from {
    clip-path: inset(100% 0 0 0);
    transform: translateY(40px);
  }
  to {
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
  }
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-left {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fade-right {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scale-up {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes clip-up {
  from {
    clip-path: inset(100% 0 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes expand-width {
  from {
    width: 0;
  }
  to {
    width: 60px;
  }
}

@keyframes gradient-shift {
  0%, 100% {
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.85) 0%, rgba(22, 50, 95, 0.65) 100%);
  }
  50% {
    background: linear-gradient(135deg, rgba(16, 30, 50, 0.88) 0%, rgba(28, 58, 105, 0.68) 100%);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

@keyframes float-slow {
  0%, 100% {
    transform: translateY(0) translateX(0);
  }
  33% {
    transform: translateY(-15px) translateX(5px);
  }
  66% {
    transform: translateY(-25px) translateX(-3px);
  }
}

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

/* ---- Scroll Reveal Base ---- */

[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: none;
}

[data-reveal].is-visible {
  animation: fade-up var(--duration-base) var(--ease-out-expo) both;
}

[data-reveal="fade-up"].is-visible {
  animation: fade-up var(--duration-base) var(--ease-out-expo) both;
}

[data-reveal="fade-left"].is-visible {
  animation: fade-left var(--duration-base) var(--ease-out-expo) both;
}

[data-reveal="fade-right"].is-visible {
  animation: fade-right var(--duration-base) var(--ease-out-expo) both;
}

[data-reveal="scale-up"].is-visible {
  animation: scale-up var(--duration-base) var(--ease-out-expo) both;
}

[data-reveal="clip-up"].is-visible {
  animation: clip-up var(--duration-slow) var(--ease-out-expo) both;
}

/* Stagger delay */
[data-reveal].is-visible {
  animation-delay: calc(var(--stagger-index, 0) * 80ms);
}

/* ---- Hero Entrance ---- */

.hero__word {
  display: inline-block;
  opacity: 0;
  clip-path: inset(100% 0 0 0);
  transform: translateY(40px);
  animation: clip-reveal-up var(--duration-slow) var(--ease-out-expo) both;
  animation-delay: calc(var(--word-index, 0) * 120ms);
}

.hero.is-ready .hero__subtitle {
  opacity: 0;
  transform: translateY(20px);
  animation: fade-up var(--duration-base) var(--ease-out-expo) both;
  animation-delay: 800ms;
}

.hero.is-ready .hero__text {
  opacity: 0;
  transform: translateY(20px);
  animation: fade-up var(--duration-base) var(--ease-out-expo) both;
  animation-delay: 950ms;
}

.hero.is-ready .hero__actions .btn {
  opacity: 0;
  transform: translateY(20px);
  animation: fade-up var(--duration-base) var(--ease-out-expo) both;
}

.hero.is-ready .hero__actions .btn:nth-child(1) {
  animation-delay: 1100ms;
}

.hero.is-ready .hero__actions .btn:nth-child(2) {
  animation-delay: 1300ms;
}

/* ---- Hero Ambient ---- */

.hero__overlay {
  animation: gradient-shift 15s ease-in-out infinite alternate;
}

.hero::before,
.hero::after,
.cta-banner::before,
.cta-banner::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

.hero::before {
  width: 8px;
  height: 8px;
  top: 25%;
  left: 15%;
  background: rgba(94, 234, 212, 0.08);
  animation: float 8s ease-in-out infinite alternate;
}

.hero::after {
  width: 6px;
  height: 6px;
  top: 60%;
  right: 20%;
  background: rgba(212, 168, 83, 0.06);
  animation: float-slow 10s ease-in-out infinite alternate;
  animation-delay: -3s;
}

.cta-banner::before {
  width: 8px;
  height: 8px;
  top: 30%;
  left: 20%;
  background: rgba(94, 234, 212, 0.08);
  animation: float 7s ease-in-out infinite alternate;
  animation-delay: -2s;
}

.cta-banner::after {
  width: 6px;
  height: 6px;
  bottom: 25%;
  right: 15%;
  background: rgba(212, 168, 83, 0.06);
  animation: float-slow 9s ease-in-out infinite alternate;
  animation-delay: -5s;
}

/* ---- Floater Spans (extra ambient dots) ---- */

.hero__floater,
.cta-banner__floater {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

.hero__floater {
  background: rgba(94, 234, 212, 0.06);
}

.cta-banner__floater {
  background: rgba(212, 168, 83, 0.05);
}

.hero__floater:nth-child(1) {
  width: 10px;
  height: 10px;
  top: 40%;
  left: 70%;
  animation: float 6s ease-in-out infinite alternate;
  animation-delay: -1s;
}

.hero__floater:nth-child(2) {
  width: 5px;
  height: 5px;
  top: 75%;
  left: 40%;
  animation: float-slow 8s ease-in-out infinite alternate;
  animation-delay: -4s;
}

.cta-banner__floater:nth-child(1) {
  width: 7px;
  height: 7px;
  top: 50%;
  right: 30%;
  animation: float 9s ease-in-out infinite alternate;
  animation-delay: -6s;
}

/* ---- Gold Divider Reveal ---- */

.gold-divider.is-visible {
  animation: expand-width var(--duration-slow) var(--ease-out-expo) both;
}

/* ---- Reduced Motion ---- */

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

  [data-reveal] {
    opacity: 1;
    transform: none;
    clip-path: none;
  }

  .hero__word {
    opacity: 1;
    clip-path: none;
    transform: none;
  }

  .hero.is-ready .hero__subtitle,
  .hero.is-ready .hero__text,
  .hero.is-ready .hero__actions .btn {
    opacity: 1;
    transform: none;
  }
}