.gv-wave { position: absolute; left: 50%; top: 0; width: 100vw; height: clamp(44px, 6vw, 92px); transform: translate(-50%, -50%); pointer-events: none; z-index: 0; }
.gv-wave svg { display: block; width: 100%; height: 100%; overflow: visible; clip-path: inset(-40% 0 -40% 0); }
.gv-wave path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.gv-wave .gv-main { stroke-width: 3; opacity: .65; }
.gv-wave .gv-echo { stroke-width: 1.5; opacity: .3; }
.gv-wave[data-wave="cross"] .gv-echo { stroke-width: 2; opacity: .4; }
.gv-wave--hero { top: auto; bottom: 44px; transform: translate(-50%, 50%); }

.gv-wave--in { top: calc(var(--v2-gap) * .42); }

.js-motion .gv-wave svg { clip-path: inset(-40% 100% -40% 0); transition: clip-path 1.9s cubic-bezier(.65,0,.35,1); }
.js-motion .gv-wave[data-wave="right"] svg { clip-path: inset(-40% 0 -40% 100%); }
.js-motion .gv-wave.on svg { clip-path: inset(-40% 0 -40% 0); }

.hero-glow { -webkit-mask-image: linear-gradient(to bottom, transparent calc(var(--glow-size) * .22), #000 calc(var(--glow-size) * .22 + 140px)); mask-image: linear-gradient(to bottom, transparent calc(var(--glow-size) * .22), #000 calc(var(--glow-size) * .22 + 140px)); }
@media (max-width: 860px) {
  .hero-glow { --glow-size: 120vw !important; top: -70vw !important; right: -62vw !important;
    -webkit-mask-image: linear-gradient(to bottom, transparent 70vw, #000 calc(70vw + 110px)); mask-image: linear-gradient(to bottom, transparent 70vw, #000 calc(70vw + 110px)); }
}