/* ============================================================
   Spatial portfolio · guide (spotlight coach marks, v6)
   js/space/guide.js drives the geometry: the hole (a rounded rect
   whose huge spread shadow is the dim) and the glass callout are
   positioned with transforms on a spring every frame.
   8pt grid: 24px card padding, 16px/8px rhythm inside.
   ============================================================ */

.vxg {
  --vxg-dim: rgb(4 6 14 / 0.68);
  --vxg-card-a: 0.9;
  position: fixed; inset: 0; z-index: 150;
  font-family: var(--vx-font); color: var(--vx-label-1);
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  touch-action: none; cursor: default;
}
html:not(.dark) .vxg { --vxg-dim: rgb(8 12 28 / 0.6); }
/* Fade the parts, not the layer: an ancestor with opacity < 1 would cut the card's backdrop blur off from the page */
.vxg-dim, .vxg-hole, .vxg-card { opacity: 0; transition: opacity .42s var(--vx-ease-out); }
.vxg.is-in .vxg-dim, .vxg.is-in .vxg-hole, .vxg.is-in .vxg-card { opacity: 1; }
.vxg-dim { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.vxg-dim path { fill: var(--vxg-dim); }

/* ---------- Spotlight ---------- */
.vxg-hole {
  position: absolute; left: 0; top: 0; width: 0; height: 0;
  pointer-events: none;
}
.vxg-ring {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow:
    0 0 0 1.5px rgb(255 255 255 / 0.78),
    0 0 0 6px rgb(255 255 255 / 0.08),
    0 0 36px 4px rgb(255 255 255 / 0.2);
  transition: opacity .3s var(--vx-ease-out);
}
.vxg-ring::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 1.5px rgb(255 255 255 / 0.55); opacity: 0;
}
.vxg-ring.is-pulse::after { animation: vxg-pulse 2.6s var(--vx-ease-out) .5s infinite; }
@keyframes vxg-pulse {
  0% { opacity: .9; box-shadow: 0 0 0 1.5px rgb(255 255 255 / 0.55); }
  70%, 100% { opacity: 0; box-shadow: 0 0 0 16px rgb(255 255 255 / 0); }
}
.vxg:not(.is-open-hole) .vxg-ring { opacity: 0; }

/* A small touch showing the gesture (grabber: drag sideways; phones: swipe in from the edge) */
.vxg-demo { position: absolute; left: 50%; top: 50%; width: 0; height: 0; display: none; pointer-events: none; }
.vxg-demo i {
  position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%;
  background: rgb(255 255 255 / 0.92);
  box-shadow: 0 0 0 6px rgb(255 255 255 / 0.18), 0 6px 16px rgb(0 0 0 / 0.35);
}
.vxg[data-demo="drag"] .vxg-demo, .vxg[data-demo="swipe"] .vxg-demo { display: block; }
.vxg[data-demo="drag"] .vxg-demo { top: 50%; }
.vxg[data-demo="drag"] .vxg-demo i { animation: vxg-drag 2.8s cubic-bezier(.45, 0, .2, 1) .6s infinite both; }
.vxg[data-demo="swipe"] .vxg-demo { left: 30px; }
.vxg[data-demo="swipe"] .vxg-demo i { animation: vxg-swipe 2.4s cubic-bezier(.3, 0, .2, 1) .5s infinite both; }
@keyframes vxg-drag {
  0% { opacity: 0; transform: translate(-40px, 10px) scale(.8); }
  12% { opacity: 1; transform: translate(-40px, 0) scale(1); }
  20% { transform: translate(-40px, 0) scale(.86); }
  62% { opacity: 1; transform: translate(40px, 0) scale(.86); }
  72% { opacity: 1; transform: translate(40px, 0) scale(1); }
  86%, 100% { opacity: 0; transform: translate(40px, 10px) scale(.8); }
}
@keyframes vxg-swipe {
  0% { opacity: 0; transform: translateX(-14px) scale(.8); }
  14% { opacity: 1; transform: translateX(-14px) scale(.9); }
  64% { opacity: 1; transform: translateX(96px) scale(.9); }
  84%, 100% { opacity: 0; transform: translateX(120px) scale(.8); }
}

/* ---------- Callout ---------- */
.vxg-card {
  --vx-glass-a: var(--vxg-card-a);
  position: absolute; left: 0; top: 0;
  width: min(360px, calc(100vw - 32px));
  padding: 24px; border-radius: 28px;
  will-change: transform; outline: none;
}
.vxg-in { position: relative; z-index: 3; }
.vxg-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 32px; margin: -4px 0 8px; }
.vxg-kicker { font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0; color: var(--vx-label-2); font-variant-numeric: tabular-nums; }
.vxg-skip {
  position: relative; flex: none; height: 32px; margin-right: -8px; padding: 0 12px; border: 0; border-radius: 999px;
  background: transparent; color: var(--vx-label-2); font-size: 14px; font-weight: 500; line-height: 1; cursor: pointer;
  transition: background .2s, color .2s;
}
.vxg-skip::after { content: ""; position: absolute; inset: -6px -4px; border-radius: 999px; }
.vxg-skip:hover { background: var(--vx-fill); color: var(--vx-label-1); }
.vxg-skip[hidden] { display: none; }
.vxg-title { margin: 0 0 8px; font-size: 21px; line-height: 28px; font-weight: 650; letter-spacing: -0.02em; color: var(--vx-label-1); text-wrap: balance; }
.vxg-body { margin: 0; font-size: 15px; line-height: 22px; color: var(--vx-label-2); text-wrap: pretty; }

