/* ============================================================
   ANIMATIONS.CSS — v2 Premium Motion System
   All keyframes + scroll reveal + hero entrance
   ============================================================ */

/* ── Fade Up In ───────────────────────────────────────────── */
@keyframes fade-up-in {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Fade In ──────────────────────────────────────────────── */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Slide In Right ───────────────────────────────────────── */
@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slide-in-left {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Scale In ─────────────────────────────────────────────── */
@keyframes scale-in {
  from { opacity: 0; transform: scale(0.90); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Word Reveal ──────────────────────────────────────────── */
@keyframes word-reveal {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Pulse Ring (gold) ────────────────────────────────────── */
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(201,168,76,0.55); }
  70%  { box-shadow: 0 0 0 16px rgba(201,168,76,0); }
  100% { box-shadow: 0 0 0 0 rgba(201,168,76,0); }
}

/* ── Pulse Dot ────────────────────────────────────────────── */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(1.5); }
}

/* ── Shimmer gradient text ────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ── Float badge ──────────────────────────────────────────── */
@keyframes float-badge {
  0%, 100% { transform: translateY(0px) rotate(-2deg); }
  50%       { transform: translateY(-8px) rotate(-2deg); }
}

/* ── Count up (JS triggers these) ────────────────────────── */
@keyframes counter-pop {
  0%   { transform: scale(0.85); opacity: 0; }
  60%  { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}

/* ── Gradient border spin ─────────────────────────────────── */
@keyframes gradient-border-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Card rise ────────────────────────────────────────────── */
@keyframes card-rise {
  from { opacity: 0; transform: translateY(40px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Menu slide in ────────────────────────────────────────── */
@keyframes menu-slide-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Connector line draw ──────────────────────────────────── */
@keyframes line-draw {
  from { width: 0; }
  to   { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════
   SCROLL REVEAL SYSTEM — Expo easing for premium feel
   ══════════════════════════════════════════════════════════════ */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--duration-slower) var(--ease-expo),
    transform var(--duration-slower) var(--ease-expo);
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(40px);
  transition:
    opacity var(--duration-slower) var(--ease-expo),
    transform var(--duration-slower) var(--ease-expo);
}
.reveal-left.revealed { opacity: 1; transform: translateX(0); }

.reveal-right {
  opacity: 0;
  transform: translateX(-40px);
  transition:
    opacity var(--duration-slower) var(--ease-expo),
    transform var(--duration-slower) var(--ease-expo);
}
.reveal-right.revealed { opacity: 1; transform: translateX(0); }

.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition:
    opacity var(--duration-slower) var(--ease-expo),
    transform var(--duration-slower) var(--ease-expo);
}
.reveal-scale.revealed { opacity: 1; transform: scale(1); }

/* Staggered children */
.reveal-stagger > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger > *:nth-child(2) { transition-delay: 90ms; }
.reveal-stagger > *:nth-child(3) { transition-delay: 180ms; }
.reveal-stagger > *:nth-child(4) { transition-delay: 270ms; }
.reveal-stagger > *:nth-child(5) { transition-delay: 360ms; }
.reveal-stagger > *:nth-child(6) { transition-delay: 450ms; }

/* ── Hero entrance animations ─────────────────────────────── */
.hero-fade-in {
  opacity: 0;
  animation: fade-in var(--duration-slower) var(--ease-expo) forwards;
}
.hero-fade-up {
  opacity: 0;
  transform: translateY(28px);
  animation: fade-up-in var(--duration-slower) var(--ease-expo) forwards;
}
.hero-slide-right {
  opacity: 0;
  transform: translateX(40px);
  animation: slide-in-right var(--duration-slowest) var(--ease-expo) forwards;
}

/* Hero timing delays */
.hero-delay-200  { animation-delay: 200ms; }
.hero-delay-400  { animation-delay: 400ms; }
.hero-delay-600  { animation-delay: 600ms; }
.hero-delay-800  { animation-delay: 800ms; }
.hero-delay-1000 { animation-delay: 1000ms; }
.hero-delay-1200 { animation-delay: 1200ms; }
.hero-delay-1400 { animation-delay: 1400ms; }
.hero-delay-1600 { animation-delay: 1600ms; }
.hero-delay-1800 { animation-delay: 1800ms; }

/* ── Word reveal for headings ─────────────────────────────── */
.word-reveal-wrapper .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  animation: word-reveal var(--duration-slower) var(--ease-expo) forwards;
}

/* ── Mobile: more dramatic reveals ───────────────────────── */
@media (max-width: 767px) {
  .reveal       { transform: translateY(36px); }
  .reveal-left  { transform: translateX(32px); }
  .reveal-right { transform: translateX(-32px); }
  .reveal-scale { transform: scale(0.86); }
}

/* ── Section floating orb base ────────────────────────────── */
.s-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
  z-index: 0;
}

@keyframes s-orb-drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(30px, -25px) scale(1.08); }
  66%       { transform: translate(-20px, 15px) scale(0.95); }
}
@keyframes s-orb-drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%       { transform: translate(-35px, 20px) scale(1.05); }
  80%       { transform: translate(25px, -30px) scale(0.97); }
}
@keyframes s-orb-drift-3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%       { transform: translate(22px, -22px) scale(1.10); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right, .reveal-scale,
  .hero-fade-in, .hero-fade-up, .hero-slide-right {
    animation: none;
    transition: none;
    opacity: 1;
    transform: none;
  }
}