/* 360 tour template: ground arrows, aerial views, the loading curtain.
   Loaded after looks.css. The arrows sit on a flat ring at the foot of the screen and
   turn with the camera (app.js placeNav); aerial rooms (tour.json zone "aerial") show
   only once you are outside, with a Fly up / Land button in the tools. */

/* ---------------------------------------------------------------- ground arrows */
.nav {
  --rx: 104px;
  position: absolute;
  left: 50%;
  bottom: calc(var(--nav-bottom, 172px) + env(safe-area-inset-bottom));
  width: calc(var(--rx) * 2);
  height: var(--rx);                      /* a circle on the floor seen at 60 degrees */
  margin-left: calc(var(--rx) * -1);
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.5s var(--ease);
}
/* the ground ring: a soft ellipse, brighter at the front */
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgb(var(--stucco-rgb) / 0.2);
  border-bottom-color: rgb(var(--stucco-rgb) / 0.42);
  background: radial-gradient(closest-side, rgb(var(--shadow-rgb) / 0.26), rgb(var(--shadow-rgb) / 0.08) 70%, transparent);
}
.nav:empty { display: none; }
/* from the air the places are dots on the site and Land is in the tools: no ground ring */
.is-air .nav { display: none; }
.nav__arrow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  pointer-events: auto;
  opacity: calc(0.42 + var(--depth, 1) * 0.58);
  transition: opacity 0.3s;
  outline: none;
}
.nav__arrow svg {
  width: 54px;
  height: 54px;
  fill: none;
  stroke: var(--stucco);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: perspective(420px) rotateX(60deg) rotate(var(--rot, 0deg)) scale(calc(0.78 + var(--depth, 1) * 0.3));
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.75)) drop-shadow(0 0 10px rgb(var(--shadow-rgb) / 0.5));
  transition: stroke 0.3s;
}
.nav__arrow.is-ahead svg, .nav__arrow:hover svg, .nav__arrow:focus-visible svg { stroke: var(--brass-hi); }
.nav__arrow.is-ahead { opacity: 1; }
/* a way up into the air: a small drone mark rides on the arrow */
.nav__arrow.is-air::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid var(--brass-hi);
  background: rgb(var(--ink-rgb) / 0.6);
  box-shadow: 0 0 8px rgb(var(--brass-hi-rgb) / 0.8);
  transform: translate(13px, -13px);
}
.nav__label {
  position: absolute;
  left: 50%;
  bottom: 46px;
  transform: translate(-50%, 4px);
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stucco);
  background: rgb(var(--ink-rgb) / 0.62);
  border: 1px solid rgb(var(--stucco-rgb) / 0.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.4s var(--ease-out);
}
.nav__arrow.is-ahead .nav__label,
.nav__arrow:hover .nav__label,
.nav__arrow:focus-visible .nav__label { opacity: 1; transform: translate(-50%, 0); }
.nav__arrow:hover, .nav__arrow:focus-visible { z-index: 20 !important; }
@media (hover: none) {
  .nav__arrow.is-ahead.is-onscreen .nav__label { opacity: 0; }
}
body.is-opening .nav, body.is-travel .nav, body.is-pilot .nav, body.is-compare .nav, body.is-sweeping .nav { opacity: 0; }
body.is-opening .nav *, body.is-travel .nav *, body.is-pilot .nav *, body.is-compare .nav * { pointer-events: none; }

/* ---------------------------------------------------------------- aerial */
/* the rail: every place, the aerial views after a thin divider with a dashed frame */
.rail__sep { align-self: center; width: 1px; height: 46px; margin: 0 4px 22px; background: linear-gradient(transparent, rgb(var(--stucco-rgb) / 0.35), transparent); }
.room[data-zone="aerial"] .room__arch { border-style: dashed; }

.tool--air { border-color: rgb(var(--brass-rgb) / 0.75); color: var(--brass-hi); box-shadow: 0 0 0 1px rgb(var(--brass-rgb) / 0.2), 0 8px 26px rgb(var(--brass-rgb) / 0.25); }
.tool--air:hover, .tool--air:focus-visible { background: var(--brass); color: var(--ink); border-color: var(--brass-hi); }
.tool--air svg { stroke-width: 1.5; }
.tool--air:not([hidden]) { animation: airIn 0.6s var(--ease-out); }
@keyframes airIn { from { opacity: 0; transform: translateY(6px) scale(0.92); } to { opacity: 1; transform: none; } }

