/* Wave Background Styles */
.wave-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    overflow: hidden;
    background-color: #000000; /* Fallback if canvas fails to render */
}

.wave-background canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    filter: contrast(1.05) brightness(1.02);
    display: block !important;
}

/* Vignette effect to darken edges */
.wave-background::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.5) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Styling for sign-in page with wave background */
body.wave-page {
    background-color: #000000;
    margin: 0;
    padding: 0;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.9);
    height: 100vh;
    width: 100vw;
}

/* Add subtle scan line effect */
body.wave-page::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(
        to bottom,
        rgba(0, 10, 0, 0.03) 50%,
        rgba(0, 0, 0, 0.03) 50%
    );
    background-size: 100% 3px;
    pointer-events: none;
    z-index: 2;
    opacity: 0.3;
}

.wave-page .container {
    position: relative;
    z-index: 5; /* Higher than the wave background */
}

.wave-page .card {
    background-color: rgba(0, 10, 0, 0.75) !important;
    border: 1px solid rgba(0, 120, 0, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(5px);
}

.wave-page .card-header {
    background-color: rgba(0, 20, 0, 0.8) !important;
    border-bottom: 1px solid rgba(0, 100, 0, 0.3);
}

.wave-page .btn-primary {
    background-color: #00aa00;
    border-color: #008800;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 0 8px rgba(0, 255, 0, 0.3);
    transition: all 0.2s ease;
}

.wave-page .btn-primary:hover {
    background-color: #009900;
    border-color: #007700;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), 0 0 12px rgba(0, 255, 0, 0.4);
}

.wave-page .btn-primary:active {
    transform: translateY(1px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 5px rgba(0, 255, 0, 0.3);
}

.wave-page .text-light-50 {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Glow effect for headings */
.wave-page h1, 
.wave-page h2,
.wave-page h3,
.wave-page h4,
.wave-page h5 {
    text-shadow: 0 0 8px rgba(0, 255, 0, 0.3);
}

/* Logo glow effect */
.wave-page img[alt="Introl Logo"] {
    filter: drop-shadow(0 0 5px rgba(0, 255, 0, 0.3));
}