/**
 * ========================================
 * FRAMER-STYLE ANIMATIONS (Lightweight)
 * Mirip Framer Motion tapi no dependencies
 * ========================================
 */

/* Spring-like easing (mirip Framer bounce) */
:root {
    --spring-duration: 0.8s;
    --spring-easing: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Fade In with Slide Up (y: -30 → 0) */
@keyframes framerFadeSlideUp {
    from {
        opacity: 0.001;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade In with Slide Down (y: 80 → 0) */
@keyframes framerFadeSlideDown {
    from {
        opacity: 0.001;
        transform: translateY(80px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Framer-style fade only */
@keyframes framerFade {
    from { opacity: 0.001; }
    to { opacity: 1; }
}

/* Spring bounce effect */
@keyframes springBounce {
    0% {
        opacity: 0.001;
        transform: translateY(80px) scale(0.95);
    }
    60% {
        transform: translateY(-5px) scale(1.02);
    }
    80% {
        transform: translateY(3px) scale(0.99);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Animation classes mirip Framer */
.framer-animate {
    animation-duration: var(--spring-duration);
    animation-timing-function: var(--spring-easing);
    animation-fill-mode: forwards;
}

.framer-fade-up {
    animation-name: framerFadeSlideUp;
}

.framer-fade-down {
    animation-name: framerFadeSlideDown;
}

.framer-fade {
    animation-name: framerFade;
}

.framer-spring {
    animation-name: springBounce;
    animation-duration: 1s;
}

/* Initial hidden state */
.framer-hidden {
    opacity: 0.001;
}

/* Framer-style delays (0.4s default di Framer) */
.framer-delay-0 { animation-delay: 0s; }
.framer-delay-1 { animation-delay: 0.1s; }
.framer-delay-2 { animation-delay: 0.2s; }
.framer-delay-3 { animation-delay: 0.3s; }
.framer-delay-4 { animation-delay: 0.4s; }
.framer-delay-5 { animation-delay: 0.5s; }
.framer-delay-6 { animation-delay: 0.6s; }
.framer-delay-7 { animation-delay: 0.7s; }
.framer-delay-8 { animation-delay: 0.8s; }

/* Scroll-triggered Framer-style */
.framer-scroll {
    opacity: 0.001;
    transform: translateY(80px);
    transition: opacity 0.8s var(--spring-easing), 
                transform 0.8s var(--spring-easing);
}

.framer-scroll.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger children (untuk list items) */
.framer-stagger > * {
    opacity: 0.001;
    animation: framerFadeSlideDown var(--spring-duration) var(--spring-easing) forwards;
}

.framer-stagger > *:nth-child(1) { animation-delay: 0.1s; }
.framer-stagger > *:nth-child(2) { animation-delay: 0.2s; }
.framer-stagger > *:nth-child(3) { animation-delay: 0.3s; }
.framer-stagger > *:nth-child(4) { animation-delay: 0.4s; }
.framer-stagger > *:nth-child(5) { animation-delay: 0.5s; }
.framer-stagger > *:nth-child(6) { animation-delay: 0.6s; }
.framer-stagger > *:nth-child(7) { animation-delay: 0.7s; }
.framer-stagger > *:nth-child(8) { animation-delay: 0.8s; }



/* Ensure body never flashes */




/* Restore transitions after page is loaded and visible */
body.page-loaded 

/* Prevent opacity flashing */
* {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}




/* Ensure body never flashes white */


body {
    background-color: #ffffff !important;
    min-height: 100vh;
}

/* Only prevent opacity animations on page visibility change */


/* Remove the flag after a moment */



/* ==========================================
 * MINIMAL FLASH FIX (CSS Only)
 * No layout changes, just flash prevention
 * ========================================== */

/* Instant hide-show on tab switch */
@media (prefers-reduced-motion: no-preference) {
    body.tab-hidden * {
        animation-duration: 0ms !important;
        transition-duration: 0ms !important;
    }
}

/* Quick snap back to visible on return */
body:not(.tab-hidden) {
    animation-duration: inherit;
    transition-duration: inherit;
}


/* ==========================================
 * HUBUNGI KAMI: No animations
 * Keep visible but disable all animations
 * ========================================== */
a[href*="#contact"],
button:has-text("Hubungi Kami"),
a:has-text("Hubungi Kami"),
[class*="button"]:has-text("Hubungi Kami") {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
}