/* =====================================================================
   CROZIER BRAND PALETTE (Official — from crozier-brand-guideline-2025.pdf)
   The signature accent is a vivid CORAL / red-orange (not a true red).
   Variable names still use `--crozier-red` for backward compatibility
   with existing rules — the value is now the authoritative coral.

   PRIMARY (coral family)
     #FE5C38  bold coral — primary brand accent
     #FF9F89  light coral
     #FECFBF  pale blush

   WARM NEUTRALS
     #706961  warm dark
     #AAA298  warm mid
     #D7D2CA  warm stone
     #E9E7DE  warm cream

   COOL NEUTRALS
     #0C0D0C  near-black (primary dark)
     #3D3E3F  dark gray
     #707274  mid gray
     #A3A7A8  light gray
     #D4D6D8  pale gray
     #F1F1F1  near-white
   ===================================================================== */
:root {
  /* Brand primary — bold coral (FE5C38 = rgb 254, 92, 56). Aliased
     under the old `--crozier-red` name to avoid breaking existing rules. */
  --crozier-red: #FE5C38;
  --crozier-red-hover: #E54A28;
  --crozier-coral: #FE5C38;
  --crozier-coral-hover: #E54A28;
  --crozier-coral-light: #FF9F89;
  --crozier-coral-pale: #FECFBF;

  /* Cool neutrals (true brand black is slightly cooler than pure #111). */
  --crozier-black: #0C0D0C;
  --crozier-black-soft: rgba(12, 13, 12, 0.85);
  --crozier-black-hover: rgba(12, 13, 12, 0.95);
  --crozier-charcoal: #3D3E3F;
  --crozier-gray-dark: #707274;
  --crozier-gray-mid: #A3A7A8;
  --crozier-gray-light: #D4D6D8;
  --crozier-white: #FFFFFF;
  --crozier-white-off: #F1F1F1;

  /* Warm neutrals — useful if you ever want section backgrounds or
     subtle cards with the brand's warm-stone family. */
  --crozier-warm-dark: #706961;
  --crozier-warm-mid: #AAA298;
  --crozier-stone: #D7D2CA;
  --crozier-cream: #E9E7DE;

  /* Body text colors — kept from earlier tokens for prose readability. */
  --crozier-text-body: #333333;
  --crozier-text-muted: #6B6B6B;
  --crozier-divider: #9A9A9A;

  --font-serif: "Cormorant Garamond", "Times New Roman", serif;
  --font-sans:  "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  -ms-content-zooming: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

html, body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  font-family: var(--font-sans);
  font-size: 16px;
  background-color: #000;
  color: #fff;
}

a, a:hover, a:active, a:visited {
  text-decoration: none;
  color: inherit;
}

#pano {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
}

/* "Entering the room" dolly — runs while .transitioning is on #pano.
   The scale curve 1.00 → 1.10 → 1.00 over 1400ms gives the sensation
   of walking forward through the doorway: push in at the midpoint
   (when scene A and scene B are roughly equally crossfaded), then
   settle at normal scale to "arrive" in the new room. Eased so the
   motion accelerates into the push and decelerates into the arrival,
   like a real footstep. No blur, no FOV crunch — just smooth depth. */
@keyframes panoEnterRoom {
  0%   { -webkit-transform: scale(1);     transform: scale(1); }
  50%  { -webkit-transform: scale(1.10);  transform: scale(1.10); }
  100% { -webkit-transform: scale(1);     transform: scale(1); }
}

#pano.transitioning {
  -webkit-animation: panoEnterRoom 1400ms cubic-bezier(0.45, 0, 0.55, 1);
          animation: panoEnterRoom 1400ms cubic-bezier(0.45, 0, 0.55, 1);
}

/* On mobile / older GPUs, halve the scale push — keeps the effect but
   reduces the risk of stutters when the canvas is large and the device
   is mid-range. */
body.mobile #pano.transitioning {
  -webkit-animation: panoEnterRoomMobile 1400ms cubic-bezier(0.45, 0, 0.55, 1);
          animation: panoEnterRoomMobile 1400ms cubic-bezier(0.45, 0, 0.55, 1);
}
@keyframes panoEnterRoomMobile {
  0%   { -webkit-transform: scale(1);     transform: scale(1); }
  50%  { -webkit-transform: scale(1.05);  transform: scale(1.05); }
  100% { -webkit-transform: scale(1);     transform: scale(1); }
}

/* Title bar — floating pill in the top-center. No longer a full-width
   bar; the floor plan replaces the linear scene list, so the title can
   breathe with whitespace on both sides. */
#titleBar {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  height: auto;
  width: auto;
  max-width: calc(100% - 200px);
  text-align: center;
  pointer-events: none;
  z-index: 5;
}

.mobile #titleBar {
  top: 14px;
}

/* These rules previously made room for the side-toggle / fullscreen
   buttons in the old full-width title bar. The new floating pill is
   centered with translateX so it no longer needs side reservations.
   Kept as no-ops to avoid surprises if the body class is still toggled. */
