/*
 * NetBox Logistics Premium CSS Animations
 */

/* Keyframe Animations */

/* Scroll reveal initial states */
.reveal {
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-up {
    transform: translateY(40px);
}

.reveal-down {
    transform: translateY(-40px);
}

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

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

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

/* Active visible states triggered by JS */
.reveal.visible {
    opacity: 1;
    transform: translate(0) scale(1);
}

/* Staggered delay helpers */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }
.delay-600 { transition-delay: 600ms; }

/* Infinite scrolling partners marquee slider */
@keyframes scrollMarquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.marquee-track {
    animation: scrollMarquee 25s linear infinite;
}

.marquee-wrapper:hover .marquee-track {
    animation-play-state: paused;
}

/* Moving Road Lines Loop */
@keyframes moveRoadLine {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -80px 0;
    }
}

.road-line {
    animation: moveRoadLine 0.5s linear infinite;
}

/* Vehicle horizontal loop animation */
@keyframes moveVehicle {
    0% {
        transform: translate(-180px, -50%);
    }
    100% {
        transform: translate(100vw, -50%);
    }
}

/* Vehicle vertical bounce (vibration) animation */
@keyframes vehicleBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

/* Base style for vehicles with headlight & taillight glow */
.moving-vehicle {
    animation: moveVehicle 14s linear infinite;
}

/* Apply vibration bounce to the vehicle SVG itself */
.moving-vehicle svg {
    animation: vehicleBounce 0.35s ease-in-out infinite;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.4));
}

/* Headlight beam glow pointing forward (right) */
.moving-vehicle::after {
    content: '';
    position: absolute;
    right: -80px;
    top: 12px;
    width: 80px;
    height: 22px;
    background: linear-gradient(90deg, rgba(254, 240, 138, 0.4) 0%, rgba(254, 240, 138, 0) 100%);
    clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 70%);
    pointer-events: none;
    z-index: -1;
    filter: blur(1px);
}

/* Rear red taillight glow */
.moving-vehicle::before {
    content: '';
    position: absolute;
    left: -5px;
    top: 20px;
    width: 6px;
    height: 6px;
    background-color: #ef4444;
    border-radius: 50%;
    box-shadow: 
        0 0 8px #ef4444, 
        0 0 15px #ef4444;
    z-index: 2;
}

/* Adjust headlight height for each vehicle type */
.moving-vehicle.v-scooter::after { top: 9px; }
.moving-vehicle.v-van::after { top: 22px; }
.moving-vehicle.v-frigofrik::after { top: 25px; }

/* Adjust taillight height for specific vehicle types to match SVG coordinates */
.moving-vehicle.v-van::before { top: 15px; }
.moving-vehicle.v-frigofrik::before { top: 22px; }

/* Staggered loop times for each vehicle element */
.moving-vehicle.v-scooter {
    animation-duration: 12s;
    animation-delay: 0s;
}

.moving-vehicle.v-van {
    animation-duration: 16s;
    animation-delay: 4s;
}

.moving-vehicle.v-frigofrik {
    animation-duration: 18s;
    animation-delay: 9s;
}

.moving-vehicle.v-truck {
    animation-duration: 22s;
    animation-delay: 14s;
}

/* Pulse effects for glow animations */
@keyframes ambientPulse {
    0%, 100% {
        opacity: 0.8;
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

.hero-image-wrap::before {
    content: '';
    position: absolute;
    width: 110%;
    height: 110%;
    background: radial-gradient(circle, rgba(255, 94, 0, 0.12) 0%, transparent 60%);
    z-index: -1;
    animation: ambientPulse 8s ease-in-out infinite;
}

/* Micro-animations */
.hover-float {
    transition: var(--transition-smooth);
}

.hover-float:hover {
    transform: translateY(-5px);
}