/* Celebrations – the greeting ribbon, the skin's extra touches and the effects layer.
   The colours come from the skin (the site's --flare-* / --accent variables, overridden only while a celebration is on). */

.celebration-ribbon {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 48px 9px 16px; min-height: 40px; color: #fff; background: var(--lens-flare);
  font-size: 14px; line-height: 1.35; letter-spacing: .02em; text-align: center; overflow: hidden;
  box-shadow: inset 0 -1px 0 rgb(255 255 255 / .12);
}
.celebration-ribbon .celebration-motif { width: 20px; height: 20px; flex: none; opacity: .95; }
.celebration-ribbon__text { font-weight: 500; }
.celebration-ribbon__btn {
  font: inherit; font-size: 12px; color: inherit; background: transparent; border: 1px solid rgb(255 255 255 / .45);
  border-radius: 999px; padding: 2px 10px; cursor: pointer; opacity: .9;
}
.celebration-ribbon__btn:hover { opacity: 1; border-color: #fff; }
.celebration-ribbon__close {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; padding: 6px;
  color: inherit; background: transparent; border: 0; border-radius: 50%; cursor: pointer; opacity: .85;
}
.celebration-ribbon__close:hover { opacity: 1; background: rgb(255 255 255 / .12); }
.celebration-ribbon__close svg { width: 100%; height: 100%; display: block; }
.celebration-ribbon__preview {
  font-size: 11px; text-transform: uppercase; letter-spacing: .12em; padding: 2px 8px; border-radius: 3px;
  background: rgb(0 0 0 / .35);
}
.celebration-closed .celebration-ribbon { display: none; }

/* Valentine's: a silk ribbon – a soft sheen moving across */
.celebration--silk .celebration-ribbon::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / .22) 45%, rgb(255 255 255 / .06) 55%, transparent 70%);
  background-size: 250% 100%; animation: celebration-sheen 7s ease-in-out infinite;
}
@keyframes celebration-sheen { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }

/* Halloween: cobwebs in the top corners, a small spider on a thread */
.celebration-webs { position: relative; height: 0; z-index: 46; pointer-events: none; color: rgb(255 255 255 / .55); }
.celebration-web { position: absolute; top: 0; width: clamp(90px, 14vw, 170px); height: clamp(90px, 14vw, 170px); }
.celebration-web svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 1px 1px rgb(0 0 0 / .35)); }
.celebration-web--left { left: 0; }
.celebration-web--right { right: 0; transform: scaleX(-1); }
.celebration-spider { position: absolute; left: 40%; top: 32.5%; width: 18px; color: rgb(20 10 18 / .85);   /* hangs from a strand */
  display: flex; flex-direction: column; align-items: center; transform: translateX(-50%); }
.celebration-spider__thread { width: 1px; height: 34px; background: rgb(255 255 255 / .6); animation: celebration-thread 9s ease-in-out infinite; }
.celebration-spider svg { display: block; width: 100%; height: auto; margin-top: -2px; filter: drop-shadow(0 0 2px rgb(255 255 255 / .5)); }
@keyframes celebration-thread { 0%, 100% { height: 30px; } 50% { height: 70px; } }
.celebration-still .celebration-spider__thread { animation-play-state: paused; }

/* the skin's touches: links, selections and the footer edge take the celebration's colours */
.celebration ::selection { background: var(--flare-2); color: #fff; }
.celebration .site-footer { box-shadow: inset 0 3px 0 var(--celebration-accent, var(--accent)); }

/* effects layer (celebrations.js) – never in the way of clicks */
.celebration-effects { position: fixed; inset: 0; z-index: 45; pointer-events: none; }
.celebration-still .celebration-effects { display: none; }

@media (prefers-reduced-motion: reduce) {
  .celebration--silk .celebration-ribbon::before { animation: none; }
  .celebration-effects { display: none; }
  .celebration-spider__thread { animation: none; height: 46px; }
}
@media (max-width: 560px) {
  .celebration-ribbon { font-size: 13px; padding-right: 44px; }
  .celebration-ribbon__btn { display: none; }   /* phones: the close button is enough (effects are lighter there) */
}
@media print { .celebration-ribbon, .celebration-effects, .celebration-webs { display: none; } }