/* ============================================================
   EXTENDED EFFECTS — Extra polish
   ============================================================ */

/* Animated glow borders */
@keyframes borderGlow{
    0%,100%{box-shadow:0 0 0 0 rgba(245,200,66,0)}
    50%{box-shadow:0 0 18px 4px rgba(245,200,66,.25)}
}
.svc-featured{animation:borderGlow 3s ease-in-out infinite}

/* Glassmorphism card variant */
.glass-card{
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(20px) saturate(1.4);
}

/* Neon text variant */
.neon{color:var(--cyan);text-shadow:0 0 8px var(--cyan),0 0 20px rgba(0,212,255,.4)}

/* Tooltip utility */
[data-tip]{position:relative;cursor:default}
[data-tip]::after{
    content:attr(data-tip);position:absolute;bottom:calc(100%+8px);left:50%;
    transform:translateX(-50%);background:#1a1f33;border:1px solid var(--border);
    color:var(--text);font-size:12px;white-space:nowrap;padding:6px 12px;
    border-radius:8px;pointer-events:none;opacity:0;transition:opacity .2s ease;z-index:100;
}
[data-tip]:hover::after{opacity:1}

/* Smooth focus for keyboard nav */
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

/* Gradient separator */
.grad-sep{
    height:1px;width:100%;
    background:linear-gradient(to right,transparent,rgba(245,200,66,.4),transparent);
    margin:0 auto;
}

/* Magnetic button JS-assisted */
.magnetic{transform-origin:center;will-change:transform}

/* Section divider wave */
.section-wave{height:60px;margin-top:-1px}
.section-wave svg{display:block;width:100%;height:100%}

/* Port card hover overlay */
.port-card::after{
    content:'Ver Detalhes →';
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    background:rgba(245,200,66,.08);backdrop-filter:blur(4px);color:var(--gold);
    font-size:14px;font-weight:700;border-radius:var(--r);
    opacity:0;transition:opacity .3s ease;letter-spacing:.05em;
}
.port-card:hover::after{opacity:1}