body.fullscreen-enabled #titleBar,
body.fullscreen-enabled.mobile #titleBar,
body.multiple-scenes #titleBar,
body.multiple-scenes.mobile #titleBar {
  /* intentionally empty — floating pill handles its own positioning */
}

/* Scene name pill — floating capsule with a Crozier-red accent dot to
   its left. Editorial serif (Cormorant Garamond) at a medium weight,
   UPRIGHT (no italic — matches Crozier's headline treatment from the
   brand guidelines). Subtle backdrop blur so it reads cleanly over
   any photo. */
#titleBar .sceneName {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 22px;
  background-color: rgba(17, 17, 17, 0.55);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  border: 0.5px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.06em;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  pointer-events: auto;

  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* Red accent dot before the scene name — Crozier's "curator's stamp". */
#titleBar .sceneName::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--crozier-red);
  flex-shrink: 0;
}

.mobile #titleBar .sceneName {
  font-size: 13px;
  padding: 6px 16px;
}

/* Floating circular toggle — top-right of the viewport. Backdrop blur
   with a thin white border, fills Crozier red on hover. */
#fullscreenToggle {
  display: none;
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  padding: 5px;
  background-color: rgba(17, 17, 17, 0.45);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  border: 0.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transition: background-color 200ms ease, border-color 200ms ease;
  z-index: 5;
}

.no-touch #fullscreenToggle:hover {
  background-color: var(--crozier-red);
  border-color: var(--crozier-red);
}

.mobile #fullscreenToggle {
  width: 50px;
  height: 50px;
}

body.fullscreen-enabled #fullscreenToggle {
  display: block;
}

#fullscreenToggle .icon {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 30px;
  height: 30px;
}

.mobile #fullscreenToggle .icon {
  top: 10px;
  right: 10px;
}

#fullscreenToggle .icon.on {
  display: none;
}

#fullscreenToggle .icon.off {
  display: block;
}

#fullscreenToggle.enabled .icon.on {
  display: block;
}

#fullscreenToggle.enabled .icon.off {
  display: none;
}

/* Floating circular toggle — sits next to fullscreen in the top-right. */
#autorotateToggle {
  display: block;
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  padding: 5px;
  background-color: rgba(17, 17, 17, 0.45);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  border: 0.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transition: background-color 200ms ease, border-color 200ms ease;
  z-index: 5;
}

.no-touch #autorotateToggle:hover {
  background-color: var(--crozier-red);
  border-color: var(--crozier-red);
}

.mobile #autorotateToggle {
  width: 50px;
  height: 50px;
}

/* If there is a fullscreen button, autorotate must placed a bit to the left */
/* When fullscreen toggle is present, autorotate sits to its left
   (separated by 8px to look like a pair, not overlapping). */
body.fullscreen-enabled #autorotateToggle {
  right: 68px;
}

body.fullscreen-enabled.mobile #autorotateToggle {
  right: 64px;
}

#autorotateToggle .icon {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 30px;
  height: 30px;
}

.mobile #autorotateToggle .icon {
  top: 10px;
  right: 10px;
}

#autorotateToggle .icon.on {
  display: none;
}

#autorotateToggle .icon.off {
  display: block;
}

#autorotateToggle.enabled .icon.on {
  display: block;
}

#autorotateToggle.enabled .icon.off {
  display: none;
}

/* Old scene-list toggle and panel are HIDDEN in the floor-plan design.
   The floor plan widget in the bottom-left replaces them. We keep the
   DOM intact (still functional under the hood) so index.js scene
   switching keeps working with no JS rewrite needed. */
#sceneListToggle,
#sceneList {
  display: none !important;
}

/* Home button — top-left floating circular control. Same visual style
   as autorotate/fullscreen for consistency. Clicking it reloads the
   page so the splash screen appears again (handled in index.js). */
#homeButton {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 20px;
  left: 20px;
  width: 40px;
  height: 40px;
  padding: 8px;
  background-color: rgba(17, 17, 17, 0.45);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  border: 0.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  transition: background-color 200ms ease, border-color 200ms ease, transform 180ms ease;
  z-index: 5;
}

.no-touch #homeButton:hover {
  background-color: var(--crozier-red);
  border-color: var(--crozier-red);
  transform: scale(1.05);
}

#homeButton:focus {
  outline: none;
  border-color: var(--crozier-red);
  box-shadow: 0 0 0 3px rgba(254, 92, 56, 0.35);
}

#homeButton svg {
  width: 22px;
  height: 22px;
  pointer-events: none;
  display: block;
}

.mobile #sceneListToggle {
  width: 50px;
  height: 50px;
}

#sceneListToggle .text {
  position: absolute;
  top: 5px;
  left: 15px;
  width: 100%;
  line-height: 30px;
}

#sceneListToggle .icon {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 30px;
  height: 30px;
}

.mobile #sceneListToggle .icon {
  top: 10px;
  right: 10px;
}

