/* Seasonal decorations (js/seasons.js adds them while a season is active). Nothing here takes clicks. */

.season-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 30; }

[data-season] .hero h1 span { transition: color .6s; }
[data-season="halloween"] .hero h1 span, [data-season="halloween"] .page-head h1 span { color: #ff8a1f; }
[data-season="halloween"] .kicker { color: #ffb36b; }
[data-season="christmas"] .kicker, [data-season="winter"] .kicker { color: #bfe3ff; }
[data-season="autumn"] .kicker { color: #f0a35c; }
[data-season="spring"] .kicker { color: #ffb7d5; }
[data-season="summer"] .kicker, [data-season="newyear"] .kicker { color: #ffd36b; }

/* snow on the menu bar */
.season-snowcap { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.season-snowcap svg { position: absolute; left: 0; width: 100%; display: block; overflow: visible; filter: drop-shadow(0 2px 2px rgba(0, 10, 30, .35)); }
.snow-top { top: 0; height: 14px; transform-origin: top; animation: snowin 1.4s cubic-bezier(.2, .8, .2, 1) both; }
.snow-ice { top: 100%; height: 20px; }
.season-snowcap .icicle { fill: rgba(225, 242, 255, .85); transform-box: fill-box; transform-origin: top; animation: drip 6s ease-in-out infinite; animation-delay: var(--d); }
.top:has(.season-snowcap) .wrap { position: relative; z-index: 3; }
.top:has(.season-snowcap) .menu .btn-discord::before { content: ""; position: absolute; left: 4px; right: 4px; top: -5px; height: 9px;
  background: radial-gradient(circle at 20% 80%, #fff 5px, transparent 6px), radial-gradient(circle at 50% 60%, #fff 6px, transparent 7px),
              radial-gradient(circle at 80% 80%, #fff 5px, transparent 6px); pointer-events: none; }
.top:has(.season-snowcap) .menu .btn-discord { position: relative; }
@keyframes snowin { from { transform: scaleY(0); opacity: 0; } }
@keyframes drip { 0%, 80%, 100% { transform: scaleY(1); } 90% { transform: scaleY(1.12); } }

/* fairy lights */
.season-lights { position: absolute; left: 0; right: 0; bottom: -30px; height: 40px; pointer-events: none; z-index: 1; }
.season-lights svg { display: block; width: 100%; height: 100%; overflow: visible; }
.season-lights .bulb ellipse { fill: var(--c); filter: drop-shadow(0 0 4px var(--c)); animation: bulb 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * -.3s); }
@keyframes bulb { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* frost in the corners */
.season-frost i { position: fixed; width: 260px; height: 260px; pointer-events: none; z-index: 29; opacity: .55;
  background:
    radial-gradient(circle at 0 0, rgba(210, 236, 255, .35), transparent 60%),
    repeating-conic-gradient(from 0deg at 0 0, rgba(255, 255, 255, .08) 0 2deg, transparent 2deg 9deg); }
.season-frost .tl { left: 0; top: 0; }
.season-frost .tr { right: 0; top: 0; transform: scaleX(-1); }
.season-frost .bl { left: 0; bottom: 0; transform: scaleY(-1); }
.season-frost .br { right: 0; bottom: 0; transform: scale(-1, -1); }

/* cobweb + spider */
.season-cobweb { position: absolute; right: 0; top: 100%; width: 120px; height: 120px; pointer-events: none; z-index: 1; }
.season-cobweb > svg:first-child { width: 100%; height: 100%; }
.spider-thread { position: absolute; right: 38px; top: 0; width: 1px; height: 46px; background: rgba(220, 226, 240, .6); transform-origin: top;
  transition: height 1.2s cubic-bezier(.3, 1.4, .5, 1); }
.spider { position: absolute; right: 26px; top: 40px; width: 24px; height: 24px; transition: top 1.2s cubic-bezier(.3, 1.4, .5, 1);
  animation: spider-sway 4s ease-in-out infinite; transform-origin: 50% -40px; }
.top:hover .spider-thread { height: 110px; }
.top:hover .spider { top: 104px; }
@keyframes spider-sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }

/* fog */
.season-fog { position: fixed; left: 0; right: 0; bottom: 0; height: 32vh; pointer-events: none; z-index: 28; overflow: hidden; }
.season-fog i { position: absolute; bottom: -10vh; left: -50%; width: 200%; height: 100%;
  background: radial-gradient(ellipse at 20% 80%, rgba(170, 180, 205, .16), transparent 55%),
              radial-gradient(ellipse at 60% 90%, rgba(150, 160, 190, .14), transparent 50%),
              radial-gradient(ellipse at 90% 75%, rgba(170, 180, 205, .12), transparent 55%);
  animation: fog 38s linear infinite; }
.season-fog i:nth-child(2) { animation-duration: 56s; animation-direction: reverse; bottom: -14vh; opacity: .8; }
.season-fog i:nth-child(3) { animation-duration: 74s; bottom: -6vh; opacity: .6; }
@keyframes fog { from { transform: translateX(0); } to { transform: translateX(25%); } }

/* pumpkins in the footer */
.foot { position: relative; }
.season-pumpkins { position: absolute; right: 24px; top: -40px; display: flex; align-items: flex-end; gap: 6px; pointer-events: none; }
.pumpkin { width: var(--s); height: auto; filter: drop-shadow(0 0 10px rgba(255, 138, 31, .35)); }
.pumpkin .face { animation: flicker 3s ease-in-out infinite; animation-delay: var(--d); }
@keyframes flicker { 0%, 100% { opacity: 1; } 40% { opacity: .75; } 45% { opacity: 1; } 70% { opacity: .85; } }

/* summer sun */
.season-sun { position: fixed; right: -18vmax; top: -18vmax; width: 60vmax; height: 60vmax; pointer-events: none; z-index: -1;
  background: radial-gradient(circle, rgba(255, 211, 107, .16), rgba(255, 170, 80, .06) 40%, transparent 65%); animation: sun 9s ease-in-out infinite; }
@keyframes sun { 50% { transform: scale(1.06); opacity: .8; } }

/* bats */
.season-bat { position: fixed; left: 0; top: 0; z-index: 31; pointer-events: none; will-change: transform;
  filter: drop-shadow(0 0 1.5px rgba(255, 150, 60, .9)) drop-shadow(0 0 8px rgba(255, 120, 30, .35)); }
.season-bat svg { display: block; width: 100%; height: auto; overflow: visible; }
.season-bat .wing { transform-box: fill-box; animation: flap .28s ease-in-out infinite alternate; }
.season-bat .wing.l { transform-origin: right center; }
.season-bat .wing.r { transform-origin: left center; }
.season-bat.fast .wing { animation-duration: .12s; }
@keyframes flap { from { transform: scaleY(1); } to { transform: scaleY(-.35); } }

@media (max-width: 760px) {
  .season-cobweb { width: 80px; height: 80px; }
  .season-pumpkins { right: 10px; transform: scale(.8); transform-origin: bottom right; }
  .season-frost i { width: 150px; height: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .season-fog, .season-canvas, .season-bat { display: none; }
}