/* Fundo reutilizável com grade em movimento e brilho lilás. */
.bg-animated-grid {
    position: relative;
    overflow: hidden;
    background: #080013;
    isolation: isolate;
}

.bg-animated-grid#Portfolio {
    background: #080013;
}

.bg-animated-grid::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.09) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 80% 60% at 60% 40%, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 60% 40%, black 30%, transparent 75%);
    animation: gridshift 40s linear infinite;
    z-index: 1;
    pointer-events: none;
}

.bg-animated-grid::after {
    content: "";
    position: absolute;
    width: 640px;
    height: 640px;
    right: -160px;
    top: -120px;
    background: radial-gradient(circle, rgba(209, 109, 241, 0.22) 0%, transparent 68%);
    filter: blur(10px);
    animation: pulseglow 8s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

.bg-animated-grid > * {
    position: relative;
    z-index: 2;
}

@keyframes gridshift {
    0% { background-position: 0 0; }
    100% { background-position: 640px 640px; }
}

@keyframes pulseglow {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
    .bg-animated-grid::before,
    .bg-animated-grid::after {
        animation: none;
    }
}