/* Kalamunda Veterinary Hospital — homepage motion (index.html only; pairs with js/kvh-home-motion.js).
   The same motion language as the Dog Vaccination page:
   1. scroll reveals: blocks fade up 22px over 700ms as they come into view
   2. staggered items: list items, cards and pills arrive one after another
   3. photo motion: photos settle from a soft zoom; the hero photo drifts very slowly
   4. playful details: the team figures count up, the credential pills pop, the emergency phone gives a ring
   Everything is keyed to html.hm-motion, which the script adds only when motion is allowed, so with
   prefers-reduced-motion (or without the script) the page is exactly the static design. */

:root {
  --hm-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --hm-rise: 22px;
  --hm-dur: 700ms;
}

@keyframes hm-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes hm-photo-in { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes hm-pop { 0% { opacity: 0; transform: scale(0.6); } 65% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } }
@keyframes hm-ring { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-16deg); } 30% { transform: rotate(13deg); } 45% { transform: rotate(-9deg); } 60% { transform: rotate(6deg); } 75% { transform: rotate(-3deg); } }
@keyframes hm-drift { from { transform: scale(1); } to { transform: scale(1.06); } }

/* ---------- 1. Scroll reveals ---------- */
.hm-motion .hm-reveal { opacity: 0; transform: translateY(var(--hm-rise)); transition: opacity var(--hm-dur) var(--hm-ease), transform var(--hm-dur) var(--hm-ease); }
.hm-motion .hm-reveal.is-in { opacity: 1; transform: none; }
.hm-motion .hm-reveal.hm-delay { transition-delay: 120ms; } /* the second half of a pair */

/* ---------- 2. Staggered items (keyframes, so hover transitions on the same items keep their timing) ---------- */
.hm-motion .hm-group > * { opacity: 0; }
.hm-motion .hm-group.is-in > * { animation: hm-rise 600ms var(--hm-ease) both; }
.hm-motion .hm-group.is-in > :nth-child(2) { animation-delay: 90ms; }
.hm-motion .hm-group.is-in > :nth-child(3) { animation-delay: 180ms; }
.hm-motion .hm-group.is-in > :nth-child(4) { animation-delay: 270ms; }
.hm-motion .hm-group.is-in > :nth-child(5) { animation-delay: 360ms; }
.hm-motion .hm-group.is-in > :nth-child(6) { animation-delay: 450ms; }
.hm-motion .hm-group.is-in > :nth-child(7) { animation-delay: 540ms; }

/* the credential pills pop rather than rise */
.hm-motion .hm-group.hm-pop.is-in > * { animation-name: hm-pop; animation-duration: 520ms; }
.hm-motion .hm-group.hm-pop.is-in > :nth-child(1) { animation-delay: 300ms; }
.hm-motion .hm-group.hm-pop.is-in > :nth-child(2) { animation-delay: 400ms; }
.hm-motion .hm-group.hm-pop.is-in > :nth-child(3) { animation-delay: 500ms; }

/* ---------- 3. Photo motion ---------- */
/* photos settle from an 8% zoom inside their frames (backwards fill only, so hover zoom still works after) */
.hm-motion .is-in .hm-photo,
.hm-motion .hm-photo-host.is-in .hm-photo { animation: hm-photo-in 1200ms var(--hm-ease) backwards; }
.hm-motion .hm-group.is-in > :nth-child(2) .hm-photo { animation-delay: 90ms; }
.hm-motion .hm-group.is-in > :nth-child(3) .hm-photo { animation-delay: 180ms; }
.hm-motion .about-img { overflow: hidden; } /* clips the settling photo; the image itself is unchanged */

/* hero: the photo (a CSS background) is repeated on a layer that drifts very slowly towards the right */
.hm-motion #hero-1::before { content: ""; position: absolute; inset: 0; z-index: 0; background: inherit; transform-origin: 85% 50%; animation: hm-drift 24s ease-in-out infinite alternate; pointer-events: none; }
/* hero copy arrives in sequence on load */
.hm-motion #hero-1 .hero-txt > * { animation: hm-rise 650ms var(--hm-ease) both; }
.hm-motion #hero-1 .hero-txt > :nth-child(2) { animation-delay: 120ms; }
.hm-motion #hero-1 .hero-txt > :nth-child(3) { animation-delay: 240ms; }

/* ---------- 4. Playful details ---------- */
.hm-motion .kvh-emergency-band-inner.is-in .btn .fa-phone { display: inline-block; animation: hm-ring 1000ms ease-in-out 600ms; }
.kvh-emergency-band .btn:hover .fa-phone { display: inline-block; animation: hm-ring 1000ms ease-in-out; }
.kvh-team-figure strong { font-variant-numeric: tabular-nums; } /* the counting figures don't jitter */

@media (prefers-reduced-motion: reduce) {
  .kvh-emergency-band .btn:hover .fa-phone { animation: none; }
}