/* =============================================================================
   THE VIRTUAL BLOCH
   Design system derived from bloch.com.au: FAM Aime (display serif),
   PP Monument Extended (impact sans) and Universal Sans (text). Those three are
   licensed, so each stack names the real face first — install them on the kiosk
   and they take over — then falls back to a close Google Fonts substitute.

   Layout: authored at 1080 x 1920. main.js sets :root font-size from
   min(vw/1080, vh/1920), so every rem below is a design pixel / 16.
============================================================================= */

:root {
  /* --- palette ------------------------------------------------------------ */
  --ink:        #0a0b10;
  --ink-2:      #12141c;
  --ink-3:      #1b1e28;
  --paper:      #f3f1f1;   /* Bloch's own light neutral */
  --paper-2:    #faf9f8;
  --stone:      #c9c6c6;
  --stone-2:    #e9e7e7;
  --graphite:   #4c4545;   /* Bloch's body copy colour */
  --graphite-2: #8f8a8a;
  --taupe:      #6f645f;
  --blush:      #e7d1cc;
  --copper:     #c0562b;   /* the italic "bloch" of the concept deck */
  --gold:       #c8a55c;
  --glow:       #dce8ff;
  --rim:        #9fc0ff;

  /* --- type -------------------------------------------------------------- */
  --serif:  'FAM Aime', 'Aime', 'Cormorant Garamond', 'Didot', 'Times New Roman', serif;
  --impact: 'PP Monument Extended', 'Monument Extended', 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --sans:   'Universal Sans', 'Universal-Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* --- motion ------------------------------------------------------------ */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --slow: 900ms;
  --med: 520ms;
  --fast: 240ms;

  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  /* a kiosk: nothing is selectable, draggable or long-pressable */
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
  touch-action: none;
}

body { cursor: none; }
body.show-cursor { cursor: default; }

#app {
  position: fixed; inset: 0;
  overflow: hidden;
  /* the whole composition drifts a few pixels over 20 minutes; on an OLED
     kiosk running the same frame for 14 hours a day this matters */
  animation: burnin 1200s linear infinite alternate;
}
@keyframes burnin {
  from { transform: translate(-0.15rem, -0.2rem); }
  to   { transform: translate(0.15rem, 0.2rem); }
}

/* ------------------------------------------------------------------ canvases */

#stage, #silhouette {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
#silhouette {
  mix-blend-mode: screen;
  opacity: 0;
  filter: blur(1.1rem) saturate(1.1);
  transition: opacity var(--slow) var(--ease);
  pointer-events: none;
}
#app.has-visitor #silhouette { opacity: 0.34; }
#app.state-showcase #silhouette { opacity: 0.12; }

/* --------------------------------------------------------------------- pane */

#pane { position: absolute; inset: 0; pointer-events: none; }

/* a raking reflection, as if from the shop's ceiling lights */
.pane-reflection {
  position: absolute; inset: -20%;
  background:
    linear-gradient(104deg, transparent 34%, rgba(220,232,255,0.055) 44%, rgba(220,232,255,0.012) 50%, transparent 58%),
    linear-gradient(104deg, transparent 62%, rgba(220,232,255,0.030) 69%, transparent 76%);
  transition: opacity var(--slow) var(--ease);
}
/* fine glass grain */
.pane-grain {
  position: absolute; inset: 0;
  opacity: 0.16;
  background-image: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.05) 0 1px, transparent 1px),
                    radial-gradient(circle at 70% 65%, rgba(255,255,255,0.04) 0 1px, transparent 1px);
  background-size: 7px 7px, 11px 11px;
}
.pane-vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(130% 78% at 50% 42%, transparent 42%, rgba(4,5,8,0.55) 88%, rgba(2,3,5,0.86) 100%),
    linear-gradient(to bottom, rgba(4,5,8,0.5) 0%, transparent 18%, transparent 74%, rgba(3,4,7,0.72) 100%);
}

