/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    color: white;
    background: #000;
}

/* Wavy Animated Background */
body {
    background: 
        radial-gradient(ellipse 150% 100% at 50% 0%, #001f3f 0%, transparent 50%),
        radial-gradient(ellipse 150% 100% at 0% 100%, #0074D9 0%, transparent 50%),
        radial-gradient(ellipse 150% 100% at 100% 100%, #7FDBFF 0%, transparent 50%),
        linear-gradient(135deg, #001f3f 0%, #0074D9 50%, #7FDBFF 100%);
    background-size: 300% 300%, 200% 200%, 250% 250%, 100% 100%;
    background-position: 0% 0%, 100% 100%, 0% 100%, 0% 0%;
    animation: wavyFlow 30s ease-in-out infinite;
}

@keyframes wavyFlow {
    0%   { background-position: 0% 0%, 100% 100%, 0% 100%, 0% 0%; }
    25%  { background-position: 50% 30%, 80% 70%, 30% 80%, 10% 20%; }
    50%  { background-position: 100% 50%, 50% 30%, 70% 50%, 20% 40%; }
    75%  { background-position: 70% 80%, 20% 10%, 90% 20%, 30% 60%; }
    100% { background-position: 0% 0%, 100% 100%, 0% 100%, 0% 0%; }
}

/* Cinematic Overlays */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, transparent 30%, rgba(0, 0, 0, 0.4) 100%);
    pointer-events: none;
    z-index: 1;
}

body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 120%;
    height: 120%;
    background: 
        radial-gradient(ellipse 80% 50% at 20% 30%, rgba(127, 219, 255, 0.15) 0%, transparent 70%),
        radial-gradient(ellipse 60% 80% at 80% 70%, rgba(0, 116, 217, 0.1) 0%, transparent 60%),
        radial-gradient(ellipse 100% 40% at 50% 90%, rgba(0, 31, 63, 0.2) 0%, transparent 80%);
    background-size: 400% 300%, 350% 400%, 300% 200%;
    animation: wavyDistortion 45s ease-in-out infinite;
    opacity: 0.25;
    pointer-events: none;
    z-index: 2;
    transform: translate(-10%, -10%);
}

@keyframes wavyDistortion {
    0%   { background-position: 0% 0%, 100% 100%, 50% 0%; transform: translate(-10%, -10%) rotate(0deg); }
    33%  { background-position: 100% 50%, 0% 50%, 100% 50%; transform: translate(-5%, -15%) rotate(1deg); }
    66%  { background-position: 50% 100%, 50% 0%, 0% 100%; transform: translate(-15%, -5%) rotate(-1deg); }
    100% { background-position: 0% 0%, 100% 100%, 50% 0%; transform: translate(-10%, -10%) rotate(0deg); }
}

/* Black Transition Overlay */
#transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0;
    pointer-events: none;
    z-index: 10;
    transition: opacity 5s ease-in-out;
}

#transition-overlay.active {
    opacity: 1;
}

/* WebGL Canvas (hidden) */
#main-canvas {
    display: none;
}

/* Center Text & Ball Styling */
/* Center Text & Ball Styling */
.center-text {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 15;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Merriweather", serif;
    font-size: 8vw;
    font-weight: 700;
    text-transform: uppercase;
    color: white;
    letter-spacing: 0.2em;
    /* The default state is now a subtle, continuous animation */
    animation: subtlePulse 20s ease-in-out infinite;
}

.logo-word {
    display: inline-block;
}

.ball-asset {
    height: 0.8em;
    width: 0.8em;
    margin: 0 0.2em;
    vertical-align: middle;
    pointer-events: all;
    cursor: pointer;
    transition: opacity 1s ease-in-out, transform 5s ease-in-out;
}

/* When in intense-mode, we switch to the more powerful animation */
.center-text.intense-mode {
    animation: intensePulse 8s ease-in-out infinite;
}

/* Keyframe for the default, subtle glow. This runs all the time. */
@keyframes subtlePulse {
    0%, 100% {
        text-shadow: 0 0 25px rgba(255, 255, 255, 0.7);
        transform: translate(-50%, -50%) scale(1.0);
    }
    50% {
        text-shadow: 0 0 35px rgba(255, 255, 255, 0.85);
        transform: translate(-50%, -50%) scale(1.005);
    }
}

/* Keyframe for the intense glow during the transition. */
@keyframes intensePulse {
    0%, 100% {
        text-shadow: 
            0 0 30px rgba(255, 255, 255, 0.9),
            0 0 60px rgba(255, 255, 255, 0.7);
        transform: translate(-50%, -50%) scale(1.01);
    }
    50% {
        text-shadow: 
            0 0 50px rgba(255, 255, 255, 1.0),
            0 0 100px rgba(255, 255, 255, 0.9);
        transform: translate(-50%, -50%) scale(1.025);
    }
}


/* Hidden Audio Elements */
audio {
    position: absolute;
    top: -9999px;
    left: -9999px;
}

/* NoScript Fallback */
.noscript-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
}
.fallback-image {
    max-width: 20vw;
    margin-bottom: 1.5rem;
}
.fallback-text {
    font-size: 6vw;
    letter-spacing: 0.15em;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
    body { background: #001f3f; }
    body::before, body::after { display: none; }
}
@media (prefers-contrast: high) {
    body { background: #000; }
    .fallback-text {
        color: #fff;
        text-shadow: 2px 2px 4px #000;
    }
    .fallback-image {
        filter: contrast(1.5) brightness(1.2);
    }
}