.border-animated {
  position: relative;
  border-radius: 0.75rem; /* stesso radius del tuo div Tailwind (rounded-xl) */
  overflow: hidden;       /* taglia il bordo all’interno del radius */
}

.border-animated::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px; /* spessore bordo */
  border-radius: inherit;
  background: conic-gradient(
    from var(--angle),
    var(--c2),
    var(--c1) 0.1turn,
    var(--c1) 0.15turn,
    var(--c2) 0.25turn
  );
  mask: 
    linear-gradient(#000 0 0) content-box, 
    linear-gradient(#000 0 0);
  mask-composite: exclude;

  -webkit-mask: 
    linear-gradient(#000 0 0) content-box, 
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: borderRotate var(--d) linear infinite forwards;
  pointer-events: none; /* il bordo non blocca click */
}

@property --angle {
  syntax: '<angle>';
  initial-value: 90deg;
  inherits: true;
}

:root {
  --d: 7000ms;
  --angle: 90deg;
  --c1: rgba(255, 255, 255, 1);
  --c2: rgba(255, 255, 255, 0.1);
}

@keyframes borderRotate {
  100% {
    --angle: 450deg;
  }
}