/* Christmas Love glow: the slow color motion behind pine and burgundy panels — a house motif, like the gold
   hairline frames. Add class="cl-glow" (or data-cl-glow on the Design Component homepage) to any dark panel.
   Two GPU-only layers: drifting aurora light (transform) and an occasional gold sheen. Respects reduced motion. */
.cl-glow, [data-cl-glow] {
  --glow-base: #173c29;
  --glow-a: rgba(139, 36, 50, .55);   /* burgundy ember */
  --glow-b: rgba(212, 175, 55, .30);  /* warm gold */
  --glow-c: rgba(64, 120, 78, .55);   /* lit pine */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--glow-base);
}
.cl-glow::before, [data-cl-glow]::before {
  content: "";
  position: absolute;
  inset: -45%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38% 42% at 22% 30%, var(--glow-c), transparent 70%),
    radial-gradient(34% 40% at 78% 24%, var(--glow-a), transparent 70%),
    radial-gradient(30% 36% at 62% 78%, var(--glow-b), transparent 72%),
    radial-gradient(40% 44% at 18% 82%, var(--glow-a), transparent 70%);
  filter: blur(18px) saturate(115%);
  animation: clGlowDrift 26s ease-in-out infinite alternate;
  will-change: transform;
}
.cl-glow::after, [data-cl-glow]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(244, 215, 123, .13) 48%, rgba(255, 246, 220, .2) 50%, rgba(244, 215, 123, .13) 52%, transparent 62%);
  transform: translateX(-120%);
  animation: clGlowSheen 11s ease-in-out 2s infinite;
}
.cl-glow.is-burgundy, .closing.cl-glow {
  --glow-base: #7d1f2c;
  --glow-a: rgba(30, 63, 32, .55);
  --glow-b: rgba(212, 175, 55, .28);
  --glow-c: rgba(176, 52, 66, .6);
}
@keyframes clGlowDrift {
  0%   { transform: translate3d(-6%, -4%, 0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(5%, 3%, 0) rotate(8deg) scale(1.08); }
  100% { transform: translate3d(-2%, 6%, 0) rotate(-6deg) scale(1.02); }
}
@keyframes clGlowSheen {
  0%, 55% { transform: translateX(-120%); }
  85%, 100% { transform: translateX(120%); }
}
@media (prefers-reduced-motion: reduce) {
  .cl-glow::before, [data-cl-glow]::before { animation: none; transform: none; }
  .cl-glow::after, [data-cl-glow]::after { display: none; }
}