/* 360 tour template: looks, sweep, compare, logo, plan, phone layouts.
   Loaded after tour.css. Looks = staging.json "looks" (e.g. Vacant | In operation |
   Dusk): one switcher in the dock, a line of light that sweeps the new look in, and a
   draggable side by side compare. Colours come from the same brand tokens. */

.pano { transition: opacity 0.9s var(--ease); }
.pano.is-waiting { opacity: 0; }
.pano .snap { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; will-change: clip-path; }
.pano--b { z-index: 1; pointer-events: none; will-change: clip-path; clip-path: inset(0 0 0 100%); }
.pano--b.is-swapping { opacity: 0.25; transition: opacity 0.3s; }
.shade { z-index: 2; }
button, [role="button"], .door { touch-action: manipulation; }
.stage { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* ---------------------------------------------------------------- the sweep */
.sweep { position: absolute; top: 0; bottom: 0; left: 0; width: 0; z-index: 3; pointer-events: none; opacity: 0; will-change: transform; }
.sweep.is-on { opacity: 1; }
.sweep::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -110px;
  width: 220px;
  background: linear-gradient(90deg, transparent, rgb(var(--brass-hi-rgb) / 0.08) 38%, rgb(var(--stucco-rgb) / 0.2) 50%, rgb(var(--brass-hi-rgb) / 0.08) 62%, transparent);
}
.sweep::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  width: 2px;
  background: linear-gradient(180deg, rgb(var(--brass-hi-rgb) / 0) 0%, var(--brass-hi) 14%, #fffaf0 50%, var(--brass-hi) 86%, rgb(var(--brass-hi-rgb) / 0) 100%);
  box-shadow: 0 0 16px 2px rgb(var(--brass-hi-rgb) / 0.8), 0 0 70px 10px rgb(var(--brass-rgb) / 0.3);
}
body.is-sweeping .door, body.is-compare .door { opacity: 0; pointer-events: none; transition: opacity 0.4s; }
/* waiting at its starting edge while the new look's tiles arrive */
.sweep.is-prime { animation: primePulse 0.9s ease-in-out infinite; }
@keyframes primePulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }

/* ---------------------------------------------------------------- the switcher */
.looks { grid-column: 1; grid-row: 1; justify-self: start; align-self: end; position: relative; display: flex; align-items: center; gap: 8px; }
.looks__seg {
  position: relative;
  display: flex;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid rgb(var(--stucco-rgb) / 0.18);
  background: var(--glass);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.28);
  transition: box-shadow 0.6s;
}
.looks__glow {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: 0;
  border-radius: 999px;
  background: var(--brass);
  box-shadow: 0 6px 22px rgb(var(--brass-rgb) / 0.45), inset 0 1px 0 rgb(255 255 255 / 0.18);
  transition: transform 0.55s cubic-bezier(0.34, 1.3, 0.5, 1), width 0.55s cubic-bezier(0.34, 1.3, 0.5, 1), opacity 0.3s;
  pointer-events: none;
}
/* the active pill shimmers while its look loads */
.looks.is-loading .looks__glow {
  background: linear-gradient(100deg, var(--brass) 30%, var(--brass-hi) 50%, var(--brass) 70%);
  background-size: 240% 100%;
  animation: glowLoad 1s linear infinite;
}
@keyframes glowLoad { from { background-position: 110% 0; } to { background-position: -130% 0; } }
.look {
  position: relative;
  z-index: 1;
  height: 40px;
  padding: 0 16px 0 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgb(var(--stucco-rgb) / 0.8);
  transition: color 0.35s;
}
.look svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.look:hover { color: var(--stucco); }
.look[aria-checked="true"] { color: var(--ink); }
.look:focus-visible { outline: 1px solid var(--brass-hi); outline-offset: 2px; }
.look__short { display: none; }