#sceneListToggle .icon.on {
  display: none;
}

#sceneListToggle .icon.off {
  display: block;
}

#sceneListToggle.enabled .icon.on {
  display: block;
}

#sceneListToggle.enabled .icon.off {
  display: none;
}

#sceneList {
  position: absolute;
  top: 0;
  left: -220px;
  padding-top: 40px;
  width: 220px;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  margin-left: 0;
  -webkit-transition: margin-left 0.5s ease-in-out;
  transition: margin-left 0.5s ease-in-out;
}

.mobile #sceneList {
  padding-top: 50px;
}

#sceneList .scenes {
  width: 100%;
  background-color: var(--crozier-black-soft);
}

.mobile #sceneList {
  width: 100%;
  height: 100%;
  left: -100%;
}

.mobile #sceneList.enabled {
  margin-left: 100%;
}

.mobile #sceneList .scenes {
  height: 100%;
}

#sceneList.enabled {
  margin-left: 220px;
}

#sceneList .scene {
  display: block;
  width: 100%;
  height: 30px;
}

.mobile #sceneList .scene {
  height: 40px;
}

#sceneList .scene .text {
  width: 100%;
  height: 100%;
  padding: 0 15px;
  line-height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.04em;
}

.mobile #sceneList .scene .text {
  line-height: 40px;
}

/* Subtle hover state — slight white wash to indicate interactivity
   without distracting from the active-scene red. */
.no-touch #sceneList .scene:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

/* Currently active scene — Crozier red. Used sparingly per the brand's
   "curator's stamp" approach: only one item is red at any time. */
#sceneList .scene.current {
  background-color: var(--crozier-red);
  border-left: 3px solid var(--crozier-white);
}

.no-touch #sceneList .scene.current:hover {
  background-color: var(--crozier-red-hover);
}

/* Hide scene list when only a single scene exists */
body.single-scene #sceneList, body.single-scene #sceneListToggle {
  display: none;
}

/* Link hotspot */

