/* Linha verde que percorre as bordas de todos os cards do grid de previews.
   Isolado: afeta apenas .vp-item, sem tocar no runtime original. */
@property --vp-ang {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.vp-item {
  position: relative;
  border-radius: 14px;
}

.vp-item > img,
.vp-item > video {
  border-radius: 14px;
}

.vp-item::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 15px;
  padding: 2px;
  background: conic-gradient(from var(--vp-ang),
    transparent 0deg,
    transparent 250deg,
    rgba(216, 252, 84, 0.25) 300deg,
    #d8fc54 348deg,
    transparent 360deg);
  -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;
  animation: vp-borda-gira 3.2s linear infinite;
  pointer-events: none;
  z-index: 3;
}

/* Desfaz sincronia entre cards vizinhos para o efeito fluir pelo grid */
.vp-item:nth-child(2n)::after { animation-delay: -1.1s; }
.vp-item:nth-child(3n)::after { animation-delay: -2.2s; }

@keyframes vp-borda-gira {
  to { --vp-ang: 360deg; }
}