/* hover preview: this room in that look */
.look__card {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 16px);
  width: 196px;
  transform: translate(-50%, 8px) scale(0.97);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease-out), transform 0.45s var(--ease-out);
}
.look__card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgb(var(--brass-rgb) / 0.7);
  box-shadow: 0 18px 44px rgb(0 0 0 / 0.5);
  background: var(--ink-2);
}
.look__card b {
  display: block;
  margin-top: 8px;
  text-align: center;
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--stucco);
  text-shadow: 0 1px 8px rgb(0 0 0 / 0.8);
}
@media (hover: hover) {
  .look:hover .look__card, .look:focus-visible .look__card { opacity: 1; transform: translate(-50%, 0) scale(1); }
  .look[aria-checked="true"]:hover .look__card { opacity: 0; }
}
/* the first option sits near the screen edge: its card opens to the right instead */
.looks__glow + .look .look__card { left: -4px; transform: translate(0, 8px) scale(0.97); transform-origin: left bottom; }
@media (hover: hover) {
  .looks__glow + .look:hover .look__card, .looks__glow + .look:focus-visible .look__card { transform: translate(0, 0) scale(1); }
}
/* tapped during a running switch: it is next */
.look.is-queued { color: var(--brass-hi); box-shadow: inset 0 0 0 1px var(--brass); }

.look-compare {
  height: 46px;
  padding: 0 17px 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  border: 1px solid rgb(var(--stucco-rgb) / 0.18);
  background: var(--glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(var(--stucco-rgb) / 0.85);
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.28);
  transition: border-color 0.3s, background 0.3s, color 0.3s;
}
.look-compare svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.look-compare:hover, .look-compare:focus-visible { border-color: var(--brass); color: var(--brass-hi); }
.look-compare[aria-pressed="true"] { background: var(--brass); border-color: var(--brass); color: var(--ink); }

/* first visit: point at the switcher once */
.looks.is-hint::before {
  content: attr(data-hint);
  position: absolute;
  left: 18px;
  bottom: calc(100% + 14px);
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--brass);
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.35);
  animation: hintIn 0.7s var(--ease-out) both, hintBob 2.4s 0.7s ease-in-out infinite;
  pointer-events: none;
}
.looks.is-hint::after {
  content: "";
  position: absolute;
  left: 36px;
  bottom: calc(100% + 8px);
  width: 12px;
  height: 12px;
  background: var(--brass);
  transform: rotate(45deg);
  animation: hintIn 0.7s var(--ease-out) both, hintBob 2.4s 0.7s ease-in-out infinite;
  pointer-events: none;
}
.looks.is-hint .looks__seg { box-shadow: 0 0 0 1px var(--brass), 0 0 34px rgb(var(--brass-rgb) / 0.45), 0 10px 30px rgb(0 0 0 / 0.28); }
@keyframes hintIn { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@keyframes hintBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }

/* ---------------------------------------------------------------- compare */
.split { position: absolute; inset: 0; z-index: 3; pointer-events: none; --x: 50%; }
.split__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--x);
  width: 36px;
  margin-left: -18px;
  pointer-events: auto;
  touch-action: none;
  cursor: ew-resize;
}
.split__line::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 17px;
  width: 2px;
  background: linear-gradient(180deg, rgb(var(--brass-hi-rgb) / 0.2), var(--brass-hi) 22%, var(--brass-hi) 78%, rgb(var(--brass-hi-rgb) / 0.2));
  box-shadow: 0 0 14px rgb(var(--brass-rgb) / 0.7);
}
.split__knob {
  position: absolute;
  top: 50%;
  left: var(--x);
  width: 54px;
  height: 54px;
  margin: -27px 0 0 -27px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brass);
  color: var(--ink);
  border: 2px solid rgb(255 255 255 / 0.35);
  box-shadow: 0 8px 26px rgb(0 0 0 / 0.45), 0 0 0 6px rgb(var(--brass-rgb) / 0.22);
  pointer-events: auto;
  touch-action: none;
  cursor: ew-resize;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s;
}
.split__knob svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.split.is-drag .split__knob, .split__knob:hover { transform: scale(1.08); box-shadow: 0 10px 30px rgb(0 0 0 / 0.5), 0 0 0 10px rgb(var(--brass-rgb) / 0.25); }
.split__tag {
  position: absolute;
  top: calc(50% - 82px);
  height: 34px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  border: 1px solid rgb(var(--stucco-rgb) / 0.25);
  background: var(--glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--stucco);
  pointer-events: auto;
  transition: opacity 0.3s, border-color 0.3s, color 0.3s;
}
.split__tag::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: 0.7;
}
.split__tag:hover { border-color: var(--brass); color: var(--brass-hi); }
.split__tag--a { right: calc(100% - var(--x) + 16px); }
.split__tag--b { left: calc(var(--x) + 16px); }
.split.no-a .split__tag--a, .split.no-b .split__tag--b { opacity: 0; pointer-events: none; }
.split.is-anim .split__line, .split.is-anim .split__knob { transition: left 0.7s cubic-bezier(0.65, 0, 0.2, 1), transform 0.3s, box-shadow 0.3s; }
.split.is-anim .split__tag--a { transition: right 0.7s cubic-bezier(0.65, 0, 0.2, 1), opacity 0.3s; }
.split.is-anim .split__tag--b { transition: left 0.7s cubic-bezier(0.65, 0, 0.2, 1), opacity 0.3s; }
.split.is-hint::after {
  content: attr(data-hint);
  position: absolute;
  top: calc(50% + 42px);
  left: var(--x);
  transform: translateX(-50%);
  padding: 7px 13px;
  border-radius: 999px;
  background: rgb(var(--ink-rgb) / 0.78);
  border: 1px solid var(--line);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--brass-hi);
  animation: hintIn 0.6s var(--ease-out) both;
}
.split.is-hint .split__knob { animation: knobNudge 1.6s ease-in-out 2; }
@keyframes knobNudge { 0%, 100% { translate: 0 0; } 30% { translate: -10px 0; } 70% { translate: 10px 0; } }
body.is-compare .moments { opacity: 0; pointer-events: none; }

