/*
==============================================================================
LUVEX THEME v3.0 - UV-TUNNEL PAGE STYLES
==============================================================================
Description: UV-Tunnel spezifische Styles und Animationen
Dependencies: _variables.css, _core.css, _components.css
Last Update: 2025-08-22
==============================================================================
*/

/*
==============================================================================
1. UV-TUNNEL HERO LAYOUT FIXES
==============================================================================
*/

/* --- 1.1 UV Hero Background --- */
.luvex-hero--uv-tunnel {
    background: linear-gradient(135deg, var(--luvex-dark-blue) 0%, var(--luvex-dark-blue-light) 100%);
    min-height: 85vh;
}

/* --- 1.2 Force Button Position Fix --- */
.luvex-hero--uv-tunnel .luvex-hero__cta-container {
    order: 0;
    margin-top: 0;
    margin-bottom: 0;
}

/* --- 1.3 Ensure proper spacing after buttons (Increased Margin) --- */
.luvex-hero--uv-tunnel .luvex-hero__subtitle {
    margin-top: 2.5rem; /* Erhöht von 1.5rem für mehr "Luft" */
}

/*
==============================================================================
2. UV-TUNNEL HERO ANIMATIONS
==============================================================================
*/

/* --- 2.1 Conveyor Belt Animation Container --- */
.uv-conveyor-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* --- 2.2 Products on Conveyor Belt with UV Transformation --- */
.uv-product {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--luvex-vibrant-blue);
    border-radius: 50%;
    opacity: 0.8;
    animation: conveyorWithTransformation 8s linear infinite;
}

/* Different belt lanes */
.uv-product:nth-child(1) { top: 30%; animation-delay: 0s; }
.uv-product:nth-child(2) { top: 30%; animation-delay: -2s; }
.uv-product:nth-child(3) { top: 30%; animation-delay: -4s; }
.uv-product:nth-child(4) { top: 30%; animation-delay: -6s; }

.uv-product:nth-child(5) { top: 50%; animation-delay: -1s; animation-duration: 9s; }
.uv-product:nth-child(6) { top: 50%; animation-delay: -3s; animation-duration: 9s; }
.uv-product:nth-child(7) { top: 50%; animation-delay: -5s; animation-duration: 9s; }
.uv-product:nth-child(8) { top: 50%; animation-delay: -7s; animation-duration: 9s; }

.uv-product:nth-child(9) { top: 70%; animation-delay: -0.5s; animation-duration: 7s; }
.uv-product:nth-child(10) { top: 70%; animation-delay: -2.5s; animation-duration: 7s; }
.uv-product:nth-child(11) { top: 70%; animation-delay: -4.5s; animation-duration: 7s; }
.uv-product:nth-child(12) { top: 70%; animation-delay: -6.5s; animation-duration: 7s; }

@keyframes conveyorWithTransformation {
    0% { 
        left: -10px; 
        opacity: 0;
        transform: scale(0.8);
        background: var(--luvex-vibrant-blue);
        border-radius: 50%;
        box-shadow: none;
    }
    5% { 
        opacity: 0.8;
        transform: scale(1);
    }
    /* Before UV Zone */
    40% { 
        background: var(--luvex-vibrant-blue);
        border-radius: 50%;
        box-shadow: none;
    }
    /* In UV Zone - Transformation */
    50% { 
        background: var(--luvex-bright-cyan);
        border-radius: 1px;
        box-shadow: 
            inset 1px 1px 0 rgba(255,255,255,0.3),
            inset -1px -1px 0 rgba(0,0,0,0.2);
        transform: scale(1.1);
    }
    /* After UV Zone - Grid Structure */
    60% { 
        background: var(--luvex-bright-cyan);
        border-radius: 1px;
        box-shadow: 
            inset 1px 1px 0 rgba(255,255,255,0.3),
            inset -1px -1px 0 rgba(0,0,0,0.2);
        transform: scale(1);
    }
    95% { 
        background: var(--luvex-bright-cyan);
        border-radius: 1px;
        box-shadow: 
            inset 1px 1px 0 rgba(255,255,255,0.3),
            inset -1px -1px 0 rgba(0,0,0,0.2);
        opacity: 0.8;
        transform: scale(1);
    }
    100% { 
        left: calc(100% + 10px); 
        opacity: 0;
        transform: scale(0.8);
    }
}

/* --- 2.3 UV Treatment Zone --- */
.uv-treatment-zone {
    position: absolute;
    top: 0;
    left: 40%;
    width: 20%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(34, 211, 238, 0.1) 20%, 
        rgba(34, 211, 238, 0.3) 50%, 
        rgba(34, 211, 238, 0.1) 80%, 
        transparent 100%);
    animation: uvIntensity 3s ease-in-out infinite;
    border-left: 1px solid rgba(34, 211, 238, 0.2);
    border-right: 1px solid rgba(34, 211, 238, 0.2);
}

@keyframes uvIntensity {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

/* --- 2.4 Professional Grid Pattern --- */
.uv-grid-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    opacity: 0.03;
    background-image: 
        linear-gradient(var(--luvex-bright-cyan) 1px, transparent 1px),
        linear-gradient(90deg, var(--luvex-bright-cyan) 1px, transparent 1px);
    background-size: 50px 50px;
}

/* --- 2.5 UV Highlight Effect --- */
.uv-highlight {
    color: var(--luvex-bright-cyan);
    position: relative;
}

.uv-highlight::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--luvex-special-cyan) 50%, transparent 100%);
    animation: uvGlow 3s ease-in-out infinite;
}

@keyframes uvGlow {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.8; }
}

/* --- 2.6 Features Preview --- */
.uv-features-preview {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 3rem;
    z-index: 10;
}

.uv-feature-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--luvex-gray-300);
    opacity: 0.8;
}

.uv-feature-icon {
    color: var(--luvex-bright-cyan);
    font-size: 1rem;
}

/*
==============================================================================
3. RESPONSIVE ADJUSTMENTS
==============================================================================
*/

@media (max-width: 768px) {
    .luvex-hero--uv-tunnel {
        padding: 4rem 1rem;
        min-height: 70vh;
    }
    
    .uv-features-preview {
        flex-direction: column;
        gap: 1rem;
        bottom: 20px;
    }
    
    .uv-treatment-zone {
        left: 35%;
        width: 30%;
    }
}

@media (max-width: 480px) {
    .uv-features-preview {
        gap: 0.8rem;
    }
    
    .uv-feature-item {
        font-size: 0.8rem;
    }
}