/* ============================================
   MOTION GLOW — Ambient Light Overlay Asset
   Version: 3.0.0

   Variants:
   - has-glow                White single glow
   - has-glow--soft          Smaller, slower, subtler
   - has-glow--cool          Blue single glow
   - has-glow--cool-trail    Blue glow with trailing smear (12 points)
   - has-glow--warm          Gold single glow
   - has-glow--intense       Large bright glow for dark bgs
   - has-glow--disk          Logo quarter-disk waaier (sharp disks + glow trail)
   ============================================ */

:root {
  /* --- Single glow tokens --- */
  --glow-color: 255, 255, 255;
  --glow-size: 600px;
  --glow-opacity: 0.65;
  --glow-blur: 120px;
  --glow-speed: 1.08;
  --glow-overlay-bg: linear-gradient(110deg, #ffffffe0, #d3c397f5 18%, hsla(0, 0%, 10.98%, 0.5));
  /* --glow-overlay-bg: linear-gradient(110deg, #ffffffe0, #90aac4ef 18%, hsla(0, 0%, 10.98%, 0.5)); */
  /* --glow-overlay-bg: linear-gradient(to right, #ffffffe0, #90aac4ef 20%, #5d7287); */
  /* --glow-overlay-bg: linear-gradient(to right, #ffffffe0, #90aac4ef 20%, #7eb3e8); */
  /* --glow-overlay-bg: linear-gradient(to right, #ffffffe0, #90aac4ef 20%, #22568a); */

  /* --- Trail tokens (cool-trail) --- */
  --glow-trail-count: 12;
  --glow-trail-size-decay: 0.82;
  --glow-trail-opacity-decay: 0.65;
  --glow-trail-speed-decay: 0.65;
  --glow-trail-blur-step: 12;

  /* --- Disk tokens (disk variant) --- */
  --disk-size: 80px;
  --disk-blur: 1px;
  --disk-speed: 0.018;
  --disk-speed-decay: 0.55;
  --disk-rotation-lerp: 0.03;
  --disk-rest-angle: -135deg;
  --disk-color-front: rgba(195, 215, 245, 0.103);
  --disk-color-mid: rgba(130, 165, 220, 0.089);
  --disk-color-back: rgba(45, 90, 175, 0.096);
  --disk-rest-offset-x: 30px;
  --disk-rest-offset-y: 28px;

  /* --- Disk ghost/glow trail tokens --- */
  --disk-ghost-count: 5;
  --disk-ghost-size: 200px;
  --disk-ghost-size-grow: 0.12;
  --disk-ghost-opacity-decay: 0.55;
  --disk-ghost-speed-decay: 0.58;
  --disk-ghost-blur-base: 14px;
  --disk-ghost-blur-step: 12px;
  --disk-ghost-color-front: rgba(195, 215, 245, 0.075);
  --disk-ghost-color-mid: rgba(130, 165, 220, 0.062);
  --disk-ghost-color-back: rgba(45, 90, 175, 0.048);
}


/* ----- Base Setup ----- */
.has-glow {
  position: relative;
  overflow: hidden;
}

.has-glow .glow-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--glow-overlay-bg);
}

.has-glow > *:not(.glow-layer) {
  position: relative;
  z-index: 2;
}


/* ----- Single Glow ----- */
.has-glow:not(.has-glow--cool-trail):not(.has-glow--disk) .glow-layer::after {
  content: '';
  position: absolute;
  width: var(--glow-size);
  height: var(--glow-size);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(var(--glow-color), var(--glow-opacity)) 0%,
    rgba(var(--glow-color), calc(var(--glow-opacity) * 0.4)) 35%,
    rgba(var(--glow-color), 0) 70%
  );
  filter: blur(var(--glow-blur));
  transform: translate(-50%, -50%);
  top: var(--glow-y, 50%);
  left: var(--glow-x, 50%);
  transition: opacity 0.4s ease;
  will-change: top, left;
}


/* ----- Trail Variant ----- */
.has-glow--cool-trail .glow-layer::after { display: none; }
.has-glow--cool-trail .glow-point {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  will-change: top, left;
}


/* ----- Disk Variant ----- */
.has-glow--disk .glow-layer::after { display: none; }
.has-glow--disk .disk-quarter,
.has-glow--disk .disk-ghost {
  position: absolute;
  transform-origin: center center;
  will-change: transform;
}


/* ============================================
   SINGLE GLOW VARIANTS
   ============================================ */

.has-glow--soft {
  --glow-size: 400px;
  --glow-opacity: 0.08;
  --glow-blur: 160px;
  --glow-speed: 0.04;
}

.has-glow--cool {
  --glow-color: 180, 210, 255;
  --glow-opacity: 0.12;
  --glow-blur: 140px;
}

.has-glow--cool-trail {
  --glow-color: 180, 210, 255;
  --glow-size: 500px;
  --glow-opacity: 0.12;
  --glow-blur: 100px;
  --glow-speed: 0.03;
}

.has-glow--warm {
  --glow-color: 255, 220, 160;
  --glow-opacity: 0.10;
  --glow-blur: 130px;
}

.has-glow--intense {
  --glow-size: 800px;
  --glow-opacity: 0.25;
  --glow-blur: 100px;
  --glow-speed: 0.06;
}


/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  :root {
    --disk-size: 60px;
    --disk-ghost-size: 85px;
    --disk-rest-offset-x: 20px;
    --disk-rest-offset-y: 18px;
  }

  .has-glow:not(.has-glow--cool-trail):not(.has-glow--disk) .glow-layer::after {
    width: calc(var(--glow-size) * 0.6);
    height: calc(var(--glow-size) * 0.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .has-glow:not(.has-glow--cool-trail):not(.has-glow--disk) .glow-layer::after {
    top: 50% !important;
    left: 50% !important;
    opacity: 0.5;
  }
  .has-glow--cool-trail .glow-point {
    top: 50% !important;
    left: 50% !important;
  }
  .has-glow--disk .disk-quarter,
  .has-glow--disk .disk-ghost {
    transition: none !important;
  }
}