/* ==========================================================================
   Scroll-reveal + keyframe animation system (vanilla CSS + IntersectionObserver)
   ========================================================================== */

@keyframes float-y {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}

@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes ping {
    0% { transform: scale(1); opacity: 0.55; }
    75%, 100% { transform: scale(1.7); opacity: 0; }
}

@keyframes fade-up {
    from { opacity: 0; transform: translateY(28px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes zoom-in {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes slide-in-left {
    from { opacity: 0; transform: translateX(-32px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slide-in-right {
    from { opacity: 0; transform: translateX(32px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes draw-paw {
    from { stroke-dashoffset: 240; }
    to { stroke-dashoffset: 0; }
}

/* Reveal-on-scroll: JS toggles .is-visible when the element enters the
   viewport. Respects reduced-motion preference. */
.reveal { opacity: 0; }
.reveal.is-visible { animation: fade-up 0.7s ease forwards; }
.reveal[data-reveal="fade"].is-visible { animation-name: fade-in; }
.reveal[data-reveal="zoom"].is-visible { animation-name: zoom-in; }
.reveal[data-reveal="left"].is-visible { animation-name: slide-in-left; }
.reveal[data-reveal="right"].is-visible { animation-name: slide-in-right; }

/* Staggered children: apply .reveal-stagger to a parent, children get
   progressively delayed via nth-child so a grid animates in like a wave. */
.reveal-stagger .reveal:nth-child(1) { animation-delay: 0s; }
.reveal-stagger .reveal:nth-child(2) { animation-delay: 0.08s; }
.reveal-stagger .reveal:nth-child(3) { animation-delay: 0.16s; }
.reveal-stagger .reveal:nth-child(4) { animation-delay: 0.24s; }
.reveal-stagger .reveal:nth-child(5) { animation-delay: 0.32s; }
.reveal-stagger .reveal:nth-child(6) { animation-delay: 0.4s; }
.reveal-stagger .reveal:nth-child(7) { animation-delay: 0.48s; }
.reveal-stagger .reveal:nth-child(8) { animation-delay: 0.56s; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal, .reveal.is-visible { animation: none !important; opacity: 1 !important; transform: none !important; }
    .hero-paw, .hero-media-ring, .hero-float-card, .fab-whatsapp .ping { animation: none !important; }
    * { transition-duration: 0.01ms !important; }
}

/* Page-load fade for the whole main region (subtle, avoids flash) */
.page-enter { animation: fade-in 0.5s ease; }