/* AFTER · noise — SVG feTurbulence grain + low-frequency smoke + canvas film grain. */
:root{
 --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 3 3 3 0 -4.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
 --grainmono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
 --smoke:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='600'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .007' numOctaves='4' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
}
.hero .fxl,.band .fxl{position:absolute;pointer-events:none}
.hero .smoke,.band .smoke{inset:0;background:var(--smoke) center/cover;mix-blend-mode:soft-light;opacity:.9;z-index:1}
.hero .grain,.band .grain{inset:-110px;background:var(--grainmono);background-size:220px;mix-blend-mode:overlay;opacity:.75;z-index:1;animation:grain-shift .9s steps(5) infinite}
@keyframes grain-shift{0%{transform:translate(0,0)}20%{transform:translate(-37px,23px)}40%{transform:translate(29px,-41px)}60%{transform:translate(-13px,47px)}80%{transform:translate(43px,11px)}100%{transform:translate(0,0)}}
.art .fx{background:var(--grainmono);background-size:180px;mix-blend-mode:overlay;opacity:.9;-webkit-mask:var(--mask) center/100% 100% no-repeat;mask:var(--mask) center/100% 100% no-repeat}
#hero-art{--mask:url(../assets/hero.svg)}
#how-art{--mask:url(../assets/workflow.svg)}
.card .fx,.steps li .fx{position:absolute;inset:0;background:var(--grain);background-size:220px;opacity:.10;mix-blend-mode:multiply;pointer-events:none;border-radius:inherit}
.steps li{position:relative;overflow:hidden}
body:not(.show-before) .card{background:linear-gradient(180deg,#fff,#f1eefc)}
canvas.film{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:40;opacity:.07;mix-blend-mode:multiply;image-rendering:pixelated}
@media (prefers-reduced-motion:reduce){.hero .grain,.band .grain{animation:none}}