/* Isso faz o container do tour surgir suavemente em vez de aparecer do nada */
#panorama {
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

/* Esta classe deve ser adicionada via JS quando o tour carregar */
.loaded {
    opacity: 1;
}
        
        
        /* ==========================================
           RESET & BASE
        ========================================== */
        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: #000;
            font-family: Arial, Helvetica, sans-serif;
            touch-action: none;
        }

        /* ==========================================
           LITTLE PLANET (PSV)
        ========================================== */
        #planet-view {
            position: fixed;
            inset: 0;
            width: 100%;
            height: 100%;
            z-index: 2; /* Fica por cima do Pannellum no início */
            background: #000;
            opacity: 1;
            transition: opacity 0.4s ease;
        }

        /* ==========================================
           PANNELLUM CONTAINER
        ========================================== */
        #panorama {
            position: fixed;
            inset: 0;
            width: 100%;
            height: 100%;
            display: none;
            opacity: 1; /* Já nasce aceso por trás do planeta para evitar piscada */
            z-index: 1;
            background: #000;
            transition: filter 1s ease-in-out;
            will-change: filter;
            transform: translate3d(0, 0, 0); 
        }

        /* Remove a caixa padrão de carregamento do Pannellum */
        .pnlm-load-box {
            display: none !important;
        }

        /* ==========================================
           INTERFACE OVERLAY
        ========================================== */
        #intro-overlay {
            position: fixed;
            inset: 0;
            z-index: 9999;
            display: flex;
            justify-content: center;
            align-items: center;
            background: transparent;
            pointer-events: none;
        }

        #playButton {
            pointer-events: auto;
            width: 95px;
            height: 95px;
            border: none;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            color: white;
            font-size: 38px;
            cursor: pointer;
            box-shadow: 0 0 30px rgba(0, 0, 0, 0.35);
            transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), 
                        background 0.3s ease, 
                        opacity 0.3s ease;
        }

        #playButton:hover {
            transform: scale(1.08);
            background: rgba(255, 255, 255, 0.25);
        }

        #playButton.fade-out {
            opacity: 0;
            transform: scale(0.8);
        }

        /* ==========================================
           HOTSPOTS ANIMATION
        ========================================== */
        .hotspot-pulse {
            width: 20px !important;
            height: 20px !important;
            border-radius: 50%;
            background: white !important;
            border: 2px solid #000000 !important; 
            box-sizing: border-box;
            animation: hotspotPulse 1.4s infinite;
        }

        @keyframes hotspotPulse {
            0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
            70% { box-shadow: 0 0 0 15px rgba(255, 255, 255, 0); }
            100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
        }