/* ═══════════════════════════════════════════════════════════════════════════
   fx-drips — drool on the furniture.

   A row of drawn drips hangs off the bottom rule of each marquee, and every
   8–11s one drop gathers on a tip and falls. The drips are a single 360px
   SVG tile repeated with <pattern>; the drops are three tiny SVGs parked on
   three of its tips, all on one 27s clock with different delays, so no two
   fall together and no JS timer is involved.

   The marquee is overflow:hidden and masked, so the row can't live inside
   it. It's a zero-height sibling straight after each marquee, painted over
   the top of whatever section follows. Markup: see the fx-drips report.
   ═══════════════════════════════════════════════════════════════════════════ */

.drips {
  --drip-fill: var(--drool);
  position: relative; height: 0;
  /* above the section it hangs into (positioned, z auto), well under the
     sticky header (60). Nothing here is clickable, so let clicks fall
     through to the eyebrow and cards underneath. */
  z-index: 2;
  pointer-events: none;
}
/* the black marquee drools pink — same as the mouth in the drawing */
.drips--brain { --drip-fill: var(--brain); }

/* ── the drips ────────────────────────────────────────────────────────────── */
.drips__svg {
  position: absolute; left: 0;
  /* tucked 1px up under the marquee's rule; the tile's ink band at y=0
     merges with it and closes any sub-pixel seam between the two boxes. */
  top: -1px;
  width: 100%; height: 57px;
}
.drips__band { fill: var(--ink); }
.drips__fill { fill: var(--drip-fill); }
.drips__ink {
  fill: none; stroke: var(--ink);
  stroke-width: var(--rule-thin);
  stroke-linecap: round; stroke-linejoin: round;
}
/* the wet sheen: a hairline of paper inside the bulbs and under the rule */
.drips__wet {
  fill: none; stroke: var(--paper);
  stroke-width: 1.1; stroke-linecap: round;
  opacity: .7;
}

/* ── the drops ────────────────────────────────────────────────────────────── */
.drips__drop {
  position: absolute;
  width: 12px; height: auto;
  overflow: visible;
  /* grows out from under the bulb, so the origin is the point that's hidden */
  transform-origin: 50% 0;
  /* resting state — invisible. This is also the whole story with JS off or
     under reduced motion: the drips stay, nothing ever falls. */
  transform: scale(.3);
  opacity: 0;
}
.drips__drop path { stroke-linejoin: round; stroke-linecap: round; }
.drips__drop-body { fill: var(--drip-fill); stroke: var(--ink); stroke-width: 1.5; }

/* Each drop sits on a tip of the tile: left = a tile origin + tip x − half
   the drop, top = tip y − the 5px it starts hidden under the bulb.
   round() snaps a fraction of the row width DOWN to a tile boundary, so the
   three are spread across the row at any width and still land on a tip.
   The plain px line before each is the fallback (tile 0) where round()
   isn't understood — same tips, just all in the first 360px. */
.drips__drop--a { top: 44px; left: 230px;   left: calc(round(down, 45%, 360px) + 230px); }
.drips__drop--b { top: 28px; left: 134.5px; left: calc(round(down, 15%, 360px) + 134.5px); width: 11px; }
.drips__drop--c { top: 14px; left: 307px;   left: calc(round(down, 70%, 360px) + 307px);   width: 10px; }

@media (prefers-reduced-motion: no-preference) {
  /* one shared 27s clock; the delays are uneven on purpose so the gaps run
     8s, 11s, 8s rather than a metronome. Paused until fx-drips.js says the
     row is near the viewport and the tab is visible. */
  .drips__drop   { animation: drips-drop 27s linear infinite paused; }
  .drips__drop--a { animation-delay: 4s; }
  .drips__drop--b { animation-delay: 12s; }
  .drips__drop--c { animation-delay: 23s; }
  .drips.is-live .drips__drop {
    animation-play-state: running;
    will-change: transform, opacity;
  }
}

/* gather (0–6.5%, ~1.8s): swell out from under the bulb.
   fall   (6.5–11%, ~1.2s): ease-in like something viscous letting go,
                             stretching a little, gone before it reaches any text.
   rest   (11–100%): nothing, until the next lap. */
@keyframes drips-drop {
  0%    { transform: translateY(0) scale(.3);           opacity: 0; animation-timing-function: ease-out; }
  1.5%  { transform: translateY(0) scale(.42);          opacity: 1; animation-timing-function: cubic-bezier(.35, .5, .45, 1); }
  6.5%  { transform: translateY(1.5px) scale(1);        opacity: 1; animation-timing-function: cubic-bezier(.55, 0, .9, .3); }
  9%    { opacity: 1; animation-timing-function: linear; }
  11%   { transform: translateY(var(--drips-fall, 120px)) scale(.9, 1.3);  opacity: 0; }
  11.01%, 100% { transform: translateY(0) scale(.3);    opacity: 0; }
}