/* ==========================================================================
   ANIMATION.CSS — Scroll Reveals, Micro-interactions, Page Transitions
   ========================================================================== */

/* Scroll reveal base state (JS toggles .is-visible via IntersectionObserver) */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

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

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

[data-reveal="left"] { transform: translateX(-36px); }
[data-reveal="left"].is-visible { transform: translateX(0); }

[data-reveal="right"] { transform: translateX(36px); }
[data-reveal="right"].is-visible { transform: translateX(0); }

[data-reveal="scale"] { transform: scale(0.92); }
[data-reveal="scale"].is-visible { transform: scale(1); }

/* Staggered children */
[data-reveal-group] > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);
}

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

[data-reveal-group].is-visible > *:nth-child(1) { transition-delay: 0.05s; }
[data-reveal-group].is-visible > *:nth-child(2) { transition-delay: 0.15s; }
[data-reveal-group].is-visible > *:nth-child(3) { transition-delay: 0.25s; }
[data-reveal-group].is-visible > *:nth-child(4) { transition-delay: 0.35s; }
[data-reveal-group].is-visible > *:nth-child(5) { transition-delay: 0.45s; }
[data-reveal-group].is-visible > *:nth-child(6) { transition-delay: 0.55s; }

/* Hero load sequence */
.hero-copy .eyebrow { animation: riseIn 0.8s var(--ease-luxury) 0.15s both; }
.hero-title { animation: riseIn 0.9s var(--ease-luxury) 0.3s both; }
.hero-desc { animation: riseIn 0.9s var(--ease-luxury) 0.45s both; }
.hero-actions { animation: riseIn 0.9s var(--ease-luxury) 0.6s both; }
.hero-visual { animation: heroFrameIn 1.1s var(--ease-luxury) 0.35s both; }
.hero-stats .stat-card:nth-child(1) { animation: riseIn 0.7s var(--ease-luxury) 0.8s both; }
.hero-stats .stat-card:nth-child(2) { animation: riseIn 0.7s var(--ease-luxury) 0.95s both; }
.hero-stats .stat-card:nth-child(3) { animation: riseIn 0.7s var(--ease-luxury) 1.1s both; }

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

@keyframes heroFrameIn {
  from { opacity: 0; transform: translateY(30px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Floating ambient shapes */
.hero-shape.s1 { animation: floatSlow 9s ease-in-out infinite; }
.hero-shape.s2 { animation: floatSlow 11s ease-in-out infinite reverse; }

@keyframes floatSlow {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-16px, 22px); }
}

/* Gold glow pulse used sparingly on primary CTA in hero */
.hero-actions .btn-primary { animation: goldPulse 3.2s ease-in-out 1.6s infinite; }

@keyframes goldPulse {
  0%, 100% { box-shadow: 0 8px 30px -8px rgba(201,162,75,0.55); }
  50% { box-shadow: 0 8px 40px -6px rgba(201,162,75,0.85); }
}

/* Counter number tick */
.stat-num[data-counting]::after { content: ''; }

/* Magnetic button nudge (JS sets --mx/--my) */
[data-magnetic] {
  transform: translate(calc(var(--mx, 0) * 1px), calc(var(--my, 0) * 1px));
}

/* Page-level fade-in on load */
body.is-loaded .page-veil { opacity: 0; visibility: hidden; }

.page-veil {
  position: fixed; inset: 0;
  background: var(--color-black);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.7s var(--ease-luxury), visibility 0.7s var(--ease-luxury);
}

.page-veil .veil-mark {
  font-family: var(--font-script);
  font-style: italic;
  color: var(--color-gold);
  font-size: 1.6rem;
  letter-spacing: 0.05em;
  opacity: 0.85;
  animation: veilPulse 1.4s ease-in-out infinite;
}

@keyframes veilPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* Timeline card entrance stagger handled by data-reveal-group */

/* FAQ answer smoothing already handled via max-height transition in style.css */

@media (prefers-reduced-motion: reduce) {
  .hero-shape.s1,
  .hero-shape.s2,
  .hero-actions .btn-primary,
  .page-veil .veil-mark {
    animation: none !important;
  }
}