/* styles/fun-fact-widget.css — floating fun-fact icon + speech bubble, shown on
   every public page via js/components/fun-fact-widget.js */

/* A clean, minimal sans-serif for the fun-fact text — dropped the 8-bit
   pixel-font look in favor of plain black text, legible on its own without
   an outline/shadow trick to fight for contrast. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300&display=swap');

.fun-fact-widget {
  position: fixed;
  right: var(--space-5);
  /* --fun-fact-footer-offset (set by js/components/fun-fact-widget.js as the
     footer scrolls into view) pushes the widget up so it settles just above
     the footer instead of sliding over its text, then holds that position
     once the page hits max scroll. */
  bottom: calc(var(--space-5) + var(--fun-fact-footer-offset, 0px));
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
}

.fun-fact-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.8);
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.75rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: transform var(--transition-fast), background-color var(--transition-fast);
}

.fun-fact-icon:hover {
  background-color: var(--color-primary-dark);
  transform: scale(1.05);
}

/* No card/speech-bubble chrome by design — just plain text floating over
   whatever's behind it. */
.fun-fact-bubble {
  position: relative;
  max-width: 240px;
  padding: var(--space-1) var(--space-2);
  text-align: right;
}

.fun-fact-bubble p {
  margin: 0;
  color: #595959;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.85rem;
  line-height: 1.1;
  text-wrap: balance;
  text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.55);
  opacity: 1;
  cursor: pointer;
  transition: opacity 350ms ease, transform 90ms ease;
}

.fun-fact-bubble p.is-fading {
  opacity: 0;
}

/* Dismiss sequence: a quick press-down for feedback... */
#fun-fact-text.is-pressed {
  transform: scale(0.92);
}

/* ...then the text itself vanishes instantly (no fade) — it "popped" — while
   .fun-fact-pop-fx plays a small bubble-burst ring in its place below. */
#fun-fact-text.is-gone {
  opacity: 0;
  transform: scale(0.92);
  transition: none;
}

.fun-fact-bubble {
  transition: opacity 250ms ease;
}

.fun-fact-bubble.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* A tiny 8-bit-style burst where the text just vanished — 6 round black
   dots scattering outward in a radial ring, like a dandelion head blowing
   apart, still jumping in sharp discrete steps (steps() timing) rather than
   easing smoothly, to keep the chunky "sprite" feel. Split the difference
   between dead-center and hugging the page edge. */
.fun-fact-pop-fx {
  position: absolute;
  top: 50%;
  right: 30%;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  border-radius: 50%;
  background: #000;
  opacity: 0;
  pointer-events: none;
  box-shadow:
    0 0 0 0 #000,
    0 0 0 0 #000,
    0 0 0 0 #000,
    0 0 0 0 #000,
    0 0 0 0 #000,
    0 0 0 0 #000;
}

@keyframes fun-fact-pop-fx {
  0% {
    opacity: 1;
    box-shadow:
      0 0 0 0 #000,
      0 0 0 0 #000,
      0 0 0 0 #000,
      0 0 0 0 #000,
      0 0 0 0 #000,
      0 0 0 0 #000;
  }
  100% {
    opacity: 0;
    box-shadow:
      14px 0 0 0 #000,
      7px 12px 0 0 #000,
      -7px 12px 0 0 #000,
      -14px 0 0 0 #000,
      -7px -12px 0 0 #000,
      7px -12px 0 0 #000;
  }
}

.fun-fact-pop-fx.is-active {
  animation: fun-fact-pop-fx 400ms steps(4) forwards;
}

@media (max-width: 640px) {
  .fun-fact-widget {
    right: var(--space-4);
    bottom: calc(var(--space-4) + var(--fun-fact-footer-offset, 0px));
  }
  .fun-fact-bubble {
    max-width: 220px;
  }
}