/* eggs-w3b.css — W3-B easter eggs (2026-07-03).
 *
 * Vanilla, self-contained styles for the client eggs in eggs-w3b.js:
 *   - #w3bClippy       retro Clippy-style upsell mascot (CSS-drawn paperclip)
 *   - #w3bSparkleStorm konami-code sparkle storm canvas overlay
 *   - .marquee--turbo  a TOGGLE-ONLY override class for the bottom marquee (the
 *                      marquee's own definition is canon and untouched — we only
 *                      add an override class and toggle it, then remove it)
 *   - #w3bBsod         fake blue-screen-of-death prank overlay
 *
 * Everything is namespaced under `w3b` / a dedicated class so it can never
 * collide with the canon Netscape chrome. z-indexes sit above the frame.
 */

/* ---------- Clippy-style mascot ---------------------------------------- */
#w3bClippy {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 2147483000;
  width: 260px;
  max-width: calc(100vw - 36px);
  font-family: "MS Sans Serif", "Tahoma", "Segoe UI", system-ui, sans-serif;
  color: #000;
  transform: translateY(140%);
  opacity: 0;
  transition: transform .45s cubic-bezier(.2, 1.3, .5, 1), opacity .3s ease;
  pointer-events: none;
}
#w3bClippy.w3b-clippy--in {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

#w3bClippy .w3b-clippy__bubble {
  position: relative;
  background: #ffffe1;
  border: 1px solid #000;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .4);
  border-radius: 8px;
  padding: 12px 12px 10px;
  font-size: 13px;
  line-height: 1.4;
}
#w3bClippy .w3b-clippy__bubble::after {
  /* speech-bubble tail pointing down toward the paperclip */
  content: "";
  position: absolute;
  right: 34px;
  bottom: -9px;
  width: 14px;
  height: 14px;
  background: #ffffe1;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  transform: rotate(45deg);
}
#w3bClippy .w3b-clippy__close {
  position: absolute;
  top: 4px;
  right: 5px;
  width: 18px;
  height: 18px;
  line-height: 16px;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
  background: #c0c0c0;
  border: 2px outset #fff;
  color: #000;
  font-size: 12px;
}
#w3bClippy .w3b-clippy__close:active { border-style: inset; }

#w3bClippy .w3b-clippy__actions {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
#w3bClippy .w3b-clippy__cta {
  flex: 1 1 auto;
  padding: 6px 10px;
  cursor: pointer;
  background: #000080;
  color: #fff;
  border: 2px outset #6a6aff;
  font: inherit;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
}
#w3bClippy .w3b-clippy__cta:active { border-style: inset; }
#w3bClippy .w3b-clippy__never {
  flex: 0 0 auto;
  padding: 6px 8px;
  cursor: pointer;
  background: #c0c0c0;
  color: #000;
  border: 2px outset #fff;
  font: inherit;
  font-size: 11px;
}
#w3bClippy .w3b-clippy__never:active { border-style: inset; }

/* The CSS-drawn paperclip mascot below the bubble. */
#w3bClippy .w3b-clip {
  width: 54px;
  height: 74px;
  margin: 6px 30px -6px auto;
  position: relative;
  animation: w3b-clip-bob 2.4s ease-in-out infinite;
}
#w3bClippy .w3b-clip__wire {
  position: absolute;
  inset: 0;
  border: 6px solid #b8c0cc;
  border-radius: 26px;
  box-shadow: inset 0 0 0 2px #7d8794;
}
#w3bClippy .w3b-clip__inner {
  position: absolute;
  left: 16px;
  top: 12px;
  right: 16px;
  bottom: 22px;
  border: 6px solid #d3dae4;
  border-bottom: none;
  border-radius: 16px 16px 0 0;
}
#w3bClippy .w3b-clip__eye {
  position: absolute;
  top: 18px;
  width: 9px;
  height: 11px;
  background: #fff;
  border: 2px solid #222;
  border-radius: 50%;
}
#w3bClippy .w3b-clip__eye--l { left: 12px; }
#w3bClippy .w3b-clip__eye--r { right: 12px; }
#w3bClippy .w3b-clip__eye::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 3px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #111;
}
@keyframes w3b-clip-bob {
  50% { transform: translateY(-5px) rotate(-3deg); }
}

@media (prefers-reduced-motion: reduce) {
  #w3bClippy { transition: opacity .3s ease; transform: none; }
  #w3bClippy .w3b-clip { animation: none; }
}

/* ---------- Konami sparkle storm --------------------------------------- */
#w3bSparkleStorm {
  position: fixed;
  inset: 0;
  z-index: 2147482000;
  pointer-events: none;
}

/* ---------- Turbo marquee OVERRIDE (toggle-only) ----------------------- *
 * The bottom marquee's own animation is canon. We NEVER edit it. This class
 * is added to the SAME element by eggs-w3b.js for ~10s and then removed. It
 * only speeds up / recolors the scroll; the base rule is untouched.
 */
.bottom-marquee.marquee--turbo > div {
  animation-duration: 2.2s !important;
  color: #ff2d95 !important;
  text-shadow: 0 0 6px #ff2d95, 0 0 12px #00e5ff !important;
  font-weight: bold !important;
}

/* ---------- Fake BSOD prank -------------------------------------------- */
#w3bBsod {
  position: fixed;
  inset: 0;
  z-index: 2147483600;
  background: #0000aa;
  color: #fff;
  font-family: "Lucida Console", "Consolas", monospace;
  padding: 12vh 8vw;
  font-size: clamp(13px, 2.4vw, 18px);
  line-height: 1.6;
  cursor: default;
}
#w3bBsod .w3b-bsod__title {
  background: #c0c0c0;
  color: #0000aa;
  display: inline-block;
  padding: 0 10px;
  margin-bottom: 24px;
  font-weight: bold;
}
#w3bBsod .w3b-bsod__hint { margin-top: 32px; opacity: .9; }
#w3bBsod .w3b-bsod__cursor {
  display: inline-block;
  width: 9px;
  height: 1.1em;
  background: #fff;
  vertical-align: -2px;
  animation: w3b-blink 1s steps(1) infinite;
}
@keyframes w3b-blink { 50% { opacity: 0; } }