/* ═══════════════════════════════════════════════════════════
   360View · style.css
   Estilos customizados: glassmorphism, hotspots, animações
   ═══════════════════════════════════════════════════════════ */

/* ── Variáveis globais ── */
:root {
  --accent:       #c9a96e;
  --accent-glow:  rgba(201, 169, 110, 0.35);
  --glass-bg:     rgba(12, 12, 14, 0.65);
  --glass-border: rgba(255, 255, 255, 0.08);
  --radius:       14px;
  --ease:         cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Reset mínimo ── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ══════════════════════════════════════════
   PANNELLUM — override de estilos padrão
   ══════════════════════════════════════════ */

/* O container do Pannellum preenche o pai */
#panorama {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Remove controles padrão do Pannellum (usaremos os nossos) */
.pnlm-controls-container { display: none !important; }

/* Spinner nativo do Pannellum — substituímos pelo nosso overlay */
.pnlm-load-box { display: none !important; }

/* Título nativo do Pannellum — usamos o nosso próprio */
.pnlm-title-box { display: none !important; }

/* Cursor durante drag */
.pnlm-container { cursor: grab !important; }
.pnlm-container:active { cursor: grabbing !important; }

/* ══════════════════════════════════════════
   GLASSMORPHISM — componente reutilizável
   ══════════════════════════════════════════ */
.glass {
  background:       var(--glass-bg);
  border-bottom:    1px solid var(--glass-border);
  backdrop-filter:  blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
}

.glass-panel {
  background:    rgba(10, 10, 12, 0.80);
  border-left:   1px solid var(--glass-border);
  backdrop-filter:  blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
}

/* Botão glass genérico */
.glass-btn {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  background:       rgba(255, 255, 255, 0.05);
  border:           1px solid var(--glass-border);
  border-radius:    10px;
  color:            rgba(255, 255, 255, 0.65);
  cursor:           pointer;
  transition:       background 0.2s var(--ease),
                    border-color 0.2s var(--ease),
                    color 0.2s var(--ease),
                    transform 0.15s var(--ease);
}
.glass-btn:hover {
  background:    rgba(255, 255, 255, 0.10);
  border-color:  rgba(255, 255, 255, 0.18);
  color:         rgba(255, 255, 255, 0.90);
  transform:     scale(1.06);
}
.glass-btn:active { transform: scale(0.94); }

/* ── Botão de controle circular ── */
.ctrl-btn {
  width:   40px;
  height:  40px;
  border-radius: 50% !important;
  padding: 0;
}

/* ── Botão ativo (giroscópio ligado, etc.) ── */
.glass-btn.is-active {
  background:   rgba(201, 169, 110, 0.18);
  border-color: var(--accent);
  color:        var(--accent);
}

/* ── Oculto em desktop (só aparece em touch) ── */
.hidden-desktop { display: none; }
@media (pointer: coarse) { .hidden-desktop { display: inline-flex; } }

/* ══════════════════════════════════════════
   LOADING OVERLAY
   ══════════════════════════════════════════ */
#loading-overlay { pointer-events: all; }
#loading-overlay.hidden {
  opacity: 0 !important;
  pointer-events: none;
}

/* Spinner em anel */
.loader-ring {
  width:  44px;
  height: 44px;
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ══════════════════════════════════════════
   TOP BAR — animação de entrada
   ══════════════════════════════════════════ */
#top-bar.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ══════════════════════════════════════════
   CONTROLES + BADGE — animação de entrada
   ══════════════════════════════════════════ */
#controls.visible,
#scene-badge.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ══════════════════════════════════════════
   DICA INICIAL
   ══════════════════════════════════════════ */
#hint.visible  { opacity: 1 !important; }
#hint.fade-out { opacity: 0 !important; }

/* ══════════════════════════════════════════
   MENU LATERAL — estado aberto
   ══════════════════════════════════════════ */
#side-menu.open { transform: translateX(0) !important; }
#menu-backdrop.open {
  opacity: 1 !important;
  pointer-events: all !important;
}

/* ── Item de cômodo no menu ── */
.room-item {
  display:       flex;
  align-items:   center;
  gap:           12px;
  width:         100%;
  padding:       11px 14px;
  border-radius: 10px;
  border:        1px solid transparent;
  background:    transparent;
  color:         rgba(255, 255, 255, 0.45);
  font-size:     12px;
  font-weight:   400;
  letter-spacing: 0.06em;
  cursor:        pointer;
  text-align:    left;
  transition:    background 0.2s var(--ease),
                 border-color 0.2s var(--ease),
                 color 0.2s var(--ease);
}
.room-item:hover {
  background:   rgba(255, 255, 255, 0.06);
  border-color: var(--glass-border);
  color:        rgba(255, 255, 255, 0.85);
}
.room-item.active {
  background:   rgba(201, 169, 110, 0.12);
  border-color: rgba(201, 169, 110, 0.30);
  color:        var(--accent);
}

