/* ══════════════════════════════════════════════════════════════════════
   destaque.css — anel roxo giratório nos cards em destaque
   Inclua este arquivo em qualquer página que exiba feed-card com destaque.
   NÃO duplica regras de home.css/seo.css; só acrescenta o efeito.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Badge "Destaque" sobre a imagem ────────────────────────────────── */
.feed-destaque{position:absolute;bottom:10px;left:10px;background:linear-gradient(135deg,#6d28d9,#4f46e5);color:#fff;font-size:10px;font-weight:700;padding:4px 10px 4px 8px;border-radius:6px;letter-spacing:.04em;display:inline-flex;align-items:center;gap:4px;box-shadow:0 2px 8px rgba(79,70,229,.45);z-index:2;pointer-events:none}
.feed-destaque .dst-star{flex-shrink:0;display:block}

/* ── Wrapper: borda roxa estática (4 px) SEMPRE visível ─────────────── */
.feed-destaque-ring{position:relative;border-radius:18px;padding:4px;overflow:hidden;isolation:isolate;background:linear-gradient(135deg,#4f46e5 0%,#7c3aed 50%,#4f46e5 100%);box-shadow:0 0 0 1px rgba(124,58,237,.3),0 8px 30px rgba(79,70,229,.2);display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.feed-destaque-ring:hover{transform:translateY(-4px);box-shadow:0 20px 40px -8px rgba(79,70,229,.35)}

/* ── Cometa giratório: quadrado centrado, invisível por padrão ───────── */
.feed-destaque-ring::before{content:'';position:absolute;width:260%;aspect-ratio:1/1;top:50%;left:50%;transform:translate(-50%,-50%);background:conic-gradient(from 0deg,transparent 0deg,transparent 130deg,#3730a3 148deg,#4f46e5 160deg,#a78bfa 170deg,#ffffff 175deg,#a78bfa 180deg,#4f46e5 190deg,#3730a3 202deg,transparent 218deg,transparent 360deg);opacity:0;z-index:0;pointer-events:none}

/* ── Animação: aparece → gira 360° → some (uma vez) ─────────────────── */
@keyframes feed-ring-once{
  0%  {opacity:1;transform:translate(-50%,-50%) rotate(0deg)}
  82% {opacity:1}
  100%{opacity:0;transform:translate(-50%,-50%) rotate(360deg)}
}
.feed-destaque-ring.ring-play::before{animation:feed-ring-once 3.5s ease-in-out 1 forwards}

/* ── Card interno fica acima do anel, perde borda/hover próprios ─────── */
.feed-destaque-ring>.feed-card{position:relative;z-index:1;border:none;flex:1}
.feed-destaque-ring>.feed-card:hover{transform:none;box-shadow:none}