/**
 * DRL HALO ANIMATION
 * Mazda Daytime Running Light Effect
 * 
 * Technical Implementation:
 * - Three-layer lighting system (outer glow, inner core, flicker layer)
 * - Precise positioning matching Mazda 3 4th gen headlight geometry
 * - Subtle pulsing animation (not aggressive strobing)
 * - Realistic light scatter using multiple blur layers
 * - CSS-only animation for performance
 * 
 * Design Rationale:
 * - DRLs are signature Mazda design element
 * - Creates "alive" feeling without being distracting
 * - White light with cool temperature (5000K-6000K simulation)
 * - Organic breathing pattern, not mechanical
 */

/* ============================================
   DRL CONTAINER - POSITIONING LAYER
   ============================================ */

.drl-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}

/* ============================================
   DRL UNITS - LEFT & RIGHT POSITIONING
   ============================================ */

.drl-unit {
    position: absolute;
    width: 140px;
    height: 40px;
    /* Precise positioning based on Mazda 3 4th gen headlight geometry */
    top: 38%;
    transform: translateY(-50%);
}

.drl-left {
    left: 16%;
    /* Slight inward angle matching vehicle design */
    transform: translateY(-50%) rotate(-1.5deg);
}

.drl-right {
    right: 16%;
    /* Mirror angle for right DRL */
    transform: translateY(-50%) rotate(1.5deg);
}

/* ============================================
   DRL OUTER GLOW - LIGHT SCATTER
   ============================================ */

.drl-outer-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200%;
    height: 350%;
    /* Multi-layer radial gradient for realistic light falloff */
    background: radial-gradient(
        ellipse at center,
        rgba(255, 255, 255, 0.4) 0%,
        rgba(240, 248, 255, 0.25) 20%,
        rgba(230, 240, 255, 0.15) 40%,
        rgba(220, 235, 255, 0.08) 60%,
        transparent 80%
    );
    filter: blur(24px);
    opacity: 0.9;
    animation: drl-pulse-glow 4s ease-in-out infinite;
}

/* ============================================
   DRL INNER CORE - LED STRIP
   ============================================ */

.drl-inner-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 12px;
    /* Linear gradient simulating LED strip */
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.6) 3%,
        rgba(255, 255, 255, 0.95) 10%,
        rgba(255, 255, 255, 1) 50%,
        rgba(255, 255, 255, 0.95) 90%,
        rgba(255, 255, 255, 0.6) 97%,
        transparent 100%
    );
    border-radius: 6px;
    /* Multiple box shadows for depth and glow */
    box-shadow:
        0 0 8px rgba(255, 255, 255, 0.8),
        0 0 16px rgba(255, 255, 255, 0.6),
        0 0 24px rgba(240, 248, 255, 0.4),
        inset 0 1px 2px rgba(255, 255, 255, 0.9);
}

/* ============================================
   DRL FLICKER LAYER - SUBTLE VARIATION
   ============================================ */

.drl-flicker-layer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 12px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.3) 50%,
        transparent 100%
    );
    border-radius: 6px;
    filter: blur(4px);
    animation: drl-flicker 3s ease-in-out infinite;
    animation-delay: 0.5s;
}

/* ============================================
   ANIMATIONS - ORGANIC BREATHING
   ============================================ */

/* 
 * Pulse Glow Animation
 * Simulates natural LED brightness variation
 * 4-second cycle matches human perception of "alive" movement
 */
@keyframes drl-pulse-glow {
    0%, 100% {
        opacity: 0.85;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.08);
    }
}

/* 
 * Flicker Animation
 * Subtle brightness variation simulating electrical current
 * Offset from pulse for natural, non-mechanical feel
 */
@keyframes drl-flicker {
    0%, 100% {
        opacity: 0.6;
    }
    20% {
        opacity: 0.75;
    }
    40% {
        opacity: 0.65;
    }
    60% {
        opacity: 0.8;
    }
    80% {
        opacity: 0.7;
    }
}

/* 
 * Startup Animation
 * Simulates DRL power-on sequence
 * Applied on page load only
 */
@keyframes drl-startup {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Apply startup animation to outer glow */
.drl-outer-glow {
    animation: 
        drl-startup 1.2s ease-out,
        drl-pulse-glow 4s ease-in-out 1.2s infinite;
}

/* ============================================
   HOVER INTERACTION - SURGE EFFECT
   ============================================ */

/*
 * When user hovers over vehicle showcase, DRLs brighten
 * Simulates high-beam flash or attention-grabbing pulse
 */
.vehicle-showcase:hover .drl-outer-glow {
    animation: drl-surge 0.6s ease-out;
}

.vehicle-showcase:hover .drl-inner-core {
    box-shadow:
        0 0 12px rgba(255, 255, 255, 1),
        0 0 24px rgba(255, 255, 255, 0.8),
        0 0 36px rgba(240, 248, 255, 0.6),
        inset 0 1px 2px rgba(255, 255, 255, 1);
}

@keyframes drl-surge {
    0% {
        opacity: 0.9;
        filter: blur(24px) brightness(1);
    }
    50% {
        opacity: 1;
        filter: blur(28px) brightness(1.4);
    }
    100% {
        opacity: 0.9;
        filter: blur(24px) brightness(1);
    }
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

/* Tablet: Adjust DRL size and position */
@media (max-width: 991px) {
    .drl-unit {
        width: 120px;
        height: 35px;
    }
    
    .drl-left {
        left: 14%;
    }
    
    .drl-right {
        right: 14%;
    }
}

/* Mobile: Reduce DRL prominence */
@media (max-width: 767px) {
    .drl-unit {
        width: 90px;
        height: 28px;
    }
    
    .drl-left {
        left: 12%;
    }
    
    .drl-right {
        right: 12%;
    }
    
    .drl-inner-core {
        height: 10px;
    }
    
    /* Reduce glow intensity on mobile for performance */
    .drl-outer-glow {
        filter: blur(16px);
        opacity: 0.7;
    }
}

/* ============================================
   ACCESSIBILITY & PERFORMANCE
   ============================================ */

/*
 * Respect user's motion preferences
 * Disable animations for users who prefer reduced motion
 */
@media (prefers-reduced-motion: reduce) {
    .drl-outer-glow,
    .drl-flicker-layer {
        animation: none;
    }
    
    .drl-outer-glow {
        opacity: 0.9;
    }
    
    .drl-flicker-layer {
        opacity: 0.7;
    }
}

/*
 * GPU Acceleration Hints
 * Force GPU rendering for smooth animation
 */
.drl-outer-glow,
.drl-inner-core,
.drl-flicker-layer {
    will-change: transform, opacity;
    transform: translate3d(0, 0, 0);
}