/* ==========================================================
   Smile N More – subtle animations
   Uses the individual `translate` property so it never fights
   with the existing hover `transform` rules in style.css.
   ========================================================== */

html { scroll-behavior: smooth; }

/* ---------- Keyframes ---------- */
@keyframes smdcFadeUp {
  from { opacity: 0; translate: 0 28px; }
  to   { opacity: 1; translate: 0 0; }
}
@keyframes smdcFadeLeft {
  from { opacity: 0; translate: -32px 0; }
  to   { opacity: 1; translate: 0 0; }
}
@keyframes smdcFadeRight {
  from { opacity: 0; translate: 32px 0; }
  to   { opacity: 1; translate: 0 0; }
}
@keyframes smdcZoomIn {
  from { opacity: 0; scale: 0.94; }
  to   { opacity: 1; scale: 1; }
}
@keyframes smdcFloat {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -8px; }
}
@keyframes smdcUnderline {
  from { scale: 0 1; }
  to   { scale: 1 1; }
}

/* ---------- Hero: plays once on page load ---------- */
.hero-clinic,
.hero-left h1,
.hero-desc,
.hero-buttons,
.hero-features {
  animation: smdcFadeUp 0.8s cubic-bezier(.22,.8,.3,1) both;
}
.hero-clinic    { animation-delay: .05s; }
.hero-left h1   { animation-delay: .18s; }
.hero-desc      { animation-delay: .32s; }
.hero-buttons   { animation-delay: .46s; }
.hero-features  { animation-delay: .60s; }

.hero-right {
  animation: smdcFadeRight 1s cubic-bezier(.22,.8,.3,1) .2s both;
}
.hero-right img {
  animation: smdcFloat 6s ease-in-out 1.4s infinite;
}

/* Hero feature icons: small pop on hover */
.hero-features .feature i { transition: scale .3s ease; }
.hero-features .feature:hover i { scale: 1.15; }

/* ---------- Navbar ---------- */
.navbar { transition: box-shadow .3s ease, background-color .3s ease; }
.navbar.is-scrolled { box-shadow: 0 6px 20px rgba(0,0,0,.10); }

#nav-menu a { position: relative; }
@media (min-width: 769px) {
  #nav-menu a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -4px;
    height: 2px;
    background: currentColor;
    transform-origin: left;
    scale: 0 1;
    transition: scale .3s ease;
  }
  #nav-menu a:hover::after { scale: 1 1; }
}

/* ---------- Scroll reveal (only active when JS adds .js-anim) ---------- */
.js-anim .reveal { opacity: 0; }
.js-anim .reveal.in {
  animation: smdcFadeUp .7s cubic-bezier(.22,.8,.3,1) both;
  animation-delay: var(--d, 0s);
}
.js-anim .reveal.from-left.in  { animation-name: smdcFadeLeft; }
.js-anim .reveal.from-right.in { animation-name: smdcFadeRight; }
.js-anim .reveal.zoom.in       { animation-name: smdcZoomIn; }

/* Section headings: gentle accent line draw (only if heading has none) */
.section-header h2 { position: relative; }

/* ---------- Image & card polish ---------- */
.ba-card, .gallery-grid img, .doctor-card img, .service-img img {
  overflow: hidden;
}
.gallery-grid img,
.ba-card img,
.service-img img {
  transition: transform .5s ease, filter .5s ease;
}
.gallery-grid img:hover,
.ba-card:hover img,
.service-img img:hover {
  transform: scale(1.04);
}

.doctor-card, .testimonial-card, .painless-card, .info-box, .ba-card {
  transition: transform .3s ease, box-shadow .3s ease;
}
.doctor-card:hover, .testimonial-card:hover, .painless-card:hover, .ba-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(0,0,0,.12);
}

/* Buttons: soft lift */
.btn-primary, .btn-outline, .contact-btn, .review-btn {
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease;
}
.btn-primary:hover, .btn-outline:hover, .contact-btn:hover, .review-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(0,0,0,.15);
}

/* Floating scroll-to-top button fade */
#scrollTopBtn { transition: transform .25s ease, opacity .25s ease; }
#scrollTopBtn:hover { transform: translateY(-4px); }

/* Lightbox open */
.lightbox img { animation: smdcZoomIn .3s ease both; }

/* ---------- Respect users who prefer less motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
  }
  .js-anim .reveal { opacity: 1; }
}