/* Explain: Base reset and typography defaults */
* {
    box-sizing: border-box;
}

html {
    background: var(--background-color);
}

body {
    overflow-x: hidden;
}

@keyframes button-vibrate {
    0%, 100% { transform: translateX(0); }
    2%, 6%, 10% { transform: translateX(-2px) rotate(-1deg); }
    4%, 8% { transform: translateX(2px) rotate(1deg); }
    12% { transform: translateX(0) rotate(0); }
}
.animate-btn-vibrate {
    animation: button-vibrate 4s infinite;
}

@keyframes wave-slide {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-8%); }
}
.animate-wave {
    animation: wave-slide 7s ease-in-out infinite;
    width: 120% !important;
    max-width: none;
    margin-left: -10%;
}

@keyframes snowfall {
    0% { transform: translateY(-10px) translateX(0) scale(0.5); opacity: 0; }
    20% { opacity: 0.8; }
    100% { transform: translateY(80px) translateX(15px) scale(1); opacity: 0; }
}
.snowflake {
    position: absolute;
    top: -10px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    opacity: 0;
    animation: snowfall linear infinite;
    pointer-events: none;
}
.snowflake-blue {
    position: absolute;
    top: -10px;
    background: var(--primary-color);
    border-radius: 50%;
    opacity: 0;
    animation: snowfall linear infinite;
    pointer-events: none;
}
.sn-1 { left: 5%; width: 4px; height: 4px; animation-duration: 3s; animation-delay: 0s; }
.sn-2 { left: 15%; width: 3px; height: 3px; animation-duration: 4.2s; animation-delay: 1.5s; }
.sn-3 { left: 25%; width: 5px; height: 5px; animation-duration: 3.5s; animation-delay: 0.5s; }
.sn-4 { left: 35%; width: 3px; height: 3px; animation-duration: 5s; animation-delay: 2.5s; }
.sn-5 { left: 45%; width: 4px; height: 4px; animation-duration: 3.8s; animation-delay: 0.2s; }
.sn-6 { left: 55%; width: 6px; height: 6px; animation-duration: 4.5s; animation-delay: 1s; }
.sn-7 { left: 65%; width: 3px; height: 3px; animation-duration: 3.2s; animation-delay: 2s; }
.sn-8 { left: 75%; width: 5px; height: 5px; animation-duration: 4s; animation-delay: 0.8s; }
.sn-9 { left: 85%; width: 4px; height: 4px; animation-duration: 3.6s; animation-delay: 1.8s; }
.sn-10 { left: 95%; width: 3px; height: 3px; animation-duration: 4.8s; animation-delay: 0.3s; }

@keyframes drive-van {
    0% { transform: translateX(-50vw) scaleX(1); }
    49% { transform: translateX(50vw) scaleX(1); }
    50% { transform: translateX(50vw) scaleX(-1); }
    99% { transform: translateX(-50vw) scaleX(-1); }
    100% { transform: translateX(-50vw) scaleX(1); }
}
.animate-van {
    animation: drive-van 14s linear infinite;
    will-change: transform;
    display: inline-flex;
    align-items: center;
}
@keyframes counter-flip {
    0% { transform: scaleX(1); }
    49% { transform: scaleX(1); }
    50% { transform: scaleX(-1); }
    99% { transform: scaleX(-1); }
    100% { transform: scaleX(1); }
}
.van-text {
    animation: counter-flip 14s linear infinite;
    display: inline-block;
}

@keyframes emergency-alert {
    0%, 100% { background-color: rgba(37, 99, 235, 0.2); border-color: rgba(59, 130, 246, 0.3); color: #dbeafe; }
    50% { background-color: rgba(220, 38, 38, 0.8); border-color: rgba(239, 68, 68, 1); color: #ffffff; }
}
.animate-emergency {
    animation: emergency-alert 1.5s ease-in-out infinite;
}