/* Scroll-driven motion & keyframes */

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes pulseGlow {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(201, 168, 76, 0.25);
  }
  50% {
    box-shadow: 0 0 24px 4px rgba(201, 168, 76, 0.12);
  }
}

.animate-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger via inline custom property --stagger-delay */
.animate-on-scroll[data-stagger] {
  transition-delay: var(--stagger-delay, 0s);
}

.hero [data-parallax] {
  will-change: transform;
}

.scroll-indicator__arrow {
  animation: floatSoft 2s ease-in-out infinite;
}

.cta-banner .btn--dark:hover {
  animation: pulseGlow 2s ease-in-out infinite;
}

/* Decorative floats for 404 */
.float-orb {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 168, 76, 0.2), transparent 70%);
  filter: blur(1px);
  animation: floatOrb 18s ease-in-out infinite;
  pointer-events: none;
}

.float-orb--1 {
  width: 280px;
  height: 280px;
  top: 10%;
  left: 5%;
  animation-delay: 0s;
}

.float-orb--2 {
  width: 180px;
  height: 180px;
  bottom: 15%;
  right: 10%;
  animation-delay: -6s;
}

.float-orb--3 {
  width: 120px;
  height: 120px;
  top: 40%;
  right: 25%;
  animation-delay: -12s;
}

@keyframes floatOrb {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.35;
  }
  33% {
    transform: translate(24px, -18px) scale(1.05);
    opacity: 0.55;
  }
  66% {
    transform: translate(-16px, 12px) scale(0.95);
    opacity: 0.4;
  }
}