/* a full-screen flash when she taps the pane */
#app.knock .pane-reflection { opacity: 2.6; transition: opacity 90ms linear; }
#app.knock { animation: shake 320ms var(--ease-soft); }
@keyframes shake {
  0%   { transform: translate(0, 0); }
  18%  { transform: translate(0.22rem, -0.16rem); }
  38%  { transform: translate(-0.18rem, 0.12rem); }
  62%  { transform: translate(0.1rem, 0.08rem); }
  100% { transform: translate(0, 0); }
}

/* ----------------------------------------------------------------------- UI */

#ui {
  position: absolute; inset: 0;
  display: block;
  pointer-events: none;
}
#ui > * { pointer-events: auto; }

.layer {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--med) var(--ease), transform var(--med) var(--ease), visibility var(--med);
}
.layer.on { opacity: 1; visibility: visible; }

/* ------------------------------------------------------------------- brand */

#brand {
  position: absolute;
  top: 5.5rem; left: 5rem; right: 5rem;
  text-align: left;
  pointer-events: none;
  transform-origin: top left;
  transition: transform var(--slow) var(--ease), opacity var(--slow) var(--ease);
}
.eyebrow {
  margin: 0 0 1.6rem;
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.42em;
  color: var(--graphite-2);
  text-transform: uppercase;
}
.eyebrow::before {
  content: '';
  display: block;
  width: 3.4rem; height: 2px;
  background: var(--gold);
  margin-bottom: 1.5rem;
}
.wordmark { margin: 0; line-height: 0.9; }
.wordmark-top {
  display: block;
  font-family: var(--impact);
  font-stretch: 125%;
  font-weight: 700;
  font-size: 4.6rem;
  letter-spacing: 0.005em;
  color: var(--paper);
}
.wordmark-bottom {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 6.6rem;
  letter-spacing: -0.01em;
  color: var(--copper);
  margin-top: -0.4rem;
}

#app.state-menu #brand { transform: scale(0.5) translate(0, -1.5rem); opacity: 0.85; }
/* in the vitrine the products are the subject; the wordmark steps right back */
#app.state-showcase #brand { transform: scale(0.34) translate(0, -3rem); opacity: 0.4; }

/* ----------------------------------------------------------------- attract */

#attract {
  bottom: 12rem; left: 5rem; right: 5rem;
  text-align: center;
  transform: translateY(1.6rem);
}
#attract.on { transform: translateY(0); }
.tagline {
  margin: 0 auto 3.4rem;
  max-width: 34rem;
  font-family: var(--serif);
  font-size: 2.15rem;
  font-weight: 300;
  line-height: 1.42;
  color: var(--stone);
}
.attract-cue {
  display: flex; align-items: center; justify-content: center;
  gap: 1.5rem;
}
.attract-cue .rule {
  height: 1px; width: 5.5rem;
  background: linear-gradient(to right, transparent, var(--gold));
}
.attract-cue .rule:last-child { background: linear-gradient(to left, transparent, var(--gold)); }
.cue-label {
  font-family: var(--sans);
  font-size: 1.15rem; font-weight: 500;
  letter-spacing: 0.4em;
  color: var(--gold);
  animation: pulse 3.6s var(--ease-soft) infinite;
}
@keyframes pulse { 0%,100% { opacity: 0.45; } 50% { opacity: 1; } }
.attract-sub {
  margin: 1.6rem 0 0;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  color: var(--graphite-2);
}

/* ------------------------------------------------------------------ speech */

/* Sits low, clear of her head and shoulders at every framing. When the menu
   is up the menu owns the bottom of the screen, so the caption lifts above it. */
#speech {
  bottom: 17rem; left: 5rem; right: 5rem;
  display: flex; justify-content: center;
  transform: translateY(0.8rem);
}
#app.state-menu #speech,
#app.state-showcase #speech { bottom: auto; top: 26rem; }
#speech.on { transform: translateY(0); }
.speech-line {
  margin: 0;
  max-width: 32rem;
  padding: 1.5rem 2.4rem;
  font-family: var(--serif);
  font-size: 2.5rem;
  font-weight: 300;
  font-style: italic;
  line-height: 1.24;
  text-align: center;
  color: var(--paper);
  text-shadow: 0 0 3rem rgba(10,11,16,0.95), 0 0 1.2rem rgba(10,11,16,0.9), 0 0.2rem 1.4rem rgba(0,0,0,0.8);
}
.speech-line::before,
.speech-line::after {
  content: '';
  display: block;
  width: 2.6rem; height: 1px;
  margin: 0 auto;
  background: var(--gold);
  opacity: 0.55;
}
.speech-line::before { margin-bottom: 1.2rem; }
.speech-line::after  { margin-top: 1.2rem; }

