/* MNDL 3D layer: WebGL backdrop + CSS 3D depth */
#gl3d{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
html.gl-on body{background:transparent}
html.gl-on{background:var(--bg)}
html.gl-on body>main,html.gl-on body>.ft{position:relative;z-index:1}
/* let the WebGL scene show through light sections */
html.gl-on .sec:not(.alt):not(.band),html.gl-on .ph,html.gl-on .hero{background:transparent}
html.gl-on .sec.alt{background:color-mix(in srgb,var(--tint) 72%,transparent)}
html.gl-on .mq{background:color-mix(in srgb,var(--sf) 78%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* 3D card tilt */
.tilt3d{transform-style:preserve-3d;will-change:transform;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.tilt3d.live{transition:transform .08s linear,box-shadow .3s}
.tilt3d>*{transform:translateZ(0)}
.persp3d{perspective:1100px}

/* hero depth: headline floats above the scene */
.hero h1{transform-style:preserve-3d}
@media(prefers-reduced-motion:reduce){
  .tilt3d{transition:none}
}
@media(max-width:700px){.persp3d{perspective:none}}