/* 
 * Oud en Nieuw Thema - Jansen Transport Portaal
 * Feestelijk thema met vuurwerk en champagne sfeer
 */

:root {
    --theme-gold: #ffd700;
    --theme-silver: #c0c0c0;
    --theme-midnight: #191970;
    --theme-purple: #9b59b6;
    --theme-sparkle: #fff9c4;
}

/* Vuurwerk animatie container */
.theme-newyear-fireworks {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

/* Individuele vuurwerk explosies */
.theme-newyear-fireworks .firework {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    animation: firework-explosion 3s ease-out infinite;
}

.theme-newyear-fireworks .firework::before,
.theme-newyear-fireworks .firework::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: inherit;
}

@keyframes firework-explosion {
    0% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 
            0 0 0 0 var(--theme-gold),
            0 -30px 0 0 var(--theme-gold),
            21px -21px 0 0 var(--theme-purple),
            30px 0 0 0 var(--theme-gold),
            21px 21px 0 0 var(--theme-silver),
            0 30px 0 0 var(--theme-gold),
            -21px 21px 0 0 var(--theme-purple),
            -30px 0 0 0 var(--theme-gold),
            -21px -21px 0 0 var(--theme-silver);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
        box-shadow: 
            0 0 0 0 transparent,
            0 -50px 0 0 var(--theme-gold),
            35px -35px 0 0 var(--theme-purple),
            50px 0 0 0 var(--theme-gold),
            35px 35px 0 0 var(--theme-silver),
            0 50px 0 0 var(--theme-gold),
            -35px 35px 0 0 var(--theme-purple),
            -50px 0 0 0 var(--theme-gold),
            -35px -35px 0 0 var(--theme-silver);
    }
    100% {
        opacity: 0;
        transform: scale(1.5);
        box-shadow: 
            0 0 0 0 transparent,
            0 -80px 0 -4px transparent,
            56px -56px 0 -4px transparent,
            80px 0 0 -4px transparent,
            56px 56px 0 -4px transparent,
            0 80px 0 -4px transparent,
            -56px 56px 0 -4px transparent,
            -80px 0 0 -4px transparent,
            -56px -56px 0 -4px transparent;
    }
}

/* Verschillende vuurwerk posities */
.theme-newyear-fireworks .firework:nth-child(1) { top: 20%; left: 20%; animation-delay: 0s; background: var(--theme-gold); }
.theme-newyear-fireworks .firework:nth-child(2) { top: 30%; left: 70%; animation-delay: 0.8s; background: var(--theme-purple); }
.theme-newyear-fireworks .firework:nth-child(3) { top: 15%; left: 50%; animation-delay: 1.6s; background: var(--theme-silver); }
.theme-newyear-fireworks .firework:nth-child(4) { top: 25%; left: 85%; animation-delay: 2.4s; background: var(--theme-gold); }
.theme-newyear-fireworks .firework:nth-child(5) { top: 35%; left: 35%; animation-delay: 1.2s; background: var(--theme-purple); }

/* Sterretjes / sparkles */
.theme-newyear-sparkles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9998;
}

.theme-newyear-sparkles .sparkle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--theme-sparkle);
    border-radius: 50%;
    animation: sparkle 2s ease-in-out infinite;
}

@keyframes sparkle {
    0%, 100% { opacity: 0; transform: scale(0); }
    50% { opacity: 1; transform: scale(1); }
}

.theme-newyear-sparkles .sparkle:nth-child(1) { top: 10%; left: 10%; animation-delay: 0s; }
.theme-newyear-sparkles .sparkle:nth-child(2) { top: 20%; left: 30%; animation-delay: 0.3s; }
.theme-newyear-sparkles .sparkle:nth-child(3) { top: 15%; left: 60%; animation-delay: 0.6s; }
.theme-newyear-sparkles .sparkle:nth-child(4) { top: 25%; left: 80%; animation-delay: 0.9s; }
.theme-newyear-sparkles .sparkle:nth-child(5) { top: 30%; left: 45%; animation-delay: 1.2s; }
.theme-newyear-sparkles .sparkle:nth-child(6) { top: 8%; left: 90%; animation-delay: 1.5s; }
.theme-newyear-sparkles .sparkle:nth-child(7) { top: 35%; left: 15%; animation-delay: 1.8s; }
.theme-newyear-sparkles .sparkle:nth-child(8) { top: 12%; left: 75%; animation-delay: 0.4s; }

/* Nieuwjaars banner */
.theme-newyear-banner {
    background: linear-gradient(135deg, var(--theme-midnight) 0%, #0a0a2e 100%);
    color: white;
    text-align: center;
    padding: 10px 16px;
    font-size: 14px;
    position: relative;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

.theme-newyear-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 215, 0, 0.1) 50%, 
        transparent 100%
    );
    animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.theme-newyear-banner span {
    position: relative;
    z-index: 1;
}