/* minimap: drones are outlined, and out of reach (dimmed) while you are indoors */
.map .node--air use { fill: rgb(var(--ink-rgb) / 0.35); stroke: rgb(var(--brass-hi-rgb) / 0.85); stroke-width: 1.3; }
.map .node--air.is-here use { fill: var(--brass); stroke: var(--brass-hi); }
.map .edge--air { stroke-dasharray: 1 3; }


/* location dot of an aerial view, up in the sky */
.door--air .door__dot { border-style: dashed; }

/* ---------------------------------------------------------------- loading curtain */
.veil__arch::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 46%;
  background: linear-gradient(transparent, rgb(var(--shadow-rgb) / 0.55));
  pointer-events: none;
}
.veil__load {
  position: absolute;
  left: 50%;
  bottom: calc(17vh + env(safe-area-inset-bottom));
  transform: translate(-50%, 10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  opacity: 0;
  transition: opacity 0.45s 0.2s, transform 0.8s 0.2s var(--ease-out);
}
.veil.is-in .veil__load { opacity: 1; transform: translate(-50%, 0); }
.veil.is-out .veil__load { opacity: 0; transition-delay: 0s; }
.veil.has-vid .veil__load { display: none; }
.veil__name {
  font-family: var(--display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-track);
  text-transform: var(--room-case);
  font-size: clamp(24px, 3.4vw, 40px);
  color: var(--stucco);
  white-space: nowrap;
  text-shadow: 0 2px 22px rgb(var(--shadow-rgb) / 0.85);
}
.veil__bar {
  width: 140px;
  height: 2px;
  border-radius: 2px;
  overflow: hidden;
  background: rgb(var(--stucco-rgb) / 0.22);
}
.veil__bar i {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--brass-hi), transparent);
  animation: veilBar 1.15s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes veilBar { from { transform: translateX(-110%); } to { transform: translateX(250%); } }

/* ---------------------------------------------------------------- layouts */
@media (max-width: 860px) {
  .nav { --rx: 92px; --nav-bottom: 208px; }
}
@media (hover: none), (max-width: 860px) {
  .nav { display: none; }
}
@media (max-width: 640px) {
  .nav { --rx: 80px; --nav-bottom: 200px; }
  .rail { gap: 7px; }
  .rail__sep { height: 40px; margin: 0 1px 20px; }
  .room { width: 48px; gap: 7px; }
  .room__arch { width: 48px; height: 62px; }
  .room__name { font-size: 8px; letter-spacing: 0.06em; }
  .nav__arrow svg { width: 46px; height: 46px; }
  .nav__label { font-size: 10px; padding: 5px 10px; }
  .veil__load { bottom: calc(24vh + env(safe-area-inset-bottom)); }
}
@media (max-height: 520px) and (orientation: landscape) {
  .nav { --rx: 62px; --nav-bottom: 64px; }
  .nav__label { bottom: 40px; }
  /* one low row: five tools, the looks and four rooms have to share 844 px */
  .dock { gap: 8px; }
  .tools { gap: 6px; }
  .tool, .tool--icon { width: 34px; height: 34px; }
  .tool svg { width: 15px; height: 15px; }
  .rail { gap: 6px; }
  .room { width: 34px; }
  .room__arch { width: 34px; height: 34px; }
  .room__name { display: none; }
  .rail { gap: 5px; }
  .rail__sep { height: 28px; margin: 0 1px; }
  #gyroBtn { display: none; }
  .look { padding: 0 10px; gap: 0; }
  .look svg { display: none; }
  .look-compare { width: 34px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .veil__bar i { animation-duration: 2.4s; }
}

/* six places in the rail on the narrowest phones */
@media (max-width: 400px) {
  .rail { gap: 5px; }
  .room { width: 44px; }
  .room__arch { width: 44px; height: 56px; }
}
@media (max-width: 352px) {
  .rail { gap: 4px; }
  .rail__sep { margin: 0 0 20px; }
  .room { width: 38px; gap: 6px; }
  .room__arch { width: 38px; height: 50px; }
  .room__name { font-size: 7px; letter-spacing: 0.02em; }
}