/* ------------------------------------------------------------------
   Element defaults, resets and the ambient background layer.
   ------------------------------------------------------------------ */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0 0 var(--player-h); background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  transition:background .5s var(--ease), color .5s var(--ease);
}
h1,h2,h3,h4{font-family:var(--font-display); line-height:1.06; margin:0; letter-spacing:-.02em}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
button{font-family:inherit; color:inherit; background:none; border:none; padding:0; cursor:pointer}
::selection{background:var(--accent); color:var(--bg)}

.ambient{position:fixed; inset:0; z-index:-2; overflow:hidden; pointer-events:none; transform:translateZ(0)}
.orb{position:absolute; border-radius:50%; filter:blur(70px); transition:background 1.2s var(--ease); will-change:transform; transform:translateZ(0)}
.orb.a{width:58vw; height:58vw; background:var(--accent-glow); top:-20vw; right:-14vw; animation:drift 24s var(--ease) infinite alternate}
.orb.b{width:44vw; height:44vw; background:var(--accent-soft); bottom:-16vw; left:-12vw; animation:drift 30s var(--ease) infinite alternate-reverse}
@keyframes drift{to{transform:translate3d(4vw,4vw,0) scale(1.14)}}
/* sound-wave floor line */
.wavefloor{position:fixed; left:0; right:0; bottom:var(--player-h); height:1px; background:var(--border); z-index:5; pointer-events:none}