/* Shared visual effects & premium utilities */

/* Subtle ambient grid overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 20% -10%, rgba(56, 189, 248, 0.12), transparent),
    radial-gradient(ellipse 60% 40% at 85% 5%, rgba(14, 165, 233, 0.08), transparent),
    radial-gradient(ellipse 50% 30% at 50% 100%, rgba(34, 197, 94, 0.04), transparent);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 48px 48px;
  mask: radial-gradient(ellipse 90% 80% at 50% 30%, black 20%, transparent 75%);
}

@media (max-width: 768px) {
  /* Drop expensive fixed paints on phones/tablets */
  body::before,
  body::after {
    display: none;
  }

  .glass-panel {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .glow-hover:hover {
    transform: none;
  }
}

@media (prefers-reduced-data: reduce) {
  body::before,
  body::after {
    display: none;
  }

  .glass-panel {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Quiz pages — cleaner background without grid */
body.quiz-page::before,
body.quiz-page::after {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

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

/* Premium glass panel */
.glass-panel {
  background: var(--gradient-card);
  border: 1px solid rgba(56, 189, 248, 0.14);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), var(--shadow-inset);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Card hover glow */
.glow-hover {
  transition: transform var(--duration) var(--ease-out),
              border-color var(--duration) var(--ease-out),
              box-shadow var(--duration) var(--ease-out);
}

.glow-hover:hover {
  transform: translateY(-4px);
  border-color: rgba(56, 189, 248, 0.45);
  box-shadow: var(--shadow-md), var(--shadow-glow);
}

/* Top accent line on cards */
.accent-top::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gradient-brand);
  opacity: 0;
  transition: opacity var(--duration) var(--ease-out);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.accent-top:hover::before {
  opacity: 1;
}

/* Shimmer on primary buttons */
.btn.primary,
.nav-links a.nav-cta {
  position: relative;
  overflow: hidden;
}

.btn.primary::after,
.nav-links a.nav-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.2) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform 0.6s var(--ease-out);
}

.btn.primary:hover::after,
.nav-links a.nav-cta:hover::after {
  transform: translateX(100%);
}

/* Stat number glow */
.stat-glow strong,
.stat-glow h4 {
  background: linear-gradient(135deg, var(--cyan) 0%, #67e8f9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Section accent line */
.section-accent h2::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin-top: 6px;
  background: var(--gradient-brand);
  border-radius: 2px;
}