/* ============================================================
   Motion layer — Park Management System.
   Progressive enhancement: motion.js adds `html.motion` ONLY when JS runs
   and the user hasn't asked for reduced motion. Every "hidden" start state is
   scoped under `.motion`, so without JS (or with prefers-reduced-motion) all
   content is fully visible — no stuck-invisible elements, SEO-safe.
   GPU-friendly (transform/opacity only).
   ============================================================ */

/* ---- Scroll reveal ---- */
.motion .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .9s cubic-bezier(.22,.8,.3,1), transform .9s cubic-bezier(.22,.8,.3,1);
    will-change: opacity, transform;
}
.motion .reveal.in { opacity: 1; transform: none; }
.motion .reveal-left  { transform: translateX(-40px); }
.motion .reveal-right { transform: translateX(40px); }
.motion .reveal-left.in, .motion .reveal-right.in { transform: none; }

/* ---- Staggered children (grids, hero content) ---- */
.motion .reveal-stagger > * {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .8s cubic-bezier(.22,.8,.3,1), transform .8s 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 1.1s cubic-bezier(.76,0,.24,1); will-change: clip-path; }
.motion .reveal-img.in { clip-path: inset(0 0 0 0); }

/* ---- Leaf rule / divider draws in from the left ---- */
.motion .leaf-rule, .motion .draw-rule {
    transform: scaleX(0); transform-origin: left;
    transition: transform .85s cubic-bezier(.76,0,.24,1) .15s;
}
.motion .leaf-rule.in, .motion .draw-rule.in { transform: scaleX(1); }

/* ---- Hover lift / image zoom (cinematic, applies regardless of JS) ---- */
.attr-card, .zone-card, .pkg-card, .blog-card, .event-card, .facility-tile, .testi-card { transition: transform .4s cubic-bezier(.22,.8,.3,1), box-shadow .4s ease; }
figure img, .attr-fig img, .zone-fig img, .blog-fig img, .gallery-item img { transition: transform 1.05s cubic-bezier(.22,.8,.3,1); }

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

@media (prefers-reduced-motion: reduce) {
    .hero-slide.active { animation: none; }
    .attr-card, .zone-card, .pkg-card, .blog-card, .event-card, figure img { transition: none; }
}