/* Going under (plunge.js): bubbles rising, faded over .plunge's top 160px, and the edge wobble. */
.plunge {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200vh;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 160px);
    mask-image: linear-gradient(to bottom, transparent 0, #000 160px);
    pointer-events: none;
}

/* --rise and --sway from plunge.js; fill-mode both avoids a jump at the start. */
.plunge-bubble {
    position: absolute;
    border: 2px solid rgba(216, 239, 255, 0.9);
    border-radius: 50%;
    background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.8) 0 18%, rgba(223, 243, 255, 0.12) 22%);
    pointer-events: none;
    will-change: transform;
    animation-name: plunge-rise;
    animation-timing-function: cubic-bezier(0.3, 0, 0.7, 1);
    animation-fill-mode: both;
}

@keyframes plunge-rise {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(var(--sway, 0px), calc(-1 * var(--rise, 300px)), 0);
    }
}

.hero.is-plunging::after {
    animation: plunge-wobble 0.7s ease-out;
}

@keyframes plunge-wobble {
    30% {
        transform: translateY(6px) scaleY(1.4);
    }
    60% {
        transform: translateY(-3px) scaleY(0.9);
    }
}