/* Vagues SVG pour les pages auth (login/register) */

/* --- Bottom-right waves --- */
.auth-waves {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.auth-waves svg {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 110%;
    min-width: 900px;
    height: auto;
}

/* --- Top-left waves --- */
.auth-waves-tl {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.auth-waves-tl svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 110%;
    min-width: 900px;
    height: auto;
    transform: rotate(180deg);
}

/* Animation des vagues bottom-right */
.auth-wave-path-1 {
    animation: auth-sway-1 7s ease-in-out infinite;
}
.auth-wave-path-2 {
    animation: auth-sway-2 9s ease-in-out infinite;
}
.auth-wave-path-3 {
    animation: auth-sway-3 11s ease-in-out infinite;
}

@keyframes auth-sway-1 {
    0%, 100% { d: path("M500,400 C570,340 700,300 800,270 L800,400 Z"); }
    50% { d: path("M480,400 C550,330 690,290 800,255 L800,400 Z"); }
}
@keyframes auth-sway-2 {
    0%, 100% { d: path("M350,400 C450,300 640,250 800,210 L800,400 Z"); }
    50% { d: path("M370,400 C470,310 650,260 800,220 L800,400 Z"); }
}
@keyframes auth-sway-3 {
    0%, 100% { d: path("M220,400 C350,270 580,200 800,160 L800,400 Z"); }
    50% { d: path("M240,400 C370,280 590,210 800,170 L800,400 Z"); }
}

/* Animation des vagues top-left */
.auth-wave-tl-1 {
    animation: auth-sway-tl-1 8s ease-in-out infinite;
}
.auth-wave-tl-2 {
    animation: auth-sway-tl-2 10s ease-in-out infinite;
}

@keyframes auth-sway-tl-1 {
    0%, 100% { d: path("M500,400 C570,340 700,300 800,270 L800,400 Z"); }
    50% { d: path("M480,400 C550,330 690,290 800,255 L800,400 Z"); }
}
@keyframes auth-sway-tl-2 {
    0%, 100% { d: path("M350,400 C450,300 640,250 800,210 L800,400 Z"); }
    50% { d: path("M370,400 C470,310 650,260 800,220 L800,400 Z"); }
}

/* Dark mode : couleurs plus visibles */
.dark .auth-wave-fill-1 { fill: rgba(108,92,231,0.16); }
.dark .auth-wave-fill-2 { fill: rgba(108,92,231,0.11); }
.dark .auth-wave-fill-3 { fill: rgba(108,92,231,0.07); }
.dark .auth-wave-tl-fill-1 { fill: rgba(108,92,231,0.10); }
.dark .auth-wave-tl-fill-2 { fill: rgba(108,92,231,0.06); }