/* ------------------------------------------------------------------
   Portfolio UI Kit — chrome around the artwork.

   The SVG is the design system. This stylesheet only handles:
     · layout of the landing stage
     · the red hover affordance over trigger polygons
     · the deck overlay (modal slider) chrome

   It must not restyle the artwork itself.
   ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-dark);
  color: var(--ink);
  font-family: var(--font-body);
  overflow-x: hidden;
}

/* ============ LANDING STAGE ============ */

#landing-stage {
  display: block;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  background: var(--bg-room);
}

#landing-stage svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Trigger regions: invisible polygons that catch input.
   The SVG ships them as fill="rgba(128,128,128,0)" — we re-state it
   here so they stay clickable and we own the transitions. */
#landing-stage [id^="trigger-"] {
  cursor: pointer;
  pointer-events: all;
  outline: none;
  fill: rgba(255, 26, 26, 0);
  stroke: rgba(255, 26, 26, 0);
  stroke-width: 0;
  stroke-linejoin: miter;
  transition:
    fill         var(--motion-fast) var(--ease-quiet),
    stroke       var(--motion-fast) var(--ease-quiet),
    stroke-width var(--motion-fast) var(--ease-quiet);
}

/* Hover affordance — matches landing/triggers/*.png:
   thick saturated red box framing the polygon. We translate the
   reference's ~8-px crimson outline into SVG units (~0.6% of an
   800-unit canvas → stroke-width: 6).                          */
#landing-stage [id^="trigger-"].is-hover {
  fill: var(--hot-red-soft);
  stroke: var(--hot-red);
  stroke-width: 6;
}

/* Keyboard focus mirrors hover, plus a faint glow. */
#landing-stage [id^="trigger-"]:focus-visible {
  fill: var(--hot-red-soft);
  stroke: var(--hot-red);
  stroke-width: 6;
  filter: drop-shadow(0 0 6px rgba(255, 26, 26, 0.55));
}

@media (prefers-reduced-motion: reduce) {
  #landing-stage [id^="trigger-"] { transition: none; }
}

/* ============ PROJECT DECK OVERLAY ============ */

#deck-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--bg-dark);
  display: grid;
  place-items: center;
  animation: deck-fade-in var(--motion-deck) var(--ease-quiet);
}

#deck-overlay[hidden] { display: none; }

@keyframes deck-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

#deck-viewport {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}
#deck-viewport.is-dragging { cursor: grabbing; }

/* The canvas holds the inlined wide SVG. Scaled so its 800-unit
   height fills viewport height; width follows aspect, overflows
   horizontally — that's the point. JS sets the translateX. */
#deck-canvas {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  will-change: transform;
  transition: transform var(--motion-deck) var(--ease-quiet);
}
#deck-canvas.no-anim { transition: none; }   /* during free drag */

#deck-canvas svg {
  height: 100vh;
  width: auto;
  display: block;
}

/* Controls — share the .ctl vocabulary from colors_and_type.css */
.deck-ctl {
  position: fixed;
  z-index: 60;
  font-family: var(--font-body);
  background: rgba(255, 255, 255, 0.85);
  color: var(--ink);
  border: 1px solid rgba(35, 31, 32, 0.18);
  border-radius: 999px;
  cursor: pointer;
  line-height: 1;
  backdrop-filter: blur(6px);
  box-shadow: 0 1px 2px rgba(35, 31, 32, 0.06);
  transition: background var(--motion-fast) var(--ease-quiet),
              transform  var(--motion-fast) var(--ease-quiet),
              opacity    var(--motion-fast) var(--ease-quiet);
}
.deck-ctl:hover { background: #ffffff; border-color: rgba(35, 31, 32, 0.32); }
.deck-ctl:active { transform: scale(0.95); }
.deck-ctl:disabled { opacity: 0.3; cursor: default; pointer-events: none; }

#deck-close {
  top: 1.1rem; right: 1.1rem;
  width: 2.4rem; height: 2.4rem;
  font-size: 1.3rem;
}

.deck-arrow {
  top: 50%;
  transform: translateY(-50%);
  width: 2.9rem; height: 2.9rem;
  font-size: 1.6rem;
}
.deck-arrow:active { transform: translateY(-50%) scale(0.95); }
#deck-prev { left: 1.1rem; }
#deck-next { right: 1.1rem; }

/* Title + position counter */
#deck-meta {
  position: fixed;
  top: 1.15rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: var(--type-sm);
  letter-spacing: var(--tracking-wide);
  color: rgba(35, 31, 32, 0.65);
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(35, 31, 32, 0.18);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  backdrop-filter: blur(6px);
  box-shadow: 0 1px 2px rgba(35, 31, 32, 0.06);
  pointer-events: none;
}
#deck-meta #deck-title { color: var(--ink); }
#deck-meta #deck-sep { opacity: 0.4; }

/* Section progress dots */
#deck-progress {
  position: fixed;
  bottom: 1.3rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  gap: 0.5rem;
  padding: 0.45rem 0.7rem;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(35, 31, 32, 0.18);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  box-shadow: 0 1px 2px rgba(35, 31, 32, 0.06);
}
#deck-progress .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(35, 31, 32, 0.28);
  cursor: pointer;
  border: 0;
  padding: 0;
  transition: background 200ms var(--ease-quiet),
              transform 200ms var(--ease-quiet);
}
#deck-progress .dot:hover { background: rgba(35, 31, 32, 0.55); }
#deck-progress .dot.active {
  background: var(--ink);
  transform: scale(1.4);
}

/* ============ SOFT OVERLAY (bio / laptop / table TBD) ============ */

#soft-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  animation: deck-fade-in var(--motion-fast) var(--ease-quiet);
}
#soft-overlay[hidden] { display: none; }

#soft-body {
  background: var(--bg-paper);
  color: var(--ink);
  padding: 2.2rem 2.4rem 1.6rem;
  border-radius: 4px;
  border: 1px solid var(--ink);
  max-width: 28rem;
  text-align: center;
  font-family: var(--font-body);
  box-shadow: 0 12px 36px rgba(35, 31, 32, 0.12);
}
#soft-label {
  font-size: var(--type-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-indigo);
  margin-bottom: 0.6rem;
}
#soft-msg {
  font-size: var(--type-md);
  line-height: var(--lh-body);
  margin-bottom: 1.4rem;
}
#soft-close {
  background: var(--ink);
  color: var(--bg-paper);
  border-color: var(--ink);
  padding: 0.45rem 1.2rem;
  font-size: var(--type-sm);
}
#soft-close:hover { background: var(--ink-indigo); border-color: var(--ink-indigo); }

@media (prefers-reduced-motion: reduce) {
  #deck-canvas, #deck-overlay, #soft-overlay { animation: none; transition: none; }
}