/**
 * Arka Vacation - Custom Scroll Animations
 * 
 * GPU-accelerated animations using transform & opacity only.
 * Respects prefers-reduced-motion for accessibility.
 * 
 * @package Arka_Vacation
 */

/* ==========================================================================
   CSS Custom Properties (Animation Defaults)
   ========================================================================== */

:root {
    --ark-anim-duration: 600ms;
    --ark-anim-delay: 0ms;
    --ark-anim-easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ark-anim-distance: 24px;
    --ark-anim-scale: 0.96;
}

/* ==========================================================================
   Base Animation State (Hidden)
   ========================================================================== */

.ark-anim {
    opacity: 0;
    will-change: transform, opacity;
    transition-property: transform, opacity;
    transition-duration: var(--ark-anim-duration);
    transition-delay: var(--ark-anim-delay);
    transition-timing-function: var(--ark-anim-easing);
}

/* ==========================================================================
   Animation Modifiers (Initial Transform States)
   ========================================================================== */

/* Fade Up (default) */
.ark-anim,
.ark-anim--fade-up {
    transform: translateY(var(--ark-anim-distance));
}

/* Fade Down */
.ark-anim--fade-down {
    transform: translateY(calc(var(--ark-anim-distance) * -1));
}

/* Fade Left (slides in from left) */
.ark-anim--fade-left {
    transform: translateX(calc(var(--ark-anim-distance) * -1));
}

/* Fade Right (slides in from right) */
.ark-anim--fade-right {
    transform: translateX(var(--ark-anim-distance));
}

/* Scale Up */
.ark-anim--scale {
    transform: scale(var(--ark-anim-scale));
}

/* Fade Up with Scale */
.ark-anim--fade-up-scale {
    transform: translateY(var(--ark-anim-distance)) scale(var(--ark-anim-scale));
}

/* Zoom In */
.ark-anim--zoom {
    transform: scale(0.9);
}

/* Rotate Slight */
.ark-anim--rotate {
    transform: translateY(var(--ark-anim-distance)) rotate(-2deg);
}

/* ==========================================================================
   Active State (Visible - Applied by JS)
   ========================================================================== */

.ark-anim.is-active {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1) rotate(0deg);
}

/* ==========================================================================
   Stagger Children (Optional utility for parent containers)
   ========================================================================== */

/* Children inside stagger container get base animation */
[data-animate-stagger] > .ark-anim,
[data-animate-stagger] > [data-animate-child] {
    opacity: 0;
    transform: translateY(var(--ark-anim-distance));
    transition-property: transform, opacity;
    transition-duration: var(--ark-anim-duration);
    transition-delay: var(--ark-anim-delay);
    transition-timing-function: var(--ark-anim-easing);
    will-change: transform, opacity;
}

[data-animate-stagger] > .ark-anim.is-active,
[data-animate-stagger] > [data-animate-child].is-active {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   Duration Variants (utility classes)
   ========================================================================== */

.ark-anim--fast {
    --ark-anim-duration: 400ms;
}

.ark-anim--slow {
    --ark-anim-duration: 800ms;
}

.ark-anim--slower {
    --ark-anim-duration: 1000ms;
}

/* ==========================================================================
   Distance Variants
   ========================================================================== */

.ark-anim--short {
    --ark-anim-distance: 12px;
}

.ark-anim--long {
    --ark-anim-distance: 40px;
}

/* ==========================================================================
   Accessibility: Respect Reduced Motion Preference
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .ark-anim,
    .ark-anim.is-active,
    [data-animate-stagger] > .ark-anim,
    [data-animate-stagger] > [data-animate-child],
    [data-animate-stagger] > .ark-anim.is-active,
    [data-animate-stagger] > [data-animate-child].is-active {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
        will-change: auto !important;
    }
}

/* ==========================================================================
   Print Styles: Disable animations for print
   ========================================================================== */

@media print {
    .ark-anim,
    .ark-anim.is-active {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}