/* =============================================================================
   Van Huussies – Animations
   Place at: /wp-content/themes/vanhuussies/assets/css/animations.css
   ============================================================================= */

/* ── Respect reduced motion ──────────────────────────────────────────────────
   All animations are disabled for users who prefer reduced motion.          */
@media (prefers-reduced-motion: reduce) {
    .vh-anim,
    .vh-anim-scale,
    .vh-anim-child,
    .hero-eyebrow,
    .hero-h1,
    .hero-subtext,
    .hero-ctas,
    nav[role="navigation"] {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ── Nav: slide down on page load ────────────────────────────────────────── */
@keyframes vh-nav-in {
    from { opacity: 0; transform: translateY(-100%); }
    to   { opacity: 1; transform: translateY(0); }
}

nav[role="navigation"] {
    animation: vh-nav-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0s both;
}

/* ── Hero: staggered fade-up on page load ───────────────────────────────── */
@keyframes vh-hero-in {
    from { opacity: 0; transform: translateY(32px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hero-eyebrow {
    animation: vh-hero-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}
.hero-h1 {
    animation: vh-hero-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}
.hero-subtext {
    animation: vh-hero-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both;
}
.hero-ctas {
    animation: vh-hero-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.6s both;
}

/* ── Scroll animations: base hidden state ───────────────────────────────── */
/* Applied by JS before the observer runs. Keeps HTML clean.                 */

.vh-anim {
    opacity: 0;
    transform: translateY(40px);
    transition:
            opacity  0.65s cubic-bezier(0.22, 1, 0.36, 1),
            transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Images scale up slightly as they enter */
.vh-anim-scale {
    opacity: 0;
    transform: scale(0.96) translateY(24px);
    transition:
            opacity  0.7s cubic-bezier(0.22, 1, 0.36, 1),
            transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Grid / list children animate in with a stagger */
.vh-anim-child {
    opacity: 0;
    transform: translateY(36px);
    transition:
            opacity  0.55s cubic-bezier(0.22, 1, 0.36, 1),
            transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Visible state (toggled by IntersectionObserver) ────────────────────── */
.vh-anim.is-visible,
.vh-anim-scale.is-visible,
.vh-anim-child.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ── Stagger delays for child elements ──────────────────────────────────── */
.vh-anim-child:nth-child(1) { transition-delay: 0.05s; }
.vh-anim-child:nth-child(2) { transition-delay: 0.15s; }
.vh-anim-child:nth-child(3) { transition-delay: 0.25s; }
.vh-anim-child:nth-child(4) { transition-delay: 0.33s; }
.vh-anim-child:nth-child(5) { transition-delay: 0.40s; }
.vh-anim-child:nth-child(6) { transition-delay: 0.47s; }

/* ── Hover interactions ─────────────────────────────────────────────────── */

/* Scrapbook gallery cards lift on hover */
.scrapbook-card {
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.scrapbook-card:hover {
    transform: translateY(-8px) rotate(0.5deg);
}

/* Service rows nudge right on hover */
.vh-service-row {
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.vh-service-row:hover {
    transform: translateX(8px);
}

/* CTA buttons pulse once when they enter the viewport */
@keyframes vh-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(200, 150, 145, 0.45); }
    70%  { box-shadow: 0 0 0 12px rgba(200, 150, 145, 0); }
    100% { box-shadow: 0 0 0 0 rgba(200, 150, 145, 0); }
}
.vh-cta-pulse.is-visible {
    animation: vh-pulse 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.7s 1 both;
}

/* Decorative accent blocks slide in from the side */
.vh-anim-left {
    opacity: 0;
    transform: translateX(-32px);
    transition:
            opacity  0.65s cubic-bezier(0.22, 1, 0.36, 1),
            transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.vh-anim-left.is-visible {
    opacity: 1;
    transform: translateX(0);
}