/* -------------------------------------------------------------------- menu */

#menu {
  bottom: 6rem; left: 4rem; right: 4rem;
  transform: translateY(2.4rem);
}
/* she stands behind the pane, so the choices need a scrim to read against her */
#menu::before {
  content: '';
  position: absolute;
  inset: -6rem -4rem -6rem -4rem;
  background: linear-gradient(to bottom, transparent, rgba(7,8,13,0.72) 12%, rgba(6,7,11,0.93) 34%, rgba(5,6,10,0.97));
  pointer-events: none;
  z-index: -1;
}
#menu.on { transform: translateY(0); }
.menu-head { text-align: center; margin-bottom: 2.2rem; }
.menu-title {
  margin: 0;
  font-family: var(--serif);
  font-size: 3.5rem;
  font-weight: 300;
  font-style: italic;
  letter-spacing: -0.01em;
  color: var(--paper);
  text-shadow: 0 0 3.4rem rgba(159,192,255,0.28);
}
.menu-sub {
  margin: 0.9rem 0 0;
  font-size: 1.1rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--graphite-2);
}

.audience {
  display: flex; justify-content: center; gap: 0.5rem;
  margin: 0 auto 2.2rem;
  padding: 0.35rem;
  width: fit-content;
  border: 1px solid rgba(201,198,198,0.16);
  border-radius: 999px;
  background: rgba(18,20,28,0.5);
  backdrop-filter: blur(1rem);
}
.aud-btn {
  appearance: none; border: 0; cursor: pointer;
  padding: 0.8rem 2rem;
  border-radius: 999px;
  background: transparent;
  color: var(--graphite-2);
  font-family: var(--sans);
  font-size: 1.05rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.aud-btn[aria-selected="true"] { background: var(--paper); color: var(--ink); }

.cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
}
.card {
  position: relative;
  appearance: none; border: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 0.9rem;
  padding: 2.2rem 2rem 2rem;
  min-height: 15.5rem;
  text-align: left;
  border-radius: 0.35rem;
  background: linear-gradient(158deg, rgba(30,33,44,0.86), rgba(14,16,23,0.78));
  border: 1px solid rgba(201,198,198,0.20);
  backdrop-filter: blur(1.6rem);
  overflow: hidden;
  transition: transform var(--med) var(--ease), background var(--med) var(--ease), border-color var(--med) var(--ease);
  animation: cardIn var(--med) var(--ease) backwards;
}
.card:nth-child(1) { animation-delay: 60ms; }
.card:nth-child(2) { animation-delay: 140ms; }
.card:nth-child(3) { animation-delay: 220ms; }
.card:nth-child(4) { animation-delay: 300ms; }
@keyframes cardIn { from { opacity: 0; transform: translateY(1.4rem); } to { opacity: 1; transform: none; } }

.card::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 12% 0%, rgba(200,165,92,0.16), transparent 62%);
  opacity: 0;
  transition: opacity var(--med) var(--ease);
}
.card:active, .card.pressed {
  transform: translateY(-0.35rem) scale(0.995);
  background: linear-gradient(158deg, rgba(48,52,66,0.94), rgba(22,25,34,0.88));
  border-color: rgba(200,165,92,0.55);
}
.card:active::after, .card.pressed::after { opacity: 1; }

.card-index {
  font-family: var(--impact);
  font-stretch: 118%;
  font-size: 0.92rem; font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--gold);
}
.card-label {
  margin: 0;
  font-family: var(--impact);
  font-stretch: 112%;
  font-weight: 700;
  font-size: 1.85rem;
  line-height: 1.08;
  letter-spacing: 0.004em;
  text-transform: uppercase;
  color: var(--paper);
}
.card-kicker {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.35rem;
  font-weight: 300;
  color: var(--stone);
}
.card-foot {
  margin-top: auto;
  display: flex; align-items: center; gap: 0.7rem;
  font-size: 0.92rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--graphite-2);
}
.card-foot .arrow { color: var(--gold); font-size: 1.1rem; }

