.wave-intro{
  position:relative;
  height:100vh;
  height:100svh;
  background:var(--wave-bg, #0a0a0a);
  overflow:hidden;
}
.wave-intro canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

.wave-intro-title{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  background:var(--wave-bg, #0a0a0a);
  color:#fff;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-weight:700;
  font-size:clamp(18px,3.2vw,34px);
  letter-spacing:.08em;
  white-space:nowrap;
  padding:.9em 2.2em;
}

.wave-intro-hint{
  position:absolute;
  left:50%;
  bottom:28px;
  transform:translateX(-50%);
  background:var(--wave-bg, #0a0a0a);
  border:none;
  color:#8c8c8c;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:13px;
  letter-spacing:.12em;
  padding:6px 12px;
  cursor:pointer;
  animation:wave-intro-bob 2.4s ease-in-out infinite;
}
.wave-intro-hint:hover{color:#fff;}

@keyframes wave-intro-bob{
  0%,100%{transform:translate(-50%,0);}
  50%{transform:translate(-50%,6px);}
}
@media (prefers-reduced-motion: reduce){
  .wave-intro-hint{animation:none;}
}