/* Wave header styles (decoupled from SCSS build)
   Uses CSS variables from :root defined in style_new.css when available. */

:root {
    --hero-text: #ffffff;
    --hero-min-height: 30vh;
    --wave-duration-1: 18s;
    /* slower layer */
    --wave-duration-2: 12s;
    /* faster layer */
    --wave-duration-3: 26s;
    /* farthest, slow drift */

    --wave-color-1: white;


}

.hero-header {
    position: relative;
    overflow: hidden;
    padding: 40px 20px;
}

/* Mask tiny seam at extreme left/right so items behind never peek */
.hero-header::before,
.hero-header::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 8px; /* small mask strip */
    height: 20vh; /* match wave height */
    background: var(--wave-color-1);
    z-index: 6; /* above wave (z=5), still below content if needed */
    pointer-events: none;
}
.hero-header::before { left: 0; }
.hero-header::after { right: 0; }


/* Wave container pinned to bottom */
.hero-header .wave {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    /* hide pixel seam but keep curved edge visible */
    height: 20vh;
    /* a bit taller to avoid gaps on wobble */
    pointer-events: none;
    /* no background here; let the path define the curve */
    z-index: 5;
}

.wave-svg {
    display: block;
    width: 200%;
    /* allows horizontal shift for animation */
    height: 100%;
    transform: translateZ(0);
    /* promote to its own layer */
}

/* Ensure the body background blends under the wave */
.wave-path {
    /* Prefer explicit wave color variables; fallback to navbar bg */
    fill: var(--wave-color-1);
    opacity: 1 !important;
    fill-opacity: 1 !important;
}

/* GPU-friendly animation on X axis only for smoothness */
@keyframes wave-drift-1 {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-1200px, 0, 0);
    }
}

@keyframes wave-drift-2 {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-1200px, 0, 0);
    }
}

/* New: rightward drift (from -1200px to 0 to avoid gaps) */
@keyframes wave-drift-right {
    0% {
        transform: translate3d(-1200px, 0, 0);
    }

    100% {
        transform: translate3d(0, 0, 0);
    }
}

.wave-group-1 {
    will-change: transform;
    animation: wave-drift-right var(--wave-duration-1) linear infinite;
}

.wave-group-2 {
    will-change: transform;
    animation: wave-drift-2 var(--wave-duration-2) linear infinite;
}

.wave-group-3 {
    will-change: transform;
    animation: wave-drift-1 var(--wave-duration-3) linear infinite;
}

/* Show only one wave layer */
.wave-group-2,
.wave-group-3 {
    display: none !important;
}

/* Optional tint for subtle depth effect */
.wave-group-1 .wave-path {
    fill: var(--wave-color-1);
    opacity: 1 !important;
    fill-opacity: 1 !important;
}

.wave-group-2 .wave-path {
    fill: var(--wave-color-2);
    opacity: 1 !important;
    fill-opacity: 1 !important;
}

.wave-group-3 .wave-path {
    fill: var(--wave-color-3);
    opacity: 1 !important;
    fill-opacity: 1 !important;
}

/* Bouncing coin animation */
.bouncing-coin {
    position: absolute;
    width: 40px;
    height: 40px;
    background: #FB855A;
    border-radius: 50%;
    bottom: 10%;
    left: 0%;
    /* shift coin a bit to the right so it never sits exactly at the seam */
    margin-left: 5px;
    z-index: 1;
    animation: coinBounce 3s ease-in-out infinite, coinMove var(--wave-duration-1) linear infinite;
    will-change: transform;
}

/* Coin bouncing vertically */
@keyframes coinBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* Coin moving horizontally with the wave */
@keyframes coinMove {
    0% { left: 0%; }
    100% { left: 100%; }
}

/* Responsive tweaks */
@media (max-width: 768px) {

    .bouncing-coin {
        width: 30px;
        height: 30px;
        bottom: 2%;
    }

    /* Wave container pinned to bottom */
    .hero-header .wave {
        height: 10vh;
    }

    /* match mask height on mobile */
    .hero-header::before,
    .hero-header::after {
        height: 10vh;
    }

}