/* ---------------------------------------------------------------- showcase */

#showcase {
  inset: 0;
  display: flex; flex-direction: column;
  padding: 13.5rem 0 4.5rem;
  transform: translateY(1.6rem);
}
#showcase.on { transform: translateY(0); }

.showcase-head {
  flex: 0 0 auto;
  padding: 0 4rem;
  display: flex; flex-direction: column; gap: 1.3rem;
}
.back-btn {
  appearance: none; cursor: pointer;
  align-self: flex-start;
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.75rem 1.5rem 0.75rem 1.1rem;
  border-radius: 999px;
  border: 1px solid rgba(201,198,198,0.2);
  background: rgba(18,20,28,0.55);
  backdrop-filter: blur(0.8rem);
  color: var(--stone);
  font-family: var(--sans);
  font-size: 0.95rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  transition: color var(--fast), border-color var(--fast);
}
.back-btn:active { color: var(--paper); border-color: var(--gold); }
.back-btn .chev { font-size: 1.4rem; line-height: 1; margin-top: -0.15rem; }

.showcase-kicker {
  margin: 0 0 0.4rem;
  font-size: 1rem;
  letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--gold);
}
.showcase-title {
  margin: 0;
  font-family: var(--impact);
  font-stretch: 118%;
  font-weight: 700;
  font-size: 3.1rem;
  line-height: 1;
  letter-spacing: 0.004em;
  text-transform: uppercase;
  color: var(--paper);
}

/* --- the vitrine carousel --- */
.vitrine {
  position: relative;
  flex: 1 1 auto;
  margin-top: 2.4rem;
  overflow: hidden;
  touch-action: pan-y;
}
.track {
  position: absolute; inset: 0;
  display: flex;
  align-items: center;
  will-change: transform;
}
.slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  padding: 0 4rem;
  display: flex; flex-direction: column;
  transition: opacity var(--med) var(--ease);
}
.slide:not(.active) { opacity: 0.28; }

.slide-frame {
  position: relative;
  flex: 1 1 auto;
  border-radius: 0.3rem;
  background:
    radial-gradient(88% 66% at 50% 22%, #ffffff 0%, var(--paper-2) 46%, var(--paper) 74%, #e6e3e2 100%);
  overflow: hidden;
  box-shadow: 0 2.4rem 6rem rgba(0,0,0,0.6), inset 0 0 0 1px rgba(76,69,69,0.08);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--med) var(--ease);
}
.slide.active .slide-frame { transform: scale(1); }
.slide:not(.active) .slide-frame { transform: scale(0.94); }

.slide-frame .art {
  position: absolute; inset: 7% 9%;
  display: flex; align-items: center; justify-content: center;
}
.slide-frame .art svg { width: 100%; height: 100%; display: block; }
.slide-frame::after {              /* the vitrine's own glass */
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(112deg, rgba(255,255,255,0.5) 8%, transparent 26%, transparent 74%, rgba(76,69,69,0.06) 100%);
  pointer-events: none;
}
.frame-code {
  position: absolute; top: 1.6rem; left: 1.8rem;
  font-family: var(--sans);
  font-size: 0.88rem; font-weight: 500;
  letter-spacing: 0.24em;
  color: var(--graphite-2);
}
.frame-tags {
  position: absolute; bottom: 1.6rem; left: 1.8rem; right: 1.8rem;
  display: flex; gap: 0.5rem; flex-wrap: wrap;
}
.tag {
  padding: 0.34rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(76,69,69,0.2);
  font-size: 0.82rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--taupe);
}

