/*
 * Halloween, shown October 1st through 31st (see `holiday_on` in
 * vzdv-site/src/main.rs).
 */

/* Pumpkin-orange links. */
[data-bs-theme="dark"] {
  --bs-link-color: #f2a65a;
  --bs-link-color-rgb: 242, 166, 90;
  --bs-link-hover-color: #f8c48f;
  --bs-link-hover-color-rgb: 248, 196, 143;
}

.navbar {
  --bs-navbar-hover-color: #f8b06a;
}

/* The homepage banner at nightfall, under a moon. */
picture:has(> #banner-img) {
  display: block;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

#banner-img {
  filter: saturate(1.2) contrast(1.1);
}

picture:has(> #banner-img)::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #2f2563 0%, #4d3a8a 24%, #8d5b9a 48%, #d48a7c 70%, #a07a92 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 1; /* above the photo, which its filter lifts */
}

picture:has(> #banner-img)::after {
  content: "";
  position: absolute;
  top: 16px;
  left: calc(50% - 175px);
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 38%, #fffaf0 0%, #f9ebc4 45%, #ecd08f 100%);
  box-shadow: 0 0 24px 8px rgba(255, 228, 170, 0.28);
  pointer-events: none;
  z-index: 1;
}

/* A cobweb in the navbar's corner, whose spider drops every 32 seconds. */
.navbar > [class^="container"]::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 64px;
  height: 48px;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 48'><path d='M64 0L4.3 6.3M64 0L15.9 24.5M64 0L30.5 37.2M64 0L47.5 42.9M64 0L62.4 46.0M55.0 0.9Q56.6 2.2 56.0 4.1Q57.9 4.7 58.0 6.7Q60.0 6.6 60.8 8.4Q62.5 7.6 63.7 9.0M46.1 1.9Q49.2 4.4 48.0 8.2Q51.7 9.4 52.0 13.4Q55.9 13.2 57.5 16.8Q60.9 15.2 63.4 18.0M36.2 2.9Q40.9 6.8 39.1 12.7Q44.9 14.7 45.3 20.8Q51.4 20.5 54.0 26.1Q59.2 23.6 63.0 28.0M25.2 4.1Q31.8 9.5 29.3 17.7Q37.4 20.4 37.9 29.0Q46.5 28.6 50.0 36.4Q57.3 32.9 62.6 39.0' fill='none' stroke='%23dfe3ea' stroke-width='.6'/></svg>") no-repeat;
  opacity: 0.4;
  pointer-events: none;
}

/* The spider's thread, which pays out as it drops. */
.navbar::before {
  content: "";
  position: absolute;
  top: 0;
  right: 22px;
  width: 1px;
  height: 118px;
  background: rgba(223, 227, 234, 0.45);
  transform-origin: top;
  scale: 1 0.12;
  animation: halloween-thread 32s 1.5s infinite;
  pointer-events: none;
  z-index: 1;
}

.navbar::after {
  content: "";
  position: absolute;
  top: 113px;
  right: 13px;
  width: 19px;
  height: 21px;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 22'><g fill='none' stroke='%23a3a9b2' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'><path d='M8.5 8.2 5 4.5 3 7.5M8.4 9.2 4 8 1.5 11.5M8.4 10.2 4 11.5 2 15.5M8.6 11 5 14.5 4 19M11.5 8.2 15 4.5 17 7.5M11.6 9.2 16 8 18.5 11.5M11.6 10.2 16 11.5 18 15.5M11.4 11 15 14.5 16 19'/></g><g fill='%2317161b' stroke='%23a3a9b2' stroke-width='.7'><circle cx='10' cy='8.4' r='2.6'/><ellipse cx='10' cy='14.2' rx='4' ry='4.6'/></g><path d='M10 12.2 11.1 14 10 15.8 8.9 14Z' fill='%23e8782c'/></svg>") center / contain no-repeat;
  translate: 0 -104px;
  animation: halloween-spider 32s 1.5s infinite;
  pointer-events: none;
  z-index: 1;
}

/* Keep these two in step: the thread's length follows the spider. */
@keyframes halloween-spider {
  0% { translate: 0 -104px; animation-timing-function: ease-out; }
  5% { translate: 0 0; animation-timing-function: ease-in-out; }
  6.5% { translate: 0 -6px; animation-timing-function: ease-in-out; }
  8%, 15% { translate: 0 0; animation-timing-function: ease-in-out; }
  22%, 100% { translate: 0 -104px; }
}

@keyframes halloween-thread {
  0% { scale: 1 0.12; animation-timing-function: ease-out; }
  5% { scale: 1 1; animation-timing-function: ease-in-out; }
  6.5% { scale: 1 0.95; animation-timing-function: ease-in-out; }
  8%, 15% { scale: 1 1; animation-timing-function: ease-in-out; }
  22%, 100% { scale: 1 0.12; }
}

/* On narrow screens that corner belongs to the menu button. */
@media (max-width: 991.98px) {
  .navbar > [class^="container"]::before,
  .navbar::before,
  .navbar::after {
    display: none;
  }
}

/* Activity trophies become lit jack-o'-lanterns in gold, silver and bronze. */
.bi-trophy-fill[class*="rank-"] {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.2em;
  background: radial-gradient(ellipse 34% 26% at 50% 62%, #ffc85a, #ff8a1f 70%, transparent 100%);
}

.bi-trophy-fill[class*="rank-"]::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: currentColor;
  mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><mask id='m'><rect width='24' height='24' fill='white'/><path d='M12 7.4V22' stroke='black' stroke-opacity='.35' stroke-width='.7'/><path d='M7.4 8.6C6 12 6 17 7.4 21M16.6 8.6C18 12 18 17 16.6 21' fill='none' stroke='black' stroke-opacity='.35' stroke-width='.7'/><g fill='black'><path d='M6.9 13 8.6 10.3 10.3 13Z'/><path d='M13.7 13 15.4 10.3 17.1 13Z'/><path d='M6.3 15.4C8 18.6 16 18.6 17.7 15.4 16.6 16 15.6 16.2 14.9 16.1L14.3 17 13.6 16.2C12.6 16.4 11.4 16.4 10.4 16.2L9.7 17 9.1 16.1C8.4 16.2 7.4 16 6.3 15.4Z'/></g></mask><g mask='url(%23m)'><path d='M11.3 6.6C11.2 5 11.6 3.4 12.9 2.2L14.3 3.2C13.3 4.1 12.9 5.3 13 6.6Z'/><ellipse cx='7.6' cy='14.4' rx='5.6' ry='7.2'/><ellipse cx='16.4' cy='14.4' rx='5.6' ry='7.2'/><ellipse cx='12' cy='14.4' rx='6' ry='7.6'/></g></svg>") center / contain no-repeat;
}

@media (prefers-reduced-motion: reduce) {
  .navbar::before,
  .navbar::after {
    animation: none;
  }
}