/* src/css/cinematic.css */

.cinematic-wrapper {
    /* 🔴 FIX: Auf die Rückwand genagelt! Keine negativen Margins mehr. */
    position: fixed; 
    top: 0; left: 0; width: 100%; height: 100vh;
    z-index: var(--layer-z-hero); /* Liegt sicher auf Ebene 2 hinter dem Content */
    overflow: hidden; 
    pointer-events: none; /* Klicks gehen durch aufs Dokument */
}

/* =========================================
   DAS FESTE BILD MIT ENDLOS-ZOOM
   ========================================= */
.cinematic-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center;
    z-index: 1;
    
    /* Ein extrem weicher Endlos-Zoom (hin und zurück) */
    animation: slowZoom 30s ease-in-out infinite alternate;
}

@keyframes slowZoom {
    0% { transform: scale(1); }
    100% { transform: scale(1.08); }
}

/* Dunkler Filter für perfekte Lesbarkeit der weißen Boxen */
.cinematic-bg::after {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(11, 17, 32, 0.4) 0%, rgba(11, 17, 32, 0.1) 100%);
}

/* =========================================
   Die Floating Hotspots (Glass-Post-Its)
   ========================================= */
.hotspot-node {
    position: absolute; z-index: 10;
    background: var(--color-bg-glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 16px; padding: 25px; width: 320px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
    
    /* Standard-Zustand: Ausgeblendet und leicht nach unten versetzt */
    opacity: 0; transform: translateY(20px);
    pointer-events: none;
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Nur das Post-it bekommt die Active-Klasse! */
.hotspot-node.active {
    opacity: 1; transform: translateY(0);
    pointer-events: auto; /* Wird klickbar! */
}

.hotspot-node h4 { margin: 0 0 10px 0; color: var(--color-text-main); font-size: 1.2rem; font-weight: 800; }
.hotspot-node p { margin: 0 0 20px 0; color: var(--color-text-muted); font-size: 0.95rem; line-height: 1.5; }

.hotspot-btn {
    background: var(--color-brand-primary); color: var(--color-text-inverse);
    padding: 10px 20px; border-radius: 8px; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    border: none; cursor: pointer; transition: 0.3s;
    box-shadow: 0 4px 15px color-mix(in srgb, var(--color-brand-primary) 30%, transparent);
}

.hotspot-btn:hover {
    background: var(--color-brand-hover); transform: translateY(-2px);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--color-brand-primary) 40%, transparent);
}