/* dunwell-season-fx.css — visual layer for shared/dunwell-season-fx.js */
.dwfx-root{ position:fixed; inset:0; pointer-events:none; z-index:999990; overflow:hidden; }
.dwfx-vignette{ position:absolute; inset:0; background:radial-gradient(circle at 50% 40%, transparent 0 45%, rgba(0,0,0,.35) 100%); opacity:.7; }

.dwfx-symbol{ position:absolute; top:-10%; left:var(--x); font-size:var(--s); color:var(--dwfx-accent); text-shadow:0 0 14px color-mix(in srgb, var(--dwfx-accent) 50%, transparent); opacity:0; animation:var(--anim) linear infinite; animation-duration:var(--dur); animation-delay:var(--delay); }
@keyframes dwfx-fall{ 0%{ transform:translateY(0) translateX(0) rotate(0deg); opacity:0; } 8%{ opacity:.75; } 92%{ opacity:.55; } 100%{ transform:translateY(112vh) translateX(var(--drift)) rotate(var(--spin)); opacity:0; } }
@keyframes dwfx-bounce{ 0%{ transform:translateY(0) rotate(0deg); opacity:0; } 10%{ opacity:.85; } 45%{ transform:translateY(48vh) rotate(160deg); } 60%{ transform:translateY(30vh) rotate(220deg); } 100%{ transform:translateY(112vh) translateX(var(--drift)) rotate(var(--spin)); opacity:0; } }
@keyframes dwfx-zigzag{ 0%{ transform:translateY(0) translateX(0) rotate(-8deg); opacity:0; } 15%{ opacity:.8; } 40%{ transform:translateY(30vh) translateX(60px) rotate(8deg); } 65%{ transform:translateY(65vh) translateX(-40px) rotate(-10deg); } 100%{ transform:translateY(112vh) translateX(var(--drift)) rotate(var(--spin)); opacity:0; } }

.dwfx-star{ position:absolute; top:var(--sy); left:var(--sx); width:var(--ss); height:var(--ss); border-radius:50%; background:#fff; box-shadow:0 0 4px 1px rgba(255,255,255,.7); animation:dwfx-twinkle ease-in-out infinite; }
@keyframes dwfx-twinkle{ 0%,100%{ opacity:.12; } 50%{ opacity:.9; } }

.dwfx-firework{ position:absolute; left:var(--x); top:var(--y); width:4px; height:4px; border-radius:50%; background:var(--dwfx-accent2); box-shadow:0 0 0 0 var(--dwfx-accent2), 16px 0 0 -1px var(--dwfx-accent2), -16px 0 0 -1px var(--dwfx-accent2), 0 16px 0 -1px var(--dwfx-accent2), 0 -16px 0 -1px var(--dwfx-accent2), 12px 12px 0 -1px var(--dwfx-accent2), -12px -12px 0 -1px var(--dwfx-accent2); animation:dwfx-firework ease-out infinite; opacity:0; }
@keyframes dwfx-firework{ 0%,12%{ transform:scale(.2); opacity:0; } 20%{ opacity:1; } 55%{ transform:scale(2.6); opacity:0; } 100%{ opacity:0; } }

.dwfx-meteor{ position:absolute; left:var(--x); top:var(--y); width:110px; height:2px; border-radius:999px; background:linear-gradient(90deg, var(--dwfx-accent), transparent); box-shadow:0 0 16px var(--dwfx-accent); transform:rotate(-28deg); animation:dwfx-meteor ease-in infinite; opacity:0; }
@keyframes dwfx-meteor{ 0%{ transform:translate3d(0,0,0) rotate(-28deg); opacity:0; } 8%{ opacity:.9; } 100%{ transform:translate3d(-130vw,74vh,0) rotate(-28deg); opacity:0; } }

.dwfx-aurora{ position:absolute; inset:0; opacity:.3; background:linear-gradient(110deg, transparent 0 20%, color-mix(in srgb, var(--dwfx-accent2) 26%, transparent) 34%, transparent 50%), linear-gradient(74deg, transparent 0 26%, color-mix(in srgb, var(--dwfx-accent) 22%, transparent) 42%, transparent 63%); filter:blur(20px); animation:dwfx-aurora 13s ease-in-out infinite alternate; }
@keyframes dwfx-aurora{ from{ transform:translateX(-4%) skewX(-5deg); } to{ transform:translateX(4%) skewX(5deg); } }
.dwfx-sunhalo{ position:absolute; left:50%; top:38%; width:min(50vmin,480px); height:min(50vmin,480px); border-radius:50%; transform:translate(-50%,-50%); background:radial-gradient(circle, color-mix(in srgb, var(--dwfx-accent2) 26%, transparent) 0 16%, transparent 40%); filter:blur(4px); animation:dwfx-pulse 5.5s ease-in-out infinite; }
@keyframes dwfx-pulse{ 0%,100%{ transform:translate(-50%,-50%) scale(.96); opacity:.4; } 50%{ transform:translate(-50%,-50%) scale(1.05); opacity:.75; } }
.dwfx-lights{ position:absolute; left:0; right:0; top:0; height:50px; opacity:.8; background:radial-gradient(circle at 8% 20px, var(--dwfx-accent) 0 4px, transparent 5px), radial-gradient(circle at 24% 28px, var(--dwfx-accent2) 0 4px, transparent 5px), radial-gradient(circle at 42% 18px, var(--dwfx-accent) 0 3px, transparent 5px), radial-gradient(circle at 60% 27px, var(--dwfx-accent2) 0 4px, transparent 5px), radial-gradient(circle at 78% 19px, var(--dwfx-accent) 0 4px, transparent 5px), radial-gradient(circle at 92% 26px, var(--dwfx-accent2) 0 3px, transparent 5px); animation:dwfx-lights 2.4s ease-in-out infinite alternate; }
@keyframes dwfx-lights{ 0%{ opacity:.55; } 100%{ opacity:.95; } }

.dwfx-fog{ position:absolute; top:var(--sy); left:var(--sx); width:var(--fs); height:var(--fs); border-radius:50%; background:radial-gradient(circle, rgba(245,235,218,.09), transparent 70%); animation:dwfx-fogdrift linear infinite; }
@keyframes dwfx-fogdrift{ 0%{ transform:translateX(0); opacity:0; } 15%{ opacity:.5; } 85%{ opacity:.3; } 100%{ transform:translateX(60px); opacity:0; } }

.dwfx-grid{ position:absolute; inset:0; opacity:.25; background-image:linear-gradient(color-mix(in srgb, var(--dwfx-accent) 25%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--dwfx-accent) 25%, transparent) 1px, transparent 1px); background-size:60px 60px; transform:perspective(700px) rotateX(58deg) translateY(28%); transform-origin:50% 100%; animation:dwfx-gridcrawl 9s linear infinite; }
@keyframes dwfx-gridcrawl{ from{ background-position:0 0,0 0; } to{ background-position:0 60px,60px 0; } }