.link-hotspot {
  width: 60px;
  height: 60px;
  margin-left: -30px;
  margin-top: -30px;
  opacity: 0.9;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.no-touch .link-hotspot:hover {
  opacity: 1;
}

.mobile .link-hotspot {
  width: 70px;
  height: 70px;
}

.link-hotspot-icon {
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.link-hotspot-tooltip {
  position: absolute;
  left: 100%;
  top: 14px; /* ( 60 - (16 + 2*8) ) / 2 */

  margin-left: 3px;

  font-size: 16px;

  max-width: 300px;

  padding: 8px 10px;

  border-radius: 5px;

  background-color: var(--crozier-black-soft);

  color: #fff;
  font-family: var(--font-sans);
  font-weight: 400;
  letter-spacing: 0.02em;

  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;

  cursor: pointer;

  opacity: 0;

  -ms-transform: translateX(-8px);
  -webkit-transform: translateX(-8px);
  transform: translateX(-8px);

  -webkit-transition: -ms-transform 0.3s,
                      -webkit-transform 0.3s,
                      transform 0.3s,
                      opacity 0.3s;
  transition: -ms-transform 0.3s,
              -webkit-transform 0.3s,
              transform 0.3s,
              opacity 0.3s;
}

.mobile .link-hotspot {
  top: 19px; /* ( 70 - (16 + 2*8) ) / 2 */
}

.no-touch .link-hotspot:hover .link-hotspot-tooltip {
  opacity: 1;
  -ms-transform: translateX(0);
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

/* Prevent tooltip from triggering */
.link-hotspot-tooltip {
  pointer-events: none;
}
.no-touch .link-hotspot:hover .link-hotspot-tooltip {
  pointer-events: all;
}

/* Fallback mode without pointer-events (IE8-10) */
.tooltip-fallback .link-hotspot-tooltip {
  display: none;
}
.no-touch .tooltip-fallback .link-hotspot:hover .link-hotspot-tooltip {
  display: block;
}

/* Info hotspot */

.info-hotspot {
  line-height: 1.2em;
  opacity: 0.9;
  -webkit-transition: opacity 0.2s 0.2s;
  transition: opacity 0.2s 0.2s;
}

.no-touch .info-hotspot:hover {
  opacity: 1;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.info-hotspot.visible {
  opacity: 1;
}

.info-hotspot .info-hotspot-header {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background-color: var(--crozier-black);
  cursor: pointer;
  -webkit-transition: width 0.3s ease-in-out 0.5s,
                      border-radius 0.3s ease-in-out 0.5s;
  transition: width 0.3s ease-in-out 0.5s,
              border-radius 0.3s ease-in-out 0.5s;
}

.mobile .info-hotspot .info-hotspot-header {
  width: 50px;
  height: 50px;
  border-radius: 25px;
}

.desktop.no-touch .info-hotspot .info-hotspot-header:hover {
  width: 260px;
  border-radius: 5px;
  -webkit-transition: width 0.3s ease-in-out,
                      border-radius 0.3s ease-in-out;
  transition: width 0.3s ease-in-out,
              border-radius 0.3s ease-in-out;
}

.desktop .info-hotspot.visible .info-hotspot-header,
.desktop.no-touch .info-hotspot.visible .info-hotspot-header:hover {
  width: 260px;
  border-radius: 5px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  -webkit-transition: width 0.3s ease-in-out,
                      border-radius 0.3s ease-in-out;
  transition: width 0.3s ease-in-out,
              border-radius 0.3s ease-in-out;
}

.info-hotspot .info-hotspot-icon-wrapper {
  width: 40px;
  height: 40px;
}

.mobile .info-hotspot .info-hotspot-icon-wrapper {
  width: 50px;
  height: 50px;
}

.info-hotspot .info-hotspot-icon {
  width: 90%;
  height: 90%;
  margin: 5%;
}

.info-hotspot .info-hotspot-title-wrapper {
  position: absolute;
  left: 40px;
  top: 0;
  width: 0;
  height: 40px;
  padding: 0;
  overflow: hidden;
  -webkit-transition: width 0s 0.4s,
                      padding 0s 0.4s;
  transition: width 0s 0.4s,
              padding 0s 0.4s;
}

.desktop .info-hotspot.visible .info-hotspot-title-wrapper,
.desktop.no-touch .info-hotspot .info-hotspot-header:hover .info-hotspot-title-wrapper {
  width: 220px;
  padding: 0 5px;
  -webkit-transition: width 0s 0.4s,
                      padding 0s 0.4s;
  transition: width 0s 0.4s,
              padding 0s 0.4s;
}

.info-hotspot .info-hotspot-title-wrapper:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.info-hotspot .info-hotspot-title {
  display: inline-block;
  vertical-align: middle;

  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.info-hotspot .info-hotspot-close-wrapper {
  position: absolute;
  left: 260px;
  top: 0;
  height: 40px;
  width: 40px;
  border-top-right-radius: 5px;
  background-color: var(--crozier-red);
  visibility: hidden;
  -ms-transform: perspective(200px) rotateY(90deg);
  -webkit-transform: perspective(200px) rotateY(90deg);
  transform: perspective(200px) rotateY(90deg);
  -ms-transform-origin: 0 50% 0;
  -webkit-transform-origin: 0 50% 0;
  transform-origin: 0 50% 0;
  -webkit-transition: -ms-transform 0.3s 0.3s,
                      -webkit-transform 0.3s 0.3s,
                      transform 0.3s 0.3s,
                      visibility 0s 0.6s;
  transition: -ms-transform 0.3s 0.3s,
              -webkit-transform 0.3s 0.3s,
              transform 0.3s 0.3s,
              visibility 0s 0.6s;
}

.desktop .info-hotspot.visible .info-hotspot-close-wrapper {
  visibility: visible;
  -ms-transform: perspective(200px) rotateY(0deg);
  -webkit-transform: perspective(200px) rotateY(0deg);
  transform: perspective(200px) rotateY(0deg);
  -webkit-transition: -ms-transform 0.3s,
                      -webkit-transform 0.3s,
                      transform 0.3s,
                      visibility 0s 0s;
  transition: -ms-transform 0.3s,
              -webkit-transform 0.3s,
              transform 0.3s,
              visibility 0s 0s;
}

.info-hotspot .info-hotspot-close-icon {
  width: 70%;
  height: 70%;
  margin: 15%;
}

.info-hotspot .info-hotspot-text {
  position: absolute;
  width: 300px;
  height: auto;
  max-height: 200px;
  top: 40px;
  left: 0;
  padding: 10px;
  background-color: var(--crozier-black);
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  overflow-y: auto;
  visibility: hidden;
  /* rotate(90deg) causes transition flicker on Firefox 58 */
  -ms-transform: perspective(200px) rotateX(-89.999deg);
  -webkit-transform: perspective(200px) rotateX(-89.999deg);
  transform: perspective(200px) rotateX(-89.999deg);
  -ms-transform-origin: 50% 0 0;
  -webkit-transform-origin: 50% 0 0;
  transform-origin: 50% 0 0;
  -webkit-transition: -ms-transform 0.3s,
                      -webkit-transform 0.3s,
                      transform 0.3s,
                      visibility 0s 0.3s;
  transition: -ms-transform 0.3s,
              -webkit-transform 0.3s,
              transform 0.3s,
              visibility 0s 0.3s;

  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.desktop .info-hotspot.visible .info-hotspot-text {
  visibility: visible;
  -ms-transform: perspective(200px) rotateX(0deg);
  -webkit-transform: perspective(200px) rotateX(0deg);
  transform: perspective(200px) rotateX(0deg);
  -webkit-transition: -ms-transform 0.3s 0.3s,
                      -webkit-transform 0.3s 0.3s,
                      transform 0.3s 0.3s,
                      visibility 0s 0s;
  transition: -ms-transform 0.3s 0.3s,
              -webkit-transform 0.3s 0.3s,
              transform 0.3s 0.3s,
              visibility 0s 0s;
}

/* Info hotspot modal */

.desktop .info-hotspot-modal {
  display: none;
}

.info-hotspot-modal {
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 11000 !important;
  background-color: rgba(0,0,0,.5);
  line-height: 1.2em;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.2s ease-in-out 0.5s,
                      visibility 0s 0.7s;
  transition: opacity 0.2s ease-in-out 0.5s,
              visibility 0s 0.7s;
}

.info-hotspot-modal.visible {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.2s ease-in-out,
                      visibility 0s 0s;
  transition: opacity 0.2s ease-in-out,
              visibility 0s 0s;
}

.info-hotspot-modal .info-hotspot-header {
  position: absolute;
  top: 60px;
  left: 10px;
  right: 10px;
  width: auto;
  height: 50px;
  background-color: var(--crozier-black-soft);
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-in-out 0.2s;
  transition: opacity 0.3s ease-in-out 0.2s;
}

.info-hotspot-modal.visible .info-hotspot-header {
  opacity: 1;
  -webkit-transition: opacity 0.3s ease-in-out 0.2s;
  transition: opacity 0.3s ease-in-out 0.2s;
}

.info-hotspot-modal .info-hotspot-icon-wrapper {
  width: 50px;
  height: 50px;
}

.info-hotspot-modal .info-hotspot-icon {
  width: 90%;
  height: 90%;
  margin: 5%;
}

.info-hotspot-modal .info-hotspot-title-wrapper {
  position: absolute;
  top: 0;
  left: 50px;
  right: 50px;
  width: auto;
  height: 50px;
  padding: 0 10px;
}

.info-hotspot-modal .info-hotspot-title-wrapper:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.info-hotspot-modal .info-hotspot-title {
  display: inline-block;
  vertical-align: middle;

  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.info-hotspot-modal .info-hotspot-close-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  background-color: var(--crozier-red);
  cursor: pointer;
  transition: background-color 200ms ease;
}

.info-hotspot-modal .info-hotspot-close-wrapper:hover {
  background-color: var(--crozier-red-hover);
}

.info-hotspot-modal .info-hotspot-close-icon {
  width: 70%;
  height: 70%;
  margin: 15%;
}

.info-hotspot-modal .info-hotspot-text {
  position: absolute;
  top: 110px;
  bottom: 10px;
  left: 10px;
  right: 10px;
  padding: 10px;
  background-color: var(--crozier-black-soft);
  overflow-y: auto;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;

  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.info-hotspot-modal.visible .info-hotspot-text {
  opacity: 1;
  -webkit-transition: opacity 0.3s ease-in-out 0.4s;
  transition: opacity 0.3s ease-in-out 0.4s;
}

/* View control buttons */

.viewControlButton {
  display: none;
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 40px;
  height: 40px;
  padding: 5px;
  background-color: var(--crozier-black-soft);
  transition: background-color 200ms ease;
}

.no-touch .viewControlButton:hover {
  background-color: var(--crozier-red);
}

body.view-control-buttons .viewControlButton {
  display: block;
}

/* Hide controls when width is too small */
@media (max-width: 600px) {
  body.view-control-buttons .viewControlButton {
    display: none;
  }
}

.viewControlButton .icon {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 30px;
  height: 30px;
}

/* Center is at margin-left: -20px */
.viewControlButton-1 {
  margin-left: -145px;
}
.viewControlButton-2 {
  margin-left: -95px;
}
.viewControlButton-3 {
  margin-left: -45px;
}
.viewControlButton-4 {
  margin-left: 5px;
}
.viewControlButton-5 {
  margin-left: 55px;
}
.viewControlButton-6 {
  margin-left: 105px;
}

/* =====================================================================
   SPLASH / INTRO OVERLAY
   Full-screen entry screen with the Day_building image and an animated
   "LIC Building" title. Click anywhere to enter the tour.
   ===================================================================== */

#splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  /* No cursor:pointer here — only the CTA button at the bottom is
     clickable. The rest of the splash is a passive backdrop. */
  background: #0a0a0a;
  -webkit-transition: opacity 1100ms cubic-bezier(0.65, 0, 0.35, 1),
                      -webkit-transform 1100ms cubic-bezier(0.65, 0, 0.35, 1),
                      visibility 0s linear 1100ms;
  transition: opacity 1100ms cubic-bezier(0.65, 0, 0.35, 1),
              transform 1100ms cubic-bezier(0.65, 0, 0.35, 1),
              visibility 0s linear 1100ms;
}

/* Background image — Night_building gives a moodier, museum-after-hours
   feel that matches the Crozier brand's editorial luxury aesthetic.
   Slow Ken Burns push so the building feels alive, not static. */
.splash-image {
  position: absolute;
  inset: -2%;
  background-image: url('assets/Night_building.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-animation: splashKenBurns 18s ease-in-out infinite alternate;
          animation: splashKenBurns 18s ease-in-out infinite alternate;
}

@-webkit-keyframes splashKenBurns {
  0%   { -webkit-transform: scale(1.00) translate(0, 0); }
  100% { -webkit-transform: scale(1.08) translate(-1%, -1%); }
}
@keyframes splashKenBurns {
  0%   { transform: scale(1.00) translate(0, 0); }
  100% { transform: scale(1.08) translate(-1%, -1%); }
}

/* Gradient + vignette overlay so the text stays readable on any photo. */
.splash-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.70) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.10) 40%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}

.splash-content {
  position: absolute;
  inset: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  /* Anchor title to the very top, push CTA to the bottom — leaves the
     middle of the photo (where the building lives) completely clear. */
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  padding: 4vh 20px 6vh;
}

/* On shorter screens, tighten the padding. */
@media (max-height: 600px) {
  .splash-content {
    padding: 2vh 20px 3vh;
  }
}

/* Wrapper that keeps the title + subtitle stacked together at the top
   of the splash, separated from the bottom-anchored CTA. */
.splash-title-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* Title — letter-by-letter reveal. Each .splash-letter slides up and
   fades in. Cormorant Garamond (editorial serif, free Ogg stand-in) at
   a low weight for that "gallery monograph" feel Crozier favors. */
.splash-title {
  font-family: var(--font-serif);
  font-size: clamp(48px, 9vw, 140px);
  font-weight: 300;
  letter-spacing: 0.08em;
  line-height: 1.05;
  color: #fff;
  text-shadow: 0 4px 28px rgba(0,0,0,0.55);
  /* No bottom margin — the title-group flex `gap` controls spacing. */
  margin: 0;
  text-transform: uppercase;
}

.splash-letter {
  display: inline-block;
  opacity: 0;
  -webkit-transform: translateY(40px);
      -ms-transform: translateY(40px);
          transform: translateY(40px);
  -webkit-animation: splashLetterIn 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
          animation: splashLetterIn 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Staggered delays — each subsequent letter starts 60ms after the previous. */
.splash-letter:nth-child(1)  { -webkit-animation-delay: 200ms;  animation-delay: 200ms; }
.splash-letter:nth-child(2)  { -webkit-animation-delay: 260ms;  animation-delay: 260ms; }
.splash-letter:nth-child(3)  { -webkit-animation-delay: 320ms;  animation-delay: 320ms; }
.splash-letter:nth-child(4)  { -webkit-animation-delay: 380ms;  animation-delay: 380ms; }
.splash-letter:nth-child(5)  { -webkit-animation-delay: 440ms;  animation-delay: 440ms; }
.splash-letter:nth-child(6)  { -webkit-animation-delay: 500ms;  animation-delay: 500ms; }
.splash-letter:nth-child(7)  { -webkit-animation-delay: 560ms;  animation-delay: 560ms; }
.splash-letter:nth-child(8)  { -webkit-animation-delay: 620ms;  animation-delay: 620ms; }
.splash-letter:nth-child(9)  { -webkit-animation-delay: 680ms;  animation-delay: 680ms; }
.splash-letter:nth-child(10) { -webkit-animation-delay: 740ms;  animation-delay: 740ms; }
.splash-letter:nth-child(11) { -webkit-animation-delay: 800ms;  animation-delay: 800ms; }
.splash-letter:nth-child(12) { -webkit-animation-delay: 860ms;  animation-delay: 860ms; }

.splash-space {
  width: 0.4em;
}

@-webkit-keyframes splashLetterIn {
  to { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes splashLetterIn {
  to { opacity: 1; transform: translateY(0); }
}

/* Subtitle — fades + slides in after the title finishes. Inter sans for
   that clean neo-grotesque body voice. */
.splash-subtitle {
  font-family: var(--font-sans);
  font-size: clamp(13px, 1.4vw, 18px);
  font-weight: 400;
  letter-spacing: 0.55em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  /* No bottom margin — the CTA is now anchored to the bottom of the
     screen via the flex `space-between` layout, so a margin here would
     just create dead space between the title block and the CTA. */
  margin: 0;
  padding-left: 0.5em; /* compensates for trailing letter-spacing */
  opacity: 0;
  -webkit-transform: translateY(20px);
      -ms-transform: translateY(20px);
          transform: translateY(20px);
  -webkit-animation: splashFadeUp 800ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
          animation: splashFadeUp 800ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  -webkit-animation-delay: 1500ms;
          animation-delay: 1500ms;
}

@-webkit-keyframes splashFadeUp {
  to { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes splashFadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* Call-to-action — the ONLY clickable area on the splash. Styled as a
   real button (pill background, hover state, focus ring) so users
   understand they need to click it, not the rest of the screen. */
.splash-cta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  background-color: rgba(0, 0, 0, 0.25);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  cursor: pointer;
  -webkit-transition: background-color 250ms ease,
                      border-color 250ms ease,
                      -webkit-transform 250ms ease;
  transition: background-color 250ms ease,
              border-color 250ms ease,
              transform 250ms ease;
  opacity: 0;
  -webkit-animation: splashFadeUp 800ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
          animation: splashFadeUp 800ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  -webkit-animation-delay: 1900ms;
          animation-delay: 1900ms;
}

/* Hover — fills with Crozier red, the "curator's stamp" accent. This is
   one of only two places red appears in the UI (the other is the active
   scene indicator), keeping the brand restrained per the Crozier site. */
.splash-cta:hover {
  background-color: var(--crozier-red);
  border-color: var(--crozier-red);
  -webkit-transform: translateY(-2px);
      -ms-transform: translateY(-2px);
          transform: translateY(-2px);
}

.splash-cta:focus {
  outline: none;
  border-color: var(--crozier-red);
  box-shadow: 0 0 0 3px rgba(254, 92, 56, 0.35);
}

.splash-cta:active {
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
}

.splash-cta-text {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
}

.splash-cta-arrow {
  font-size: 22px;
  color: rgba(255,255,255,0.85);
  -webkit-animation: splashBob 1.6s ease-in-out infinite;
          animation: splashBob 1.6s ease-in-out infinite;
}

@-webkit-keyframes splashBob {
  0%, 100% { -webkit-transform: translateY(0); }
  50%      { -webkit-transform: translateY(6px); }
}
@keyframes splashBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

/* Day/Night pill toggle — top-right of the splash. iOS-style segmented
   switch with both icons always visible and a sliding white thumb that
   indicates which mode is active. Sun left = day, moon right = night. */
.splash-theme-toggle {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 10;
  width: 76px;
  height: 36px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 0 9px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background-color: rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  cursor: pointer;
  opacity: 0;
  -webkit-animation: splashFadeUp 800ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
          animation: splashFadeUp 800ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  -webkit-animation-delay: 1700ms;
          animation-delay: 1700ms;
  -webkit-transition: border-color 250ms ease;
  transition: border-color 250ms ease;
}

.splash-theme-toggle:hover {
  border-color: rgba(255, 255, 255, 0.7);
}

.splash-theme-toggle:focus {
  outline: none;
  border-color: var(--crozier-red);
  box-shadow: 0 0 0 3px rgba(254, 92, 56, 0.35);
}

/* The sliding white "thumb" — sits behind whichever icon is active.
   Position controlled by adding/removing .splash-day on #splash. */
.splash-theme-thumb {
  position: absolute;
  top: 3px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  /* Default = night → thumb sits on the RIGHT (over the moon). */
  right: 3px;
  left: auto;
  -webkit-transition: right 280ms cubic-bezier(0.22, 1, 0.36, 1),
                      left  280ms cubic-bezier(0.22, 1, 0.36, 1);
  transition: right 280ms cubic-bezier(0.22, 1, 0.36, 1),
              left  280ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Day mode → thumb slides to the LEFT (over the sun). */
#splash.splash-day .splash-theme-thumb {
  right: auto;
  left: 3px;
}

.splash-theme-icon {
  position: relative;
  z-index: 1;
  display: inline-block;
  width: 22px;
  text-align: center;
  font-size: 16px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.75);
  -webkit-transition: color 250ms ease;
  transition: color 250ms ease;
}

/* Active-side icon turns dark (against the white thumb behind it);
   inactive-side stays soft-white against the dark pill. */

/* Default = night → moon is active. */
.splash-theme-icon-night {
  color: var(--crozier-black);
}

/* Day mode → sun is active, moon goes back to soft-white. */
#splash.splash-day .splash-theme-icon-day {
  color: #d4a017; /* warm gold for the sun, on the white thumb */
}
#splash.splash-day .splash-theme-icon-night {
  color: rgba(255, 255, 255, 0.75);
}

/* Background image swap: when splash has the .splash-day class, use the
   Day_building photo. Default (no class) keeps Night_building. */
#splash.splash-day .splash-image {
  background-image: url('assets/Day_building.png');
}

/* When dismissed — the splash fades out AND scales up slightly. That zoom-in
   feels like the viewer is "entering" the building, handing off to the tour. */
#splash.splash-hidden {
  opacity: 0;
  -webkit-transform: scale(1.10);
      -ms-transform: scale(1.10);
          transform: scale(1.10);
  visibility: hidden;
  pointer-events: none;
}

/* =====================================================================
   CINEMATIC HOTSPOT TRANSITION
   The dramatic vignette + motion blur was removed in favor of a calmer
   crossfade-driven transition. The element is still created by index.js
   for backward compat, but its max opacity is capped at a very subtle
   level so the screen doesn't visibly darken when rooms swap.
   ===================================================================== */

#cinematic-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: 0;
  background:
    radial-gradient(ellipse at center,
      rgba(0,0,0,0)   60%,
      rgba(0,0,0,0.18) 100%);
  -webkit-transition: opacity 500ms ease-out;
  transition: opacity 500ms ease-out;
}

#cinematic-overlay.visible {
  opacity: 0.5;
}

/* =====================================================================
   FLOOR PLAN NAVIGATOR
   Bottom-left widget showing all 14 rooms as clickable rectangles
   arranged like a real building layout. Replaces the old left sidebar
   scene list. Active room is filled Crozier red; hover state previews
   the red treatment so users know rooms are clickable. Three zones
   (CLIENT, MEETING & VIEWING, OPERATIONS) are separated by hairlines
   with tiny eyebrow labels so the layout reads as architecture, not
   just a grid of boxes.
   ===================================================================== */

#floorPlan {
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 5;
  width: 460px;
  padding: 20px 22px 18px;
  background-color: rgba(12, 13, 12, 0.85);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  color: #fff;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* On medium-width screens (laptops), shrink slightly so the floor plan
   doesn't crowd the panorama. Still bigger than the original 320px. */
@media (max-width: 1200px) {
  #floorPlan {
    width: 400px;
    padding: 18px 20px 16px;
  }
}

