/**
 * destinations-anim.css — Animation keyframes + transitions
 *
 * Phase 4 — Scroll reveal states, animation variants, parallax,
 * stagger timing, and prefers-reduced-motion overrides.
 *
 * All animations are GPU-accelerated (transform + opacity only).
 * All elements with [data-reveal] start hidden and become visible
 * when Intersection Observer triggers in destinations-anim.js.
 *
 * @see destinations-anim.js (Intersection Observer + rAF engine)
 * @see .github/newpage-v2-dynamic-destinations.md Section 11.4
 */

/* ═══════════════════════════════════════════════════════════
   1. Scroll Reveal — Base Hidden States
   ═══════════════════════════════════════════════════════════ */

/* Default: elements start hidden, become visible when .is-revealed is added */
main.destination-city.modernpage [data-reveal],
main.destination-country.modernpage [data-reveal] {
    opacity: 0;
    will-change: transform, opacity;
    transition-property: transform, opacity;
    transition-duration: 0.7s;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Stagger delay support via CSS custom property */
main.destination-city.modernpage [data-reveal][style*="--stagger-delay"],
main.destination-country.modernpage [data-reveal][style*="--stagger-delay"] {
    transition-delay: var(--stagger-delay, 0ms);
}


/* ═══════════════════════════════════════════════════════════
   2. Animation Variants — Initial States
   ═══════════════════════════════════════════════════════════ */

/* reveal-up: slide up from below (Rome — monumental) */
main.destination-city.modernpage [data-reveal="reveal-up"],
main.destination-country.modernpage [data-reveal="reveal-up"] {
    transform: translateY(30px);
}

/* gentle-fade: pure fade, no movement (Tuscany — relaxed) */
main.destination-city.modernpage [data-reveal="gentle-fade"],
main.destination-country.modernpage [data-reveal="gentle-fade"] {
    transform: translateY(0);
    transition-duration: 1s;
}

/* slide-right: slide in from left (Amalfi — breezy) */
main.destination-city.modernpage [data-reveal="slide-right"],
main.destination-country.modernpage [data-reveal="slide-right"] {
    transform: translateX(-30px);
}


/* ═══════════════════════════════════════════════════════════
   3. Revealed State — All Variants
   ═══════════════════════════════════════════════════════════ */

main.destination-city.modernpage [data-reveal].is-revealed,
main.destination-country.modernpage [data-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0) translateX(0);
}


/* ═══════════════════════════════════════════════════════════
   4. Parallax Layers (hero background, optional)
   ═══════════════════════════════════════════════════════════ */

main.destination-city.modernpage [data-parallax],
main.destination-country.modernpage [data-parallax] {
    will-change: transform;
    transition: none; /* parallax is driven by JS rAF, not CSS transition */
}


/* ═══════════════════════════════════════════════════════════
   5. Image Lazy Reveal (blur → sharp)
   ═══════════════════════════════════════════════════════════ */

main.destination-city.modernpage [data-lazy-reveal],
main.destination-country.modernpage [data-lazy-reveal] {
    filter: blur(10px);
    opacity: 0.6;
    transition: filter 0.6s ease, opacity 0.6s ease;
}

main.destination-city.modernpage [data-lazy-reveal].is-loaded,
main.destination-country.modernpage [data-lazy-reveal].is-loaded {
    filter: blur(0);
    opacity: 1;
}


/* ═══════════════════════════════════════════════════════════
   6. Counter Animation (numbers count up)
   ═══════════════════════════════════════════════════════════ */

main.destination-city.modernpage [data-count-up],
main.destination-country.modernpage [data-count-up] {
    font-variant-numeric: tabular-nums;
}


/* ═══════════════════════════════════════════════════════════
   7. Stagger Group — children animate sequentially
   ═══════════════════════════════════════════════════════════ */

main.destination-city.modernpage [data-stagger-group] > [data-reveal]:nth-child(1),
main.destination-country.modernpage [data-stagger-group] > [data-reveal]:nth-child(1) {
    transition-delay: 0ms;
}
main.destination-city.modernpage [data-stagger-group] > [data-reveal]:nth-child(2),
main.destination-country.modernpage [data-stagger-group] > [data-reveal]:nth-child(2) {
    transition-delay: 100ms;
}
main.destination-city.modernpage [data-stagger-group] > [data-reveal]:nth-child(3),
main.destination-country.modernpage [data-stagger-group] > [data-reveal]:nth-child(3) {
    transition-delay: 200ms;
}
main.destination-city.modernpage [data-stagger-group] > [data-reveal]:nth-child(4),
main.destination-country.modernpage [data-stagger-group] > [data-reveal]:nth-child(4) {
    transition-delay: 300ms;
}
main.destination-city.modernpage [data-stagger-group] > [data-reveal]:nth-child(5),
main.destination-country.modernpage [data-stagger-group] > [data-reveal]:nth-child(5) {
    transition-delay: 400ms;
}
main.destination-city.modernpage [data-stagger-group] > [data-reveal]:nth-child(6),
main.destination-country.modernpage [data-stagger-group] > [data-reveal]:nth-child(6) {
    transition-delay: 500ms;
}


/* ═══════════════════════════════════════════════════════════
   8. Accessibility — prefers-reduced-motion
   ═══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    main.destination-city.modernpage [data-reveal],
    main.destination-country.modernpage [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        transition-delay: 0ms !important;
    }

    main.destination-city.modernpage [data-parallax],
    main.destination-country.modernpage [data-parallax] {
        transform: none !important;
    }

    main.destination-city.modernpage [data-lazy-reveal],
    main.destination-country.modernpage [data-lazy-reveal] {
        filter: none !important;
        opacity: 1 !important;
        transition: none !important;
    }
}