/* ==========================================================================
   The Alternatives — Effects: neon glow system (signature) [web]
   rgba(24,165,203,…) = cyan accent · rgba(152,23,147,…) = magenta accent
   Glow, not shadow, signals elevation. It only reads as light because almost
   nothing else is lit — see the "no glow on dense UI" rule in usage.md.
   ========================================================================== */

:root {
  --glow-neon:        0 0 20px rgba(24,165,203,0.2), 0 0 40px rgba(152,23,147,0.1);
  --glow-neon-hover:  0 0 30px rgba(24,165,203,0.25), 0 0 60px rgba(152,23,147,0.15);
  --glow-cyan:        0 0 20px rgba(24,165,203,0.2), 0 0 40px rgba(24,165,203,0.1);
  --glow-magenta:     0 0 20px rgba(152,23,147,0.2), 0 0 40px rgba(152,23,147,0.1);

  /* Neutral elevation (mobile dsShadows analog — subtle / medium) */
  --shadow-subtle: 0 1px 3px rgba(0,0,0,0.25);
  --shadow-medium: 0 8px 24px rgba(0,0,0,0.35);

  /* Standard transitions */
  --transition-opacity: opacity 150ms ease; /* @kind other */
  --transition-colors: color 150ms ease, background-color 150ms ease, border-color 150ms ease; /* @kind other */
}

/* --- Signature utility classes (mirrors web utilities) ------------------ */
.glow-neon        { box-shadow: var(--glow-neon); }
.glow-neon-hover:hover { box-shadow: var(--glow-neon-hover); }
.glow-cyan        { box-shadow: var(--glow-cyan); }
.glow-magenta     { box-shadow: var(--glow-magenta); }

/* Gradient-clipped text */
.text-gradient-neon {
  background: var(--gradient-neon);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* 2px gradient border (via padding-box / border-box mask) */
.border-gradient-neon {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--surface-card), var(--surface-card)) padding-box,
    var(--gradient-neon) border-box;
}

/* Surface metric card with cyan hover border */
.card-metric {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  transition: var(--transition-colors), box-shadow 150ms ease;
}
.card-metric:hover {
  border-color: var(--accent-primary);
  box-shadow: var(--glow-cyan);
}

/* --- Skeleton shimmer ---------------------------------------------------- */
/* A slow cyan-tinted sweep, not a pulse: on a dark surface a pulse reads as a
   glow, and glow means "live" in this system. Respects reduced motion. */
.ta-skeleton {
  background: linear-gradient(90deg, var(--tint-hairline) 0%, var(--tint-cyan-12) 50%, var(--tint-hairline) 100%);
  background-size: 200% 100%;
  animation: ta-skeleton-sweep 1.6s ease-in-out infinite;
}
@keyframes ta-skeleton-sweep {
  0% { background-position: 150% 0; }
  100% { background-position: -50% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ta-skeleton { animation: none; background: var(--tint-hairline); }
}

/* 3D flip helpers */
.perspective-1000 { perspective: 1000px; }
.transform-style-preserve-3d { transform-style: preserve-3d; }
.backface-hidden { backface-visibility: hidden; }
.rotate-y-180 { transform: rotateY(180deg); }