/* ============================================================
   Gentle, fresh motion layer (Dental Chamber PP).
   Progressive enhancement: every "hidden" start state is scoped under `.motion`
   (added by motion.js only when JS runs + no reduced-motion). Without JS, all
   content is fully visible — SEO-safe, no stuck-invisible elements.
   GPU-friendly (transform/opacity only).
   ============================================================ */

/* ---- Scroll reveal (gentle, ~0.7s) ---- */
.motion .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s cubic-bezier(.22,.8,.3,1), transform .7s cubic-bezier(.22,.8,.3,1);
    will-change: opacity, transform;
}
.motion .reveal.in { opacity: 1; transform: none; }
.motion .reveal-left  { transform: translateX(-36px); }
.motion .reveal-right { transform: translateX(36px); }
.motion .reveal-left.in, .motion .reveal-right.in { transform: none; }

/* ---- Staggered children (grids, hero content) ---- */
.motion .reveal-stagger > * {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .65s cubic-bezier(.22,.8,.3,1), transform .65s cubic-bezier(.22,.8,.3,1);
    will-change: opacity, transform;
}
.motion .reveal-stagger.in > * { opacity: 1; transform: none; }
.motion .reveal-stagger.in > *:nth-child(1) { transition-delay: .00s; }
.motion .reveal-stagger.in > *:nth-child(2) { transition-delay: .08s; }
.motion .reveal-stagger.in > *:nth-child(3) { transition-delay: .16s; }
.motion .reveal-stagger.in > *:nth-child(4) { transition-delay: .24s; }
.motion .reveal-stagger.in > *:nth-child(5) { transition-delay: .32s; }
.motion .reveal-stagger.in > *:nth-child(6) { transition-delay: .40s; }
.motion .reveal-stagger.in > *:nth-child(7) { transition-delay: .48s; }
.motion .reveal-stagger.in > *:nth-child(8) { transition-delay: .56s; }

/* ---- Image clip-wipe reveal ---- */
.motion .reveal-img { clip-path: inset(0 100% 0 0); transition: clip-path 1s cubic-bezier(.76,0,.24,1); will-change: clip-path; }
.motion .reveal-img.in { clip-path: inset(0 0 0 0); }

/* ---- Smile-underline / divider draws in from the left ---- */
.motion .smile-underline, .motion .draw-rule {
    transform: scaleX(0); transform-origin: left;
    transition: transform .8s cubic-bezier(.76,0,.24,1) .12s;
}
.motion .smile-underline.in, .motion .draw-rule.in { transform: scaleX(1); }

/* ---- Hover lift / image zoom (applies regardless of JS) ---- */
.treatment-card, .dentist-card, .tip-card, .price-card, .testi-card, .feature-card, .cat-card {
    transition: transform .45s cubic-bezier(.22,.8,.3,1), box-shadow .45s ease;
}
.treatment-card:hover, .dentist-card:hover, .tip-card:hover, .cat-card:hover, .feature-card:hover { transform: translateY(-6px); }
figure img, .treatment-card img, .dentist-card img, .gallery-item img, .tip-card img { transition: transform 1s cubic-bezier(.22,.8,.3,1); }
.treatment-card:hover img, .dentist-card:hover img, .gallery-item:hover img, .tip-card:hover img, figure:hover > img { transform: scale(1.05); }

/* ---- Hero: slow Ken-Burns zoom on the active slide ---- */
.hero-slide.active { animation: dc-kenburns 16s ease-out forwards; }
@keyframes dc-kenburns { from { transform: scale(1.001); } to { transform: scale(1.08); } }

@media (prefers-reduced-motion: reduce) {
    .hero-slide.active { animation: none; }
    .treatment-card, .dentist-card, figure img { transition: none; }
}