/* =============================================================================
   Lenovo | IBM — "Free Up your Backup" — quick-fire Q&A
   Stylesheet. Structural/visual code — content lives in assets/js/config.js.
   ============================================================================= */

:root {
  /* Swap this one line when licensed webfonts land — see build-spec.md §5. */
  --font-display: 'Gotham', 'Montserrat', 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;

  /* Duotone treatment applied ONLY to question/answer "wall" imagery
     (per-question photography), never to the base wall-bg or product shots.
     Tune here in one place — build-spec.md §1. */
  --duotone-filter: grayscale(1) sepia(.55) hue-rotate(212deg) saturate(3) brightness(.82) contrast(1.08);

  --color-ink: #0a0812;      /* letterbox / page background */
  --color-title: rgba(255,255,255,.55);
  --color-copy: #ffffff;
  --color-accent-red: #c22a2a;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: var(--color-ink);
  overflow: hidden;
  font-family: var(--font-display);
}

/* -----------------------------------------------------------------------
   Viewport + stage — fixed 1920x1080 design canvas, scaled uniformly to
   fit whatever real viewport it's dropped into (JS sets the transform).
   ----------------------------------------------------------------------- */

#viewport {
  position: fixed;
  inset: 0;
  background: var(--color-ink);
  overflow: hidden;
}

#stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1920px;
  height: 1080px;
  transform-origin: center center;
  overflow: hidden;
  background: var(--color-ink);
  /* transform (translate + scale) is written by JS on resize */
}

#stage.is-loading { visibility: hidden; }

.layer {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
  pointer-events: none;
}

.abs { position: absolute; }

/* -----------------------------------------------------------------------
   Base wall + art layer
   ----------------------------------------------------------------------- */

/* #wall-bg — RETIRED as a static rule (scene-spec.md §4e-2). The layer-1
   backdrop is now built at runtime by TapeScene.buildBackdrop() (assets/js/
   scene.js), which sets its own position/size/z-index inline from
   config.stage.backdrop — identical geometry to the values this rule used
   to carry (left:-86px top:-45px 2014x1138 z-index:0). The element keeps
   the id "wall-bg" (app.js passes it as opts.id) purely for continuity;
   nothing in this stylesheet needs to target it any more. */

/* z-order note: the product/wall art sits ABOVE the band strips (below the
   text/logo content layer) — this matches the source PSD, where product-top
   composites above the top band and product-bottom above the bottom band.
   Bands therefore render first (lower z-index), art-layer above them. This
   only matters visually for the intro (Q1's wall-thirds are cropped to sit
   in the gaps around the bands and never overlap them either way). */
.band-shadow {
  position: absolute;
  left: 0;
  width: 1920px;
  height: 263px;
  z-index: 5;
  user-select: none;
}
#band-shadow-top    { top: 199px; }
#band-shadow-bottom { top: 634px; }

.band {
  position: absolute;
  left: 0;
  width: 1920px;
  height: 247px;
  z-index: 8;
  overflow: hidden;
}
#band-top    { top: 192px; }
#band-bottom { top: 629px; }

#art-layer {
  z-index: 10;
}

.chapter-art {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
}

#art-layer .art-item {
  position: absolute;
  overflow: hidden;
}

#art-layer .art-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* duotone — applied to per-question wall photography only */
.wall-photo { filter: var(--duotone-filter); }

/* intro product shots — full opacity source art (fixed on disk), but the
   bottom crop reads a little dark against the wall once it's above the
   band; a light lift keeps it legible without touching the source file. */
.product-shot { filter: brightness(1.12); }

.band img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  user-select: none;
}
.band .band-red { opacity: 0; }

/* -----------------------------------------------------------------------
   Content layer — text, logo, brackets, chevrons, tags, Play control.
   Everything here is built/positioned by app.js per chapter.
   ----------------------------------------------------------------------- */

#content-layer {
  z-index: 30;
}

.chapter-content {
  position: absolute;
  inset: 0;
}

.title-line {
  position: absolute;
  left: 0;
  width: 1920px;
  text-align: center;
  color: var(--color-title);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  white-space: nowrap;
  font-family: var(--font-display);
}
.title-line.size-108 { font-size: 108px; }
.title-line.size-116 { font-size: 116px; }

