/* One cached bitmap; no stacked opacity frames, per-motif filters or canvas updates. */
:root { --noise-img: url('../img/noise-grain.webp'); }
.noise-layer { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; contain:strict; isolation:isolate; }
.noise-track { position:absolute; inset:0 0 auto; height:0; will-change:transform; }
.noise-rect { position:absolute; border-radius:32px; opacity:var(--noise-opacity); overflow:hidden; contain:paint; }
.noise-grain { position:absolute; inset:-28px; background-image:var(--noise-img); background-size:var(--noise-grain-size); animation:noise-shift .48s steps(1,end) infinite; }
@keyframes noise-shift {
 0%,100% {transform:translate3d(0,0,0)}
 25% {transform:translate3d(-19px,13px,0)}
 50% {transform:translate3d(17px,-23px,0)}
 75% {transform:translate3d(-11px,-17px,0)}
}
.noise-idle .noise-grain, .noise-suspended .noise-grain {animation-play-state:paused;}
.noise-static {position:absolute;overflow:hidden;contain:paint;}
.noise-static .noise-track {will-change:auto;}
.noise-static .noise-grain {animation:none;}
/* A small stepped texture update keeps the green shape and lettering stationary. */
.hero h1 .word-noise::after { z-index: 0; opacity: .4; animation: hero-noise-shift .48s steps(1,end) infinite; }
.hero h1 .word-noise-text { position: relative; z-index: 1; }
@keyframes hero-noise-shift {
 0%,100% { background-position: 0 0; }
 25% { background-position: -19px 13px; }
 50% { background-position: 17px -23px; }
 75% { background-position: -11px -17px; }
}
.hero h1 .word-noise.noise-idle::after { animation-play-state: paused; }
.basti-image.noise-idle::after, .word-noise.noise-idle::after {animation-play-state:paused;}
@media(prefers-reduced-motion:reduce) {
 .noise-grain,.word-noise::after,.basti-image::after {animation:none!important;}
}