/* ═══════════════════════════════════════════════════════════════════
   VISUALS PICKER (.lp-vis__*), shared by /spotfinder (partials/spots-visuals.html)
   and the homepage (partials/visuals-3d.html). Moved here unchanged from spots.css
   on 2026-10-14; the 3D frame rules for the homepage follow below.
   One walnut frame, ten slides. The frame PNG (portal walnut v5, 1179x829) has a
   transparent 5:3 screen opening, so the slide sits UNDER it at the opening's
   position and the artwork's rounded corners mask it. Opening percentages match
   onboarding-web/virtual-frame-constants.js.
   ═══════════════════════════════════════════════════════════════════ */
.lp-vis__head { max-width: 760px; }
.lp-vis__head .lp-eyebrow { margin-bottom: 0.6rem; letter-spacing: 0.12em; }
.lp-vis__intro { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.6; }
/* Mobile / narrow: toggle, frame, caption, chips, one column. */
.lp-vis__body { display: flex; flex-direction: column; align-items: center; margin-top: 1.5rem; }
.lp-vis__spots {
  display: flex; gap: 0; margin: 0 auto 1.1rem;
  width: max-content; max-width: 100%;
  border: 1px solid var(--navy-border); border-radius: 999px; padding: 4px; background: var(--white);
}
.lp-vis__spot {
  font: 600 15px/1 var(--lp-font); color: var(--muted);
  background: transparent; border: 0; border-radius: 999px; padding: 12px 16px; min-height: 44px; cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.lp-vis__spot.is-active { background: var(--navy); color: var(--white); }
.lp-vis__stage { width: 100%; max-width: 860px; }
/* The frame is capped by the window HEIGHT as well as the column width, so
   the whole device plus its caption fits under the sticky 68px header on a
   short laptop window. 1.422 = the frame artwork's 1179/829 aspect. */
.lp-vis__frame {
  position: relative; aspect-ratio: 1179 / 829; margin: 0 auto;
  width: min(100%, calc((100vh - 170px) * 1.422));
  isolation: isolate;
}
/* Studio look (founder 2026-09-27): the frame STANDS on the background. A
   soft elliptical contact shadow sits on the "floor" under its base, darkest
   where it touches and fading out, plus a light ambient shadow on the frame
   itself. The contact shadow is a pseudo element behind the frame
   (isolation keeps z-index -1 above the section background). */
.lp-vis__frame::before,
.lp-vis__frame::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
/* Floor shadow, pushed a little left (light from the front right). */
.lp-vis__frame::after {
  left: -3%; right: 8%; bottom: -8%; height: 15%;
  background: radial-gradient(ellipse at 50% 38%, rgba(11, 26, 46, 0.55) 0%, rgba(11, 26, 46, 0.28) 38%, rgba(11, 26, 46, 0) 70%);
  filter: blur(10px);
}
/* Tight dark contact line where the base meets the floor. */
.lp-vis__frame::before {
  left: 5%; right: 5%; bottom: -2%; height: 5%;
  background: radial-gradient(ellipse at 50% 45%, rgba(11, 26, 46, 0.6) 0%, rgba(11, 26, 46, 0.32) 45%, rgba(11, 26, 46, 0) 72%);
  filter: blur(3px);
}
/* (2026-09-27: Cloudflare cached this file's previous hash-URL with the OLD
   bytes because it fetched a few seconds before SWA finished propagating; any
   byte change gives a fresh URL, which is how that was cleared.)
   Cast shadow on the backdrop, thrown back and to the LEFT: its own solid
   rounded shape (.lp-vis__cast) BEHIND the device. It must not be a filter on
   the frame PNG: the screen opening is transparent, so a drop-shadow there
   also falls onto the slide. Radii follow the walnut artwork's corners. */
.lp-vis__cast {
  position: absolute; inset: 1.5% 2% 1% 2%; z-index: -1; pointer-events: none;
  border-radius: 6% / 8.5%;
  background: rgba(11, 26, 46, 0.42);
  transform: translate(-4.5%, 3%);
  filter: blur(14px);
}
.lp-vis__slide {
  position: absolute; left: 5.174%; top: 8.082%; width: 89.567%; height: 76.478%;
  display: block; background: #fff; object-fit: fill; transition: opacity 0.18s ease;
}
.lp-vis__slide.is-swapping { opacity: 0.35; }
.lp-vis__bezel { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.lp-vis__caption {
  min-height: 3em; margin: 1.5rem auto 0; max-width: 600px; text-align: center;
  font-size: 16px; line-height: 1.5; color: var(--muted);
}
.lp-vis__picker { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.1rem 2rem; margin-top: 0.5rem; }
.lp-vis__group { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.lp-vis__group-label { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.lp-vis__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.lp-vis__chip {
  font: 600 14px/1 var(--lp-font); color: var(--navy);
  background: var(--white); border: 1px solid var(--navy-border); border-radius: 999px;
  padding: 12px 15px; min-height: 44px; cursor: pointer; white-space: nowrap;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.lp-vis__chip:hover { border-color: var(--blue); }
.lp-vis__chip.is-active { background: var(--navy); border-color: var(--navy); color: var(--white); }
/* Desktop: frame left, toggle + chips in a 340px column on the right,
   vertically centred on the frame. */
@media (min-width: 900px) {
  .lp-vis__body {
    display: grid; align-items: center; column-gap: 2rem;
    grid-template-columns: minmax(0, 1fr) 340px;
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas: "stage ." "stage spots" "stage picker" "stage .";
  }
  .lp-vis__stage { grid-area: stage; }
  .lp-vis__spots { grid-area: spots; margin: 0 0 1.25rem; justify-self: start; }
  .lp-vis__picker { grid-area: picker; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 1rem; margin: 0; }
  .lp-vis__group { align-items: flex-start; }
  .lp-vis__chips { justify-content: flex-start; }
  .lp-vis__chip { font-size: 13.5px; padding: 10px 13px; min-height: 40px; }
  .lp-vis__spot { font-size: 14px; padding: 11px 14px; }
}
.lp-vis__note { margin: 1.5rem 0 0; text-align: center; font-size: 14px; color: var(--muted); }
@media (max-width: 640px) {
  .lp-vis__spot { padding: 12px 13px; font-size: 14px; }
  .lp-vis__chip { font-size: 13.5px; padding: 11px 12px; }
}
@media (prefers-reduced-motion: reduce) { .lp-vis__slide { transition: none; } }
/* Homepage only (founder 2026-10-14: "match the MNTNFRAME appearance"): the spot
   toggle reads like mntnframe.com's range row, coast over spot, ABOVE the frame,
   and the frame is capped lower so the toggle, frame, caption and the chip column
   on the right are all on screen at once. /spotfinder keeps its own layout. */
.lp-vis-home .lp-vis__body { margin-top: 2rem; }
.lp-vis-home .lp-vis__spots {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px;
  width: 100%; max-width: 440px; margin: 0 auto 1.25rem; border-radius: 18px;
}
.lp-vis-home .lp-vis__spot {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-family: var(--lp-font); color: var(--muted);
  border-radius: 14px; padding: 9px 6px; min-height: 52px;
}
.lp-vis-home .lp-vis__spot-name { font-size: 14px; font-weight: 700; line-height: 1.15; color: var(--navy); }
.lp-vis-home .lp-vis__spot-place { font-size: 12px; font-weight: 500; line-height: 1.15; }
.lp-vis-home .lp-vis__spot.is-active { color: rgba(255, 255, 255, 0.78); }
.lp-vis-home .lp-vis__spot.is-active .lp-vis__spot-name { color: var(--white); }
.lp-vis-home .lp-vis__spot:not(.is-active):hover { background: var(--pale-blue); }
.lp-vis-home .lp-vis__spot:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
@media (min-width: 900px) {
  .lp-vis-home .lp-vis__body {
    align-items: start; column-gap: 2.5rem;
    grid-template-columns: minmax(0, 1fr) 360px;
    grid-template-rows: none;
    grid-template-areas: "spots picker" "stage picker";
  }
  .lp-vis-home .lp-vis__spots { justify-self: center; margin: 0 auto 1.25rem; }
  .lp-vis-home .lp-vis__frame { width: min(100%, calc((100vh - 345px) * 1.422)); }
  .lp-vis-home .lp-vis__caption { margin-top: 1.1rem; }
  .lp-vis-home .lp-vis__picker { align-self: center; }
}

/* ── Homepage section (partials/visuals-3d.html, 2026-10-14) ──────────
   Right under the hero, so a small top gap; heading in the landing serif,
   one line where it fits, otherwise balanced lines. */
.lp-vis-home { padding: clamp(2rem, 3.5vw, 3rem) 0; background: var(--section-alt); scroll-margin-top: 68px; }
.lp-vis-home .lp-vis__head { max-width: none; }
.lp-vis-home .lp-headline--sm { margin-top: 0; text-wrap: balance; }
.lp-vis-home .lp-vis__intro { max-width: 760px; }

/* ── The 3D frame (the twin of mntnframe.com's) ───────────────────────
   It fills the frame box, so the space is held from the first paint. A browser
   that will run 3D hides the photo before first paint (.is-3d-pending) and shows
   a still of the model's opening pose until the canvas takes over (.is-3d); the
   photo picker comes back if 3D fails or a pick is made before it is ready. */
.lp-vis__3d { position: absolute; inset: 0; z-index: 1; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; }
.lp-vis__3d[hidden] { display: none; }
.lp-vis__3d-stage { position: absolute; inset: 0; }
.lp-vis__3d-stage canvas {
  display: block; width: 100%; height: 100%;
  cursor: grab; -webkit-tap-highlight-color: transparent; user-select: none;
}
.lp-vis__3d-stage canvas:active { cursor: grabbing; }
.lp-vis__3d-poster {
  position: absolute; inset: 0; width: 100%; height: 100%; display: none;
  object-fit: contain; pointer-events: none; z-index: 1;
}
.lp-vis__frame.is-3d-pending:not(.is-3d) .lp-vis__3d-poster { display: block; }
.lp-vis__frame.is-3d-pending .lp-vis__slide,
.lp-vis__frame.is-3d-pending .lp-vis__bezel,
.lp-vis__frame.is-3d-pending .lp-vis__cast { visibility: hidden; }
.lp-vis__frame.is-3d .lp-vis__3d { opacity: 1; pointer-events: auto; }
.lp-vis__frame.is-3d .lp-vis__slide,
.lp-vis__frame.is-3d .lp-vis__bezel,
.lp-vis__frame.is-3d .lp-vis__cast { opacity: 0; transition: opacity 0.35s ease; }
/* The drag cue: a turntable arrow in front of the frame, the words under it. */
.lp-vis__3d-cue {
  position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  pointer-events: none; transition: opacity 0.4s ease;
}
.lp-vis__3d-cue-arrow { display: block; width: clamp(96px, 12vw, 132px); height: auto; overflow: visible; }
.lp-vis__3d-cue-arrow path {
  fill: none; stroke: var(--navy); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 4px rgba(255, 255, 255, 0.8));
}
.lp-vis__frame.is-3d .lp-vis__3d-cue-arrow { animation: lp-vis-cue 2.4s ease-in-out infinite; }
@keyframes lp-vis-cue { 0%, 100% { transform: translateX(-6px); } 50% { transform: translateX(6px); } }
.lp-vis__3d-cue-text {
  font: 600 12.5px/1 var(--lp-font); letter-spacing: 0.02em; color: var(--navy);
  background: rgba(255, 255, 255, 0.9); border-radius: 999px; padding: 6px 11px;
  box-shadow: 0 1px 6px rgba(11, 26, 46, 0.12);
}
.lp-vis__3d.is-cue-done .lp-vis__3d-cue { opacity: 0; }
/* Its controls: a row under the frame, held at full height (hidden) until the
   model is ready, so nothing moves when it appears. */
.lp-vis__3d-controls {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px;
  min-height: 44px; margin-top: 1.1rem; visibility: hidden;
}
.lp-vis__3d-controls.is-ready { visibility: visible; }
.lp-vis__3d-controls[hidden] { display: none; }
.lp-vis__3d-controls + .lp-vis__caption { margin-top: 0.9rem; }
.lp-vis__3d-btn {
  font: 600 13.5px/1 var(--lp-font); color: var(--navy);
  background: var(--white); border: 1px solid var(--navy-border); border-radius: 999px;
  padding: 11px 15px; min-height: 40px; cursor: pointer; white-space: nowrap; transition: border-color 0.2s;
}
.lp-vis__3d-btn:hover:not([disabled]) { border-color: var(--blue); }
.lp-vis__3d-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.lp-vis__3d-btn[disabled] { cursor: default; opacity: 0.6; }
.lp-vis__3d-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  .lp-vis__frame.is-3d .lp-vis__3d-cue-arrow { animation: none; }
  .lp-vis__3d, .lp-vis__frame.is-3d .lp-vis__slide,
  .lp-vis__frame.is-3d .lp-vis__bezel, .lp-vis__frame.is-3d .lp-vis__cast { transition: none; }
}