/* Blue Lab | interface dos visualizadores (360° e 3D), sobre o mesmo sistema do site */
.viewer-page { height: 100dvh; overflow: hidden; background: var(--bg); touch-action: none; }
.viewer-page::after { display: none; } /* sem grão sobre o 3D */
#pano { position: fixed; inset: 0; }

.glass {
  background: rgba(6, 16, 29, .55); border: 1px solid rgba(220, 234, 255, .16);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
}
@media (prefers-reduced-transparency: reduce) { .glass, .vbtn, .scenes button { background: var(--bg-2); backdrop-filter: none; } }

.vbar { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: max(14px, env(safe-area-inset-top)) var(--gutter) 14px; background: linear-gradient(180deg, rgba(6, 16, 29, .7), transparent); pointer-events: none; }
.vbar > * { pointer-events: auto; }
.vtitle { display: grid; gap: 2px; margin-right: auto; min-width: 0; }
.vtitle .logo { font-size: .95rem; }
.vtitle strong { font-weight: 900; font-stretch: 112%; text-transform: uppercase; letter-spacing: -.02em; font-size: clamp(1rem, 2.4vw, 1.5rem); line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vactions { display: flex; gap: 8px; }
.vbtn {
  height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 12px;
  border-radius: 999px; font-weight: 600; font-size: .9rem; color: var(--text);
  background: rgba(6, 16, 29, .55); border: 1px solid rgba(220, 234, 255, .16); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: background .3s, color .3s, transform .2s;
}
.vbtn i { font-size: 1.25rem; }
.vbtn:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.vbtn:active { transform: scale(.96); }
.vbtn.on { background: var(--accent); color: var(--accent-ink); }
.vbtn--wide { padding: 0 16px; }
@media (max-width: 640px) { .vbtn--wide span { display: none; } .vtitle .logo { display: none; } }

.scenes { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 16px var(--gutter) max(18px, env(safe-area-inset-bottom)); background: linear-gradient(0deg, rgba(6, 16, 29, .75), transparent); scrollbar-width: none; }
.scenes::-webkit-scrollbar { display: none; }
.scenes button { flex: 0 0 auto; scroll-snap-align: start; display: grid; gap: 6px; width: 148px; padding: 6px; text-align: left; border-radius: 0; background: rgba(6, 16, 29, .55); border: 1px solid rgba(220, 234, 255, .16); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: border-color .3s, transform .4s var(--ease); }
.scenes button img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 50%; }
.scenes button span { font-size: .8rem; font-weight: 600; padding: 0 2px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scenes button:hover { transform: translateY(-3px); }
.scenes button[aria-current="true"] { border-color: var(--accent); }
.scenes button[aria-current="true"] span { color: var(--accent); }

/* hotspots */
.hs { width: 0; height: 0; }
.hs-dot { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(6, 16, 29, .55); border: 2px solid var(--text); backdrop-filter: blur(6px); cursor: pointer; transition: transform .4s var(--ease), background .3s; }
.hs-dot::before { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--accent); animation: hsPulse 2.2s var(--ease) infinite; }
.hs-dot i { font-size: 1.2rem; color: var(--text); }
.hs-label { position: absolute; left: 50%; top: 30px; transform: translateX(-50%); white-space: nowrap; font: 600 .8rem var(--display); color: var(--text); background: rgba(6, 16, 29, .7); padding: 4px 10px; border-radius: 999px; pointer-events: none; }
.hs:hover .hs-dot { transform: scale(1.12); background: var(--accent); }
.hs:hover .hs-dot i { color: var(--accent-ink); }
@keyframes hsPulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hs-dot::before { animation: none; } }

/* pannellum: esconde o carregador padrão (usamos o nosso) */
.pnlm-load-box, .pnlm-about-msg, .pnlm-panel, .pnlm-title-box { display: none !important; }
.pnlm-container { background: var(--bg) !important; font-family: var(--display); }

.vload { position: fixed; inset: 0; z-index: 15; display: grid; place-content: center; justify-items: center; gap: 18px; background: var(--bg); transition: opacity .8s var(--ease); pointer-events: none; }
.vload.done { opacity: 0; }
.vload .brush { font-size: 2rem; }
.vload .ring { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }