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

.glow-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glow-inset);
  backdrop-filter: var(--blur-card);
  -webkit-backdrop-filter: var(--blur-card);
}

@supports not (backdrop-filter: blur(1px)) {
  .glow-card { background: rgba(25, 25, 30, 0.95); }
}

.ambient-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 30%, rgba(92, 69, 255, 0.22), transparent 70%),
    radial-gradient(ellipse 40% 30% at 50% 60%, rgba(152, 67, 255, 0.12), transparent 70%);
}

.grid-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 80%);
}

:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 3px;
  border-radius: 4px;
}

.is-revealed {
  opacity: 1 !important;
  transform: none !important;
}
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms ease, transform 600ms ease;
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}