:root{color-scheme:dark}
*{box-sizing:border-box}
html,body,.melt{width:100%;height:100%;margin:0;overflow:hidden}
.melt{position:relative;isolation:isolate;background:radial-gradient(ellipse at 50% 47%,#612045,#24102d 50%,#100917 82%)}
.melt::before,.melt::after{content:"";position:absolute;pointer-events:none}
.melt::before{inset:-25%;background:repeating-radial-gradient(ellipse at 19% 68%,transparent 0 13px,#c2267829 14px 16px,transparent 20px 28px),repeating-radial-gradient(ellipse at 81% 25%,transparent 0 19px,#8eda6330 20px 22px,transparent 24px 31px);transform:rotate(-13deg)}
.afterimage{position:absolute;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(2);opacity:.13;mix-blend-mode:luminosity}
.plate{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.field{opacity:.66;transform-origin:center;animation:torsion 17s ease-in-out infinite alternate}
.mask{transform-origin:center;animation:liquefy 8s ease-in-out infinite alternate}
.melt::after{inset:0;background:repeating-linear-gradient(0deg,transparent 0 3px,#12061d29 3px 4px);box-shadow:inset 0 0 10vmin #13081a88}
@keyframes torsion{from{transform:rotate(-12deg) scale(.97,1.05)}to{transform:rotate(17deg) scale(1.12,.96)}}
@keyframes liquefy{from{transform:skewX(-3deg) scale(1.04,.97) rotate(-3deg)}to{transform:skewX(4deg) scale(.97,1.09) rotate(2deg)}}
@media(max-aspect-ratio:1/1){.plate{width:185%;left:-42.5%}}
@media(prefers-reduced-motion:reduce){.field,.mask{animation:none}}
.echoes{opacity:.32;mix-blend-mode:screen;transform-origin:center;animation:drift 12s ease-in-out infinite alternate}@keyframes drift{from{transform:scale(.96,1) translateY(-4px)}to{transform:scale(1.13,.98) translateY(13px)}}@media(prefers-reduced-motion:reduce){.echoes{animation:none}}