/* ---------------------------------------------------------------- logo + plan */
.caption__mark.has-logo { display: block; width: max-content; margin-bottom: 16px; line-height: 0; }
.caption__mark .logo { height: 19px; width: auto; display: block; filter: drop-shadow(0 1px 8px rgb(0 0 0 / 0.45)); }
.opening__credit.has-logo { display: flex; align-items: center; justify-content: center; gap: 12px; }
.opening__credit .logo { height: 15px; width: auto; display: block; }

/* the minimap sits on a glass card so it reads over sky, glare and lit windows */
.map {
  width: 224px;
  padding: 12px 12px 8px;
  border-radius: 20px;
  background: rgb(var(--ink-rgb) / 0.5);
  border: 1px solid rgb(var(--stucco-rgb) / 0.14);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 12px 34px rgb(0 0 0 / 0.3);
}
.map .node text { fill: var(--mist); }
.map .plan .outline { fill: rgb(var(--stucco-rgb) / 0.06); stroke: rgb(var(--stucco-rgb) / 0.5); stroke-width: 1.1; stroke-linejoin: round; }
.map .plan .mark { fill: none; stroke: var(--brass); stroke-width: 2.2; stroke-linecap: round; opacity: 0.9; }
.map .north path { fill: rgb(var(--stucco-rgb) / 0.55); }
.map .north text { font-family: var(--sans); font-size: 7.5px; font-weight: 600; letter-spacing: 0.1em; fill: rgb(var(--stucco-rgb) / 0.5); }

.caption .variants { margin-top: 14px; }

/* ---------------------------------------------------------------- layouts */

.tool { white-space: nowrap; }

/* The bottom row (looks, places, tools) gives up space in steps as the screen narrows,
   so nothing ever runs off the right edge: tool labels (Play keeps its own longest), then
   the Compare label, then the Play label, then the tools move to a column under the map. */
@media (max-width: 1499px) {
  .dock { grid-template-columns: auto 1fr auto; }
  .tool:not(.tool--play) span { display: none; }
  .tool:not(.tool--play) { width: 42px; padding: 0; justify-content: center; }
}
@media (max-width: 1400px) {
  .look-compare span { display: none; }
  .look-compare { width: 46px; padding: 0; justify-content: center; }
}
@media (max-width: 1340px) {
  .tool span { display: none; }
  .tool { width: 42px; padding: 0; justify-content: center; }
}
@media (max-width: 1180px) {
  .map { width: clamp(176px, 17vw, 224px); }
}
@media (max-width: 1220px) and (min-height: 521px) {
  .dock { grid-template-columns: auto 1fr; }
  .tools {
    position: fixed;
    right: var(--gutter);
    top: calc(var(--gutter) + env(safe-area-inset-top) + var(--map-h, 196px));
    flex-direction: column;
    gap: 9px;
  }
}
@media (max-width: 1000px) and (min-width: 861px) {
  .look__name { display: none; }
  .look__short { display: inline; }
  .rail { gap: 10px; }
  .room { width: 52px; }
  .room__arch { width: 52px; height: 68px; }
}

