/* =========================================
   ABOUT SECTION - INTERACTIVE RADIAL GLOW
   Dominanter radialer Verlauf + Maus-Effekte
   ========================================= */

/* About Section Container */
.about-section,
#about {
    position: relative;
    isolation: isolate;
}

/* Canvas für interaktiven Glow - volle Breite */
#about-glow-canvas {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: -10;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
    cursor: none; /* Verstecke normalen Cursor über Section */
}

/* Wird von JS aktiviert */
#about-glow-canvas.active {
    opacity: 0.95;
}

/* Content bleibt unberührt */
.about-section > *:not(canvas),
#about > *:not(canvas) {
    position: relative;
    z-index: 1;
}

/* Responsive Anpassungen */
@media (max-width: 1024px) {
    #about-glow-canvas.active {
        opacity: 0.85;
    }
}

@media (max-width: 768px) {
    #about-glow-canvas.active {
        opacity: 0.75;
    }
}

@media (max-width: 480px) {
    #about-glow-canvas.active {
        opacity: 0.65;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    #about-glow-canvas {
        display: none !important;
    }
}

/* Touch-Geräte - kein Cursor-Effekt */
@media (hover: none) and (pointer: coarse) {
    #about-glow-canvas {
        cursor: auto;
    }
}