/**
 * Wave Transition Animation
 * Used for AJAX content transitions
 */

/* Wave overlay container */
.wave-transition-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 1000;
}

/* Ocean container for waves */
.wave-ocean {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    overflow: hidden;
}

/* Solid water fill layer - covers 100% instantly, behind waves */
.water-fill-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, 
        #2E86AB 0%,      /* Deep ocean blue */
        #1A759F 25%,     /* Medium ocean blue */
        #0F5D7A 50%,     /* Deep teal */
        #0A4A5F 75%,     /* Dark teal */
        #063A4A 100%     /* Very dark teal */
    );
    z-index: 0;
    /* No transforms - instant coverage, always positioned at 0,0 */
    transform: none;
    /* Fast opacity transitions only */
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
    pointer-events: none;
}

/* Water layer visible states - appears instantly when overlay is created */
.wave-transition-overlay .water-fill-layer {
    opacity: 1;
}

/* Water layer fades out when exiting */
.wave-transition-overlay.exiting .water-fill-layer {
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
}

/* Base wave SVG styling - marine gradient */
.wave-svg {
    position: absolute;
    width: 200%;
    height: 100%;
    bottom: 0;
    left: 0;
    fill: url(#wave-gradient);
    opacity: 0.95;
    filter: drop-shadow(0 -2px 4px rgba(0, 0, 0, 0.2));
    /* Wave animation - horizontal movement (swell) */
    animation-name: wave-swell;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    z-index: 1; /* Above water fill layer */
}

/* Foam outline container - lightweight stroke-based foam */
.wave-svg.foam-outline-container {
    opacity: 1;
    fill: none;
    animation: wave-swell 2s linear infinite;
    z-index: 3; /* Above all wave layers */
    pointer-events: none;
}

/* Foam outline - thin stroke along wave crest */
.foam-outline {
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.85;
    /* Subtle glow for visibility */
    filter: drop-shadow(0 -1px 1px rgba(255, 255, 255, 0.5));
}

/* Foam bubbles - small subtle details along crest */
.foam-bubbles {
    opacity: 1;
}

.foam-bubble {
    fill: #FFFFFF;
    opacity: 0.6;
    /* Very subtle glow */
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.8));
}

/* Secondary wave layer for depth */
.wave-svg.secondary {
    opacity: 0.65;
    fill: url(#wave-gradient-secondary);
    filter: drop-shadow(0 -3px 8px rgba(0, 0, 0, 0.2));
    animation-duration: 2.2s;
    animation-delay: -0.5s;
    transform: translateY(8px);
    z-index: 1; /* Above water fill, same as main wave */
}

/* Wave animation - horizontal movement (swell) */
@keyframes wave-swell {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0%);
    }
}


/* Enter animation - waves rise from bottom (water layer NOT affected) */
@keyframes wave-enter {
    0% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(0);
    }
}

.wave-transition-overlay.entering .wave-ocean {
    animation: wave-enter 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Water layer is NOT affected by wave-ocean animation - stays fixed */
.wave-transition-overlay.entering .water-fill-layer {
    transform: none !important;
    animation: none !important;
}

/* Hold state - waves stay at top */
.wave-transition-overlay.holding .wave-ocean {
    transform: translateY(0);
}

/* Exit animation - waves fall from top (water layer NOT affected) */
@keyframes wave-exit {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(100%);
    }
}

.wave-transition-overlay.exiting .wave-ocean {
    animation: wave-exit 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Water layer stays fixed during exit, only opacity changes */
.wave-transition-overlay.exiting .water-fill-layer {
    transform: none !important;
    animation: none !important;
}

/* Ensure main-content is positioned relative for absolute overlay */
#main-content {
    position: relative;
}