/* Reusable fill: the host keeps its existing mask and layout. Only this child rotates. */
[data-watercolor] { position: relative; isolation: isolate; }
[data-watercolor].watercolor-ready { background-color: var(--watercolor-base, #f4f5f6); }
.watercolor-fill {
  position: absolute; display: block; pointer-events: none; left: 50%; top: 50%;
  width: var(--watercolor-diagonal); height: var(--watercolor-diagonal);
  background: var(--watercolor-image) center / cover no-repeat;
  opacity: clamp(0%, var(--watercolor-opacity, 88%), 100%);
  mix-blend-mode: var(--watercolor-blend, normal);
  transform-origin: center; transform: translate(-50%, -50%) rotate(0deg);
  animation: watercolor-turn max(20s, var(--watercolor-period, 180s)) linear infinite;
  animation-play-state: var(--watercolor-play-state, running);
}
[data-watercolor][data-watercolor-paused="true"] > .watercolor-fill,
[data-watercolor]:hover > .watercolor-fill,
[data-watercolor]:focus-within > .watercolor-fill { animation-play-state: paused; }
@keyframes watercolor-turn {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .watercolor-fill { animation-play-state: paused !important; }
}
@media (forced-colors: active) {
  .watercolor-fill { display: none; }
  [data-watercolor].watercolor-ready { background-color: LinkText; forced-color-adjust: none; }
}
/* Reuse the existing Parameters Tool chrome for the two keyword controls. */
#param-tool select[data-select-var] { width: 100%; font: inherit; color: inherit; background: #292727; border: 1px solid #777; border-radius: 4px; padding: 5px; }

[data-watercolor="hero"] { --watercolor-image: var(--watercolor-hero-image); }
[data-watercolor="sticky"] { --watercolor-image: var(--watercolor-sticky-image); }
/* Keep the compact wordmark readable over scrolled copy using the existing page ground. */
.sticky-nav:has([data-watercolor]) { background-color: var(--bg-black); }

[data-watercolor="hero"] {
  --watercolor-base: var(--watercolor-hero-base);
  --watercolor-opacity: var(--watercolor-hero-opacity);
  --watercolor-period: var(--watercolor-hero-period);
  --watercolor-blend: var(--watercolor-hero-blend);
  --watercolor-play-state: var(--watercolor-hero-play-state);
}

[data-watercolor="sticky"] {
  --watercolor-base: var(--watercolor-sticky-base);
  --watercolor-opacity: var(--watercolor-sticky-opacity);
  --watercolor-period: var(--watercolor-sticky-period);
  --watercolor-blend: var(--watercolor-sticky-blend);
  --watercolor-play-state: var(--watercolor-sticky-play-state);
}