/* ============================================
   MAGIC BENTO ANIMATIONS
   ============================================ */

:root {
  --magic-glow-color: 192, 122, 54; /* #C07A36 - Accent gold */
  --magic-glow-color-light: 212, 138, 69; /* #D48A45 - Accent light */
  --magic-border-glow: rgba(192, 122, 54, 0.8);
  --magic-particle-glow: rgba(192, 122, 54, 0.6);
}

/* Enhanced card with Magic Bento effects */
.magic-card {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;

  --glow-x: 50%;
  --glow-y: 50%;
  --glow-intensity: 0;
  --glow-radius: 300px;
}

.magic-card:hover {
  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.3),
    0 0 40px rgba(var(--magic-glow-color), 0.2);
}

/* Border glow effect on hover */
.magic-card::after {
  content: '';
  position: absolute;
  inset: 0;
  padding: 2px;
  background: radial-gradient(
    var(--glow-radius) circle at var(--glow-x) var(--glow-y),
    rgba(var(--magic-glow-color), calc(var(--glow-intensity) * 0.9)) 0%,
    rgba(var(--magic-glow-color), calc(var(--glow-intensity) * 0.5)) 25%,
    rgba(var(--magic-glow-color), calc(var(--glow-intensity) * 0.2)) 50%,
    transparent 70%
  );
  border-radius: inherit;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}

.magic-card:hover::after {
  opacity: 1;
}

/* Particle (star) effect */
.magic-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(var(--magic-glow-color), 1);
  box-shadow:
    0 0 6px rgba(var(--magic-glow-color), 0.8),
    0 0 12px rgba(var(--magic-glow-color), 0.4);
  pointer-events: none;
  z-index: 100;
  opacity: 0;
}

.magic-particle::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  background: rgba(var(--magic-glow-color), 0.3);
  border-radius: 50%;
  z-index: -1;
}

/* Ripple effect on click */
.magic-ripple {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(var(--magic-glow-color), 0.5) 0%,
    rgba(var(--magic-glow-color), 0.3) 20%,
    rgba(var(--magic-glow-color), 0.15) 40%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 1000;
  transform: scale(0);
  opacity: 1;
}

/* Global spotlight effect */
.magic-spotlight {
  position: fixed;
  width: 800px;
  height: 800px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    circle,
    rgba(var(--magic-glow-color), 0.15) 0%,
    rgba(var(--magic-glow-color), 0.08) 15%,
    rgba(var(--magic-glow-color), 0.04) 25%,
    rgba(var(--magic-glow-color), 0.02) 40%,
    rgba(var(--magic-glow-color), 0.01) 65%,
    transparent 70%
  );
  z-index: 200;
  opacity: 0;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
  will-change: transform, opacity;
  transition: opacity 0.3s ease;
}

/* Particle animations */
@keyframes particleFloat {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0.3;
  }
  25% {
    transform: translate(30px, -30px) rotate(90deg);
    opacity: 0.8;
  }
  50% {
    transform: translate(-20px, 20px) rotate(180deg);
    opacity: 0.5;
  }
  75% {
    transform: translate(40px, 10px) rotate(270deg);
    opacity: 0.9;
  }
}

@keyframes particleFadeIn {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes particleFadeOut {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(0);
    opacity: 0;
  }
}

@keyframes rippleExpand {
  from {
    transform: scale(0);
    opacity: 1;
  }
  to {
    transform: scale(1);
    opacity: 0;
  }
}

/* Disable animations on mobile */
@media (max-width: 768px) {
  .magic-card:hover {
    transform: none;
  }

  .magic-card::after {
    display: none;
  }

  .magic-spotlight {
    display: none;
  }
}

/* Ensure card content is above effects */
.magic-card > * {
  position: relative;
  z-index: 3;
}