.surface-bg{position:relative;isolation:isolate;background:var(--surface-base)!important}
.surface-bg::before,.surface-bg::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit}
.surface-bg::before{background-image:var(--surface-gradient);background-size:var(--surface-size,180% 180%);animation:var(--surface-motion);background-position:var(--pointer-x,50%) var(--pointer-y,50%);transition:background-position var(--surface-response,.65s) ease-out}
.surface-bg::after{background-size:var(--grain-size,180px) var(--grain-size,180px);filter:var(--surface-texture,none);opacity:var(--surface-grain);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' opacity='.7' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
@keyframes surface-drift{from{background-position:0% 0%,100% 100%,0% 100%,0% 50%}to{background-position:100% 100%,0% 0%,100% 0%,100% 50%}}
@media(prefers-reduced-motion:reduce){.surface-bg::before{animation:none}}

@keyframes surface-horizontal{from{background-position:0% 50%,100% 50%,0% 50%,0% 50%}to{background-position:100% 50%,0% 50%,100% 50%,100% 50%}}
@keyframes surface-vertical{from{background-position:50% 0%,50% 100%,50% 0%,50% 0%}to{background-position:50% 100%,50% 0%,50% 100%,50% 100%}}
@keyframes surface-orbit{0%,100%{background-position:0% 50%,100% 50%,50% 0%,50% 50%}25%{background-position:50% 0%,50% 100%,100% 50%,0% 50%}50%{background-position:100% 50%,0% 50%,50% 100%,50% 100%}75%{background-position:50% 100%,50% 0%,0% 50%,100% 50%}}
@keyframes surface-breathe{from{background-size:140% 140%;background-position:50% 50%}to{background-size:220% 220%;background-position:50% 50%}}
@media(prefers-reduced-motion:reduce){.surface-bg::before{transition:none;background-position:50% 50%}}