/* ============================================
   NATURE'S CARE — Animations
   ============================================ */

/* ─── Page Transition ────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

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

/* ─── Hero Entrance ──────────────────────── */
.hero-badge   { animation: fadeInUp 0.7s 0.2s both; }
.hero h1      { animation: fadeInUp 0.85s 0.35s both; }
.hero-desc    { animation: fadeInUp 0.7s 0.55s both; }
.hero-actions { animation: fadeInUp 0.7s 0.7s both; }
.hero-stats   { animation: fadeIn 0.7s 0.95s both; }
.hero-scroll  { animation: fadeIn 1s 1.3s both; }

/* ─── Counter Animation ──────────────────── */
.stat-num.counting { animation: countUp 0.5s ease both; }

/* ─── Card Hover Glow ────────────────────── */
.course-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.4s ease;
  background: radial-gradient(
    600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(122,158,126,0.08),
    transparent 40%
  );
  pointer-events: none;
}

.course-card:hover::after { opacity: 1; }

/* ─── Smooth Underline Links ─────────────── */
.footer-links a::after,
.footer-bottom-links a::after {
  content: none; /* no underline effect on footer – handled by color */
}

/* ─── Typewriter Cursor ──────────────────── */
.cursor-blink {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: currentColor;
  margin-left: 2px;
  vertical-align: middle;
  animation: blink 1.1s step-end infinite;
}

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

/* ─── Skeleton Loading ───────────────────── */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--clr-border) 25%,
    var(--clr-ivory)  50%,
    var(--clr-border) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--r-sm);
}

/* ─── Floating Decoration ────────────────── */
.float-slow {
  animation: floatSlow 6s ease-in-out infinite;
}

@keyframes floatSlow {
  0%,100% { transform: translateY(0) rotate(0deg); }
  33%      { transform: translateY(-12px) rotate(1.5deg); }
  66%      { transform: translateY(6px) rotate(-1deg); }
}

/* ─── Wave Divider ───────────────────────── */
.wave-divider {
  position: relative;
  overflow: hidden;
}

.wave-divider::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 60px;
  background: var(--clr-cream);
  clip-path: ellipse(55% 100% at 50% 100%);
}

/* ─── Ripple on Buttons ──────────────────── */
.btn-ripple {
  position: relative;
  overflow: hidden;
}

.ripple-effect {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255,255,255,0.35);
  animation: ripple 0.6s linear;
  pointer-events: none;
}

@keyframes ripple {
  to { transform: scale(4); opacity: 0; }
}

/* ─── Gradient Text ──────────────────────── */
.gradient-text {
  background: linear-gradient(135deg, var(--clr-sage-deep), var(--clr-plum));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Notification Toast ─────────────────── */
.toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--clr-charcoal);
  color: #fff;
  padding: 0.875rem 1.5rem;
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  font-weight: 500;
  z-index: 9999;
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
  white-space: nowrap;
  box-shadow: 0 8px 30px rgba(0,0,0,0.2);
}

.toast.show { transform: translateX(-50%) translateY(0); }

.toast.success { background: var(--clr-sage-deep); }
.toast.error   { background: #C0392B; }

/* ─── Image Reveal on Load ───────────────── */
.img-reveal {
  opacity: 0;
  transition: opacity 0.6s ease;
}

.img-reveal.loaded { opacity: 1; }

/* ─── Stagger Children ───────────────────── */
.stagger-children > *:nth-child(1) { transition-delay: 0.0s; }
.stagger-children > *:nth-child(2) { transition-delay: 0.1s; }
.stagger-children > *:nth-child(3) { transition-delay: 0.2s; }
.stagger-children > *:nth-child(4) { transition-delay: 0.3s; }
.stagger-children > *:nth-child(5) { transition-delay: 0.4s; }
.stagger-children > *:nth-child(6) { transition-delay: 0.5s; }