/* ============================================================
   FEATURED COURSES — animated Three.js science/math symbols bg
   ============================================================ */

.section-symbols {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(900px 520px at 12% -10%, color-mix(in srgb, var(--s21-secondary) 22%, transparent), transparent 60%),
    radial-gradient(1000px 600px at 105% 110%, color-mix(in srgb, var(--s21-accent) 18%, transparent), transparent 55%),
    linear-gradient(160deg, var(--s21-primary-dark) 0%, var(--s21-primary) 52%, #063b2a 100%);
}

/* Canvas host sits behind the content, fills the whole section */
.symbols-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none; /* let clicks/hover pass through to cards */
}
.symbols-canvas canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Faint grid + vignette layered above the WebGL canvas for depth */
.section-symbols::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(color-mix(in srgb, #fff 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, #fff 6%, transparent) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 40%, transparent 90%);
  opacity: .35;
}
.section-symbols::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  box-shadow: inset 0 0 140px color-mix(in srgb, #042c1f 55%, transparent);
}

/* Keep real content above the canvas + overlays */
.section-symbols > .container {
  position: relative;
  z-index: 2;
}

/* Light-on-dark text treatment for the section head, scoped to this section */
.section-symbols .section-head .eyebrow {
  background: color-mix(in srgb, #fff 16%, transparent);
  color: #fff;
  border: 1px solid color-mix(in srgb, #fff 24%, transparent);
  backdrop-filter: blur(4px);
}
.section-symbols .section-head h2 {
  color: #fff;
  text-shadow: 0 2px 18px color-mix(in srgb, #042c1f 60%, transparent);
}
[data-theme="dark"] .section-symbols .section-head h2,
.dark-mode .section-symbols .section-head h2 { color: #fff; }

.section-symbols .text-center a.btn-s21-primary {
  background: var(--s21-secondary);
  color: #3D2B00;
  box-shadow: 0 10px 26px color-mix(in srgb, #000 30%, transparent);
}
.section-symbols .text-center a.btn-s21-primary:hover {
  background: var(--s21-secondary-dark);
  color: #3D2B00;
}

@media (max-width: 767.98px) {
  .section-symbols::before { background-size: 34px 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .symbols-canvas { opacity: .6; }
}