/* ============================================
   ANIMATIONS.CSS — Keyframes & Scroll Reveal
   ============================================ */

/* ===== KEYFRAMES ===== */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.9); }
}

@keyframes waBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

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

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

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

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

@keyframes navSlideDown {
  from { transform: translateY(-10px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ===== STICKY WA ANIMATION ===== */
.sticky-wa {
  animation: waBounce 2.5s ease-in-out infinite;
}

/* ===== SCROLL REVEAL ===== */
.reveal,
.reveal-left,
.reveal-right {
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal       { transform: translateY(32px); }
.reveal-left  { transform: translateX(-32px); }
.reveal-right { transform: translateX(32px); }

.reveal.visible,
.reveal-left.visible,
.reveal-right.visible {
  opacity: 1;
  transform: none;
}

/* Staggered delay for grid children */
.treatments-grid .treatment-card:nth-child(1) { transition-delay: 0ms; }
.treatments-grid .treatment-card:nth-child(2) { transition-delay: 80ms; }
.treatments-grid .treatment-card:nth-child(3) { transition-delay: 160ms; }
.treatments-grid .treatment-card:nth-child(4) { transition-delay: 0ms; }
.treatments-grid .treatment-card:nth-child(5) { transition-delay: 80ms; }
.treatments-grid .treatment-card:nth-child(6) { transition-delay: 160ms; }

.conditions-grid .condition-card:nth-child(1) { transition-delay: 0ms; }
.conditions-grid .condition-card:nth-child(2) { transition-delay: 60ms; }
.conditions-grid .condition-card:nth-child(3) { transition-delay: 120ms; }
.conditions-grid .condition-card:nth-child(4) { transition-delay: 180ms; }
.conditions-grid .condition-card:nth-child(5) { transition-delay: 0ms; }
.conditions-grid .condition-card:nth-child(6) { transition-delay: 60ms; }
.conditions-grid .condition-card:nth-child(7) { transition-delay: 120ms; }
.conditions-grid .condition-card:nth-child(8) { transition-delay: 180ms; }

.trust-bar .trust-item:nth-child(1) { transition-delay: 0ms; }
.trust-bar .trust-item:nth-child(2) { transition-delay: 60ms; }
.trust-bar .trust-item:nth-child(3) { transition-delay: 120ms; }
.trust-bar .trust-item:nth-child(4) { transition-delay: 180ms; }
.trust-bar .trust-item:nth-child(5) { transition-delay: 240ms; }

.process-steps .process-step:nth-child(1) { transition-delay: 0ms; }
.process-steps .process-step:nth-child(2) { transition-delay: 100ms; }
.process-steps .process-step:nth-child(3) { transition-delay: 200ms; }
.process-steps .process-step:nth-child(4) { transition-delay: 300ms; }

/* ===== HOVER MICRO-INTERACTIONS ===== */
.treatment-card,
.blog-card,
.condition-card,
.testimonial-card,
.contact-info-card {
  will-change: transform;
}

/* Nav link underline animation */
.nav__link {
  position: relative;
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 14px;
  right: 14px;
  height: 2px;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s ease;
  border-radius: 1px;
}

.nav__link:hover::after,
.nav__link.active::after {
  transform: scaleX(1);
}

/* Treatment link arrow animation */
.treatment-card__link span {
  display: inline-block;
  transition: transform 0.2s ease;
}

.treatment-card__link:hover span {
  transform: translateX(4px);
}

/* Blog link arrow animation */
.blog-card__link span {
  display: inline-block;
  transition: transform 0.2s ease;
}

.blog-card__link:hover span {
  transform: translateX(4px);
}

/* Form input focus glow */
.form-input,
.form-select,
.form-textarea {
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

/* Button press effect */
.btn:active {
  transform: translateY(0) scale(0.98);
}

/* Card shimmer on load */
.treatment-card.visible,
.blog-card.visible,
.testimonial-card.visible {
  animation: none;
}