/* Experiência do tour (experience.js) */
.hud { top: 16px; bottom: auto; }

/* abertura: pequeno planeta girando e "abrindo" antes do mergulho */
.v360x-intro {
  position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: opacity .5s ease;
}
/* fundo escuro enquanto o planeta gira; some no mergulho, revelando o panorama */
.v360x-intro::before {
  content: ""; position: absolute; inset: 0; background: radial-gradient(circle, #15151a 0%, #050507 75%);
  animation: v360x-backdrop var(--v360x-dur, 4200ms) ease forwards;
}
@keyframes v360x-backdrop { 0%, 40% { opacity: 1; } 58%, 100% { opacity: 0; } }
.v360x-intro img { position: relative; }
.v360x-intro img {
  width: min(92vmin, 900px); height: min(92vmin, 900px); border-radius: 50%; object-fit: cover;
  animation: v360x-planet var(--v360x-dur, 4200ms) cubic-bezier(.45, 0, .2, 1) forwards;
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
}
@keyframes v360x-planet {
  0% { transform: scale(.55) rotate(-120deg); opacity: 0; }
  12% { opacity: 1; }
  45% { transform: scale(.85) rotate(0deg); }
  62% { transform: scale(2.6) rotate(25deg); opacity: 1; }
  100% { transform: scale(3.2) rotate(30deg); opacity: 0; }
}
.v360x-intro.out { opacity: 0; pointer-events: none; }

/* menu de ambientes */
.v360x-menu {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 6;
  display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: calc(100% - 32px);
}
.v360x-tabs {
  display: flex; gap: 4px; padding: 6px; border-radius: 999px; overflow-x: auto; max-width: 100%;
  background: var(--bg-elev); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(8px);
}
.v360x-tab {
  white-space: nowrap; border: 0; border-radius: 999px; padding: 9px 16px; cursor: pointer;
  background: transparent; color: var(--text); font: 500 13px/1 system-ui, sans-serif;
}
.v360x-tab.here { box-shadow: inset 0 -2px 0 var(--accent); }
.v360x-tab.open, .v360x-tab:hover { background: rgba(255,255,255,.1); }
.v360x-strip {
  display: flex; gap: 8px; padding: 8px; border-radius: 14px; overflow-x: auto; max-width: min(100%, 980px);
  background: var(--bg-elev); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(8px);
}
.v360x-strip.hidden { display: none; }
.v360x-card {
  flex: 0 0 auto; width: 132px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; overflow: hidden;
  background: rgba(0,0,0,.25); color: var(--text); cursor: pointer; padding: 0; text-align: left;
}
.v360x-card img { width: 100%; height: 74px; object-fit: cover; display: block; }
.v360x-card span { display: block; padding: 6px 8px; font: 12px/1.3 system-ui, sans-serif; }
.v360x-card.no-thumb { width: auto; }
.v360x-card.here { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

/* contatos e ferramentas (lateral direita) */
.v360x-contacts, .v360x-tools {
  position: fixed; right: 16px; z-index: 6; display: flex; flex-direction: column; gap: 8px;
}
.v360x-contacts { top: 50%; transform: translateY(-50%); }
.v360x-tools { top: 72px; }
.v360x-contact, .v360x-tool {
  position: relative; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--bg-elev); color: var(--text); border: 1px solid rgba(255,255,255,.1); cursor: pointer;
  backdrop-filter: blur(8px); transition: transform .2s ease, background .2s ease, color .2s ease;
}
.v360x-contact svg, .v360x-tool svg { width: 22px; height: 22px; }
.v360x-contact:hover, .v360x-tool:hover, .v360x-tool.on { background: var(--accent); color: #15110a; transform: scale(1.06); }
.v360x-tip {
  position: absolute; right: 52px; white-space: nowrap; padding: 5px 10px; border-radius: 999px;
  background: var(--bg-elev); color: var(--text); font: 12px system-ui, sans-serif; opacity: 0; pointer-events: none; transition: opacity .2s;
}
.v360x-contact:hover .v360x-tip { opacity: 1; }

/* álbum */
.v360x-album {
  position: fixed; inset: 0; z-index: 50; background: rgba(5,5,7,.94); display: flex; flex-direction: column;
  padding: 16px; gap: 10px; color: var(--text); font-family: system-ui, sans-serif;
}
.v360x-album-head { display: flex; align-items: center; gap: 12px; }
.v360x-album-head strong { font-size: 16px; }
.v360x-album-count { color: var(--text-dim); font-size: 13px; flex: 1; }
.v360x-album-close { background: none; border: 0; color: var(--text); font-size: 30px; cursor: pointer; line-height: 1; }
.v360x-album-stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.v360x-album-stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.v360x-album-nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.15); background: rgba(0,0,0,.45); color: #fff; font-size: 28px; cursor: pointer;
}
.v360x-album-nav.prev { left: 4px; } .v360x-album-nav.next { right: 4px; }
.v360x-album-caption { text-align: center; min-height: 1.2em; font-size: 14px; color: var(--text); }
.v360x-album-thumbs { display: flex; gap: 6px; overflow-x: auto; justify-content: center; }
.v360x-album-thumb { flex: 0 0 auto; width: 72px; height: 50px; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; cursor: pointer; background: none; }
.v360x-album-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v360x-album-thumb.on { border-color: var(--accent); }

.v360x-toast {
  position: fixed; left: 50%; top: 24px; transform: translateX(-50%); z-index: 60; padding: 10px 16px; border-radius: 999px;
  background: var(--bg-elev); color: var(--text); font: 13px system-ui, sans-serif; transition: opacity .4s;
}
.v360x-toast.out { opacity: 0; }

@media (max-width: 640px) {
  .v360x-contact, .v360x-tool { width: 38px; height: 38px; }
  .v360x-contact svg, .v360x-tool svg { width: 19px; height: 19px; }
  .v360x-card { width: 104px; }
  .v360x-card img { height: 58px; }
  .v360x-menu { bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .v360x-intro img { animation-duration: 1ms; }
}