/* CLAUDE: Spotlight Maus-Effekt */
/* CLAUDE: Subtiler Glow auf Mausposition */
/* CLAUDE: Anpassen: Größe, Farbe, Opacity */

/* ===========================================
   CLAUDE: SPOTLIGHT-OVERLAY
   =========================================== */

.pvm-spotlight-active {
    position: relative;
    overflow: hidden;
}

.pvm-spotlight-active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(
        600px circle at var(--spotlight-x, 50%) var(--spotlight-y, 50%),
        rgba(140, 10, 183, 0.12),
        transparent 40%
    );
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* CLAUDE: Sichtbar wenn Maus in Sektion */
.pvm-spotlight-active.pvm-spotlight-visible::before {
    opacity: 1;
}

/* ===========================================
   CLAUDE: VARIANTEN
   =========================================== */

/* CLAUDE: Stärkerer Spotlight für Hero */
.header_start.pvm-spotlight-active::before,
.pvm-hero.pvm-spotlight-active::before {
    background: radial-gradient(
        700px circle at var(--spotlight-x, 50%) var(--spotlight-y, 50%),
        rgba(140, 10, 183, 0.15),
        rgba(76, 65, 224, 0.08) 30%,
        transparent 50%
    );
}

/* CLAUDE: Spotlight auf Portfolio-Seite DEAKTIVIERT */
/* CLAUDE: Der lila Glow-Effekt kollidiert mit den Bento-Card-Bildern */
/* CLAUDE: Anpassen: .pvm-hero--[page] für andere Seiten hinzufügen */
.pvm-hero--portfolio.pvm-spotlight-active::before,
.pvm-cta-section--portfolio.pvm-spotlight-active::before {
    display: none;
}

/* CLAUDE: Blauer Spotlight für Kontakt */
.contact.pvm-spotlight-active::before {
    background: radial-gradient(
        500px circle at var(--spotlight-x, 50%) var(--spotlight-y, 50%),
        rgba(76, 65, 224, 0.15),
        transparent 40%
    );
}

/* ===========================================
   CLAUDE: Z-INDEX KORREKTUR
   =========================================== */

/* CLAUDE: Content muss über Spotlight liegen */
.pvm-spotlight-active > * {
    position: relative;
    z-index: 2;
}

/* CLAUDE: Ausnahme: Partikel-Container */
.pvm-spotlight-active > #pvm-particles {
    z-index: 0;
}

/* ===========================================
   CLAUDE: REDUCED MOTION
   =========================================== */

@media (prefers-reduced-motion: reduce) {
    .pvm-spotlight-active::before {
        display: none;
    }
}

/* ===========================================
   CLAUDE: TOUCH-GERÄTE
   =========================================== */

@media (hover: none) and (pointer: coarse) {
    .pvm-spotlight-active::before {
        display: none;
    }
}

/* CLAUDE: Kleine Bildschirme */
@media (max-width: 1024px) {
    .pvm-spotlight-active::before {
        display: none;
    }
}

/* ===========================================
   CLAUDE: DARK MODE
   CLAUDE: Dual-Selector Pattern
   =========================================== */

/* CLAUDE: Manueller Toggle */
html[data-theme="dark"] .pvm-spotlight-active::before {
    background: radial-gradient(
        600px circle at var(--spotlight-x, 50%) var(--spotlight-y, 50%),
        rgba(76, 65, 224, 0.2),
        transparent 40%
    );
}

/* CLAUDE: System-Präferenz - Fallback */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .pvm-spotlight-active::before {
        background: radial-gradient(
            600px circle at var(--spotlight-x, 50%) var(--spotlight-y, 50%),
            rgba(76, 65, 224, 0.2),
            transparent 40%
        );
    }
}

/* ===========================================
   CLAUDE: PRINT
   =========================================== */

@media print {
    .pvm-spotlight-active::before {
        display: none;
    }
}