/* ==========================================================================
   Dr Nikhil's Vighnaharta Clinic — Animation Library
   Small, reusable keyframes + utility classes. Respects prefers-reduced-motion
   via the global rule in app.css.
   ========================================================================== */

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in-down {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes scale-in {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes slide-in-left {
  from { opacity: 0; transform: translateX(-28px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(28px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes skeleton-shimmer {
  100% { transform: translateX(100%); }
}
@keyframes toast-in {
  from { opacity: 0; transform: translateX(24px) scale(0.96); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes toast-out {
  from { opacity: 1; transform: translateX(0) scale(1); }
  to { opacity: 0; transform: translateX(24px) scale(0.96); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(20, 152, 138, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(20, 152, 138, 0); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.animate-fade-in { animation: fade-in var(--duration-slow) var(--ease-standard) both; }
.animate-fade-in-up { animation: fade-in-up var(--duration-slow) var(--ease-standard) both; }
.animate-fade-in-down { animation: fade-in-down var(--duration-slow) var(--ease-standard) both; }
.animate-scale-in { animation: scale-in var(--duration-base) var(--ease-out-back) both; }
.animate-float { animation: float 4s var(--ease-standard) infinite; }
.animate-pulse-glow { animation: pulse-glow 2.4s var(--ease-standard) infinite; }

.animate-delay-1 { animation-delay: 60ms; }
.animate-delay-2 { animation-delay: 120ms; }
.animate-delay-3 { animation-delay: 180ms; }
.animate-delay-4 { animation-delay: 240ms; }

/* ---- Scroll reveal ---- */
/* [data-reveal] elements play their animation when scrolled into view,
   instead of all at once on page load — see scroll-reveal.js. Fails
   open: an element stays fully visible until JS confirms (by adding
   `reveal-armed` to <html>) that it will actually handle revealing it,
   so a JS error never leaves content permanently invisible. */
html.reveal-armed [data-reveal] { opacity: 0; }
html.reveal-armed [data-reveal].is-revealed { opacity: 1; }

html.reveal-armed [data-reveal="fade-up"].is-revealed { animation: fade-in-up var(--duration-slow) var(--ease-standard) both; }
html.reveal-armed [data-reveal="fade-down"].is-revealed { animation: fade-in-down var(--duration-slow) var(--ease-standard) both; }
html.reveal-armed [data-reveal="fade-in"].is-revealed { animation: fade-in var(--duration-slow) var(--ease-standard) both; }
html.reveal-armed [data-reveal="zoom-in"].is-revealed { animation: scale-in var(--duration-base) var(--ease-out-back) both; }
html.reveal-armed [data-reveal="slide-left"].is-revealed { animation: slide-in-left var(--duration-slow) var(--ease-standard) both; }
html.reveal-armed [data-reveal="slide-right"].is-revealed { animation: slide-in-right var(--duration-slow) var(--ease-standard) both; }

.spinner {
  width: 20px; height: 20px;
  border: 2.5px solid var(--color-border-strong);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}