.vxg-foot { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; }
.vxg-dots { display: flex; align-items: center; gap: 6px; }
.vxg-dots i { width: 6px; height: 6px; border-radius: 3px; background: rgb(255 255 255 / 0.28); transition: width .45s var(--vx-spring), background .3s; }
.vxg-dots i.is-done { background: rgb(255 255 255 / 0.6); }
.vxg-dots i.is-on { width: 20px; background: rgb(255 255 255 / 0.96); }
.vxg-nav { display: flex; align-items: center; gap: 8px; }
.vxg-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  height: 40px; min-width: 40px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer;
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 1; white-space: nowrap;
  background: var(--vx-fill); color: var(--vx-label-1);
  box-shadow: inset 0 0.5px 0 rgb(255 255 255 / 0.16);
  transition: background .2s, scale .35s var(--vx-spring), opacity .2s;
}
.vxg-btn:hover { background: var(--vx-fill-hi); }
.vxg-btn:active { scale: 0.95; }
.vxg-btn svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.vxg-btn--back { padding: 0 16px 0 10px; }
.vxg-btn--next { padding: 0 12px 0 20px; background: rgb(255 255 255 / 0.94); color: rgb(16 17 22); box-shadow: 0 6px 18px -8px rgb(0 0 0 / 0.5); }
.vxg-btn--next:hover { background: #fff; }
.vxg-btn--next.is-last { padding: 0 20px; }
.vxg-btn--next.is-last svg { display: none; }
.vxg-btn:disabled { opacity: 0; pointer-events: none; }
.vxg-btn:focus-visible, .vxg-skip:focus-visible { outline: 2px solid rgb(255 255 255 / 0.9); outline-offset: 2px; }
.vxg-btn--next:focus-visible { outline-color: rgb(255 255 255 / 0.9); outline-offset: 3px; }
/* focus rings only once the visitor uses the keyboard (the callout focuses Next for them) */
html:not(.vx-kbd) .vxg:not(.is-kbd) .vxg-btn:focus-visible, html:not(.vx-kbd) .vxg:not(.is-kbd) .vxg-skip:focus-visible { outline: none; }

/* Arrow: a small rounded glass point outside the card edge, aimed at the spotlight.
   Drawn pointing up (24 × 12) and rotated for the other sides. */
.vxg-arrow { position: absolute; width: 24px; height: 12px; pointer-events: none; display: none; z-index: 1; }
.vxg-arrow svg { display: block; width: 100%; height: 100%; overflow: visible; }
.vxg-arrow__f { fill: rgb(38 39 46 / 0.94); }
.vxg-arrow__s { fill: none; stroke: rgb(255 255 255 / 0.3); stroke-width: 1; }
.vxg-card[data-side] .vxg-arrow { display: block; }
.vxg-card[data-side="none"] .vxg-arrow { display: none; }
.vxg-card[data-side="bottom"] .vxg-arrow { bottom: calc(100% - 0.5px); left: var(--ax, 50%); translate: -50% 0; }
.vxg-card[data-side="top"] .vxg-arrow { top: calc(100% - 0.5px); left: var(--ax, 50%); translate: -50% 0; rotate: 180deg; }
.vxg-card[data-side="top"] .vxg-arrow__s { stroke: rgb(255 255 255 / 0.12); }
.vxg-card[data-side="right"] .vxg-arrow { left: -17.5px; top: calc(var(--ay, 50%) - 6px); rotate: -90deg; }
.vxg-card[data-side="left"] .vxg-arrow { left: calc(100% - 6.5px); top: calc(var(--ay, 50%) - 6px); rotate: 90deg; }

/* ---------- Phones ---------- */
.vxg.is-phone { --vxg-dim: rgb(4 6 14 / 0.72); }
.vxg.is-phone .vxg-card { width: min(400px, calc(100vw - 32px)); padding: 24px 20px 20px; border-radius: 28px; }
.vxg.is-phone .vxg-title { font-size: 20px; line-height: 26px; }
.vxg.is-phone .vxg-btn { height: 44px; min-width: 44px; }
.vxg.is-phone .vxg-skip { height: 36px; }

@media (hover: none) {
  .vxg-btn:hover { background: var(--vx-fill); }
  .vxg-btn--next:hover { background: rgb(255 255 255 / 0.94); }
  .vxg-skip:hover { background: transparent; }
}

/* While the guide runs the dock's hover labels stay quiet */
html.vx-guiding .vx-dock__tip { opacity: 0 !important; }

/* ---------- Reduced motion ---------- */
html.vx-reduced .vxg-dim, html.vx-reduced .vxg-hole, html.vx-reduced .vxg-card { transition-duration: .16s; }
html.vx-reduced .vxg-ring.is-pulse::after { animation: none; }
html.vx-reduced .vxg-demo i { animation: none; opacity: 1; }
html.vx-reduced .vxg[data-demo="drag"] .vxg-demo i { transform: translateX(0); }
html.vx-reduced .vxg[data-demo="swipe"] .vxg-demo i { transform: translateX(24px); }
html.vx-reduced .vxg-dots i { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .vxg-dim, .vxg-hole, .vxg-card { transition-duration: .16s; }
  .vxg-ring.is-pulse::after, .vxg-demo i { animation: none !important; }
}

@media (prefers-reduced-transparency: reduce) {
  .vxg { --vxg-card-a: 0.95; }
}
@media (forced-colors: active) {
  .vxg-ring { outline: 2px solid Highlight; }
  .vxg-card { border: 1px solid CanvasText; }
}