/* ============================================================
   EFFECTS — blur, shadows, glows, motion
   Glassmorphism is the whole game here: backdrop-blur over
   translucent fills, soft black drop shadows, and per-accent
   colored glows on active/hover.
   ============================================================ */

:root {
  /* ---- Backdrop blur (glass) ---- */
  --blur-md:  12px;   /* backdrop-blur-md (header) */
  --blur-xl:  24px;   /* backdrop-blur-xl (cards) */
  --blur-2xl: 40px;   /* backdrop-blur-2xl (hero / modal) */

  /* ---- Drop shadows (soft, deep, black) ---- */
  --shadow-card:  0 18px 80px rgba(0,0,0,0.32);
  --shadow-panel: 0 20px 80px rgba(0,0,0,0.24);
  --shadow-side:  0 16px 52px rgba(0,0,0,0.18);
  --shadow-modal: 0 30px 120px rgba(0,0,0,0.55);
  --shadow-header:0 16px 56px rgba(0,0,0,0.22);

  /* ---- Neutral active glow ---- */
  --glow-white:   0 0 28px rgba(255,255,255,0.045);
  --glow-white-strong: 0 0 30px rgba(255,255,255,0.08);

  /* ---- Per-accent glows (active subject tab) ---- */
  --glow-ai:      0 0 30px rgba(103,232,249,0.12);
  --glow-cyber:   0 0 30px rgba(196,181,253,0.12);
  --glow-physics: 0 0 30px rgba(125,211,252,0.12);
  --glow-chem:    0 0 30px rgba(110,231,183,0.12);
  --glow-math:    0 0 30px rgba(244,114,182,0.12);

  /* ---- Motion ---- */
  --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */ /* the house easing */
  --dur-fast:   300ms;  /* @kind other */ /* transition-all duration-300 */
  --dur-rise:   640ms;  /* @kind other */ /* panelRise */
  --dur-modal:  420ms;  /* @kind other */ /* modal in/out */
}

/* ---- Signature entrance ---- */
@keyframes panelRise {
  0%   { opacity: 0; transform: translateY(34px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes floatOrb {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(18px,-14px,0) scale(1.08); }
  100% { transform: translate3d(0,0,0) scale(1); }
}

@keyframes pulseCore {
  0%   { transform: translate(-50%,-50%) scale(0.92); opacity: 0.5; }
  50%  { transform: translate(-50%,-50%) scale(1.08); opacity: 0.8; }
  100% { transform: translate(-50%,-50%) scale(0.92); opacity: 0.5; }
}