/* Entrance animations — activated by .is-visible via Intersection Observer */
[data-animate] {
  opacity: 0;
  transition: opacity 0.6s var(--ease-premium), transform 0.6s var(--ease-premium);
}

[data-animate="fade-up"] {
  transform: translateY(24px);
}

[data-animate="fade"] {
  transform: none;
}

[data-animate="scale-in"] {
  transform: scale(0.92);
}

[data-animate="slide-left"] {
  transform: translateX(-12px);
}

.is-visible[data-animate] {
  opacity: 1;
  transform: none;
}

/* Stagger children */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.45s var(--ease-premium), transform 0.45s var(--ease-premium);
}

.is-visible[data-stagger] > * {
  opacity: 1;
  transform: translateY(0);
}

.is-visible[data-stagger] > *:nth-child(1) { transition-delay: 0ms; }
.is-visible[data-stagger] > *:nth-child(2) { transition-delay: 40ms; }
.is-visible[data-stagger] > *:nth-child(3) { transition-delay: 80ms; }
.is-visible[data-stagger] > *:nth-child(4) { transition-delay: 120ms; }
.is-visible[data-stagger] > *:nth-child(5) { transition-delay: 160ms; }
.is-visible[data-stagger] > *:nth-child(6) { transition-delay: 200ms; }

/* Hero */
.hero-animate .hero-headline {
  opacity: 0;
  transform: translateY(24px);
  animation: heroIn 0.7s var(--ease-premium) forwards;
}

.hero-animate .hero-sub,
.hero-animate .hero-cta {
  opacity: 0;
  transform: translateY(16px);
  animation: heroIn 0.7s var(--ease-premium) forwards;
}

.hero-animate .hero-sub { animation-delay: 0.08s; }
.hero-animate .hero-cta { animation-delay: 0.16s; }

.hero-stack-card {
  opacity: 0;
  animation: heroCardIn 0.9s var(--ease-premium) forwards;
}

.hero-stack-card:nth-child(1) { animation-delay: 0.2s; }
.hero-stack-card:nth-child(2) { animation-delay: 0.35s; }
.hero-stack-card:nth-child(3) { animation-delay: 0.5s; }

@keyframes heroIn {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes heroCardIn {
  from { opacity: 0; translate: 0 20px; }
  to { opacity: 1; translate: 0 0; }
}

/* Marquee */
.marquee-track {
  animation: marquee 40s linear infinite;
}

.marquee-strip:hover .marquee-track {
  animation-play-state: paused;
}

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

/* Modal */
.modal-backdrop {
  opacity: 0;
  transition: opacity 0.35s ease;
}

.modal-backdrop.is-open {
  opacity: 1;
}

.modal-panel {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.35s var(--ease-premium), transform 0.35s var(--ease-premium);
}

.modal-backdrop.is-open .modal-panel {
  opacity: 1;
  transform: scale(1);
}

.modal-backdrop.is-closing .modal-panel {
  opacity: 0;
  transform: scale(0.96);
  transition-duration: 0.25s;
}

/* Butterfly */
.butterfly-btn {
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
  transition: opacity 0.35s var(--ease-premium), transform 0.35s var(--ease-premium);
}

.butterfly-btn.is-visible {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.butterfly-btn.is-flying {
  transition: none;
  pointer-events: none;
  animation: butterflyFly var(--butterfly-fly-duration) var(--butterfly-fly-ease) forwards;
}

@keyframes butterflyFly {
  0% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 1;
  }
  30% {
    transform: translateY(-28vh) translateX(6px) scale(0.96);
    opacity: 0.95;
  }
  60% {
    transform: translateY(-62vh) translateX(-5px) scale(0.85);
    opacity: 0.7;
  }
  85% {
    transform: translateY(-95vh) translateX(3px) scale(0.7);
    opacity: 0.25;
  }
  100% {
    transform: translateY(-120vh) translateX(0) scale(0.6);
    opacity: 0;
  }
}

/* 404 float */
.float-gentle {
  animation: floatGentle 4s ease-in-out infinite;
}

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

/* Shimmer skeleton */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(90deg, var(--pearl) 25%, var(--bg-blush) 50%, var(--pearl) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  [data-animate],
  [data-stagger] > *,
  .hero-animate *,
  .marquee-track,
  .modal-panel,
  .butterfly-btn {
    animation: none !important;
    transition: opacity 0.2s ease !important;
    transform: none !important;
  }

  .butterfly-btn.is-flying {
    opacity: 0;
  }
}