/* Ícone de miniatura do cômodo */
.room-item-icon {
  width:          36px;
  height:         36px;
  border-radius:  8px;
  background:     rgba(255, 255, 255, 0.06);
  border:         1px solid var(--glass-border);
  display:        flex;
  align-items:    center;
  justify-content: center;
  flex-shrink:    0;
  font-size:      16px;
}

/* ══════════════════════════════════════════
   HOTSPOTS CUSTOMIZADOS (substituem o padrão
   do Pannellum via classe CSS "custom-hotspot")
   ══════════════════════════════════════════ */

/* Pannellum envolve cada hotspot num container pnlm-hotspot-base.
   Removemos o estilo padrão e aplicamos o nosso. */
.pnlm-hotspot-base.custom-hotspot {
  /* Anula a aparência padrão */
  background-image: none !important;
  width:  48px !important;
  height: 48px !important;
  margin: -24px 0 0 -24px !important; /* centraliza no ponto */
  overflow: visible !important;
  cursor: pointer !important;
}

/* Círculo central do hotspot */
.pnlm-hotspot-base.custom-hotspot::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width:         28px;
  height:        28px;
  border-radius: 50%;
  background:    rgba(255, 255, 255, 0.15);
  border:        1.5px solid rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(8px);
  transition:    transform 0.25s var(--ease),
                 background 0.25s var(--ease),
                 border-color 0.25s var(--ease);
  z-index: 2;
}

/* Ícone de seta no centro (usando background SVG inline) */
.pnlm-hotspot-base.custom-hotspot::after {
  content: '';
  position: absolute;
  top:  50%; left: 50%;
  transform: translate(-50%, -50%);
  width:  14px;
  height: 14px;
  /* Seta para cima, branca */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 3;
  opacity: 0.85;
  transition: opacity 0.2s;
}

/* Efeito ripple / pulsar ao redor do hotspot */
.pnlm-hotspot-base.custom-hotspot .hotspot-pulse {
  position: absolute;
  top:  50%; left: 50%;
  transform: translate(-50%, -50%);
  width:  28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  animation: hotspot-ripple 2.2s ease-out infinite;
  pointer-events: none;
  z-index: 1;
}

/* Segunda onda com delay para efeito duplo */
.pnlm-hotspot-base.custom-hotspot .hotspot-pulse-2 {
  animation-delay: 1.1s;
}

@keyframes hotspot-ripple {
  0%   { transform: translate(-50%, -50%) scale(1);    opacity: 0.7; }
  100% { transform: translate(-50%, -50%) scale(2.4);  opacity: 0;   }
}

/* Hover — amplia o círculo central */
.pnlm-hotspot-base.custom-hotspot:hover::before {
  transform:    translate(-50%, -50%) scale(1.18);
  background:   rgba(255, 255, 255, 0.25);
  border-color: #ffffff;
}
.pnlm-hotspot-base.custom-hotspot:hover::after {
  opacity: 1;
}

/* ── Tooltip customizado (Pannellum usa .pnlm-tooltip) ── */
.pnlm-hotspot-base.custom-hotspot > span {
  /* Posiciona acima do hotspot */
  position:    absolute !important;
  bottom:      calc(100% + 10px) !important;
  left:        50% !important;
  transform:   translateX(-50%) !important;
  top:         auto !important;

  /* Estilo pill */
  background:  rgba(10, 10, 12, 0.85) !important;
  border:      1px solid var(--glass-border) !important;
  backdrop-filter: blur(16px);
  color:       rgba(255, 255, 255, 0.80) !important;
  font-size:   11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.08em !important;
  padding:     5px 12px !important;
  border-radius: 100px !important;
  white-space: nowrap !important;
  pointer-events: none !important;

  opacity: 0 !important;
  transition: opacity 0.25s var(--ease) !important;
  max-width: none !important;
  width: auto !important;
}

/* Seta do tooltip */
.pnlm-hotspot-base.custom-hotspot > span::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(10, 10, 12, 0.85);
}

/* Exibe tooltip no hover */
.pnlm-hotspot-base.custom-hotspot:hover > span {
  opacity: 1 !important;
}

/* ══════════════════════════════════════════
   TRANSIÇÃO DE CENA (fade do Pannellum)
   ══════════════════════════════════════════ */

/* O Pannellum faz o fade internamente; garantimos que nosso
   loading-overlay apareça brevemente durante a troca */
#loading-overlay.transitioning {
  opacity: 1 !important;
  pointer-events: all;
}

/* ══════════════════════════════════════════
   RESPONSIVIDADE
   ══════════════════════════════════════════ */

/* Em telas pequenas, o menu lateral ocupa mais espaço */
@media (max-width: 480px) {
  #side-menu { width: 100%; }

  #top-bar h1 { display: none; } /* remove título do meio em mobile */

  .ctrl-btn { width: 36px; height: 36px; }
}

/* ══════════════════════════════════════════
   SCROLLBAR DO MENU
   ══════════════════════════════════════════ */
#room-list::-webkit-scrollbar { width: 4px; }
#room-list::-webkit-scrollbar-track { background: transparent; }
#room-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 4px;
}