/* On phones / very narrow screens, hide the floor plan entirely.
   The old scene list is still in the DOM for fallback if needed. */
@media (max-width: 600px) {
  #floorPlan {
    display: none;
  }
}

.floor-plan-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

/* Minimize / maximize button — sits at the right of the header.
   Compact and unobtrusive in expanded state, becomes the only thing
   visible (alongside the eyebrow + counter) in collapsed state. */
.floor-plan-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  margin-left: auto;
  background-color: rgba(255, 255, 255, 0.06);
  border: 0.5px solid rgba(255, 255, 255, 0.18);
  border-radius: 5px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

.floor-plan-toggle:hover {
  background-color: var(--crozier-red);
  border-color: var(--crozier-red);
  color: #fff;
}

.floor-plan-toggle:focus {
  outline: none;
  border-color: var(--crozier-red);
  box-shadow: 0 0 0 2px rgba(254, 92, 56, 0.35); /* coral focus ring */
}

.floor-plan-toggle-icon-min,
.floor-plan-toggle-icon-max {
  display: none;
  line-height: 1;
}

/* Default (expanded) — show minus icon (click to collapse). */
.floor-plan-toggle-icon-min { display: inline-block; }

/* Collapsed — show maximize icon, hide SVG and footer.
   Panel shrinks to just its header. Width also slims down so the
   collapsed header doesn't span the full 320px. */
