/**
 * vebses-apartments-system — entry intro (preview, ?v2=1). See entry-intro.js.
 *
 * Brand tokens with fallbacks: Black, Cashmere (the only accent), Off-white;
 * square corners; DM Mono 11px labels set in Georgian capitals by the script.
 */

.vas-app {
  --vi-cash: var(--dk-cashmere, #BCAA7D);
  --vi-black: var(--dk-black, #222122);
  --vi-off: var(--dk-off, #FAF7F6);
  --vi-graphite: var(--dk-graphite, #4A4A4A);
  --vi-stone: var(--dk-stone, #D1CDC3);
  --vi-ease: var(--dk-ease, cubic-bezier(0.2, 0.7, 0.2, 1));
  --vi-out: cubic-bezier(0.22, 1, 0.36, 1);
  --vi-mono: var(--dk-mono, "DM Mono", ui-monospace, Menlo, monospace);
}

/* ---------- opening: the render settles in ----------
   The canvas's transform is the renderer's (hover zoom), so the settle uses the
   separate scale/translate properties: ×1.05 about the centre, eased to rest. */

.vas-intro-armed .vas-entry__canvas {
  scale: 1.05;
  translate: -2.5% -2.5%;
}

.vas-intro-armed .vas-entry__canvas > img { filter: brightness(0.55) saturate(0.85); }

/* during the opening the floors ignore a pointer resting on the picture (see
   onStage in entry-intro.js); any real move, press, key or tap ends it */
.vas-intro-guard .vas-entry__canvas > svg,
.vas-intro-guard .vas-entry__canvas > svg * { pointer-events: none !important; }

.vas-intro-armed .vas-entry__title {
  opacity: 0;
  transform: translateY(14px);
}

.vas-intro-settle .vas-entry__canvas {
  transition: transform 0.9s var(--vas-ease, var(--vi-ease)), scale 1.7s var(--vi-out), translate 1.7s var(--vi-out);
}

.vas-intro-settle .vas-entry__canvas > img { transition: filter 1.5s cubic-bezier(0.4, 0, 0.2, 1); }

.vas-intro-settle .vas-entry__title {
  transition: opacity 1s var(--vi-ease) 0.45s, transform 1.2s var(--vi-out) 0.45s;
}

/* ---------- opening: the glare ----------
   One band of warm light leaning like low sun ("/", 35deg off vertical), a
   faint sheen over the whole picture and brighter where it crosses the facades
   (masked to the zones), both moved by the same animation. Screen-blended, so
   it only ever adds light. It travels right to left, and each block's floors
   start to scan as it arrives (entry-intro.js mirrors the width, travel, lean
   and duration in BAND and T.glare). */

.vas-intro-glare {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  transition: opacity 0.35s ease;
}

/* the facades only: the script sets the mask image (the zones' outlines) */
.vas-intro-glare--glass {
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* a broad, faint sheen over everything... */
.vas-intro-glare i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 64%;
  background: linear-gradient(125deg,
    rgba(255, 240, 214, 0) 32%,
    rgba(255, 240, 214, 0.05) 42%,
    rgba(255, 246, 230, 0.13) 50%,
    rgba(255, 240, 214, 0.05) 58%,
    rgba(255, 240, 214, 0) 68%);
  transform: translate3d(130%, 0, 0);
  will-change: transform;
}

/* ...concentrated on the glass, with a fine glint riding just behind it */
.vas-intro-glare--glass i {
  background:
    linear-gradient(125deg,
      rgba(255, 252, 244, 0) 55.6%,
      rgba(255, 252, 244, 0.34) 56.6%,
      rgba(255, 252, 244, 0) 57.6%),
    linear-gradient(125deg,
      rgba(255, 240, 212, 0) 39%,
      rgba(255, 244, 226, 0.16) 46%,
      rgba(255, 250, 240, 0.4) 50%,
      rgba(255, 244, 226, 0.16) 54%,
      rgba(255, 240, 212, 0) 61%);
}

.vas-intro-glaring .vas-intro-glare { opacity: 1; }

/* constant speed: the script times each block's floors to the band's arrival
   (its BAND and T.glare mirror the width, travel and duration here) */
.vas-intro-glaring .vas-intro-glare i {
  animation: vas-intro-glare var(--vi-glare-ms, 1.5s) linear both;
}

@keyframes vas-intro-glare {
  from { transform: translate3d(130%, 0, 0); }
  to { transform: translate3d(-100%, 0, 0); }
}

/* ---------- SVG layers (inside the renderer's SVG; never take the pointer) ---------- */

.vas-intro-fx,
.vas-intro-fx * { pointer-events: none; }

/* opening: each floor lights in turn, bottom to top, and fades as the next
   lights. Cashmere screened onto the render, so a floor is lit rather than
   painted, with a crisp hairline; the leading floor is bright, the two or
   three behind it already fading, which reads as a scan, floor by floor. */
.vas-intro-wave__floor {
  fill: rgba(188, 170, 125, 0.5);
  stroke: rgba(236, 226, 198, 0.95); /* Cashmere lifted, so the hairline reads on the pale facades too */
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
  mix-blend-mode: screen;
  opacity: 0;
}

.vas-intro-waving .vas-intro-wave__floor {
  animation: vas-intro-floor 620ms linear both;
  animation-delay: var(--d, 0ms);
}

@keyframes vas-intro-floor {
  0% { opacity: 0; animation-timing-function: cubic-bezier(0.3, 0, 0.4, 1); }
  11% { opacity: 1; animation-timing-function: cubic-bezier(0.25, 0.6, 0.35, 1); }
  42% { opacity: 0.3; animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
  100% { opacity: 0; }
}

.vas-intro-wave { transition: opacity 0.35s ease; }
.vas-intro-skip .vas-intro-wave,
.vas-intro-skip .vas-intro-glare { opacity: 0; }

/* beacon hover: the rest shaded a little, every floor of the block tinted */
.vas-intro-dim {
  fill: rgba(23, 22, 23, 0.42);
  opacity: 0;
  transition: opacity 0.45s var(--vi-ease);
}

.vas-intro-dim.is-on { opacity: 1; }

.vas-intro-lit__floor {
  fill: rgba(188, 170, 125, 0.2);
  stroke: rgba(188, 170, 125, 0.9);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transition: opacity 0.3s var(--vi-ease);
}

.vas-intro-lit__block.is-on .vas-intro-lit__floor {
  opacity: 1;
  transition: opacity 0.4s var(--vi-ease) calc(var(--i, 0) * 26ms);
}

/* tour: the floor outline the renderer's :hover would draw */
.vas-intro-tour-floor {
  fill: var(--vas-entry-hover-fill, rgba(188, 170, 125, 0.16));
  stroke: var(--vas-entry-hover-stroke, var(--vi-cash));
  stroke-width: 2;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.vas-intro-tour-floor.is-on { opacity: 1; }
.vas-intro-tour-floor.is-sold { stroke: var(--vas-tip-sold, #B0413E); }

/* while the tour drives the spotlight, a floor the visitor's own pointer (or
   focus) happens to rest on does not draw a second outline */
.vas-app .vas-entry.vas-intro-touring .zone:is(:hover, :focus, :focus-visible) {
  fill: transparent;
  stroke: transparent;
}

/* ---------- beacons ----------
   Each link is a zero-size point on its block's roofline. The plate floats
   --lift above it on a hairline stem (as the render's own labels hang on
   theirs): a small square of dark glass holding a Cashmere square, with two slow
   square rings. On hover or focus the plate grows sideways into a label (block,
   free count, arrow). */

.vas-intro-beacons {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.vas-beacon {
  --lift: 30px;
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: 0;
  height: 0;
  color: var(--vi-off);
  text-decoration: none;
  outline: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s var(--vi-ease), visibility 0s linear 0.6s;
  -webkit-tap-highlight-color: transparent;
}

.vas-beacon.is-in {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s var(--vi-ease), visibility 0s;
}

.vas-intro-quick .vas-beacon { transition-duration: 0.35s, 0s; transition-delay: 0s; }

/* the renderer's floor spotlight owns the picture: the beacons step aside */
.vas-entry__canvas.is-spotlit .vas-beacon,
.vas-intro-touring .vas-beacon {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0s linear 0.22s;
}

/* while one block is lit, the other beacons recede */
.vas-intro-blocklit .vas-beacon:not(.is-open) { opacity: 0.35; }

/* the stem, from the plate down to the roofline, and its foot */
.vas-beacon::before,
.vas-beacon::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.vas-beacon::before {
  left: -0.5px;
  top: calc(15px - var(--lift));
  width: 1px;
  height: calc(var(--lift) - 15px);
  background: linear-gradient(rgba(250, 247, 246, 0.75), rgba(250, 247, 246, 0.35));
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform 0.5s var(--vi-out);
}

.vas-beacon.is-in::before { transform: none; }

.vas-beacon::after {
  top: -1.5px;
  left: -1.5px;
  width: 3px;
  height: 3px;
  background: rgba(250, 247, 246, 0.8);
}

.vas-beacon__pill {
  position: absolute;
  top: calc(-15px - var(--lift));
  left: -15px;
  display: flex;
  width: max-content; /* the anchor has no width to shrink-wrap against */
  align-items: center;
  height: 30px;
  border: 1px solid rgba(250, 247, 246, 0.3);
  background: rgba(23, 22, 23, 0.5);
  -webkit-backdrop-filter: blur(8px) saturate(1.3);
  backdrop-filter: blur(8px) saturate(1.3);
  box-shadow: 0 6px 18px rgba(23, 22, 23, 0.3);
  pointer-events: auto;
  cursor: pointer;
  transform: scale(0.3);
  transform-origin: 15px 50%;
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.35s ease, transform 0.8s var(--vi-out);
}

.vas-beacon.is-in .vas-beacon__pill {
  transform: none;
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.35s ease,
              transform 0.9s var(--vi-out) 0.12s;
}

.vas-intro-quick .vas-beacon.is-in .vas-beacon__pill { transition-delay: 0s; }

.vas-beacon--flip .vas-beacon__pill {
  left: auto;
  right: -15px;
  flex-direction: row-reverse;
  transform-origin: calc(100% - 15px) 50%;
}

.vas-beacon__mark {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
}

/* the Cashmere square */
.vas-beacon__mark::before {
  content: "";
  position: relative;
  z-index: 1;
  width: 8px;
  height: 8px;
  background: var(--vi-cash);
  transition: transform 0.4s var(--vi-out);
}

/* a touch-sized target around the plate */
.vas-beacon__mark::after {
  content: "";
  position: absolute;
  inset: -8px;
}

/* two slow rings, out from the plate's edge */
.vas-beacon__mark i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  border: 1.5px solid var(--vi-cash);
  opacity: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.vas-beacon.is-in .vas-beacon__mark i {
  animation: vas-beacon-ring 3.4s cubic-bezier(0.2, 0.6, 0.35, 1) infinite;
  animation-delay: calc(var(--i, 0) * 0.4s + 0.5s);
}

.vas-beacon.is-in .vas-beacon__mark i + i { animation-delay: calc(var(--i, 0) * 0.4s + 2.2s); }

@keyframes vas-beacon-ring {
  0% { width: 30px; height: 30px; opacity: 0; }
  10% { opacity: 0.9; }
  100% { width: 66px; height: 66px; opacity: 0; }
}

/* the label, folded to nothing until hover or focus */
.vas-beacon__label {
  display: grid;
  grid-template-columns: 0fr;
  transition: grid-template-columns 0.5s var(--vi-out);
}

.vas-beacon__text {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  font-family: var(--vi-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 0;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* the gutters sit inside the clipped item: padding on the item itself would
   count toward the folded (0fr) column and leave the plate wider than square */
.vas-beacon__text > :first-child { margin-left: 2px; }
.vas-beacon__text > :last-child { margin-right: 14px; }
.vas-beacon--flip .vas-beacon__text > :first-child { margin-left: 14px; }
.vas-beacon--flip .vas-beacon__text > :last-child { margin-right: 2px; }

.vas-beacon__text b { font-weight: 500; color: var(--vi-off); }
.vas-beacon__meta { color: var(--vi-cash); }
.vas-beacon__meta::before { content: "\00b7"; margin-right: 8px; color: rgba(250, 247, 246, 0.5); }
.vas-beacon__arrow { color: var(--vi-off); transition: transform 0.35s var(--vi-out); }

.vas-beacon.is-open .vas-beacon__pill,
.vas-beacon:focus-visible .vas-beacon__pill {
  border-color: rgba(188, 170, 125, 0.7);
  background: rgba(23, 22, 23, 0.72);
  box-shadow: 0 14px 34px rgba(23, 22, 23, 0.38);
}

.vas-beacon.is-open .vas-beacon__label,
.vas-beacon:focus-visible .vas-beacon__label { grid-template-columns: 1fr; }

.vas-beacon.is-open .vas-beacon__text,
.vas-beacon:focus-visible .vas-beacon__text {
  opacity: 1;
  transition: opacity 0.3s ease 0.12s;
}

.vas-beacon.is-open .vas-beacon__mark::before,
.vas-beacon:focus-visible .vas-beacon__mark::before { transform: scale(1.25); }

.vas-beacon.is-open .vas-beacon__mark i,
.vas-beacon:focus-visible .vas-beacon__mark i { animation: none; opacity: 0; }

.vas-beacon.is-open .vas-beacon__arrow { transform: translateX(3px); }

/* the ring goes round the plate, not the zero-size link (the theme's global
   :focus-visible ring would draw a small square at the roofline) */
.vas-app .vas-beacon:focus-visible { outline: none; }

.vas-beacon:focus-visible .vas-beacon__pill {
  outline: 2px solid var(--vi-cash);
  outline-offset: 3px;
}

/* ---------- the hint chip ----------
   Glass, bottom right, on the title's baseline and the page gutter. */

.vas-intro-host { position: relative; }

.vas-hint {
  position: absolute;
  right: max(var(--deka-gutter, 2rem), calc((100% - 1920px) / 2 + var(--deka-gutter, 2rem)));
  bottom: clamp(1.25rem, 3.5vw, 3.5rem);
  z-index: 12;
  display: flex;
  align-items: center;
  max-width: calc(100% - 2 * var(--deka-gutter, 1rem));
  margin: 0;
  padding: 6px 18px 6px 6px;
  border: 1px solid rgba(250, 247, 246, 0.18);
  border-radius: 0;
  background: rgba(34, 33, 34, 0.34);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 14px 40px rgba(23, 22, 23, 0.22);
  color: var(--vi-off);
  font: inherit;
  text-align: left;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.7s var(--vi-ease), transform 0.9s var(--vi-out), visibility 0s linear 0.7s,
              padding 0.5s var(--vi-out), border-color 0.3s ease, background-color 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}

.vas-hint.is-shown {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.7s var(--vi-ease), transform 0.9s var(--vi-out), visibility 0s,
              padding 0.5s var(--vi-out), border-color 0.3s ease, background-color 0.3s ease;
}

.vas-app .vas-hint:focus-visible {
  outline: 2px solid var(--vi-cash);
  outline-offset: 3px;
  border-radius: 0; /* the theme's ring is rounded */
}

.vas-hint__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: var(--vi-cash);
  color: var(--vi-black);
  transition: background-color 0.3s ease;
}

.vas-hint__glyph {
  width: 28px;
  height: 28px;
  overflow: visible;
}

.vas-hint__text {
  display: grid;
  grid-template-columns: 1fr;
  transition: grid-template-columns 0.5s var(--vi-out), opacity 0.35s ease;
}

.vas-hint__copy {
  display: grid;
  gap: 3px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--vi-mono);
  font-weight: 500;
  letter-spacing: 0;
}

.vas-hint__line,
.vas-hint__sub { padding-left: 14px; } /* inside the clipped item, so the folded column is truly 0 */

.vas-hint__line { font-size: 11px; line-height: 1.35; color: var(--vi-off); }

.vas-hint__sub {
  font-size: 10px;
  line-height: 1.35;
  color: var(--vi-stone);
  transition: color 0.3s ease;
}

.vas-hint__sub::after {
  content: "\2192";
  display: inline-block;
  margin-left: 6px;
  transition: transform 0.35s var(--vi-out);
}

.vas-hint.is-touring .vas-hint__sub::after { content: none; }

.vas-hint__progress {
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: -1px;
  height: 2px;
  background: var(--vi-cash);
  transform: scaleX(0);
  transform-origin: 0 50%;
  opacity: 0;
}

.vas-hint.is-touring .vas-hint__progress {
  opacity: 1;
  transform: scaleX(1);
  transition: transform var(--tour-ms, 7s) linear;
}

/* folded: the icon alone (it still replays the tour); hover peeks the words */
.vas-hint.is-compact { padding-right: 6px; }

.vas-hint.is-compact .vas-hint__text {
  grid-template-columns: 0fr;
  opacity: 0;
}

.vas-hint:is(.is-hot, .is-touring) {
  border-color: rgba(188, 170, 125, 0.55);
  background: rgba(34, 33, 34, 0.5);
}

.vas-hint:is(.is-hot, .is-touring) .vas-hint__sub { color: var(--vi-cash); }
.vas-hint.is-hot .vas-hint__sub::after { transform: translateX(3px); }
.vas-hint:is(.is-hot, .is-touring) .vas-hint__icon { background: var(--vi-off); }

.vas-hint.is-compact:is(.is-hot, .is-touring) { padding-right: 18px; }

.vas-hint.is-compact:is(.is-hot, .is-touring) .vas-hint__text {
  grid-template-columns: 1fr;
  opacity: 1;
}

/* ---------- the icon: floors tick up, a cursor clicks one ---------- */

.vas-hint__tower,
.vas-hint__ground {
  stroke: var(--vi-black);
  stroke-width: 1.5;
  stroke-linejoin: miter;
}

.vas-hint__lines {
  stroke: var(--vi-black);
  stroke-width: 0.9;
  opacity: 0.5;
}

.vas-hint__floor {
  fill: var(--vi-off);
  opacity: 0;
  animation: vas-hint-tick 4.4s linear infinite;
  animation-delay: calc(var(--n, 0) * 150ms);
}

@keyframes vas-hint-tick {
  0% { opacity: 0; }
  3% { opacity: 1; }
  14%, 100% { opacity: 0; }
}

.vas-hint__pick {
  fill: var(--vi-black);
  opacity: 0;
  animation: vas-hint-pick 4.4s linear infinite;
}

@keyframes vas-hint-pick {
  0%, 57% { opacity: 0; }
  60%, 86% { opacity: 1; }
  92%, 100% { opacity: 0; }
}

.vas-hint__cursor {
  fill: var(--vi-off);
  stroke: var(--vi-black);
  stroke-width: 0.9;
  stroke-linejoin: round;
  opacity: 0;
  transform: translate(23px, 25px) scale(1);
  animation: vas-hint-cursor 4.4s cubic-bezier(0.5, 0, 0.2, 1) infinite;
}

@keyframes vas-hint-cursor {
  0%, 30% { opacity: 0; transform: translate(24px, 27px) scale(1); }
  36% { opacity: 1; transform: translate(22px, 24px) scale(1); }
  54% { opacity: 1; transform: translate(14px, 14px) scale(1); }
  57% { transform: translate(14px, 14px) scale(0.78); }
  61% { transform: translate(14px, 14px) scale(1); }
  86% { opacity: 1; transform: translate(14px, 14px) scale(1); }
  95%, 100% { opacity: 0; transform: translate(21px, 23px) scale(1); }
}

.vas-hint__ripple {
  stroke: var(--vi-black);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: vas-hint-ripple 4.4s cubic-bezier(0.2, 0.6, 0.35, 1) infinite;
}

@keyframes vas-hint-ripple {
  0%, 56% { opacity: 0; transform: scale(0.2); }
  58% { opacity: 0.9; transform: scale(0.25); }
  80%, 100% { opacity: 0; transform: scale(1.55); }
}

/* hover, focus, touring: the icon answers — the cursor goes straight to a
   floor, presses it, and the ripple keeps sounding while it stays there */
.vas-hint:is(.is-hot, .is-touring) .vas-hint__floor { animation: none; opacity: 0; }

/* on the Off-white tile the picked floor is Black, as in the loop, so the
   answer reads at a glance; the ripple keeps sounding in Black */
.vas-hint:is(.is-hot, .is-touring) .vas-hint__pick {
  fill: var(--vi-black);
  animation: vas-hint-poke-pick 0.5s linear both;
}

.vas-hint:is(.is-hot, .is-touring) .vas-hint__cursor {
  animation: vas-hint-poke-cursor 0.6s cubic-bezier(0.5, 0, 0.2, 1) both;
}

.vas-hint:is(.is-hot, .is-touring) .vas-hint__ripple {
  stroke: var(--vi-black);
  stroke-width: 1.3;
  animation: vas-hint-poke-ripple 1.3s cubic-bezier(0.2, 0.6, 0.35, 1) 0.3s infinite;
}

@keyframes vas-hint-poke-cursor {
  0% { opacity: 1; transform: translate(21px, 23px) scale(1); }
  45% { transform: translate(14px, 14px) scale(1); }
  60% { transform: translate(14px, 14px) scale(0.78); }
  80%, 100% { opacity: 1; transform: translate(14px, 14px) scale(1); }
}

@keyframes vas-hint-poke-pick {
  0%, 50% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes vas-hint-poke-ripple {
  0% { opacity: 0.95; transform: scale(0.25); }
  70%, 100% { opacity: 0; transform: scale(1.6); }
}

/* touch: no arrow, the ripple is the tap */
.vas-hint--touch .vas-hint__cursor { display: none; }

/* ---------- the tour's cursor ---------- */

.vas-intro-ghost {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 39; /* under the renderer's info card (40) */
  width: 0;
  height: 0;
  pointer-events: none;
  opacity: 0;
  transition: transform 0.72s cubic-bezier(0.6, 0.05, 0.25, 1), opacity 0.35s ease;
  will-change: transform;
}

.vas-intro-ghost.is-on { opacity: 1; }
.vas-intro-ghost.is-jump { transition: none; }

.vas-entry .vas-intro-ghost svg {
  position: absolute;
  inset: auto;
  top: -2px;
  left: -3px;
  width: 24px;
  max-width: none; /* the theme's svg { max-width: 100% } would resolve against the zero-size wrapper */
  height: 24px;
  overflow: visible;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.45));
}

.vas-intro-ghost path {
  fill: var(--vi-off);
  stroke: var(--vi-black);
  stroke-width: 1.3;
  stroke-linejoin: round;
}

.vas-intro-ghost__ring {
  position: absolute;
  top: -20px;
  left: -20px;
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--vi-cash);
  border-radius: 50%;
  opacity: 0;
}

.vas-intro-ghost.is-press .vas-intro-ghost__ring { animation: vas-ghost-ring 0.8s cubic-bezier(0.2, 0.6, 0.35, 1) both; }
.vas-intro-ghost.is-press svg { animation: vas-ghost-press 0.32s ease both; }

@keyframes vas-ghost-ring {
  0% { opacity: 1; transform: scale(0.3); }
  100% { opacity: 0; transform: scale(1.4); }
}

@keyframes vas-ghost-press {
  50% { transform: scale(0.82); }
}

/* touch: a fingertip instead of an arrow */
.vas-intro-ghost--touch svg { display: none; }

.vas-intro-ghost--touch::before {
  content: "";
  position: absolute;
  top: -13px;
  left: -13px;
  width: 26px;
  height: 26px;
  border: 1.5px solid rgba(250, 247, 246, 0.95);
  border-radius: 50%;
  background: rgba(250, 247, 246, 0.35);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}

/* screen-reader announcements for the tour */
.vas-intro-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- phones: the picture is too short to carry the chip ----------
   It docks under the picture as a full-width caption bar instead, and stays
   unfolded (it no longer covers anything). */

@media (max-width: 40rem) {
  /* the bar's band is dark from the start, so nothing light flashes under the
     picture while the opening plays and the bar is still hidden */
  .vas-intro-host { background: var(--vi-black); }

  .vas-hint {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    max-width: none;
    min-height: 60px;
    padding: 8px var(--deka-gutter, 1rem);
    border: 0;
    border-bottom: 1px solid rgba(250, 247, 246, 0.12);
    background: var(--vi-black);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    transform: none;
  }

  .vas-hint.is-shown { transform: none; }

  .vas-hint.is-compact,
  .vas-hint.is-compact:is(.is-hot, .is-touring) { padding-right: var(--deka-gutter, 1rem); }

  .vas-hint.is-compact .vas-hint__text {
    grid-template-columns: 1fr;
    opacity: 1;
  }

  .vas-hint:is(.is-hot, .is-touring) { background: var(--vi-black); }

  .vas-app .vas-hint:focus-visible { outline-offset: -3px; }

  .vas-hint__icon { width: 42px; height: 42px; }

  .vas-hint__progress { left: 0; right: 0; bottom: 0; }

  /* the renderer's card cannot fit in a picture this short (it would be cut
     off at the bottom); during the tour the bar under the picture carries the
     floor and its free count instead */
  .vas-entry.vas-intro-touring .vas-tooltip { visibility: hidden; }

  /* floors only a few px tall: a finer hairline, or the scan's fading tail
     reads as a stack of white lines */
  .vas-intro-wave__floor { stroke-width: 0.75; stroke: rgba(236, 226, 198, 0.8); }

  /* on a phone-sized picture the plates sit a size smaller (scaled about the
     roof point, stem and all); the invisible hit area stays ~44px */
  .vas-beacon { --lift: 24px; scale: 0.8; }
  .vas-beacon__mark::after { inset: -13px; }
}

/* ---------- reduced motion: no light, no wave, no pulse, no travel ---------- */

@media (prefers-reduced-motion: reduce) {
  .vas-intro-glare,
  .vas-intro-wave { display: none; }

  .vas-beacon__mark i,
  .vas-beacon.is-in .vas-beacon__mark i { display: none; animation: none; }

  .vas-beacon,
  .vas-beacon.is-in { transition: opacity 0.15s linear, visibility 0s; transition-delay: 0s; }
  .vas-beacon::before { transform: none; transition: none; }

  .vas-beacon__pill,
  .vas-beacon.is-in .vas-beacon__pill { transform: none; transition: background-color 0.15s linear; }

  .vas-beacon__label,
  .vas-beacon__text,
  .vas-beacon__arrow,
  .vas-beacon__mark::before,
  .vas-intro-dim,
  .vas-intro-lit__floor,
  .vas-intro-lit__block.is-on .vas-intro-lit__floor { transition: none; }

  .vas-hint,
  .vas-hint.is-shown { transform: none; transition: opacity 0.15s linear, visibility 0s, border-color 0.15s linear, background-color 0.15s linear; }

  .vas-hint__text,
  .vas-hint__sub::after { transition: none; }

  .vas-hint.is-touring .vas-hint__progress { transition: none; }

  .vas-hint__floor,
  .vas-hint__ripple,
  .vas-hint:is(.is-hot, .is-touring) .vas-hint__floor,
  .vas-hint:is(.is-hot, .is-touring) .vas-hint__ripple { animation: none; opacity: 0; }

  .vas-hint__pick,
  .vas-hint:is(.is-hot, .is-touring) .vas-hint__pick { animation: none; opacity: 1; }

  .vas-hint__cursor,
  .vas-hint:is(.is-hot, .is-touring) .vas-hint__cursor { animation: none; opacity: 1; transform: translate(14px, 14px); }

  .vas-intro-ghost { transition: opacity 0.15s linear; }
  .vas-intro-ghost.is-press .vas-intro-ghost__ring,
  .vas-intro-ghost.is-press svg { animation: none; }
}