/* phones and portrait tablets: switcher above the rooms, tools stacked under the map */
@media (max-width: 860px) {
  .dock { grid-template-columns: 1fr; gap: 12px; }
  .looks { grid-column: 1; grid-row: 1; justify-self: center; gap: 6px; }
  .rail { grid-column: 1; grid-row: 2; }
  .tools {
    position: fixed;
    right: var(--gutter);
    top: calc(var(--gutter) + env(safe-area-inset-top) + var(--map-h, 196px));
    flex-direction: column;
    gap: 9px;
  }
  .tool, .tool--icon { width: 42px; height: 42px; padding: 0; justify-content: center; }
  .tool span { display: none; }
  .look__card { display: none; }
  .looks.is-hint::before { left: 50%; transform: translateX(-50%); }
  .looks.is-hint::after { left: calc(50% - 6px); }
}

@media (max-width: 860px) {
  :root { --map-h: 206px; }
}
@media (max-width: 640px) {
  :root { --map-h: 150px; }
  .map { width: 152px; padding: 8px 8px 4px; border-radius: 16px; top: calc(var(--gutter) + env(safe-area-inset-top) - 4px); }
  .map .node text { font-size: 12px; letter-spacing: 0.1em; }
  .caption { max-width: calc(100vw - 150px - var(--gutter) * 3); }
  .caption__room { font-size: clamp(25px, 7.2vw, 30px); line-height: 1.04; }
  .caption__mark .logo { height: 16px; }
  .caption__mark.has-logo { margin-bottom: 12px; }
  .look { height: 38px; padding: 0 12px 0 10px; gap: 6px; font-size: 10.5px; letter-spacing: 0.08em; }
  .look svg { width: 15px; height: 15px; }
  .look-compare { width: 44px; height: 44px; }
  .split__knob { width: 50px; height: 50px; margin: -25px 0 0 -25px; }
  /* below the knob on phones, clear of the tool column on the right */
  .split__tag { top: calc(50% + 38px); height: 32px; padding: 0 12px; font-size: 10px; }
  .split.is-hint::after { top: calc(50% + 82px); }
}
@media (max-width: 400px) {
  .look__name { display: none; }
  .look__short { display: inline; }
}
@media (max-width: 352px) {
  .look { padding: 0 10px 0 9px; letter-spacing: 0.04em; }
  .look svg { display: none; }
}

/* phones held sideways: one low row, everything smaller */
@media (max-height: 520px) and (orientation: landscape) {
  .dock { grid-template-columns: 1fr auto 1fr; gap: 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .looks { grid-column: 1; grid-row: 1; justify-self: start; }
  .rail { grid-column: 2; grid-row: 1; gap: 8px; justify-content: center; }
  .tools { position: static; grid-column: 3; grid-row: 1; flex-direction: row; justify-self: end; }
  .room { width: 46px; gap: 5px; }
  .room__arch { width: 40px; height: 40px; }
  .room__name { font-size: 7.5px; letter-spacing: 0.08em; }
  .look { height: 34px; padding: 0 10px; }
  .look__name { display: none; }
  .look__short { display: inline; }
  .look-compare { width: 40px; height: 40px; }
  .tool, .tool--icon { width: 38px; height: 38px; }
  .map { width: 118px; }
  .caption__room { font-size: 24px; }
  .caption__kind { display: none; }
  .caption .variants { margin-top: 8px; }
  .split__tag { top: calc(50% - 64px); }
  /* the opening frame sizes from the height, so it never runs off a short screen */
  .opening__frame { width: auto; height: min(300px, 74vh); padding-top: 0; }
  .opening__word { font-size: clamp(22px, 6.6vh, 38px); }
  .opening__place { margin-bottom: 8px; font-size: 10px; }
  .opening__enter { margin-top: 16px; padding: 9px 26px; }
  .opening__credit { bottom: calc(8px + env(safe-area-inset-bottom)); }
}