.copy-line {
  position: absolute;
  left: 0;
  width: 1920px;
  padding: 0 260px;
  color: var(--color-copy);
  font-size: 44px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
}

.answer-tag {
  position: absolute;
  left: 0;
  width: 1920px;
  color: var(--color-copy);
  font-size: 54px;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
}

.logo-lockup {
  position: absolute;
  width: 503px;
  height: 116px;
  user-select: none;
}

.ornament {
  position: absolute;
  user-select: none;
  pointer-events: none;
}

.bracket-octagon {
  position: absolute;
  width: 803px;
  height: 408px;
  user-select: none;
  pointer-events: none;
}

.play-control {
  position: absolute;
  left: 50%;
  top: 752px;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: var(--font-display);
  /* #content-layer carries .layer's pointer-events:none (so clicks pass
     through to the stage-wide "click to advance" handler by default) — this
     is the one real control inside it, so it needs hit-testing re-enabled
     explicitly. */
  pointer-events: auto;
}
.play-control .play-chip {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--color-accent-red);
  color: #fff;
  border-radius: 999px;
  padding: 22px 48px;
  font-size: 40px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.play-control .play-sub {
  color: var(--color-copy);
  font-size: 26px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.play-control:focus-visible .play-chip {
  outline: 3px solid #fff;
  outline-offset: 4px;
}

/* -----------------------------------------------------------------------
   Glass frame / vignette / grain — 2026-09-03: no longer static image
   chrome (#glass-frame / #vignette / #grain are gone from index.html).
   Both overlays are built at runtime by TapeScene.buildOverlay() (pure CSS:
   border + box-shadow cutout [+ procedural canvas grain if enabled]) at
   z-index 40 (below) / 60 (above), sized inline. The grain-jitter keyframes
   below stay only for preview/styleguide.html's asset card.
   ----------------------------------------------------------------------- */

@keyframes grain-jitter {
  0%   { background-position: 0px 0px; }
  16%  { background-position: -37px 12px; }
  33%  { background-position: 22px -29px; }
  50%  { background-position: -18px -41px; }
  66%  { background-position: 41px 23px; }
  83%  { background-position: -29px 8px; }
  100% { background-position: 0px 0px; }
}

/* -----------------------------------------------------------------------
   Controls — progress bar + mute toggle. Sit above grain, real interactive
   elements, excluded from the generic "click stage to advance" handler.
   ----------------------------------------------------------------------- */

#controls-layer {
  z-index: 70;
  pointer-events: none;
}
#controls-layer > * { pointer-events: auto; }

#progress-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1920px;
  height: 12px;
  background: rgba(255,255,255,.12);
  cursor: pointer;
}
#progress-track {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #3a1f5c 0%, #b3247c 55%, #e8622c 100%);
  clip-path: inset(0 0 0 0);
  transform-origin: left center;
}
#progress-played {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.22);
  transform-origin: left center;
  transform: scaleX(0);
}
#progress-playhead {
  position: absolute;
  top: -6px;
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 12px solid #fff;
  transform: translateX(-9px);
  filter: drop-shadow(0 0 4px rgba(0,0,0,.5));
}
.progress-notch {
  position: absolute;
  top: 0;
  width: 2px;
  height: 12px;
  background: rgba(10,8,18,.6);
}

#mute-btn {
  position: absolute;
  right: 32px;
  top: 32px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(10,8,18,.55);
  border: 1px solid rgba(255,255,255,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
}
#mute-btn svg { width: 30px; height: 30px; display: block; }
#mute-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* -----------------------------------------------------------------------
   Small-screen hint — the stage still scales to fit, this is just an
   unobtrusive nudge; the experience is desktop-first (build-spec.md §6).
   ----------------------------------------------------------------------- */

#small-screen-hint {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  padding: 10px 16px;
  background: rgba(10,8,18,.85);
  color: #fff;
  font-family: var(--font-display);
  font-size: 13px;
  text-align: center;
  display: none;
}
@media (max-width: 700px) {
  #small-screen-hint { display: block; }
}