﻿:root{--audio-level:0;--audio-bass:0;--audio-wind:0;--audio-silk:0;--audio-breath:0;--audio-hit:0;--audio-ink:0;--audio-drift:0;--audio-phase:0}
.soundscape-toggle,.soundscape-hint{display:none!important}
.audio-reactive .hero::after{content:"";position:absolute;inset:-12%;z-index:1;pointer-events:none;background:radial-gradient(circle at var(--motion-x,55vw) var(--motion-y,45vh),rgba(18,18,17,calc(.035 + var(--audio-level)*.12 + var(--audio-hit)*.06)),rgba(18,18,17,calc(.022 + var(--audio-bass)*.075)) 22%,rgba(18,18,17,calc(.012 + var(--audio-ink)*.035)) 42%,transparent 66%);filter:blur(calc(28px + var(--audio-level)*22px + var(--audio-ink)*18px));mix-blend-mode:multiply;opacity:calc(.16 + var(--audio-level)*.36 + var(--audio-hit)*.16);transform:scale(calc(1 + var(--audio-bass)*.045 + var(--audio-hit)*.018)) translate3d(calc((var(--audio-drift) - .5)*14px),calc((var(--audio-silk) - .5)*9px),0);transition:opacity .1s linear,filter .1s linear}
.audio-reactive .hero::before{filter:blur(calc(18px + var(--audio-wind)*10px));opacity:calc(.52 + var(--audio-breath)*.18)}
.audio-reactive .hero h1 .title-line{transform:translate3d(calc((var(--motion-nx,.5) - .5) * -8px + (var(--audio-drift) - .5)*5px),calc(var(--audio-level) * -5px - var(--audio-hit)*3px),0) scale(calc(1 + var(--audio-bass)*.008 + var(--audio-hit)*.004));filter:blur(calc(var(--audio-silk)*.08px));transition:filter .08s linear,transform .08s linear}
.audio-reactive .hero h1 .title-line:nth-child(2){transform:translate3d(calc((var(--motion-nx,.5) - .5) * -7px - (var(--audio-drift) - .5)*7px),calc(var(--audio-breath) * -4px - var(--audio-hit)*2px),0) scale(calc(1 + var(--audio-bass)*.01))}
.audio-reactive .hero h1 .title-line:nth-child(3){transform:translate3d(calc((var(--motion-nx,.5) - .5) * -5px + (var(--audio-silk) - .5)*6px),calc(var(--audio-wind) * -4px - var(--audio-hit)*4px),0) scale(calc(1 + var(--audio-hit)*.006))}
.audio-reactive .hero h1 .kinetic-char{transform:translate3d(0,calc((var(--audio-level) - .28) * -7px - var(--audio-hit)*2px),0) rotate(calc((var(--audio-bass) - .25) * .72deg + (var(--audio-drift) - .5)*.36deg));transition:transform .08s linear}
.audio-reactive .motion-surface::before{opacity:calc(.38 + var(--audio-level)*.28 + var(--audio-hit)*.16);filter:blur(calc(22px + var(--audio-bass)*22px + var(--audio-ink)*10px));transform:scale(calc(.88 + var(--audio-bass)*.06 + var(--audio-hit)*.018)) translate3d(calc((var(--audio-drift) - .5)*10px),calc((var(--audio-breath) - .5)*10px),0)}
.audio-reactive .motion-glyphs i{opacity:calc(.2 + var(--audio-level)*.28 + var(--audio-hit)*.26);transform:translate3d(calc((var(--audio-drift) - .5)*10px),calc((var(--audio-wind) - .5)*-14px),0) scale(calc(.96 + var(--audio-hit)*.08))}
.audio-reactive .ink-scene{transform:translate3d(calc(var(--audio-wind)*8px - 3px),calc(var(--audio-level)*-6px + var(--audio-drift)*3px),0) rotate(calc((var(--audio-wind) - .5) * 1.9deg));filter:blur(calc(.04px + var(--audio-silk)*.12px));transition:transform .08s linear,filter .08s linear}
.audio-reactive .ink-scene .mist{opacity:calc(.36 + var(--audio-level)*.32 + var(--audio-ink)*.2);transform:scale(calc(.96 + var(--audio-breath)*.06 + var(--audio-hit)*.025))}
.audio-reactive .ink-scene .bird,.audio-reactive .ink-scene .flight{opacity:calc(.16 + var(--audio-bass)*.52 + var(--audio-hit)*.24);transform:translate3d(calc(var(--audio-wind)*7px),calc(var(--audio-level)*-8px - var(--audio-hit)*5px),0) scale(calc(.92 + var(--audio-bass)*.12 + var(--audio-hit)*.05))}
.audio-reactive .ink-scene .bamboo-leaf,.audio-reactive .ink-scene .leaf{opacity:calc(.16 + var(--audio-wind)*.16 + var(--audio-hit)*.12);transform:rotate(calc((var(--audio-wind) - .5)*10deg)) translateY(calc(var(--audio-hit)*-3px))}
.audio-reactive .ink-scene .stem,.audio-reactive .ink-scene .branch,.audio-reactive .ink-scene .twig{stroke-width:calc(1.4px + var(--audio-hit)*.45px);opacity:calc(.52 + var(--audio-breath)*.18)}
.audio-reactive #ink-canvas{opacity:calc(.82 + var(--audio-level)*.12 + var(--audio-hit)*.06)}
.soundscape-breath-field{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;mix-blend-mode:multiply}.soundscape-breath-field i{position:absolute;left:var(--mote-x);top:var(--mote-y);width:clamp(60px,9vw,150px);height:clamp(60px,9vw,150px);border-radius:999px;background:radial-gradient(circle,rgba(18,18,17,calc(.025 + var(--audio-hit)*.045)) 0 9%,rgba(18,18,17,calc(.018 + var(--audio-ink)*.05)) 28%,transparent 68%);filter:blur(calc(12px + var(--audio-ink)*12px));opacity:calc(.12 + var(--audio-breath)*.18 + var(--audio-hit)*.15);transform:translate3d(calc((var(--audio-drift) - .5)*34px),calc((var(--audio-wind) - .5)*-26px),0) scale(calc(var(--mote-scale) + var(--audio-bass)*.16 + var(--audio-hit)*.08));animation:soundscapeMoteDrift 8s ease-in-out var(--mote-delay) infinite alternate}.soundscape-breath-field i:nth-child(3n){background:radial-gradient(circle,rgba(240,68,35,calc(.012 + var(--audio-hit)*.07)) 0 7%,rgba(18,18,17,calc(.018 + var(--audio-ink)*.04)) 29%,transparent 70%)}
.soundscape-ink-wake{position:fixed;z-index:9998;left:50%;top:50%;width:18px;height:18px;border-radius:999px;pointer-events:none;transform:translate(-50%,-50%) scale(.25);background:radial-gradient(circle,rgba(240,68,35,.36) 0 4px,rgba(20,20,18,.18) 5px,rgba(20,20,18,.08) 24%,rgba(20,20,18,.03) 43%,transparent 68%);box-shadow:0 0 0 1px rgba(20,20,18,.18),0 0 38px rgba(20,20,18,.16);mix-blend-mode:multiply;filter:blur(.2px);animation:soundscapeInkWake 1.35s cubic-bezier(.16,.78,.22,1) forwards}.soundscape-ink-wake::before,.soundscape-ink-wake::after{content:"";position:absolute;inset:-18px;border-radius:inherit;border:1px solid rgba(20,20,18,.16);opacity:.55;transform:scale(.7)}.soundscape-ink-wake::after{inset:-38px;opacity:.28;border-color:rgba(240,68,35,.24)}.soundscape-ink-wake--blocked{background:radial-gradient(circle,rgba(240,68,35,.5) 0 5px,rgba(240,68,35,.12) 9px,rgba(20,20,18,.08) 34%,transparent 70%)}
@keyframes soundscapeInkWake{0%{opacity:0;transform:translate(-50%,-50%) scale(.16);filter:blur(0)}18%{opacity:.72}100%{opacity:0;transform:translate(-50%,-50%) scale(13);filter:blur(12px)}}@keyframes soundscapeMoteDrift{0%{margin-left:-12px;margin-top:8px}100%{margin-left:16px;margin-top:-14px}}
@media(prefers-reduced-motion:reduce){.audio-reactive .hero::after,.soundscape-breath-field{display:none}.audio-reactive .hero h1 .title-line,.audio-reactive .ink-scene{transform:none!important;filter:none!important}.audio-reactive .hero h1 .kinetic-char{filter:none!important}}
