/* Navigation arrow hotspot styles - Marzipano chevron style
 * UX: max 3-4 navigačné šípky na scénu; hlavná šípka = smer dopredu; pitch cca -0.2 (podlaha); pulse len pre hlavný smer
 * HTML example:
 *   <svg class="nav-arrow arrow-up"><use href="#icon-arrow-up"></use></svg>
 *   <svg class="nav-arrow arrow-right"><use href="#icon-arrow-right"></use></svg>
 *   <svg class="nav-arrow arrow-down"><use href="#icon-arrow-down"></use></svg>
 *   <svg class="nav-arrow arrow-left"><use href="#icon-arrow-left"></use></svg>
 */
.nav-arrow {
  width: 48px;
  height: 48px;
  color: #ffffff;
  opacity: 0.9;
  cursor: pointer;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-arrow:hover {
  transform: scale(1.15);
  opacity: 1;
}
.nav-arrow.arrow-up { transform: rotate(0deg); }
.nav-arrow.arrow-right { transform: rotate(90deg); }
.nav-arrow.arrow-down { transform: rotate(180deg); }
.nav-arrow.arrow-left { transform: rotate(-90deg); }
.nav-arrow.arrow-up:hover { transform: rotate(0deg) scale(1.15); }
.nav-arrow.arrow-right:hover { transform: rotate(90deg) scale(1.15); }
.nav-arrow.arrow-down:hover { transform: rotate(180deg) scale(1.15); }
.nav-arrow.arrow-left:hover { transform: rotate(-90deg) scale(1.15); }
@keyframes nav-arrow-pulse {
  0%, 100% { opacity: 0.9; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}
.nav-arrow.pulse {
  animation: nav-arrow-pulse 2.8s ease-in-out infinite;
}