/* --- IMMERSIVE SCROLL FLIGHT (Kamera & Hyperspace) --- */

/* Der Lichtgeschwindigkeits-Tunnel */
.warp-tunnel {
    position: absolute;
    top: 50%; left: 50%;
    width: 250vw; height: 250vw;
    transform: translate(-50%, -50%);
    background: repeating-conic-gradient(
        from 0deg,
        transparent 0%, transparent 0.8%,
        rgba(96, 165, 250, 0.9) 0.9%,
        transparent 1%, transparent 2.2%,
        rgba(168, 85, 247, 0.9) 2.3%,
        transparent 2.4%, transparent 4.5%,
        rgba(255, 255, 255, 1) 4.6%,
        transparent 4.7%
    );
    -webkit-mask-image: radial-gradient(circle at center, transparent 15%, black 35%, black 80%, transparent 100%);
    mask-image: radial-gradient(circle at center, transparent 15%, black 35%, black 80%, transparent 100%);
    z-index: 10;
    animation: hyperDriveZoom 0.3s linear infinite;
}

@keyframes hyperDriveZoom {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
    100% { transform: translate(-50%, -50%) scale(1.5); opacity: 1; }
}

/* Die fliegenden Glaskarten im Tunnel */
.flight-card {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.1); 
    opacity: 0; 
    width: 90%;
    max-width: 700px;
    background: linear-gradient(145deg, rgba(20, 24, 32, 0.8) 0%, rgba(10, 12, 16, 0.95) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(168, 85, 247, 0.4);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding: 4rem;
    border-radius: 30px;
    box-shadow: 0 0 80px rgba(168, 85, 247, 0.3), inset 0 0 30px rgba(168, 85, 247, 0.1);
    text-align: center;
    z-index: 30;
    will-change: transform, opacity;
}

/* Sanftes Schweben für die Kamera am Anfang */
@keyframes floatCamera {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-20px) scale(1.02); }
}
.animate-float-camera {
    animation: floatCamera 6s ease-in-out infinite;
    transform-origin: center center;
}