#floorPlan.collapsed {
  width: auto;
  min-width: 200px;
  padding: 10px 14px;
}

#floorPlan.collapsed .floor-plan-header {
  margin-bottom: 0;
}

#floorPlan.collapsed .floor-plan-svg,
#floorPlan.collapsed .floor-plan-footer {
  display: none;
}

#floorPlan.collapsed .floor-plan-toggle-icon-min { display: none; }
#floorPlan.collapsed .floor-plan-toggle-icon-max { display: inline-block; }

.floor-plan-eyebrow {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--crozier-red);
  text-transform: uppercase;
}

.floor-plan-counter {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.6);
}

.floor-plan-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Tiny zone labels inside the SVG. */
.floor-zone-label {
  fill: rgba(255, 255, 255, 0.35);
  font-family: var(--font-sans);
  font-size: 5.5px;
  letter-spacing: 0.3em;
  font-weight: 500;
}

/* Each room — outlined rectangle that lights up on hover and fills red
   when active (the currently-viewed scene). */
.floor-room {
  cursor: pointer;
  outline: none;
}

.floor-room rect {
  fill: rgba(255, 255, 255, 0.04);
  stroke: rgba(255, 255, 255, 0.4);
  stroke-width: 0.5;
  transition: fill 200ms ease, stroke 200ms ease;
}

