/* ==========================================================================
   ANIMATION UTILITIES
   Small, composable classes toggled by assets/js/core.js (IntersectionObserver
   for scroll-reveal, simple state classes for everything else). Keeping
   these separate from component CSS makes it obvious which motion is
   "structural" (e.g. a drawer sliding open) vs. "decorative" (fade-in on
   scroll) — the decorative ones are exactly what gets fully disabled by
   the global prefers-reduced-motion rule in style.css.
   ========================================================================== */

/* Generic scroll-reveal — apply .verdora-reveal to any element; core.js adds
   .is-visible when it enters the viewport (see IntersectionObserver setup). */
.verdora-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--duration-slow) var(--ease-standard),
                transform var(--duration-slow) var(--ease-standard);
}
.verdora-reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Staggered children — direct children fade in with an incrementing delay,
   for grids (category cards, benefit items) where a single reveal looks flat. */
.verdora-reveal-stagger > * {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--duration-slow) var(--ease-standard),
                transform var(--duration-slow) var(--ease-standard);
}
.verdora-reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.verdora-reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 60ms; }
.verdora-reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 120ms; }
.verdora-reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 180ms; }
.verdora-reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 240ms; }
.verdora-reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 300ms; }
.verdora-reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); }

/* Generic hover-lift, reused instead of repeating the same 2 lines everywhere. */
.verdora-hover-lift { transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard); }
.verdora-hover-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* Simple fade utility for modals/panels toggled via [hidden] + a class swap. */
.verdora-fade {
    transition: opacity var(--duration-base) var(--ease-standard);
}

/* Button press micro-interaction (kept subtle — see .btn:active in style.css for the base). */
@keyframes verdora-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.06); }
    100% { transform: scale(1); }
}
.verdora-pulse-once { animation: verdora-pulse 320ms var(--ease-standard); }

/* Skeleton loading shimmer, used while AJAX content (quick view, load more) is in flight. */
@keyframes verdora-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.verdora-skeleton {
    background: linear-gradient(90deg, var(--color-bg-alt) 25%, var(--verdora-white) 50%, var(--color-bg-alt) 75%);
    background-size: 200% 100%;
    animation: verdora-shimmer 1.4s ease-in-out infinite;
    border-radius: var(--radius-sm);
}