/* libgimmick runtime: what every gimmick shares. Loaded only while one is on.
   Plain CSS over DaisyUI variables, never Tailwind classes, so it works on any
   site's theme and no site's Tailwind build can purge it. */

/* The overlay: one fixed layer over the page that nothing can touch or read.
   Below the header (z 50 on our sites), dialogs and toasts; the consent banner
   is a <dialog> in the top layer, so it is always above. */
html[data-gimmick] .gimmick-layer {
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}
html[data-gimmick] .gimmick-layer * { pointer-events: none; }

/* The back layer: behind the page's content - under its text, cards and
   pictures - for a Heavy gimmick's background effects. A negative z-index
   in the root stacking context paints over the page's background and under
   everything in it. */
html[data-gimmick] .gimmick-back {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}
html[data-gimmick] .gimmick-back * { pointer-events: none; }

/* Anchors: an accessory hangs off the element by ::before or ::after. A site
   rule that positions the element wins - :where() has no specificity. */
:where(html[data-gimmick]) :where([data-gimmick-anchor]) { position: relative; }

/* Nothing moves until the page has loaded, or while the tab is hidden. */
html[data-gimmick]:not([data-gimmick-ready]) :is(.gimmick-layer, .gimmick-back),
html[data-gimmick]:not([data-gimmick-ready]) :is(.gimmick-layer, .gimmick-back) *,
html[data-gimmick][data-gimmick-paused] :is(.gimmick-layer, .gimmick-back),
html[data-gimmick][data-gimmick-paused] :is(.gimmick-layer, .gimmick-back) * {
  animation-play-state: paused !important;
}

/* Reduced motion: decoration stays, movement stops - enforced here for every
   gimmick, whatever its own CSS says. Its still state is its own CSS's
   prefers-reduced-motion block. */
@media (prefers-reduced-motion: reduce) {
  html[data-gimmick] :is(.gimmick-layer, .gimmick-back),
  html[data-gimmick] :is(.gimmick-layer, .gimmick-back) *,
  html[data-gimmick] [data-gimmick-anchor]::before,
  html[data-gimmick] [data-gimmick-anchor]::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Hidden by the visitor: every bit of decoration goes. */
html[data-gimmick][data-gimmick-hidden] .gimmick-layer,
html[data-gimmick][data-gimmick-hidden] .gimmick-back,
html[data-gimmick][data-gimmick-hidden] [data-gimmick-anchor]::before,
html[data-gimmick][data-gimmick-hidden] [data-gimmick-anchor]::after {
  display: none !important;
}
html[data-gimmick][data-gimmick-hidden] [data-gimmick-anchor] { background-image: none; }

/* Hide decorations: the one thing a visitor can press. Small, out of the
   way, keyboard-reachable, labelled. */
html[data-gimmick] .gimmick-hide {
  position: fixed;
  left: 0.75rem;
  bottom: 0.75rem;
  z-index: 41;
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--color-base-content, #1f2937) 22%, transparent);
  background: var(--color-base-100, #ffffff);
  color: var(--color-base-content, #1f2937);
  opacity: 0.7;
  cursor: pointer;
}
html[data-gimmick] .gimmick-hide svg { display: block; }
@media (max-width: 640px) {
  html[data-gimmick] .gimmick-hide { left: 0.5rem; bottom: 0.5rem; width: 1.75rem; height: 1.75rem; opacity: 0.6; }
  html[data-gimmick] .gimmick-hide svg { width: 14px; height: 14px; }
}
html[data-gimmick] .gimmick-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
html[data-gimmick] .gimmick-hide:hover { opacity: 1; }
html[data-gimmick] .gimmick-hide:focus-visible {
  outline: 2px solid var(--color-primary, #2563eb);
  outline-offset: 2px;
  opacity: 1;
}
html[data-gimmick] .gimmick-hide .gimmick-hide-off { display: none; }
html[data-gimmick][data-gimmick-hidden] .gimmick-hide .gimmick-hide-on { display: none; }
html[data-gimmick][data-gimmick-hidden] .gimmick-hide .gimmick-hide-off { display: contents; }
html[data-gimmick] .gimmick-hide .gimmick-hide-on { display: contents; }
@media print {
  html[data-gimmick] .gimmick-layer, html[data-gimmick] .gimmick-back, html[data-gimmick] .gimmick-hide { display: none !important; }
}