/* =========================
   GLOBAL UX ANIMATIONS
   Lightweight, no JS required where possible
========================= */

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* -------------------------
   Page load / scroll reveal
------------------------- */
.animate-on-scroll,
.about-preview .about-grid,
.about-preview .about-image,
.about-preview .about-content,
.section-title,
.core-services .service-card,
.therapy-grid .card,
.product-card,
.blog-card,
.gallery-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-on-scroll.visible,
.about-preview.visible .about-grid,
.about-preview.visible .about-image,
.about-preview.visible .about-content,
.section-title.visible,
.core-services.visible .service-card,
.therapy-grid.visible .card,
.products-grid.visible .product-card,
.blog-list.visible .blog-card,
.gallery.visible .gallery-item {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children (e.g. cards in a grid) */
.stagger-children .card,
.stagger-children .product-card,
.stagger-children .gallery-item {
  transition-delay: calc(var(--i, 0) * 0.08s);
}

/* -------------------------
   Buttons & links
------------------------- */
.btn,
a.btn,
.site-header .btn,
.hero-slider .btn {
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.2s ease;
}

.btn:active,
a.btn:active {
  transform: translateY(0);
}

/* -------------------------
   Cards hover
------------------------- */
.card,
.product-card,
.blog-card,
.therapy-grid .card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover,
.product-card:hover,
.blog-card:hover,
.therapy-grid .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.1);
}

/* -------------------------
   Header / nav
------------------------- */
.site-header {
  transition: box-shadow 0.3s ease, background 0.3s ease;
}

.main-nav a,
.nav-dropdown a {
  transition: color 0.2s ease, background 0.2s ease;
}

.dropdown-menu {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* -------------------------
   Forms
------------------------- */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="time"],
textarea,
select {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
}

/* -------------------------
   Modals / overlay
------------------------- */
.modal-overlay {
  transition: opacity 0.3s ease;
}

.modal-card {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.modal-overlay[style*="display: none"] .modal-card {
  transform: scale(0.95);
}

/* -------------------------
   Floating cart button
------------------------- */
.floating-cart-btn {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.floating-cart-btn:hover {
  transform: scale(1.05);
}

.floating-cart-btn .badge {
  transition: transform 0.2s ease;
}

/* -------------------------
   Utility classes
------------------------- */
.fade-in {
  animation: fadeIn 0.5s ease forwards;
}

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

.slide-up {
  animation: slideUp 0.5s ease forwards;
}

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