/* ═══════════════════════════════════════════════════
   KARMA SUGANDHIT — Animation System
   ═══════════════════════════════════════════════════ */

/* ─── SCROLL REVEAL (Intersection Observer powered) ─── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

.reveal-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }

.reveal-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }

.reveal-scale {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.reveal-scale.visible { opacity: 1; transform: scale(1); }

/* ─── STAGGER DELAYS ─── */
.delay-1 { transition-delay: 0.08s !important; }
.delay-2 { transition-delay: 0.16s !important; }
.delay-3 { transition-delay: 0.24s !important; }
.delay-4 { transition-delay: 0.32s !important; }
.delay-5 { transition-delay: 0.40s !important; }
.delay-6 { transition-delay: 0.48s !important; }

/* ─── SMOKE FLOAT ─── */
@keyframes smokeFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.6; }
  33%       { transform: translateY(-18px) rotate(2deg); opacity: 0.8; }
  66%       { transform: translateY(-10px) rotate(-1.5deg); opacity: 0.5; }
}
.smoke-float { animation: smokeFloat 8s ease-in-out infinite; }
.smoke-float-2 { animation: smokeFloat 7s ease-in-out infinite 1.5s; }
.smoke-float-3 { animation: smokeFloat 6s ease-in-out infinite 0.8s; }

/* ─── BOTANICAL FLOAT ─── */
@keyframes botanicalFloat {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%       { transform: translateY(-12px) rotate(3deg); }
}
.botanical-float { animation: botanicalFloat 9s ease-in-out infinite; }

/* ─── GENTLE PULSE (for badges) ─── */
@keyframes gentlePulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.05); }
}
.pulse-badge { animation: gentlePulse 2.5s ease-in-out infinite; }

/* ─── HERO TEXT ENTER ─── */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-text-1 { animation: heroFadeUp 0.7s ease forwards; opacity: 0; }
.hero-text-2 { animation: heroFadeUp 0.7s ease 0.15s forwards; opacity: 0; }
.hero-text-3 { animation: heroFadeUp 0.7s ease 0.30s forwards; opacity: 0; }
.hero-text-4 { animation: heroFadeUp 0.7s ease 0.45s forwards; opacity: 0; }

/* ─── COUNT-UP ANIMATION ─── */
.count-up { display: inline-block; }

/* ─── GOLD SHIMMER (for section labels) ─── */
@keyframes goldShimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.shimmer-gold {
  background: linear-gradient(90deg, var(--gold), #f0c740, var(--gold));
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: goldShimmer 3s linear infinite;
}

/* ─── CARD STAGGER (used via JS) ─── */
.stagger-card { opacity: 0; transform: translateY(22px); }
.stagger-card.visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* ─── HERO SMOKE WISPS (CSS only, layered on hero bg) ─── */
.hero-smoke-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.hero-smoke-1 {
  position: absolute;
  right: 10%; bottom: 0;
  width: 80px;
  opacity: 0.55;
  animation: smokeFloat 8s ease-in-out infinite;
}
.hero-smoke-2 {
  position: absolute;
  right: 18%; bottom: 0;
  width: 50px;
  opacity: 0.35;
  animation: smokeFloat 6s ease-in-out infinite 2s;
}

/* ─── BUTTON HOVER FILL ─── */
.btn { position: relative; overflow: hidden; }
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.1);
  transform: translateX(-101%);
  transition: transform 0.2s ease;
}
.btn:hover::before { transform: translateX(0); }

/* ─── UNDERLINE ANIM ─── */
.animated-underline {
  position: relative;
  text-decoration: none;
}
.animated-underline::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  width: 0; height: 1.5px;
  background: var(--gold);
  transition: width 0.3s ease;
}
.animated-underline:hover::after { width: 100%; }

/* ─── PAGE TRANSITIONS ─── */
@keyframes pageIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-in { animation: pageIn 0.45s ease forwards; }

/* ─── INTERSECTION OBSERVER JS SETUP ─── */
/* (applied via main.js — these are fallback visible states) */

/* CSS fallback: if JS never fires, reveal after 1.2s */
@keyframes revealFallback {
  to { opacity: 1; transform: none; }
}
.reveal        { animation: revealFallback 0.5s ease 1.2s forwards; }
.reveal-left   { animation: revealFallback 0.5s ease 1.2s forwards; }
.reveal-right  { animation: revealFallback 0.5s ease 1.4s forwards; }
.reveal-scale  { animation: revealFallback 0.5s ease 1.2s forwards; }
.stagger-card  { animation: revealFallback 0.4s ease 1.5s forwards; }

/* Once JS adds .visible, the animation is no longer needed */
.reveal.visible, .reveal-left.visible, .reveal-right.visible,
.reveal-scale.visible, .stagger-card.visible {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right, .reveal-scale,
  .stagger-card, .hero-text-1, .hero-text-2, .hero-text-3, .hero-text-4 {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}