/* Setas de navegação do Vista360 (modelos em arrows.js) */
.v360-arrow-host { position: absolute; width: 0; height: 0; cursor: pointer; }
.v360-arrow {
  position: absolute;
  width: calc(52px * var(--v360-scale, 1)); height: calc(52px * var(--v360-scale, 1));
  left: calc(-26px * var(--v360-scale, 1)); top: calc(-26px * var(--v360-scale, 1));
  color: var(--v360-color, #C6A56A);
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .55));
  transition: transform .25s ease, filter .25s ease;
}
.v360-arrow svg { width: 100%; height: 100%; overflow: visible; display: block; }
.v360-arrow-host:hover .v360-arrow { transform: scale(1.15); filter: drop-shadow(0 0 10px var(--v360-color, #C6A56A)); }

/* ---- setas 3D (chão e flutuante): deitadas no chão pela perspectiva do Marzipano ---- */
.v360-host-3d { transform-style: preserve-3d; }
.v360-k-floor, .v360-k-float {
  width: calc(96px * var(--v360-scale, 1)); height: calc(120px * var(--v360-scale, 1));
  left: calc(-48px * var(--v360-scale, 1)); top: calc(-60px * var(--v360-scale, 1));
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45));
  transform-style: preserve-3d;
}
.v360-k-float .v360-shadow { position: absolute; inset: 0; width: 100%; height: 100%; }
.v360-k-float .v360-lift {
  position: absolute; inset: 0; transform-origin: 50% 90%;
  transform: translateZ(26px) rotateX(-28deg);
}
.v360-k-float.v360-anim-flutuar .v360-lift, .v360-k-float.v360-anim-deslizar .v360-lift { animation: v360-hover 2.6s ease-in-out infinite; }
@keyframes v360-hover { 0%, 100% { transform: translateZ(20px) rotateX(-28deg); } 50% { transform: translateZ(38px) rotateX(-28deg); } }
.v360-k-floor.v360-anim-flutuar svg { animation: v360-lift-floor 2.4s ease-in-out infinite; }
@keyframes v360-lift-floor { 0%, 100% { transform: translateZ(0); } 50% { transform: translateZ(14px); } }
.v360-k-floor.v360-anim-deslizar .v360-slide { animation: v360-forward 1.6s ease-in-out infinite; }
@keyframes v360-forward { 0% { translate: 0 6px; opacity: .55; } 60% { opacity: 1; } 100% { translate: 0 -7px; opacity: .55; } }
.v360-host-3d .v360-arrow-label { top: 18px; transform: translateX(-50%) rotateX(calc(-1 * var(--v360-tilt, 0deg))); }
.v360-arrow-host.v360-host-3d:hover .v360-arrow { transform: scale(1.12); }

/* chevrons acendendo em sequência, na direção do caminho */
.v360-model-chevrons-fluxo path { animation: v360-flow 1.5s linear infinite; }
.v360-model-chevrons-fluxo .v360-c3 { animation-delay: 0s; }
.v360-model-chevrons-fluxo .v360-c2 { animation-delay: .25s; }
.v360-model-chevrons-fluxo .v360-c1 { animation-delay: .5s; }
@keyframes v360-flow { 0%, 100% { opacity: .25; } 30% { opacity: 1; } }
/* pegadas: um passo de cada vez */
.v360-model-pegadas .v360-p1 { animation: v360-step 1.6s ease-in-out infinite; }
.v360-model-pegadas .v360-p2 { animation: v360-step 1.6s ease-in-out .8s infinite; }
@keyframes v360-step { 0%, 100% { opacity: .2; } 35%, 60% { opacity: 1; } }
/* neon e anel com logo */
.v360-model-seta-neon { filter: drop-shadow(0 0 6px var(--v360-color, #C6A56A)); }
.v360-model-anel-logo .v360-ring { transform-origin: 32px 46px; transform-box: view-box; animation: v360-spin 9s linear infinite; }

/* prévia no painel do editor (fora do panorama): perspectiva aproximada */
.v360-preview.v360-k-floor, .v360-preview.v360-k-float { transform: perspective(240px) rotateX(46deg) scale(.62); }
.v360-arrow-label {
  position: absolute; top: 34px; left: 0; transform: translateX(-50%);
  white-space: nowrap; padding: 5px 10px; border-radius: 999px; font: 12px/1.2 system-ui, sans-serif;
  color: #fff; background: rgba(10, 10, 14, .78); border: 1px solid rgba(255, 255, 255, .12);
  opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
.v360-arrow-host:hover .v360-arrow-label { opacity: 1; }

/* ---- animações (motion design) ---- */
.v360-anim-pulso::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--v360-color, #C6A56A); animation: v360-wave 1.8s ease-out infinite; pointer-events: none;
}
@keyframes v360-wave { from { transform: scale(.7); opacity: .9; } to { transform: scale(1.7); opacity: 0; } }

.v360-anim-flutuar svg { animation: v360-float 2.4s ease-in-out infinite; }
.v360-floor.v360-anim-flutuar svg { animation: v360-float-floor 2.4s ease-in-out infinite; }
@keyframes v360-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes v360-float-floor { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }

.v360-anim-brilho { animation: v360-glow 2s ease-in-out infinite; }
@keyframes v360-glow {
  0%, 100% { filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .55)); }
  50% { filter: drop-shadow(0 0 14px var(--v360-color, #C6A56A)) drop-shadow(0 0 4px var(--v360-color, #C6A56A)); }
}

.v360-anim-deslizar .v360-slide { animation: v360-slide 1.4s ease-in-out infinite; }
.v360-model-seta-premium.v360-anim-deslizar path, .v360-model-porta.v360-anim-deslizar path { animation: v360-nudge 1.4s ease-in-out infinite; }
@keyframes v360-slide { 0% { translate: 0 4px; opacity: .3; } 50% { opacity: 1; } 100% { translate: 0 -6px; opacity: .3; } }
.v360-model-seta-dupla.v360-anim-deslizar .v360-slide { animation-name: v360-nudge; }
@keyframes v360-nudge { 0%, 100% { translate: 0 0; } 50% { translate: 4px 0; } }

.v360-anim-girar .v360-ring { transform-origin: 24px 24px; transform-box: view-box; animation: v360-spin 6s linear infinite; }
.v360-anim-girar .v360-ring { stroke-dasharray: 18 8; }
@keyframes v360-spin { to { transform: rotate(360deg); } }

.v360-anim-respirar { animation: v360-breathe 3s ease-in-out infinite; }
@keyframes v360-breathe { 0%, 100% { opacity: .75; scale: .94; } 50% { opacity: 1; scale: 1.04; } }

@media (prefers-reduced-motion: reduce) {
  .v360-arrow, .v360-arrow *, .v360-arrow::after { animation: none !important; }
}

/* ---- texto opcional da seta (balão de pé, acima da seta) ---- */
.v360-caption-host { position: absolute; width: 0; height: 0; cursor: pointer; }
.v360-caption {
  position: absolute; left: 0; bottom: 6px; transform: translateX(-50%);
  white-space: nowrap; max-width: 70vw; overflow: hidden; text-overflow: ellipsis;
  padding: .35em .8em; border-radius: .9em; line-height: 1.2; font-weight: 600;
  background: color-mix(in srgb, var(--v360-cap-bg, #0A0A0E) 82%, transparent);
  border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  backdrop-filter: blur(6px);
}
.v360-caption::after {
  content: ""; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);
  border: 6px solid transparent; border-bottom: 0;
  border-top-color: color-mix(in srgb, var(--v360-cap-bg, #0A0A0E) 82%, transparent);
}