/*
 * Shared Vantage Showcase — booth display.
 *
 * Deliberately single-theme. A trade show display is a controlled environment: a dark ground
 * makes the photographs read as prints rather than as web pages, and it throws far less glare
 * back at a room full of overhead lighting than a white panel would.
 *
 * Everything sizes in vmin so one stylesheet serves a 1080p landscape panel, a 4K panel, and a
 * vertically mounted tower without any of them looking like an accident. The vmin term is the
 * one that matters — on a screen of a given physical size it holds type and the QR at a fixed
 * number of inches regardless of pixel density. The rem floors and ceilings only catch absurd
 * viewports; set the ceilings too low and a 4K panel silently renders everything smaller than
 * the 1080p one sitting next to it.
 */

:root {
  --ink:        #f4f2ee;
  --ink-bright: #ffffff;
  --ink-dim:    #9aa0a8;
  --ground:     #0b0c0e;
  --panel:      #131519;
  --panel-edge: #232830;
  --accent:     #c8a45c;   /* warm brass — reads as framing hardware, not as a UI accent */
  --qr-card:    #ffffff;
  --qr-ink:     #000000;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--ground);
  color: var(--ink);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  -webkit-font-smoothing: antialiased;
}

body.svs-hide-cursor { cursor: none; }

/* ── Stage ───────────────────────────────────────────────────────────────── */

.svs-stage {
  display: grid;
  height: 100vh;
  height: 100dvh;
  width: 100vw;
  grid-template-columns: 1fr minmax(300px, 33%);
  grid-template-rows: 100%;
  background: var(--ground);
}

/* Vertically mounted panels: photograph above, panel below. */
@media (orientation: portrait) {
  .svs-stage {
    grid-template-columns: 100%;
    /* Room for the larger call to action and QR without clipping the panel. */
    grid-template-rows: 1fr minmax(360px, 46%);
  }
}

/* ── Photograph ──────────────────────────────────────────────────────────── */

.svs-image {
  position: relative;
  overflow: hidden;
  background: var(--ground);
  min-width: 0;
  min-height: 0;
}

.svs-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* contain, never cover: a portrait photograph must not be cropped to fill a landscape pane */
  object-fit: contain;
  object-position: center;
  opacity: 0;
  transition: opacity 900ms ease-in-out;
  will-change: opacity;
}

.svs-photo.is-live { opacity: 1; }

.svs-stage[data-transition="cut"] .svs-photo { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .svs-photo { transition: none; }
}

/* ── Panel ───────────────────────────────────────────────────────────────── */

.svs-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--panel);
  border-left: 1px solid var(--panel-edge);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

@media (orientation: portrait) {
  .svs-panel {
    border-left: 0;
    border-top: 1px solid var(--panel-edge);
  }
}

.svs-panel-inner {
  display: flex;
  flex-direction: column;
  gap: clamp(0.6rem, 1.4vmin, 1.4rem);
  padding: clamp(1.5rem, 3.4vmin, 3.5rem);
  overflow: hidden;
}

/*
 * The control bar is fixed to the bottom of the window and sits over the panel. While it is
 * showing, reserve the space so it cannot cover the QR code — which is exactly where it
 * lands, and exactly the thing a visitor needs. It auto-hides after a few seconds, and the
 * reserved space goes with it.
 */
body.svs-hud-open .svs-panel-inner { padding-bottom: calc(clamp(1.5rem, 3.4vmin, 3.5rem) + 54px); }

/* The QR block is never what gives way when space is tight. */
.svs-qr-block { flex: 0 0 auto; }
.svs-caption  { min-height: 0; }

/*
 * Brand mark at the head of the panel rather than over the photograph. A logo composited
 * onto an unpredictable image is a coin toss — a light mark disappears into a bright sky,
 * a dark one into a forest floor — and it puts something in front of the print you are
 * there to sell. On the panel it reads as letterhead and never competes with the work.
 *
 * Full panel width, height follows the artwork.
 */
.svs-brand {
  display: block;
  /* Intrinsic width (the file is wider than this column), clamped to it — and bounded in
     height too. A logo whose aspect differs from what anyone assumed must never be able to
     push the QR code off the panel; that is the functional element on this screen. */
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: clamp(64px, 13vh, 220px);
  object-fit: contain;
  object-position: left center;
  margin: 0 0 clamp(0.2rem, 0.8vmin, 0.9rem);
}
.svs-brand[hidden] { display: none; }

/*
 * Applied by the player after it samples the actual file, so the asset can be swapped
 * without touching code.
 *
 * --screen: the file has an opaque dark background instead of transparency, which would
 *   otherwise show as a darker rectangle on this panel. Screening black over any colour
 *   leaves that colour untouched, so the box disappears and white artwork stays white. It
 *   also cleans up the semi-dark pixels along anti-aliased edges, which a flat colour
 *   match would leave as a visible fringe around every letter.
 *
 * --plate: the artwork itself is dark, which no amount of background handling saves on a
 *   near-black panel. Give it a light card to sit on instead.
 */
.svs-brand--screen { mix-blend-mode: screen; }

.svs-brand--plate {
  background: var(--qr-card);
  padding: clamp(0.4rem, 1vmin, 1rem) clamp(0.5rem, 1.3vmin, 1.3rem);
  border-radius: 3px;
}

