PLAGUEBURNER

P̷L̸A̴G̵U̷E̸B̴U̵R̷N̸E̴R̵

/* Toxic growth from corners */ .corner-rot{ position:absolute; width:60%; height:60%; border-radius:50%; filter:blur(50px); opacity:0.7; animation:rot-spread 40s ease-out infinite; } .c1{ top:-30%; left:-30%; background:radial-gradient(circle at center, rgba(65,115,25,0.9) 0%, rgba(75,125,35,0.7) 25%, rgba(55,95,28,0.4) 50%, transparent 70% ); animation-delay:0s; } .c2{ top:-30%; right:-30%; background:radial-gradient(circle at center, rgba(58,105,22,0.85) 0%, rgba(68,115,30,0.65) 25%, rgba(48,90,25,0.38) 50%, transparent 70% ); animation-delay:8s; } .c3{ bottom:-30%; left:-30%; background:radial-gradient(circle at center, rgba(62,110,28,0.88) 0%, rgba(72,120,32,0.68) 25%, rgba(52,95,26,0.39) 50%, transparent 70% ); animation-delay:16s; } .c4{ bottom:-30%; right:-30%; background:radial-gradient(circle at center, rgba(68,118,30,0.92) 0%, rgba(78,128,38,0.72) 25%, rgba(58,100,29,0.41) 50%, transparent 70% ); animation-delay:24s; } /* Dripping toxin - minimal */ .drip{ position:absolute; top:0; background:linear-gradient(to bottom, rgba(55,90,22,0.4) 0%, rgba(48,80,20,0.3) 40%, rgba(40,68,18,0.2) 70%, transparent 100% ); filter:blur(4px); animation:drip-fall 35s ease-in infinite; box-shadow:0 0 8px rgba(55,90,22,0.2); } .d1{left:3%;width:4px;height:35vh;transform:rotate(-1deg);animation-delay:0s;} .d2{right:5%;width:5px;height:38vh;transform:rotate(1deg);animation-delay:18s;} /* Dying kudzu vines from left */ .vine{ position:absolute; left:0; width:25vw; height:100%; background: linear-gradient(135deg, transparent 0%, transparent 45%, rgba(45,75,20,0.3) 50%, transparent 55%), linear-gradient(115deg, transparent 0%, transparent 55%, rgba(38,68,18,0.25) 60%, transparent 65%), linear-gradient(125deg, transparent 0%, transparent 35%, rgba(52,82,22,0.28) 42%, transparent 48%), linear-gradient(140deg, transparent 0%, transparent 60%, rgba(42,72,19,0.22) 68%, transparent 75%); filter:blur(2px); opacity:0.8; animation:vine-sway 25s ease-in-out infinite; } /* Withered growth from right */ .wither{ position:absolute; right:0; width:20vw; height:100%; background: linear-gradient(225deg, transparent 0%, transparent 50%, rgba(48,78,21,0.28) 58%, transparent 65%), linear-gradient(235deg, transparent 0%, transparent 40%, rgba(40,70,19,0.24) 48%, transparent 55%), linear-gradient(245deg, transparent 0%, transparent 65%, rgba(44,74,20,0.26) 72%, transparent 78%); filter:blur(2px); opacity:0.75; animation:vine-sway 28s ease-in-out infinite reverse; } /* Glitch overlay */ .glitch{ position:absolute; inset:0; background: repeating-linear-gradient(0deg, transparent 0px, rgba(60,95,25,0.03) 1px, transparent 2px, transparent 8px ); opacity:0; animation:glitch-pulse 8s steps(4) infinite; mix-blend-mode:screen; } .glitch::before{ content:''; position:absolute; inset:0; background:inherit; animation:glitch-shift 3s steps(6) infinite; } /* Center bloom */ .bloom{ position:absolute; left:50%; top:50%; width:80vmin; height:80vmin; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle at 45% 42%, rgba(52,88,22,0.08) 0%, rgba(42,75,18,0.05) 35%, rgba(32,62,14,0.02) 60%, transparent 80% ); filter:blur(80px); animation:pulse-bloom 18s ease-in-out infinite; } /* Heavy organic grain */ .grain{ position:absolute; inset:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='3.5' numOctaves='8' seed='15'/%3E%3C/filter%3E%3Crect width='500' height='500' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); opacity:0.35; mix-blend-mode:overlay; pointer-events:none; } /* Deep vignette */ .void::after{ content:''; position:absolute; inset:0; background: radial-gradient(ellipse at 50% 50%, transparent 0%, rgba(0,0,0,0.6) 55%, #000 90% ); pointer-events:none; } @keyframes rot-spread{ 0%{ opacity:0.7; transform:scale(1); } 30%{ opacity:0.95; transform:scale(1.2); } 70%{ opacity:0.8; transform:scale(1.5); } 100%{ opacity:0.6; transform:scale(2); } } @keyframes drip-fall{ 0%{opacity:1;transform:rotate(var(--rot,0deg)) scaleY(1);} 5%{opacity:1;} 60%{opacity:0.9;transform:rotate(var(--rot,0deg)) scaleY(1.4);} 100%{opacity:0.7;transform:rotate(var(--rot,0deg)) scaleY(1.7);} } @keyframes vine-sway{ 0%,100%{transform:translateX(0) scaleX(1);} 50%{transform:translateX(8px) scaleX(1.05);} } @keyframes glitch-pulse{ 0%{opacity:0;} 10%{opacity:0.15;} 15%{opacity:0;} 20%{opacity:0.2;} 25%{opacity:0;} 90%{opacity:0;} 95%{opacity:0.25;} 100%{opacity:0;} } @keyframes glitch-shift{ 0%{transform:translate(0,0);} 20%{transform:translate(-2px,1px);} 40%{transform:translate(1px,-1px);} 60%{transform:translate(-1px,2px);} 80%{transform:translate(2px,-2px);} 100%{transform:translate(0,0);} } @keyframes pulse-bloom{ 0%,100%{ transform:translate(-50%,-50%) scale(0.9); opacity:0.5; } 50%{ transform:translate(-50%,-50%) scale(1.1); opacity:0.75; } }

.graph-curve{ position:absolute; left:0; bottom:0; width:100%; height:100%; } /* Infection zones */ .infection-zone{ position:absolute; border-radius:50%; border:2px solid rgba(90,120,45,0.5); background:radial-gradient(circle, rgba(70,100,35,0.15) 0%, rgba(55,80,30,0.08) 40%, transparent 70% ); opacity:0; animation:infect 18s ease-out infinite; } .z1{left:60%;top:20%;width:180px;height:180px;animation-delay:0s;} .z2{left:25%;top:45%;width:240px;height:240px;animation-delay:6s;} .z3{left:70%;top:60%;width:200px;height:200px;animation-delay:11s;} .z4{left:15%;top:15%;width:160px;height:160px;animation-delay:15s;} /* Viral particles */ .particle{ position:absolute; width:4px; height:4px; background:rgba(80,115,40,0.9); border-radius:50%; box-shadow:0 0 12px rgba(80,115,40,0.6); opacity:0; animation:drift 25s linear infinite; } .p1{left:10%;top:20%;animation-delay:0s;} .p2{left:80%;top:30%;animation-delay:5s;} .p3{left:30%;top:60%;animation-delay:8s;} .p4{left:70%;top:80%;animation-delay:12s;} .p5{left:50%;top:15%;animation-delay:17s;} .p6{left:20%;top:70%;animation-delay:22s;} /* Contamination spread lines */ .spread-line{ position:absolute; height:2px; background:linear-gradient(to right, transparent, rgba(85,115,45,0.5) 50%, transparent ); opacity:0; transform-origin:left center; animation:spread 14s ease-in-out infinite; } .l1{left:60%;top:25%;width:200px;transform:rotate(-25deg);animation-delay:1s;} .l2{left:30%;top:50%;width:280px;transform:rotate(15deg);animation-delay:7s;} .l3{left:70%;top:65%;width:150px;transform:rotate(-35deg);animation-delay:12s;} /* Grain overlay */ .grain{ position:absolute; inset:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2' numOctaves='6'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); opacity:0.18; mix-blend-mode:overlay; pointer-events:none; animation:grain 0.6s steps(6) infinite; } /* Vignette */ .abyss::after{ content:''; position:absolute; inset:0; background: radial-gradient(ellipse at 50% 50%, transparent 0%, rgba(0,0,0,0.7) 70%, #000 95% ); pointer-events:none; } @keyframes infect{ 0%{ opacity:0; transform:scale(0.3); } 25%{ opacity:0.8; transform:scale(1); } 50%{ opacity:0.6; } 100%{ opacity:0; transform:scale(2); } } @keyframes drift{ 0%{ opacity:0; transform:translate(0,0); } 10%{ opacity:1; } 80%{ opacity:0.8; } 100%{ opacity:0; transform:translate(calc(40vw * var(--dx, 1)), calc(-50vh * var(--dy, 1))); } } @keyframes spread{ 0%{ opacity:0; transform:scaleX(0) rotate(var(--angle, 0deg)); } 30%{ opacity:0.7; transform:scaleX(1) rotate(var(--angle, 0deg)); } 70%{ opacity:0.5; } 100%{ opacity:0; transform:scaleX(1) rotate(var(--angle, 0deg)); } } @keyframes draw-curve{ 0%{ stroke-dashoffset: 200; opacity: 0; } 15%{ opacity: 0.8; } 50%{ stroke-dashoffset: 0; opacity: 0.7; } 100%{ stroke-dashoffset: 0; opacity: 0; } } @keyframes grain{ 0%{transform:translate(0,0);} 20%{transform:translate(-3%,2%);} 40%{transform:translate(2%,-3%);} 60%{transform:translate(-2%,3%);} 80%{transform:translate(3%,-2%);} 100%{transform:translate(0,0);} }