/* ════════════════════════════════════════════════════════════════════
   Glow.css — positioning contract ONLY.

   The element paints to a WebGL canvas that fills its own box; there
   is nothing here to style. These two rules exist so a bare <ds-glow>
   never collapses to zero height and never eats pointer events.

   ⛔ Do NOT add a CSS gradient fallback here. The engine ships its own
   (see ds-glow.js, data-fallback="css") and painting a second one in
   CSS would double the wash on capable hardware.
   ════════════════════════════════════════════════════════════════════ */

ds-glow, .ds-glow {
  display: block;
  pointer-events: none;
}

ds-glow > canvas, .ds-glow > canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Ambient breathe. Rides OPACITY on the element, never a re-render, so
   the dithered frame is reused and motion cannot reintroduce banding.
   Call sites gate this on their own ambient-motion setting. */
@keyframes ds-glow-breathe {
  0%, 100% { opacity: 0.82; }
  50%      { opacity: 1; }
}

.ds-glow--breathe {
  animation: ds-glow-breathe 26s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ds-glow--breathe { animation: none; opacity: 1; }
}