/* ==========================================================================
   Prestige Dental Suite — animations.css
   Keyframes, scroll-reveal states and reduced-motion handling.
   Progressive enhancement: reveal elements are only hidden after main.js adds
   the "reveal-ready" class to <html>. If scripts fail, everything stays visible.
   ========================================================================== */

@keyframes fadeUp   { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.07); } }
@keyframes stepIn   { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes popIn    { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }

/* Hero entrance (pure CSS, no JS dependency) */
.hero__copy > * { animation: fadeUp .9s var(--ease) both; }
.hero__copy > :nth-child(1) { animation-delay: .05s; }
.hero__copy > :nth-child(2) { animation-delay: .15s; }
.hero__copy > :nth-child(3) { animation-delay: .27s; }
.hero__copy > :nth-child(4) { animation-delay: .38s; }
.hero__copy > :nth-child(5) { animation-delay: .48s; }
.page-hero .row > * { animation: fadeUp .8s var(--ease) both; }
.page-hero .row > :nth-child(2) { animation-delay: .15s; }

/* Slow zoom on the active hero slide. Resting state equals the end state so
   the outgoing slide does not "jump" while it fades out. */
.slide .ph { transform: scale(1.07); }
.slide.is-active .ph { animation: kenburns 8s ease-out both; }

/* Scroll reveal */
html.reveal-ready .reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay: var(--rd, 0s);
}
html.reveal-ready .reveal.is-in { opacity: 1; transform: none; }
.rd-1 { --rd: .08s; } .rd-2 { --rd: .16s; } .rd-3 { --rd: .24s; } .rd-4 { --rd: .32s; }

/* Wizard / confirmation entrance */
.wiz-step:not([hidden]) { animation: stepIn .45s var(--ease) both; }
.confirm__icon { animation: popIn .6s var(--ease) .1s both; }

/* Gentle icon movement on card hover */
.trust__item:hover .trust__icon, .value-card:hover .icon-chip, .contact-card:hover .icon-chip { transform: translateY(-3px); }
.trust__icon, .value-card .icon-chip, .contact-card .icon-chip { transition: transform .35s var(--ease), background-color .3s var(--ease), color .3s var(--ease); }

/* Reduced motion: remove non-essential movement, keep content and state changes */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
    transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
  }
  html.reveal-ready .reveal { opacity: 1; transform: none; }
  .slide .ph, .slide.is-active .ph { transform: none; animation: none; }
  .svc-card:hover, .value-card:hover, .contact-card:hover, .tl-step:hover { transform: none; }
  .zoom-host:hover .ph > img, .zoom-host:hover .ph__fallback { transform: none; }
}