.floor-room-label {
  fill: rgba(255, 255, 255, 0.75);
  font-family: var(--font-sans);
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-anchor: middle;
  /* "central" is more cross-browser reliable than "middle" for SVG
     vertical centering. Combined with the y values being explicitly
     set to each box's geometric center, text is now properly centered
     both horizontally and vertically. */
  dominant-baseline: central;
  alignment-baseline: central;
  pointer-events: none;
  transition: fill 200ms ease;
}

/* Hover — soft red wash + brighter border so the room previews how it
   will look once active, without committing to the full red yet. */
.floor-room:hover rect {
  fill: rgba(254, 92, 56, 0.25); /* soft coral wash on hover */
  stroke: var(--crozier-red);
}

.floor-room:hover .floor-room-label {
  fill: #fff;
}

/* Keyboard focus — Crozier red outline for accessibility. */
.floor-room:focus rect {
  stroke: var(--crozier-red);
  stroke-width: 1.2;
}

/* ACTIVE — currently-viewed scene. Crozier red fill, white text. */
.floor-room.current rect {
  fill: var(--crozier-red);
  stroke: #fff;
  stroke-width: 0.8;
}

.floor-room.current .floor-room-label {
  fill: #fff;
  font-weight: 500;
}

/* Footer with the active room's full name (since SVG labels are
   abbreviated to fit). */
.floor-plan-footer {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 0.5px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}

.floor-plan-current {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0.05em;
  color: #fff;
}