/* Bordure animée + halo extérieur — adapté depuis Uiverse.io by JaydipPrajapati1910 */

.glow-card {
  --glow-gradient: linear-gradient(
    45deg,
    var(--pink),
    var(--mustard),
    var(--sage),
    var(--teal),
    var(--lavender),
    var(--pink),
    var(--mustard),
    var(--sage),
    var(--teal),
    var(--lavender)
  );
  position: relative;
  isolation: isolate;
  z-index: 0;
  border: none;
  transition: transform var(--transition);
}

/* Bordure arc-en-ciel fine */
.glow-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--radius) + 2px);
  padding: 2px;
  background: var(--glow-gradient);
  background-size: 400%;
  animation: glow-card-border 40s linear infinite;
  z-index: -1;
  pointer-events: none;
  -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;
}

/* Halo lumineux à l'extérieur uniquement */
.glow-card::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: calc(var(--radius) + 3px);
  padding: 2px;
  background: var(--glow-gradient);
  background-size: 400%;
  animation: glow-card-border 40s linear infinite;
  z-index: -2;
  pointer-events: none;
  filter: blur(20px);
  opacity: 0.4;
  -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;
}

.glow-card:hover {
  transform: translateY(-3px);
}

.glow-card:hover::before,
.glow-card:hover::after {
  animation-duration: 24s;
}

.glow-card:hover::after {
  opacity: 0.55;
}

@keyframes glow-card-border {
  0%   { background-position: 0 0; }
  50%  { background-position: 400% 0; }
  100% { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .glow-card::before,
  .glow-card::after {
    animation: none;
    background-position: 0 0;
  }
  .glow-card:hover {
    transform: none;
  }
}

@media (max-width: 768px) {
  .glow-card::after {
    filter: blur(12px);
    opacity: 0.3;
  }
}