/* ============================================================
   VIDEOHUB SECTION — animated Three.js math-formula background
   Keeps the section's existing background untouched; only adds
   a transparent WebGL layer of drifting maths symbols/formulas
   (π, ∑, √, ∫, a²+b²=c², E=mc² ...) that react to the cursor.
   All glyphs share the site's official "Mathematics" subject
   colour (--subj-math) so the effect reads as one clean set.
   ============================================================ */

.section-videohub-formula {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

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

/* Keep real content above the canvas */
.section-videohub-formula > .container {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .videohub-formula-canvas { opacity: .55; }
}

@media (max-width: 767.98px) {
  .videohub-formula-canvas { opacity: .8; }
}