/* Seasonal overlays. theme-init.js puts data-season on <html> during the
   dates of a season; the rest of the year nothing in this file applies. */

/* --- Halloween ---------------------------------------------------------- */

/* Cobweb in the corner under the navbar. */
:root[data-season="halloween"] .hero::before,
:root[data-season="halloween"] .doc-toc::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: var(--nav-h);
  left: 0;
  width: clamp(120px, 15vw, 210px);
  aspect-ratio: 1;
  background: var(--text);
  opacity: .16;
  -webkit-mask: url(/images/season/cobweb.svg) left top / 100% no-repeat;
  mask: url(/images/season/cobweb.svg) left top / 100% no-repeat;
  pointer-events: none;
}

:root[data-season="halloween"] .doc-toc::before {
  top: 0;
  left: auto;
  right: 0;
  width: 130px;
  opacity: .13;
  transform: scaleX(-1);
}

/* Spider coming down its thread from the navbar. */
:root[data-season="halloween"] .hero::after {
  content: "\f717";
  position: absolute;
  z-index: 2;
  top: 0;
  right: clamp(24px, 13vw, 220px);
  width: 16px;
  height: calc(var(--nav-h) + 150px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font: 900 15px/1 "Font Awesome 6 Free";
  color: var(--muted);
  background: linear-gradient(currentColor, currentColor) center top / 1px calc(100% - 13px) no-repeat;
  opacity: .7;
  pointer-events: none;
  animation: seasonSpider 9s ease-in-out infinite alternate;
}

@keyframes seasonSpider {
  from { transform: translateY(-95px); }
  to { transform: translateY(0); }
}

/* Small pumpkin sitting in the bottom corner. */
:root[data-season="halloween"] .hero-vignette::after,
:root[data-season="halloween"] .doc-toc::after {
  content: "";
  position: absolute;
  left: clamp(16px, 3vw, 44px);
  bottom: 18px;
  width: 46px;
  aspect-ratio: 64 / 60;
  background: url(/images/season/pumpkin.svg) center / contain no-repeat;
  filter: drop-shadow(0 0 14px rgba(250,130,38,.35));
  pointer-events: none;
}

:root[data-season="halloween"] .doc-toc::after {
  left: auto;
  right: 18px;
  bottom: 16px;
  width: 34px;
}

@media (max-width: 760px) {
  :root[data-season="halloween"] .hero::after { height: calc(var(--nav-h) + 90px); }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-season="halloween"] .hero::after { animation: none; }
}