aragrp/styles/design-system/glow.css

@layer utilities {
  .bg-glow-primary {
    background-image: radial-gradient(
      circle at center,
      var(--brand-glow),
      transparent 70%
    );
  }

  /* Brand neon rims — buttons / cards / media frames */
  .shadow-glow-sm {
    box-shadow: var(--elevation-glow-sm);
  }

  .shadow-glow-primary {
    box-shadow: var(--elevation-glow-md);
  }

  .shadow-glow-lg {
    box-shadow: var(--elevation-glow-lg);
  }

  .shadow-glow-media {
    box-shadow: var(--elevation-glow-media);
  }

  /* Shared media frame: border + neon (images / screenshots) */
  .media-frame {
    border-width: 1px;
    border-style: solid;
    border-color: var(--surface-border);
    box-shadow: var(--elevation-glow-media);
    transition:
      border-color 200ms ease-out,
      box-shadow 200ms ease-out;
  }

  .media-frame:hover {
    border-color: color-mix(in srgb, var(--primary) 35%, transparent);
    box-shadow: var(--elevation-glow-lg);
  }

  .dark .media-frame:hover {
    border-color: color-mix(in srgb, var(--primary) 45%, transparent);
  }

  /* Decorative glow orbs — use inside .section-decor only */
  .glow-orb {
    border-radius: 9999px;
    pointer-events: none;
  }

  .glow-orb--primary-faint {
    background-image: radial-gradient(
      circle,
      var(--glow-orb-primary-faint),
      transparent var(--glow-orb-fade)
    );
  }

  .glow-orb--primary-soft {
    background-image: radial-gradient(
      circle,
      var(--glow-orb-primary-soft),
      transparent var(--glow-orb-fade)
    );
  }

  .glow-orb--primary-muted {
    background-image: radial-gradient(
      circle,
      var(--glow-orb-primary-muted),
      transparent var(--glow-orb-fade)
    );
  }

  .glow-orb--primary-md {
    background-image: radial-gradient(
      circle,
      var(--glow-orb-primary-md),
      transparent 60%
    );
  }

  .glow-orb--primary {
    background-image: radial-gradient(
      circle,
      var(--glow-orb-primary),
      transparent var(--glow-orb-fade)
    );
  }

  .glow-orb--primary-strong {
    background-image: radial-gradient(
      circle,
      var(--glow-orb-primary-strong),
      transparent var(--glow-orb-fade)
    );
  }

  .glow-orb--secondary-soft {
    background-image: radial-gradient(
      circle,
      var(--glow-orb-secondary-soft),
      transparent 65%
    );
  }

  .glow-orb--secondary {
    background-image: radial-gradient(
      circle,
      var(--glow-orb-secondary),
      transparent var(--glow-orb-fade)
    );
  }

  .glow-orb--secondary-strong {
    background-image: radial-gradient(
      circle,
      var(--glow-orb-secondary-strong),
      transparent 64%
    );
  }

  .glow-orb--cta-end {
    background-image: radial-gradient(
      circle at 100% 50%,
      var(--glow-orb-cta-end),
      transparent 60%
    );
  }

  .glow-orb--center {
    background-image: radial-gradient(
      circle at 50% 40%,
      var(--glow-orb-center),
      transparent 55%
    );
  }

  /* Legacy hero beam accents (Tailark import) */
  .glow-beam--1 {
    background-image: radial-gradient(
      68.54% 68.72% at 55.02% 31.46%,
      hsl(0 0% 85% / 0.08) 0%,
      hsl(0 0% 55% / 0.02) 50%,
      hsl(0 0% 45% / 0) 80%
    );
  }

  .glow-beam--2 {
    background-image: radial-gradient(
      50% 50% at 50% 50%,
      hsl(0 0% 85% / 0.06) 0%,
      hsl(0 0% 45% / 0.02) 80%,
      transparent 100%
    );
  }

  .glow-beam--3 {
    background-image: radial-gradient(
      50% 50% at 50% 50%,
      hsl(0 0% 85% / 0.04) 0%,
      hsl(0 0% 45% / 0.02) 80%,
      transparent 100%
    );
  }
}