.slide-info {
  flex: 0 0 auto;
  padding-top: 2rem;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end; gap: 1.2rem 2rem;
}
.slide-name {
  margin: 0;
  font-family: var(--serif);
  font-size: 3.2rem;
  font-weight: 300;
  line-height: 1.02;
  color: var(--paper);
}
.slide-price {
  font-family: var(--impact);
  font-stretch: 112%;
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: 0.01em;
  color: var(--gold);
  white-space: nowrap;
}
.slide-blurb {
  grid-column: 1 / -1;
  margin: 0;
  max-width: 36rem;
  font-size: 1.22rem;
  line-height: 1.62;
  font-weight: 300;
  color: var(--stone);
}
.slide-actions {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 1rem;
  margin-top: 0.6rem;
}
.swatches { display: flex; gap: 0.55rem; margin-right: auto; }
.swatch {
  appearance: none; cursor: pointer; padding: 0;
  width: 2.6rem; height: 2.6rem;
  border-radius: 999px;
  border: 2px solid transparent;
  background: transparent;
  display: grid; place-items: center;
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.swatch svg { width: 100%; height: 100%; display: block; }
.swatch[aria-pressed="true"] { border-color: var(--gold); transform: scale(1.08); }

.btn {
  appearance: none; cursor: pointer;
  padding: 1.05rem 2.2rem;
  border-radius: 999px;
  border: 1px solid var(--paper);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  transition: opacity var(--fast), transform var(--fast);
}
.btn:active { transform: scale(0.97); }
.btn.ghost { background: transparent; color: var(--paper); border-color: rgba(243,241,241,0.35); }

.nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  appearance: none; cursor: pointer;
  width: 4.6rem; height: 4.6rem;
  border-radius: 999px;
  border: 1px solid rgba(201,198,198,0.22);
  background: rgba(10,11,16,0.5);
  backdrop-filter: blur(0.8rem);
  color: var(--paper);
  font-size: 2rem; line-height: 1;
  display: grid; place-items: center;
  transition: border-color var(--fast), background var(--fast), opacity var(--fast);
}
.nav:active { border-color: var(--gold); background: rgba(10,11,16,0.8); }
.nav[disabled] { opacity: 0.2; }
.nav.prev { left: 0.9rem; }
.nav.next { right: 0.9rem; }

.vitrine-foot {
  flex: 0 0 auto;
  padding: 2rem 4rem 0;
  display: flex; align-items: center; justify-content: space-between;
}
.dots { display: flex; gap: 0.6rem; }
.dot-btn {
  appearance: none; cursor: pointer; padding: 0;
  width: 2.6rem; height: 3px;
  border: 0;
  background: rgba(201,198,198,0.26);
  transition: background var(--fast) var(--ease);
}
.dot-btn[aria-selected="true"] { background: var(--gold); }
.swipe-hint {
  margin: 0;
  font-size: 0.92rem;
  letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--graphite-2);
}

/* --- detail sheet --- */
#sheet {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-height: 78%;
  padding: 3rem 4rem 4rem;
  border-radius: 0.4rem 0.4rem 0 0;
  background: linear-gradient(to bottom, rgba(18,20,28,0.97), rgba(10,11,16,0.99));
  border-top: 1px solid rgba(200,165,92,0.35);
  box-shadow: 0 -2rem 6rem rgba(0,0,0,0.7);
  transform: translateY(102%);
  transition: transform var(--med) var(--ease);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#sheet.on { transform: translateY(0); }
.sheet-close {
  position: absolute; top: 1.6rem; right: 2rem;
  appearance: none; cursor: pointer;
  width: 3.4rem; height: 3.4rem;
  border-radius: 999px;
  border: 1px solid rgba(201,198,198,0.22);
  background: transparent;
  color: var(--stone);
  font-size: 1.8rem; line-height: 1;
}
.sheet-h {
  margin: 0 0 1.2rem;
  font-size: 0.95rem;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--gold);
}
.sheet-block { margin-bottom: 2.6rem; }
.spec-row {
  display: grid; grid-template-columns: 13rem 1fr;
  gap: 1.4rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid rgba(201,198,198,0.1);
  font-size: 1.1rem;
}
.spec-row dt { color: var(--graphite-2); letter-spacing: 0.06em; }
.spec-row dd { margin: 0; color: var(--paper); font-weight: 300; }
.size-list { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.size-chip {
  padding: 0.7rem 1.3rem;
  border: 1px solid rgba(201,198,198,0.24);
  border-radius: 0.2rem;
  font-size: 1.02rem;
  letter-spacing: 0.08em;
  color: var(--stone);
}
.sheet-note {
  margin: 1.4rem 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--stone);
}