/* Champagne bubbels effect */
.theme-newyear-bubbles {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9997;
    overflow: hidden;
}

.theme-newyear-bubbles .bubble {
    position: absolute;
    bottom: -20px;
    width: 10px;
    height: 10px;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8), rgba(255, 215, 0, 0.3));
    border-radius: 50%;
    animation: bubble-rise 8s ease-in infinite;
    opacity: 0.6;
}

@keyframes bubble-rise {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0.6;
    }
    50% {
        opacity: 0.4;
    }
    100% {
        transform: translateY(-100vh) scale(0.5);
        opacity: 0;
    }
}

.theme-newyear-bubbles .bubble:nth-child(1) { left: 5%; animation-delay: 0s; width: 8px; height: 8px; }
.theme-newyear-bubbles .bubble:nth-child(2) { left: 15%; animation-delay: 1s; width: 12px; height: 12px; }
.theme-newyear-bubbles .bubble:nth-child(3) { left: 25%; animation-delay: 2s; width: 6px; height: 6px; }
.theme-newyear-bubbles .bubble:nth-child(4) { left: 35%; animation-delay: 3s; width: 10px; height: 10px; }
.theme-newyear-bubbles .bubble:nth-child(5) { left: 45%; animation-delay: 1.5s; width: 7px; height: 7px; }
.theme-newyear-bubbles .bubble:nth-child(6) { left: 55%; animation-delay: 2.5s; width: 9px; height: 9px; }
.theme-newyear-bubbles .bubble:nth-child(7) { left: 65%; animation-delay: 0.5s; width: 11px; height: 11px; }
.theme-newyear-bubbles .bubble:nth-child(8) { left: 75%; animation-delay: 3.5s; width: 8px; height: 8px; }
.theme-newyear-bubbles .bubble:nth-child(9) { left: 85%; animation-delay: 4s; width: 6px; height: 6px; }
.theme-newyear-bubbles .bubble:nth-child(10) { left: 95%; animation-delay: 2s; width: 10px; height: 10px; }

/* Gouden accenten */
.theme-newyear .text-blue-600 {
    color: var(--theme-gold) !important;
}

.theme-newyear .bg-blue-600 {
    background: linear-gradient(135deg, var(--theme-gold) 0%, #b8860b 100%) !important;
    color: #1a1a2e !important;
}

.theme-newyear .bg-blue-600:hover {
    background: linear-gradient(135deg, #e6c200 0%, var(--theme-gold) 100%) !important;
}

/* Countdown styling (als je die toevoegt) */
.theme-newyear-countdown {
    font-family: 'Courier New', monospace;
    font-size: 2rem;
    font-weight: bold;
    color: var(--theme-gold);
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

/* Footer decoratie */
.theme-newyear-footer {
    position: relative;
}

.theme-newyear-footer::before {
    content: '🥂 Gelukkig Nieuwjaar! 🎆';
    display: block;
    text-align: center;
    padding: 8px;
    background: linear-gradient(135deg, var(--theme-midnight) 0%, #2c2c54 100%);
    color: var(--theme-gold);
    font-size: 12px;
}

/* Gouden rand op cards - alleen op specifieke card elementen, niet op layout elementen */
.theme-newyear main .bg-white {
    position: relative;
    border: 1px solid rgba(255, 215, 0, 0.2) !important;
}

.theme-newyear main .bg-white::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--theme-gold), transparent);
}

/* Animaties uitgeschakeld via toggle */
body.theme-animations-off .theme-newyear-fireworks,
body.theme-animations-off .theme-newyear-sparkles,
body.theme-animations-off .theme-newyear-bubbles {
    display: none !important;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .theme-newyear-fireworks .firework,
    .theme-newyear-sparkles .sparkle,
    .theme-newyear-bubbles .bubble {
        animation: none;
        opacity: 0.2;
    }
    
    .theme-newyear-banner::before {
        animation: none;
    }
}

/* Mobile optimalisatie */
@media (max-width: 768px) {
    .theme-newyear-fireworks .firework {
        transform: scale(0.6);
    }
    
    .theme-newyear-bubbles .bubble {
        width: 6px !important;
        height: 6px !important;
    }
    
    .theme-newyear-banner {
        padding: 8px 12px;
        font-size: 12px;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .theme-newyear-banner {
        padding: 6px 10px;
        font-size: 11px;
    }
}

/* Fix voor mobiele layout - voorkom dat thema elementen de layout beïnvloeden */
body.theme-newyear {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}