/* Custom Styles & Scroll Animations for Rumah Lebah Simpul Hati */

/* Prevent horizontal scroll on mobile */
html, body {
    overflow-x: hidden;
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #fffbeb;
}
::-webkit-scrollbar-thumb {
    background: #d97706;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #b45309;
}

/* Navbar active state */
.nav-link.active {
    color: #d97706;
    font-weight: 700;
    position: relative;
}

.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #d97706;
    border-radius: 2px;
}

/* Honeycomb pattern background */
.honeycomb-bg {
    background-color: #fffdfa;
    background-image: radial-gradient(#d97706 0.75px, transparent 0.75px), radial-gradient(#d97706 0.75px, #fffdfa 0.75px);
    background-size: 30px 30px;
    background-position: 0 0, 15px 15px;
    opacity: 0.15;
}

/* Pulse Glow Animation for CTA Buttons */
@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
    }
    50% {
        box-shadow: 0 0 0 14px rgba(16, 185, 129, 0);
    }
}

.pulse-wa {
    animation: pulseGlow 2.5s infinite;
}

/* FAQ Active Styling */
.faq-toggle i {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-toggle.active i {
    transform: rotate(180deg);
}

/* Card hover & micro-interaction animation */
.card-hover {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.card-hover:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 30px -8px rgba(217, 119, 6, 0.18);
}

/* Page Header Banner styling */
.page-header-bg {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 50%, #fffdfa 100%);
}

/* ==========================================================================
   SCROLL REVEAL ANIMATIONS (Smooth & Mobile Friendly)
   ========================================================================== */

.reveal, .reveal-left, .reveal-right, .reveal-zoom {
    opacity: 0;
    will-change: opacity, transform;
    transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Base states before trigger */
.reveal {
    transform: translateY(36px);
}

.reveal-left {
    transform: translateX(-36px);
}

.reveal-right {
    transform: translateX(36px);
}

.reveal-zoom {
    transform: scale(0.92);
}

/* Triggered State */
.reveal.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-zoom.is-visible {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
}

/* Stagger Delays for Grid Elements */
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; }
.delay-500 { transition-delay: 0.5s; }

/* Mobile Touch & Layout Enhancements */
@media (max-width: 640px) {
    header {
        box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    }

    /* Reduce translate distance on small screens for buttery smooth performance */
    .reveal {
        transform: translateY(20px);
    }
    .reveal-left {
        transform: translateX(-20px);
    }
    .reveal-right {
        transform: translateX(20px);
    }
}