/*
 * MOTION SYSTEM (Calm & Luxury)
 * 
 * Philosophy: "Add motion the way a candle adds light"
 * - Slow (400-800ms)
 * - Intentional
 * - Soft
 * - Predictable
 * - Almost invisible
 */

:root {
    /* DURATION */
    --motion-instant: 0ms;
    /* Reduced motion fallback */
    --motion-fast: 400ms;
    /* Quick feedback (buttons) */
    --motion-normal: 600ms;
    /* Default transitions */
    --motion-slow: 800ms;
    /* Luxurious reveals */
    --motion-breathing: 8000ms;
    /* Ambient image breathing */

    /* EASING (Calm only) */
    --ease-calm: cubic-bezier(0.22, 1, 0.36, 1);
    /* Primary easing */
    --ease-out: ease-out;
    /* Fallback */

    /* Legacy support (deprecated) */
    --duration-fast: var(--motion-fast);
    --duration-normal: var(--motion-normal);
    --duration-slow: var(--motion-slow);
}

/* REDUCED MOTION SUPPORT (Accessibility) */
@media (prefers-reduced-motion: reduce) {
    :root {
        --motion-fast: 0ms;
        --motion-normal: 0ms;
        --motion-slow: 0ms;
        --motion-breathing: 0ms;
    }

    * {
        animation-duration: 0ms !important;
        transition-duration: 0ms !important;
    }
}

/* FADE + TRANSLATE (Section Entry) */
.fade-in-up {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--motion-slow) var(--ease-calm),
        transform var(--motion-slow) var(--ease-calm);
}

.fade-in-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* IMAGE BREATHING (Ambient Life) */
@keyframes breathe {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
        /* Barely perceptible */
    }
}

.breathe {
    animation: breathe var(--motion-breathing) var(--ease-calm) infinite;
    animation-play-state: running;
}

/* Pause when offscreen (performance) */
.breathe:not(.in-viewport) {
    animation-play-state: paused;
}

/* Legacy fade animation */
.animate-fade {
    animation: fadeIn var(--motion-normal) var(--ease-out) forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* RESPONSIVE: MOTION SILENCE ON MOBILE */
@media (max-width: 767px) {
    .fade-in-up {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .breathe {
        animation: none !important;
    }
}