/* ------------------------------------------------------------------ status */

#status {
  position: absolute; bottom: 2rem; left: 5rem;
  display: flex; align-items: center; gap: 0.8rem;
  font-size: 0.85rem;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--graphite-2);
  opacity: 0.5;
  pointer-events: none;
}
#status .dot {
  width: 0.5rem; height: 0.5rem; border-radius: 999px;
  background: var(--graphite-2);
  transition: background var(--med), box-shadow var(--med);
}
#app.cam-live #status .dot { background: var(--gold); box-shadow: 0 0 0.7rem var(--gold); }
#app.has-visitor #status .dot { background: var(--glow); box-shadow: 0 0 0.9rem var(--glow); }

/* -------------------------------------------------------------------- wake */

#wake {
  position: absolute; inset: 0;
  appearance: none; border: 0; cursor: pointer;
  background: rgba(6,7,11,0.9);
  color: var(--gold);
  font-family: var(--sans);
  font-size: 1.15rem; font-weight: 500;
  letter-spacing: 0.42em; text-transform: uppercase;
  display: grid; place-items: center;
  transition: opacity var(--slow) var(--ease), visibility var(--slow);
  z-index: 40;
}
#wake span { animation: pulse 3.2s var(--ease-soft) infinite; }
#app.awake #wake { opacity: 0; visibility: hidden; pointer-events: none; }

/* --------------------------------------------------------------- dev panel */

#debug {
  position: absolute; top: 1rem; right: 1rem;
  z-index: 50;
  width: 21rem;
  padding: 1rem;
  border-radius: 0.3rem;
  background: rgba(6,7,11,0.92);
  border: 1px solid rgba(200,165,92,0.28);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  color: var(--stone);
  backdrop-filter: blur(0.6rem);
}
#debug[hidden] { display: none; }
.dbg-head {
  font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold);
  padding-bottom: 0.6rem; margin-bottom: 0.6rem;
  border-bottom: 1px solid rgba(200,165,92,0.22);
}
.dbg-grid { display: grid; grid-template-columns: 8.2rem 1fr; gap: 0.18rem 0.6rem; }
.dbg-grid b { color: var(--graphite-2); font-weight: 400; }
.dbg-grid span { color: var(--paper); }
#dbgcam {
  width: 100%; height: auto;
  margin-top: 0.7rem;
  border-radius: 0.15rem;
  background: #000;
  transform: scaleX(-1);
}
.dbg-actions { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.7rem; }
.dbg-actions button {
  appearance: none; cursor: pointer;
  padding: 0.34rem 0.6rem;
  border-radius: 0.15rem;
  border: 1px solid rgba(201,198,198,0.24);
  background: transparent;
  color: var(--stone);
  font: inherit;
  font-size: 0.7rem;
}
.dbg-actions button:active { border-color: var(--gold); color: var(--paper); }
.dbg-note { margin-top: 0.7rem; color: var(--taupe); font-size: 0.68rem; line-height: 1.5; }

/* --------------------------------------------------------- state visibility */

#app.state-boot #brand { opacity: 0; transform: translateY(1rem); }

/* the pane reflections dim once she is at the glass, so she reads clearly */
#app.state-greet .pane-reflection,
#app.state-menu .pane-reflection { opacity: 0.55; }
#app.state-showcase .pane-reflection { opacity: 0.3; }
#app.state-showcase .pane-vignette { opacity: 0.75; }

/* --------------------------------------------------------------- landscape */
/* the installation is portrait; on a landscape screen we letterbox to 9:16 so
   the layout is never distorted during desk review */
@media (min-aspect-ratio: 1/1) {
  #app {
    left: 50%; top: 0;
    width: min(100vw, 56.25vh);
    height: 100vh;
    transform: translateX(-50%);
    animation: none;
    box-shadow: 0 0 0 1px rgba(200,165,92,0.18), 0 0 8rem rgba(0,0,0,0.9);
  }
  body { background: #05060a; }
}

@media (prefers-reduced-motion: reduce) {
  #app { animation: none; }
  .cue-label, #wake span { animation: none; opacity: 0.8; }
}