/* 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); } }