/* Pannellum positions the root. Animate only its children to preserve coordinates. */
.studio-hotspot {
  --hs-accent: #ead8b2;
  --hs-drag-x: 0px;
  --hs-drag-y: 0px;
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: #fff;
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.studio-hotspot.scene-dot { width: 68px; height: 76px; }
.studio-hotspot:focus-visible { outline: none; }
.hs-art {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: translate(var(--hs-drag-x), var(--hs-drag-y));
}
.hs-ground {
  position: absolute;
  width: 58px;
  height: 58px;
  left: 5px;
  top: 18px;
  transform: rotateX(65deg);
  border: 2px solid #ffffffed;
  border-radius: 50%;
  background: radial-gradient(circle, #152c284d 25%, #ffffff14 70%);
  box-shadow: 0 0 0 5px #15282228, 0 5px 12px #07181175;
}
.hs-ground::before, .hs-ground::after {
  content: '';
  position: absolute;
  inset: -2px;
  border: 2px solid #fff;
  border-radius: inherit;
  opacity: .3;
  animation: hs-ground-wave 3s cubic-bezier(.16,.5,.35,1) infinite;
}
.hs-ground::after { animation-delay: -1.5s; }
.hs-direction {
  position: absolute;
  width: 38px;
  height: 43px;
  left: 15px;
  top: 36px;
  color: #fff;
  filter: drop-shadow(0 1px 1px #071c2180);
  transform: perspective(150px) rotateX(24deg);
  transform-origin: center center;
  animation: hs-direction-forward 1.8s ease-in-out infinite;
}
.hs-direction svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hs-direction path { fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.hs-direction .chevron-front { animation: hs-chevron-light 2.4s ease-in-out infinite; }
.hs-direction .chevron-back { opacity: .64; animation: hs-chevron-light 2.4s .22s ease-in-out infinite; }
.hs-badge {
  position: absolute;
  inset: 8px;
  display: grid;
  place-items: center;
  border: 1px solid #ffffffad;
  border-radius: 50%;
  background: linear-gradient(145deg, #27483eed, #112b28db);
  box-shadow: 0 3px 13px #061d2859, inset 0 1px 0 #ffffff29;
  backdrop-filter: blur(8px);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.hs-badge::before, .hs-badge::after {
  content: '';
  position: absolute;
  inset: -6px;
  border: 1px solid #ffffff94;
  border-radius: inherit;
  pointer-events: none;
}
.hs-badge::before { animation: hs-badge-breathe 3.2s ease-in-out infinite; }
.hs-badge::after { inset: -11px; opacity: 0; animation: hs-badge-wave 3.2s ease-out infinite; }
.hs-badge .icon { width: 19px; height: 19px; stroke-width: 1.8; }
.hs-info-mark { font: italic 600 24px/1 Georgia,serif; transform: translateY(-1px); }
.link-dot .hs-badge { border-radius: 12px; background: linear-gradient(145deg,#314941eb,#162f2cde); }
.link-dot .hs-badge .icon { animation: hs-link-invite 3.4s ease-in-out infinite; }
.link-dot .hs-badge::before { border-color: #e9d5ae9e; animation-delay: -.8s; }
.link-dot .hs-badge::after { animation-delay: -.8s; }
.studio-hotspot .hs-label {
  position: absolute;
  left: 50%;
  top: calc(100% + 4px);
  width: max-content;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 5px 11px;
  border: 1px solid #ffffff26;
  border-radius: 7px;
  background: #122824b8;
  color: #fff;
  box-shadow: 0 2px 9px #091d2421;
  font: 500 11px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft JhengHei",sans-serif;
  letter-spacing: .04em;
  text-shadow: 0 1px 3px #061d2440;
  backdrop-filter: blur(9px);
  pointer-events: none;
  opacity: .92;
  transform: translate(calc(-50% + var(--hs-drag-x)), var(--hs-drag-y));
  transition: background .2s ease, opacity .2s ease;
}
.scene-dot .hs-label { top: calc(100% + 1px); }
.studio-hotspot:hover .hs-badge, .studio-hotspot:focus-visible .hs-badge {
  transform: scale(1.1);
  border-color: #fff;
  background: linear-gradient(145deg,#456052ee,#203e34ef);
}
.studio-hotspot:hover .hs-label, .studio-hotspot:focus-visible .hs-label {
  background: #102a24eb;
  opacity: 1;
}
.studio-hotspot:focus-visible .hs-label { outline: 2px solid var(--hs-accent); outline-offset: 2px; }
.studio-hotspot.is-dragging { cursor: grabbing; z-index: 5; }
.studio-hotspot.is-dragging .hs-art { opacity: .85; }
.studio-hotspot.is-dragging *, .studio-hotspot.is-dragging *::before, .studio-hotspot.is-dragging *::after { animation-play-state: paused; }
@keyframes hs-ground-wave {
  0% { transform: scale(.9); opacity: .58; }
  75%,100% { transform: scale(1.65); opacity: 0; }
}

@keyframes hs-chevron-light { 0%,100% { opacity: .65; } 50% { opacity: 1; } }
@keyframes hs-direction-forward {
  0%,100% { transform: perspective(150px) rotateX(24deg) translateY(3px); }
  50% { transform: perspective(150px) rotateX(24deg) translateY(-6px); }
}
@keyframes hs-badge-breathe {
  0%,100% { transform: scale(.95); opacity: .25; }
  50% { transform: scale(1.06); opacity: .72; }
}
@keyframes hs-badge-wave {
  0% { transform: scale(.78); opacity: 0; }
  18% { opacity: .33; }
  85%,100% { transform: scale(1.24); opacity: 0; }
}
@keyframes hs-link-invite {
  0%,70%,100% { transform: translate(0,0); }
  82% { transform: translate(2px,-2px); }
}
@media(max-width:580px) {
  .studio-hotspot .hs-label { max-width:140px; font-size:10px; padding:4px 9px; }
}
@media(prefers-reduced-motion:reduce) {
  .studio-hotspot *, .studio-hotspot *::before, .studio-hotspot *::after { animation: none !important; transition: none !important; }
  .hs-ground::before { opacity:.22; transform:scale(1.2); }
  .hs-ground::after, .hs-badge::after { display:none; }
  .hs-badge::before { opacity:.45; }
}

/* Floor navigation: original CSS chevrons, no third-party artwork. */
.scene-dot .hs-ground { display:none; }
.scene-dot .hs-direction { left:15px; top:24px; width:38px; height:43px; filter:drop-shadow(0 2px 1px #0007); transform:perspective(150px) rotateX(52deg); animation:hs-floor-forward 1.7s ease-in-out infinite; }
.scene-dot .hs-direction path { stroke-width:3.4; }
.scene-dot .hs-label { top:-9px; border:0; border-radius:4px; background:#18201f99; padding:5px 10px; font-size:11px; }
@keyframes hs-floor-forward {
  0%,100% { transform:perspective(150px) rotateX(52deg) translateY(3px); }
  50% { transform:perspective(150px) rotateX(52deg) translateY(-5px); }
}
.studio-hotspot.is-dragging .hs-direction { animation-play-state:paused; }
@media(prefers-reduced-motion:reduce) { .scene-dot .hs-direction { animation:none!important; } }

/* Measured reference: advance / fade / rear arrival, then a stationary hold.
   Each chevron moves independently. Pannellum root and label never animate. */
.scene-dot .hs-direction {
  left:7px; top:18px; width:54px; height:54px;
  transform:perspective(150px) rotateX(52deg);
  animation:none;
}
.scene-dot .hs-direction path { stroke-width:3.2; }
.scene-dot .hs-direction .chevron-front {
  opacity:1;
  animation:hs-chevron-lead 2.4s linear infinite;
}
.scene-dot .hs-direction .chevron-back {
  opacity:1;
  animation:hs-chevron-follow 2.4s linear infinite;
}
@keyframes hs-chevron-lead {
  0%,4% { transform:translateY(0); opacity:1; }
  12.5% { transform:translateY(-4px); opacity:1; }
  20.8% { transform:translateY(-8px); opacity:.26; }
  25% { transform:translateY(-9px); opacity:0; }
  25.01% { transform:translateY(25px); opacity:0; }
  33.3% { transform:translateY(18px); opacity:.52; }
  41.7%,100% { transform:translateY(12px); opacity:1; }
}
@keyframes hs-chevron-follow {
  0%,8.3% { transform:translateY(0); opacity:1; }
  16.7% { transform:translateY(-3px); opacity:1; }
  25% { transform:translateY(-7px); opacity:1; }
  33.3% { transform:translateY(-11px); opacity:1; }
  41.7%,100% { transform:translateY(-12px); opacity:1; }
}
.studio-hotspot.is-dragging .hs-direction path { animation-play-state:paused; }
@media(prefers-reduced-motion:reduce) {
 .scene-dot .hs-direction path { animation:none!important; transform:none!important; opacity:1; }
}