/* ============================================================
   HOLOGRAPHIC DEVICE GLOW
   ============================================================
   Two-layer holographic light radiating from the device shell.
   Layer 1 (::before) — tight prismatic ring, screen-blended
   Layer 2 (::after)  — wide bloom halo, counter-rotating

   TO REVERT: remove <link rel="stylesheet" href="css/aurora-bg.css">
   ============================================================ */

@property --glow-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@property --bloom-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}


/* --- Layer 1: Tight prismatic ring (screen blend) --- */
.cd-device::before {
  content: '';
  position: absolute;
  inset: 14px -8px 12px -8px;
  border-radius: 32px;
  z-index: -1;
  pointer-events: none;
  background: conic-gradient(
    from var(--glow-angle) at 50% 50%,
    #c084fc,
    #a78bfa,
    #93c5fd,
    #67e8f9,
    #6ee7b7,
    #86efac,
    #fcd34d,
    #fdba74,
    #fca5a5,
    #f9a8d4,
    #d8b4fe,
    #c084fc
  );
  filter: blur(20px);
  opacity: 0.7;
  animation:
    glow-spin 8s linear infinite,
    glow-breathe 4s ease-in-out infinite;
}

/* --- Layer 2: Wide bloom halo (counter-rotating) --- */
.cd-device::after {
  content: '';
  position: absolute;
  inset: 6px -18px 4px -18px;
  border-radius: 44px;
  z-index: -2;
  pointer-events: none;
  background: conic-gradient(
    from var(--bloom-angle) at 50% 50%,
    #d8b4fe,
    #a5b4fc,
    #7dd3fc,
    #5eead4,
    #86efac,
    #fde68a,
    #fed7aa,
    #fecaca,
    #fbcfe8,
    #d8b4fe
  );
  filter: blur(50px);
  opacity: 0.55;
  animation:
    bloom-spin 12s linear infinite,
    bloom-breathe 6s ease-in-out infinite;
}

/* --- Keyframes --- */
@keyframes glow-spin {
  to { --glow-angle: 360deg; }
}

@keyframes glow-breathe {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 0.8; }
}

/* Counter-rotate for dynamic color mixing */
@keyframes bloom-spin {
  to { --bloom-angle: -360deg; }
}

@keyframes bloom-breathe {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.65; }
}

/* --- Mobile --- */
@media (max-width: 480px) {
  .cd-device::before {
    inset: 10px -6px 6px -6px;
    border-radius: 26px;
    filter: blur(14px);
  }
  .cd-device::after {
    inset: 4px -12px 2px -12px;
    border-radius: 34px;
    filter: blur(35px);
  }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .cd-device::before,
  .cd-device::after {
    animation: none;
    opacity: 0.5;
  }
}