.svs-location {
  margin: 0;
  font-family: ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  font-size: clamp(0.7rem, 1.55vmin, 2.2rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.svs-location:empty { display: none; }

.svs-title {
  margin: 0;
  font-size: clamp(1.4rem, 4.1vmin, 6rem);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.012em;
  text-wrap: balance;
  color: var(--ink);
}

.svs-caption {
  margin: 0;
  font-size: clamp(0.85rem, 1.95vmin, 2.8rem);
  line-height: 1.55;
  color: var(--ink-dim);
  text-wrap: pretty;
  /* Long product prose gets clamped rather than shoving the QR off screen. */
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.svs-price {
  margin: 0;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(0.8rem, 1.7vmin, 2.4rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.svs-price:empty { display: none; }

/* ── QR ──────────────────────────────────────────────────────────────────── */

/*
 * Call to action above the code, each on its own full-width line. Set beside the QR it was
 * boxed into an 18-character column and read as a footnote; the one line on this panel that
 * has to carry across a busy aisle should not be the smallest text on it.
 */
.svs-qr-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.45rem, 1.15vmin, 1rem);
  margin-top: auto;
  padding-top: clamp(0.5rem, 1.6vmin, 1.5rem);
}

@media (orientation: portrait) {
  .svs-qr-block { margin-top: clamp(0.5rem, 1.6vmin, 1.5rem); }

  /*
   * A vertically mounted panel is wide and short. At the logo's 4:1 aspect, full width there
   * works out 250px tall and pushes the QR out of a container that clips, so height leads and
   * width follows the artwork. Measured: 18vmin is the last value that fits with everything
   * else present, so 16vmin is the setting — about 69% of the column, with real slack left
   * for a location line that wraps. Landscape stays unconstrained.
   */
  .svs-brand {
    width: auto;
    height: clamp(56px, 16vmin, 300px);
    max-width: 100%;
    align-self: flex-start;
  }
  /* The panel is only ~40% of a vertical screen. Give the caption fewer lines rather than
     let the taller call to action push the QR out of a container that clips. */
  .svs-caption { -webkit-line-clamp: 3; }
}

/*
 * The white card is not decoration. A QR symbol needs a quiet zone of at least four modules
 * of light margin on every side; printed straight onto the dark panel it fails to acquire.
 */
.svs-qr-card {
  background: var(--qr-card);
  padding: clamp(0.5rem, 1.15vmin, 1.1rem);
  border-radius: 3px;
  flex: none;
  line-height: 0;
}

/*
 * Sized against the reliable rule of thumb that scan distance tops out near ten times the
 * symbol's physical width. Booth visitors scan from three or four feet, which needs roughly
 * three and a half to five inches on the glass.
 */
.svs-qr {
  display: block;
  /*
   * 31vmin puts this at ~335px on a 1080p panel and ~670px on a 4K one of the same physical
   * size — about 4 inches of glass on a 27" screen, which the ten-to-one rule makes reliable
   * out to roughly three and a half feet. The earlier 17.5vmin measured 189px in a real
   * render: fine on a desk, short of the aisle.
   */
  width: clamp(220px, 31vmin, 700px);
  height: clamp(220px, 31vmin, 700px);
  image-rendering: pixelated;  /* keep module edges crisp when scaled */
}

.svs-qr-label {
  margin: 0;
  font-family: ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  /* Larger than the caption: this is the instruction, not supporting detail. */
  font-size: clamp(0.95rem, 2.35vmin, 3.4rem);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: 0.005em;
  /* Pure white, not the warm off-white the body text uses — maximum separation from the
     panel at the one place a passer-by has to read and act in a couple of seconds. */
  color: var(--ink-bright);
  text-wrap: balance;
  max-width: none;
}

/* ── Progress ────────────────────────────────────────────────────────────── */

.svs-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.07);
}

.svs-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transform-origin: left center;
}

/* ── HUD ─────────────────────────────────────────────────────────────────── */

.svs-hud {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 18px;
  background: rgba(8, 9, 11, 0.92);
  border-top: 1px solid var(--panel-edge);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  color: var(--ink-dim);
  transition: opacity 400ms ease, transform 400ms ease;
  z-index: 20;
}

.svs-hud.is-hidden {
  opacity: 0;
  transform: translateY(100%);
  pointer-events: none;
}

.svs-btn {
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  background: #1d222a;
  border: 1px solid var(--panel-edge);
  border-radius: 4px;
  padding: 7px 14px;
  cursor: pointer;
}
.svs-btn:hover  { background: #262c36; }
.svs-btn:disabled { opacity: 0.5; cursor: default; }
.svs-btn:focus-visible,
.svs-hud a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.svs-hud-status { font-variant-numeric: tabular-nums; }
.svs-hud-keys   { margin-left: auto; opacity: 0.62; }

/* ── Toast ───────────────────────────────────────────────────────────────── */

.svs-toast {
  position: fixed;
  top: 22px;
  left: 50%;
  transform: translateX(-50%) translateY(-14px);
  padding: 10px 20px;
  border-radius: 4px;
  background: rgba(8, 9, 11, 0.94);
  border: 1px solid var(--panel-edge);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease, transform 260ms ease;
  z-index: 30;
}

.svs-toast.is-up {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Empty state ─────────────────────────────────────────────────────────── */

.svs-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 3rem;
  text-align: center;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-dim);
}