/* Explain: Base reset, typography, and custom animations including marquee and scroll reveal. */
* {
    box-sizing: border-box;
}

html {
    background: var(--background-color);
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
}

/* Splash Screen Animation */
@keyframes fadeOut {
    from { opacity: 1; visibility: visible; }
    to { opacity: 0; visibility: hidden; }
}

.splash-exit {
    animation: fadeOut 0.5s ease-out forwards;
}

/* WhatsApp Pulse */
@keyframes softPulse {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.wa-pulse {
    animation: softPulse 2s infinite;
}

/* Hover Bridge for Dropdowns if needed */
.hover-bridge::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
}

/* Scroll Reveal Animations */
.reveal-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-up.active {
    opacity: 1;
    transform: translateY(0);
}

/* Floating Animation */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

/* Marquee RTL Animation */
@keyframes marqueeRtl {
    0% { transform: translateX(0); }
    100% { transform: translateX(50%); }
}