/* =====================================
   SUMMER WAVES FOR PLATFORM PAGES
   ===================================== */

/* Platform Wave Container */
.platform-waves {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 200px; /* Höher für bessere Sichtbarkeit */
    pointer-events: none;
    z-index: 1; /* Reduziert von 15 auf 1 - bleibt im Hintergrund */
    overflow: hidden;
    opacity: 0.7; /* Reduziert von 0.9 auf 0.7 für subtileren Effekt */
}

/* Wave Layers */
.platform-wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background-repeat: repeat-x;
    background-size: 1000px 100px;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

/* Wave 1 - Front layer */
.platform-wave-1 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100'%3E%3Cpath d='M0,50 Q250,10 500,50 T1000,50 L1000,100 L0,100 Z' fill='%233b82f6b0'/%3E%3C/svg%3E");
    animation: wave-motion 15s linear infinite;
    z-index: 3;
}

/* Wave 2 - Middle layer */
.platform-wave-2 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100'%3E%3Cpath d='M0,40 Q300,20 600,40 T1200,40 L1200,100 L0,100 Z' fill='%231e40af80'/%3E%3C/svg%3E");
    animation: wave-motion 20s linear infinite reverse;
    z-index: 2;
}

/* Wave 3 - Back layer */
.platform-wave-3 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100'%3E%3Cpath d='M0,60 Q400,30 800,60 T1600,60 L1600,100 L0,100 Z' fill='%230f2057c0'/%3E%3C/svg%3E");
    animation: wave-motion 25s linear infinite;
    z-index: 1;
}

/* Wave Animation */
@keyframes wave-motion {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Wave Particles */
.platform-wave-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 4;
}

.wave-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(139, 92, 246, 0.4) 100%);
    border-radius: 50%;
    animation: particle-float 8s ease-in-out infinite;
}

.wave-particle:nth-child(1) {
    left: 10%;
    animation-delay: 0s;
    animation-duration: 6s;
}

.wave-particle:nth-child(2) {
    left: 30%;
    animation-delay: 1s;
    animation-duration: 8s;
}

.wave-particle:nth-child(3) {
    left: 50%;
    animation-delay: 2s;
    animation-duration: 7s;
}

.wave-particle:nth-child(4) {
    left: 70%;
    animation-delay: 3s;
    animation-duration: 9s;
}

.wave-particle:nth-child(5) {
    left: 90%;
    animation-delay: 4s;
    animation-duration: 6s;
}

@keyframes particle-float {
    0%, 100% {
        transform: translateY(100px) scale(0);
        opacity: 0;
    }
    50% {
        transform: translateY(20px) scale(1);
        opacity: 1;
    }
}

/* Platform-specific wave colors */
.pc-waves .wave-layer.wave-1 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100'%3E%3Cpath d='M0,50 Q250,10 500,50 T1000,50 L1000,100 L0,100 Z' fill='%236d28d980'/%3E%3C/svg%3E");
}

.xbox-waves .wave-layer.wave-1 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100'%3E%3Cpath d='M0,50 Q250,10 500,50 T1000,50 L1000,100 L0,100 Z' fill='%2310b98180'/%3E%3C/svg%3E");
}

.ps-waves .wave-layer.wave-1 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100'%3E%3Cpath d='M0,50 Q250,10 500,50 T1000,50 L1000,100 L0,100 Z' fill='%233b82f680'/%3E%3C/svg%3E");
}

.switch-waves .wave-layer.wave-1 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100'%3E%3Cpath d='M0,50 Q250,10 500,50 T1000,50 L1000,100 L0,100 Z' fill='%23ef444480'/%3E%3C/svg%3E");
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .platform-waves {
        height: 100px;
    }
    
    .wave-layer {
        background-size: 800px 80px;
    }
    
    .wave-particle {
        width: 3px;
        height: 3px;
    }
}

@media (max-width: 480px) {
    .platform-waves {
        height: 80px;
    }
    
    .wave-layer {
        background-size: 600px 60px;
    }
}