/* ---------------------------------------------------------
   2. WAVE SVG LAYER (fixed to viewport bottom)
   --------------------------------------------------------- */
.hidden {
    display: none;
}

.ocean {
    display: block !important;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    opacity: .7;
    pointer-events: none; /* ensures all content stays clickable */
    z-index: 1;
}

.waves {
    position: relative;
    width: 100%;
    height: 15vh;
    margin-bottom: -7px;
    min-height: 100px;
    max-height: 150px;
}

/* Parallax wave animation */
.parallax > use {
    animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
}

.parallax > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; }
.parallax > use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; }
.parallax > use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; }
.parallax > use:nth-child(4) { animation-delay: -5s; animation-duration: 20s; }

@keyframes move-forever {
  0%   { transform: translate3d(-90px, 0, 0); }
  100% { transform: translate3d(85px, 0, 0); }
}


/* ---------------------------------------------------------
   3. CONTENT LAYER (your form, links, etc.)
   --------------------------------------------------------- */
/*
.whole {
    position: relative;
    z-index: auto;
    padding: var(--space-sm);

    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='92' viewBox='0 0 112 92'%3E%3Cg fill='%23248e35' fill-opacity='0.05'%3E%3Cpath fill-rule='evenodd' d='M72 10H40L16 20H0v8h16l24-14h32l24 14h16v-8H96L72 10zm0-8H40L16 4H0v8h16l24-6h32l24 6h16V4H96L72 2zm0 84H40l-24-6H0v8h16l24 2h32l24-2h16v-8H96l-24 6zm0-8H40L16 64H0v8h16l24 10h32l24-10h16v-8H96L72 78zm0-12H40L16 56H0v4h16l24 14h32l24-14h16v-4H96L72 66zm0-16H40l-24-2H0v4h16l24 6h32l24-6h16v-4H96l-24 2zm0-16H40l-24 6H0v4h16l24-2h32l24 2h16v-4H96l-24-6zm0-16H40L16 32H0v4h16l24-10h32l24 10h16v-4H96L72 18z'/%3E%3C/g%3E%3C/svg%3E"),
                linear-gradient(
                    to bottom,
                    rgba(255,255,255,0) 0%,
                    rgba(255,255,255,0) 10em,
                    var(--color-surface-soft) 10em,
                    var(--color-surface-soft) 100%
                );
}
*/

/* ---------------------------------------------------------
   4. OPTIONAL ANIMATED GRADIENT LAYER (between bg + waves)
   --------------------------------------------------------- */
.wave-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1; /* between background (-3) and waves (-2) */
    background-size: 400% 400%;
    animation: gradientWave 15s ease infinite;
}

/* Gradient animation */
@keyframes gradientWave {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}