/* skoolly-magic.css — mouse effects shared by the marketing pages (used with assets/js/skoolly-magic.js). */
/* ─────────────────────────────────────────────
   MOUSE MAGIC: section spotlights, card tilt + glare, magnetic buttons, sparkle trail
───────────────────────────────────────────── */
.section, .cta-section { position: relative; overflow: clip; }
.section > .section-inner { position: relative; z-index: 1; }
.sk-spot { position: absolute; left: 0; top: 0; width: 620px; height: 620px; margin: -310px 0 0 -310px; border-radius: 50%;
  pointer-events: none; z-index: 0; opacity: 0; transition: opacity .6s ease; filter: blur(10px);
  background: radial-gradient(circle, hsla(var(--sh, 262), 90%, 66%, .20), hsla(calc(var(--sh, 262) + 60), 90%, 62%, .10) 40%, transparent 68%);
  transform: translate3d(var(--sx, 50vw), var(--sy, 200px), 0); }
.sk-spot.on { opacity: 1; }
.sk-glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(380px circle at var(--gx, 50%) var(--gy, 50%), var(--glare, rgba(139,92,246,.13)), transparent 48%); }
.sk-glare::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: radial-gradient(240px circle at var(--gx, 50%) var(--gy, 50%), #8B5CF6, #EC4899 30%, #F59E0B 52%, transparent 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.sk-tilt { transition: rotate .5s cubic-bezier(.2,.8,.2,1), translate .5s cubic-bezier(.2,.8,.2,1), box-shadow .35s; will-change: rotate; }
.sk-tilt.sk-hot { transition: rotate .08s linear, translate .3s cubic-bezier(.2,.8,.2,1), box-shadow .35s; box-shadow: 0 26px 60px -18px rgba(76,29,149,.32); }
.sk-tilt.sk-hot > .sk-glare { opacity: 1; }
.sk-mag { transition: translate .35s cubic-bezier(.2,.8,.2,1); }
.sk-spark { position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; font-size: 12px; line-height: 1;
  animation: skSpark .9s ease-out forwards; text-shadow: 0 0 8px currentColor; }
@keyframes skSpark {
  0%   { opacity: 1; transform: translate(var(--x0), var(--y0)) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translate(calc(var(--x0) + var(--dx)), calc(var(--y0) + var(--dy))) scale(.2) rotate(140deg); }
}