/* ============================================================
   vm-magic-bento.css
   Visual layer for the MagicBento-style interactions.
   Uses --cyan-rgb (live theme color) so it adapts to all 4 themes.
   ============================================================ */

/* ---- shared CSS vars on each card ---- */
.mb-card {
  --glow-x: 50%;
  --glow-y: 50%;
  --glow-intensity: 0;
  --glow-radius: 220px;
  /* allow particles + ripple to live inside the card */
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform;
  transition: box-shadow .35s ease,
              border-color .35s ease;
}

/* ---- border-glow ring (radial gradient masked to a padding ring) ---- */
.mb-card::after {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1.5px;                  /* ring thickness */
  border-radius: inherit;
  background: radial-gradient(
      var(--glow-radius) circle at var(--glow-x) var(--glow-y),
      rgba(var(--cyan-rgb), calc(var(--glow-intensity) * .85)) 0%,
      rgba(var(--cyan-rgb), calc(var(--glow-intensity) * .35)) 35%,
      transparent 65%);
  -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,
      linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
  transition: opacity .25s ease;
}

/* When hovered, give the card itself a halo */
.mb-card.mb-hover {
  box-shadow:
    0 6px 24px var(--shadow-strong),
    0 0 36px rgba(var(--cyan-rgb), calc(.22 * var(--glow-mult, 1)));
  border-color: rgba(var(--cyan-rgb), .35);
}

/* keep brand-color cards (eng=gold, edu=green, etc.) on their own hue */
.mb-card.eng::after {
  background: radial-gradient(
      var(--glow-radius) circle at var(--glow-x) var(--glow-y),
      rgba(var(--gold-rgb), calc(var(--glow-intensity) * .85)) 0%,
      rgba(var(--gold-rgb), calc(var(--glow-intensity) * .35)) 35%,
      transparent 65%);
}
.mb-card.edu::after {
  background: radial-gradient(
      var(--glow-radius) circle at var(--glow-x) var(--glow-y),
      rgba(var(--green-rgb), calc(var(--glow-intensity) * .85)) 0%,
      rgba(var(--green-rgb), calc(var(--glow-intensity) * .35)) 35%,
      transparent 65%);
}
.mb-card.eng.mb-hover {
  box-shadow:
    0 6px 24px var(--shadow-strong),
    0 0 36px rgba(var(--gold-rgb), calc(.22 * var(--glow-mult, 1)));
  border-color: rgba(var(--gold-rgb), .35);
}
.mb-card.edu.mb-hover {
  box-shadow:
    0 6px 24px var(--shadow-strong),
    0 0 36px rgba(var(--green-rgb), calc(.22 * var(--glow-mult, 1)));
  border-color: rgba(var(--green-rgb), .35);
}

/* ---- particles ---- */
.mb-particle {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  transform: scale(0);
  transition: opacity .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes mb-particle-drift {
  0%   { translate: 0 0;                 opacity: 1;   }
  50%  { translate: var(--dx) var(--dy); opacity: .35; }
  100% { translate: 0 0;                 opacity: 1;   }
}

/* ---- click ripple ---- */
.mb-ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 5;
  transform: scale(0);
  opacity: .9;
  transition: transform .8s cubic-bezier(.2,.7,.2,1), opacity .8s ease;
  mix-blend-mode: screen;
}

/* ---- global spotlight halo ---- */
.mb-spotlight {
  position: fixed;
  top: 0; left: 0;
  width: 800px; height: 800px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 200;
  opacity: 0;
  transform: translate(-9999px, -9999px);
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

/* Light + sepia themes don't want screen-blend (loses against white bg) */
:root[data-theme="light"] .mb-spotlight,
:root[data-theme="sepia"] .mb-spotlight {
  mix-blend-mode: multiply;
}
:root[data-theme="light"] .mb-ripple,
:root[data-theme="sepia"] .mb-ripple {
  mix-blend-mode: multiply;
}

/* Reduced motion: keep border-glow + spotlight, kill particles + tilt jitter */
@media (prefers-reduced-motion: reduce) {
  .mb-card { transform: none !important; transition: none; }
  .mb-particle { display: none; }
}

/* Don't trample the hero's existing tilt-free large layout */
.mb-card.hero { transform-origin: center; }