/**
 * Motion & Physics - Apple Fluid Motion System
 * Damping, springs, compositor-only animations (transform & opacity)
 */

/* Spring Easing Variables */
:root {
    --spring-snappy: cubic-bezier(0.2, 0.8, 0.2, 1);
    --spring-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --spring-critically-damped: cubic-bezier(0.25, 1, 0.5, 1);
}

/* 3D Hardware Acceleration Hints */
.envelope-wrapper,
.photo-card,
.envelope-flap,
.envelope-card,
.countdown-num,
.portrait-img {
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Efek Masuk Per Foto Berdasarkan Konfigurasi */
.photo-card.effect-zoom img {
    transform: scale(1);
    transition: transform 6s cubic-bezier(0.25, 1, 0.5, 1);
}

.photo-card[style*="translate3d(0px, 0px, 0px)"].effect-zoom img {
    transform: scale(1.06);
}

.photo-card.effect-drift img {
    transform: translateX(-15px);
    transition: transform 5s cubic-bezier(0.25, 1, 0.5, 1);
}

.photo-card[style*="translate3d(0px, 0px, 0px)"].effect-drift img {
    transform: translateX(0);
}

.photo-card.effect-rotate {
    --tilt-rot: -2.5deg;
}

/* Desktop Parallax Tilt Integration */
@media (hover: hover) and (pointer: fine) {
    .photo-card[style*="translate3d(0px, 0px, 0px)"] {
        transform: translate3d(0, 0, 0) 
                   rotateX(var(--tilt-x, 0deg)) 
                   rotateY(var(--tilt-y, 0deg)) !important;
    }
}

/* Reduced Motion Support (Prinsip Aksesibilitas Apple) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .envelope-wrapper {
        animation: none !important;
    }

    .envelope-wrapper.flap-open .envelope-flap {
        transform: none !important;
        opacity: 0 !important;
    }

    .envelope-wrapper.card-rising .envelope-card {
        transform: translateY(-80px) !important;
    }

    .countdown-num {
        filter: none !important;
        transition: opacity 0.2s ease !important;
    }

    .pause-text-line {
        filter: none !important;
        transform: none !important;
        transition: opacity 0.3s ease !important;
    }

    .stagger-letter {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}