.dwfx-field{ position:absolute; left:50%; bottom:-12vh; width:min(88vw,1000px); height:34vh; transform:translateX(-50%) perspective(800px) rotateX(62deg); transform-origin:50% 100%; opacity:.32; border-radius:30px; box-shadow:0 0 0 1px color-mix(in srgb, var(--dwfx-accent) 30%, transparent); }
.dwfx-court{ background:linear-gradient(90deg, transparent 0 48%, color-mix(in srgb, var(--dwfx-accent2) 40%, transparent) 49% 51%, transparent 52%), linear-gradient(180deg, color-mix(in srgb, var(--dwfx-accent) 18%, transparent), transparent); }
.dwfx-pitch{ background:repeating-linear-gradient(90deg, color-mix(in srgb,#197b45 40%, transparent) 0 90px, color-mix(in srgb,#0f5f36 40%, transparent) 90px 180px); }
.dwfx-yard{ background:repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 2px, transparent 2px 64px), linear-gradient(180deg, color-mix(in srgb, var(--dwfx-accent) 16%, transparent), transparent); }
.dwfx-net{ background:linear-gradient(180deg, transparent 0 52%, rgba(255,255,255,.2) 52.4% 53%, transparent 53.4%), repeating-linear-gradient(90deg, transparent 0 54px, rgba(255,255,255,.2) 54px 56px, transparent 56px 108px); }
.dwfx-green{ background:repeating-radial-gradient(ellipse at 50% 20%, color-mix(in srgb,#216b3a 36%, transparent) 0 44px, color-mix(in srgb,#114a28 34%, transparent) 45px 90px); }

.dwfx-orbit-sym{ position:absolute; left:50%; top:50%; font-size:20px; color:var(--dwfx-accent); animation:dwfx-orbit linear infinite; }
@keyframes dwfx-orbit{ 0%{ transform:translate(-50%,-50%) rotate(0deg) translateX(24vmin) rotate(0deg); opacity:0; } 12%,84%{ opacity:.8; } 100%{ transform:translate(-50%,-50%) rotate(360deg) translateX(24vmin) rotate(-360deg); opacity:0; } }

.dwfx-badge{ position:absolute; right:clamp(14px,4vw,50px); bottom:clamp(70px,12vh,130px); width:clamp(70px,10vw,120px); height:clamp(70px,10vw,120px); border-radius:32%; display:grid; place-items:center; color:#fff; font-weight:900; font-size:clamp(20px,3.5vw,38px); text-shadow:0 2px 3px rgba(0,0,0,.4); background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.4) 0 8%, transparent 20%), linear-gradient(145deg, color-mix(in srgb, var(--dwfx-accent) 78%, white 14%), color-mix(in srgb, var(--dwfx-accent) 58%, black 24%) 58%, color-mix(in srgb, var(--dwfx-accent2) 58%, black 34%)); box-shadow:0 20px 44px rgba(0,0,0,.3), inset -12px -14px 20px rgba(0,0,0,.2), inset 6px 6px 12px rgba(255,255,255,.14); animation:dwfx-badgefloat 5.8s ease-in-out infinite; }
@keyframes dwfx-badgefloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }

@media (prefers-reduced-motion: reduce){
  .dwfx-symbol,.dwfx-star,.dwfx-firework,.dwfx-meteor,.dwfx-orbit-sym{ display:none!important; }
  .dwfx-aurora,.dwfx-sunhalo,.dwfx-lights{ animation:none!important; }
}