/* ================================================================
   viewer.css – Center 3D viewer panel, overlay controls, env bar
   ================================================================ */

/* ── Viewer wrapper ─────────────────────────────────────────── */
.viewer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--c-bg);
  display: flex;
  flex-direction: column;
}

/* ── Canvas ─────────────────────────────────────────────────── */
#viewer-canvas {
  width: 100%;
  flex: 1;
  display: block;
  touch-action: none;
  cursor: grab;
}
#viewer-canvas:active { cursor: grabbing; }

/* ── CSS vignette overlay (zero GPU cost) ──────────────────── */
.viewer::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse at 50% 48%, transparent 55%, rgba(0,0,0,0.45) 100%);
  pointer-events: none;
  z-index: 1;
}

/* ── Overlay container ──────────────────────────────────────── */
.viewer__overlay {
  position: absolute;
  top: 0;
  left: 0; right: 0; bottom: 0;
  pointer-events: none;
}

/* ── Tool buttons (right edge) ──────────────────────────────── */
.viewer__tools {
  position: absolute;
  top: var(--sp-4);
  right: calc(var(--right-panel-w) + var(--sp-4));
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  pointer-events: auto;
  transition: right var(--t-slow);
  background: rgba(17, 17, 17, 0.55);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 4px;
  box-shadow:
    0 1px 3px  rgba(0, 0, 0, 0.4),
    0 8px 24px rgba(0, 0, 0, 0.3),
    0 0 60px   var(--c-cta-glow);
}

.viewer__tools .viewer-btn {
  width: 28px;
  height: 28px;
  border-color: transparent;
  background: transparent;
  border-radius: 4px;
}
.viewer__tools .viewer-btn:hover {
  color: #ffffff;
  background: rgba(255,255,255,0.04);
  border-color: transparent;
}
.viewer__tools .viewer-btn + .viewer-btn {
  border-top: 1px solid #1e1e1e;
}

.viewer-btn {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--c-border-mid);
  border-radius: var(--r-md);
  background: rgba(17, 17, 17, 0.88);
  color: var(--c-text-3);
  font-size: 14px;
  cursor: pointer;
  transition: all var(--t-fast), transform var(--t-feedback);
}
.viewer-btn:hover {
  border-color: var(--c-border-bright);
  color: var(--c-text-2);
  background: rgba(255, 255, 255, 0.06);
}
.viewer-btn:active { transform: scale(0.86); }
.viewer-btn.active {
  border-color: var(--c-border-bright);
  background: rgba(255, 255, 255, 0.10);
  color: var(--c-text);
}

/* ── Bottom control bar ─────────────────────────────────────── */
.viewer__bottombar {
  position: absolute;
  bottom: var(--sp-4);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0;
  padding: 4px;
  background: #0f0f0f99;
  backdrop-filter: blur(18px);
  border: 1px solid var(--c-border-mid);
  border-top: 1px solid #1a1a1a;
  border-radius: var(--r-full);
  pointer-events: auto;
  box-shadow: var(--shadow-md);
}

.viewer__bottombar .viewer-btn {
  width: 32px; height: 32px;
  font-size: 15px;
  border-color: transparent;
  background: transparent;
}
.viewer__bottombar .viewer-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: transparent;
}

/* ── Vehicle watermark (bottom-left, magazine-style) ───────── */
.viewer__info-badge {
  position: absolute;
  bottom: var(--sp-5);
  left: calc(var(--left-panel-w) + var(--sp-5));
  transition: left var(--t-slow);
  pointer-events: none;
  background: transparent;
  padding: 0;
  border: none;
}

.info-badge__car {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  opacity: 0.4;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.info-badge__sub {
  display: none;
}

/* ════════════════════════════════════════════════════════════════════
   Garage door loading overlay
   Two horizontal panels (top + bottom) close over the viewer during load.
   When load completes, .is-open animates them apart (top up, bottom down)
   to reveal the car.
   ════════════════════════════════════════════════════════════════════ */
.garage-door {
  position: absolute;
  inset: 0;
  z-index: 50;
  pointer-events: none;          /* never blocks clicks when fully open */
  overflow: hidden;
}
/* When loading: door is closed, blocks everything */
.garage-door.is-loading {
  pointer-events: auto;
}

/* ── Door panels ──────────────────────────────────────────────── */
.garage-door__panel {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  /* `overflow: hidden` keeps the inside content (text panel, ready hint)
     from spilling past the meeting line during the open animation. */
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 8%, rgba(0,0,0,0) 92%, rgba(0,0,0,0.35) 100%),
    linear-gradient(135deg, #1a1a1d 0%, #0e0e10 50%, #1a1a1d 100%);
  transition: transform 1.4s cubic-bezier(0.65, 0, 0.35, 1);
  will-change: transform;
}
.garage-door__panel--top    { top: 0;    border-bottom: 1px solid rgba(255,255,255,0.04); }
.garage-door__panel--bottom { bottom: 0; border-top: 1px solid rgba(255,255,255,0.04); }

/* ── Metal slats texture inside each panel ────────────────────── */
.garage-door__slats {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    180deg,
    rgba(255,255,255,0.02) 0px,
    rgba(255,255,255,0.02) 1px,
    transparent 1px,
    transparent 38px,
    rgba(0,0,0,0.30) 38px,
    rgba(0,0,0,0.30) 39px,
    rgba(255,255,255,0.04) 39px,
    rgba(255,255,255,0.04) 40px
  );
  opacity: 0.85;
}
/* Subtle bolt heads at the slat seams */
.garage-door__panel--top    .garage-door__slats::before,
.garage-door__panel--bottom .garage-door__slats::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 4% 38px, rgba(255,255,255,0.06) 0 1.5px, transparent 2px),
    radial-gradient(circle at 4% 78px, rgba(255,255,255,0.06) 0 1.5px, transparent 2px),
    radial-gradient(circle at 4% 118px, rgba(255,255,255,0.06) 0 1.5px, transparent 2px),
    radial-gradient(circle at 96% 38px, rgba(255,255,255,0.06) 0 1.5px, transparent 2px),
    radial-gradient(circle at 96% 78px, rgba(255,255,255,0.06) 0 1.5px, transparent 2px),
    radial-gradient(circle at 96% 118px, rgba(255,255,255,0.06) 0 1.5px, transparent 2px);
}

/* ── Loading text content — INSIDE the top panel ─────────────── */
/* Sits at the bottom of the top panel near the meeting line. When the
   top panel slides UP on door open, this content slides up with it,
   leaving the middle of the screen UNOBSTRUCTED for the car reveal. */
.garage-door__content {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 26px 18px;
  text-align: center;
  /* Subtle gold underline on the meeting edge */
  border-bottom: 1px solid rgba(255,255,255, 0.22);
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 100%);
  min-width: 280px;
}
.garage-door__brand {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.32em;
  color: var(--c-active);
  text-shadow: 0 0 10px rgba(255,255,255,0.4);
}
.garage-door__label {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  min-height: 12px;
}
.garage-door__bar {
  width: 220px;
  height: 2px;
  background: rgba(255,255,255,0.08);
  border-radius: 1px;
  overflow: hidden;
}
.garage-door__bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--c-active) 0%, var(--c-active) 100%);
  box-shadow: 0 0 8px rgba(255,255,255,0.5);
  border-radius: 1px;
  transition: width 0.25s ease;
}
.garage-door__pct {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.4);
  min-width: 30px;
}

/* "READY" hint that briefly appears in the bottom panel after load completes
   (during the 5s hold), then fades out as the door opens. */
.garage-door__readyhint {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 22px 14px;
  border-top: 1px solid rgba(74, 222, 128, 0.22);
  background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 100%);
  text-align: center;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.garage-door.is-ready .garage-door__readyhint {
  opacity: 1;
}
.garage-door__readytext {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.32em;
  color: #4ade80;
  text-shadow: 0 0 10px rgba(74, 222, 128, 0.5);
  animation: readyPulse 1.4s ease-in-out infinite;
}
@keyframes readyPulse {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}

/* ── Open state — panels slide off-screen ────────────────────── */
/* The text/content INSIDE each panel slides with it — middle of viewer
   is uncovered so the car becomes visible as the panels recede. */
.garage-door.is-open .garage-door__panel--top    { transform: translateY(-100%); }
.garage-door.is-open .garage-door__panel--bottom { transform: translateY(100%);  }

/* ── Closed initial state (avoids flash on page load) ────────── */
.garage-door:not(.is-open):not(.is-loading) {
  /* Door is fully closed but no progress shown — used between car switches */
}

/* Pulse animation for the loading label dots */
@keyframes garageDots {
  0%, 20%   { content: '.';   }
  40%       { content: '..';  }
  60%, 100% { content: '...'; }
}
.garage-door__label::after {
  content: '...';
  animation: garageDots 1.4s steps(3, end) infinite;
}

/* Backwards-compat: old class names still work as a hidden alias */
.viewer__loading { display: none; }

/* ── Empty state ────────────────────────────────────────────── */
.viewer__empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  pointer-events: none;
}

.empty-icon {
  width: 72px; height: 72px;
  opacity: 0.07;
}

.empty-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--c-text-2);
  opacity: 0.35;
  letter-spacing: -0.01em;
}

.empty-sub {
  font-size: var(--text-xs);
  color: var(--c-text-3);
  opacity: 0.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── Navigation cube (Autodesk-style 3D orientation widget) ── */
.nav-cube-wrap {
  display: none;
}

/* The canvas appended by nav-cube.js */
.nav-cube-canvas {
  display: block;
  width: 120px;
  height: 120px;
}

/* Right-panel collapsed: cube shifts right */
.workspace:has(.right-panel.collapsed) .nav-cube-wrap { right: var(--sp-4); }

/* ── Panel-collapsed adjustments ────────────────────────────── */
.workspace:has(.left-panel.collapsed) .viewer__info-badge  { left: var(--sp-5); }
.workspace:has(.left-panel.collapsed) .perf-hud            { left: var(--sp-5); }
.workspace:has(.right-panel.collapsed) .viewer__tools      { right: var(--sp-4); }

/* ── Performance overlay HUD ────────────────────────────────── */
.perf-hud {
  position: absolute;
  top: var(--sp-4);
  left: calc(var(--left-panel-w) + var(--sp-4));
  display: flex;
  flex-direction: column;
  gap: 2px;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-base);
}
.perf-hud.visible { opacity: 1; }

.hud-stat {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.hud-stat__label {
  color: var(--c-text-3);
  width: 22px;
  font-size: var(--text-2xs);
  letter-spacing: 0.06em;
}
.hud-stat__value {
  color: var(--c-text-2);
  font-weight: 500;
}

/* ── Part picker panel (click-to-select overlay) ───────────── */

.part-picker {
  position: absolute;
  top: 50%;
  right: calc(var(--right-panel-w) + 56px);
  transform: translateY(-50%);
  width: 224px;
  max-height: 80%;
  overflow-y: auto;
  background: rgba(12, 12, 16, 0.92);
  backdrop-filter: blur(18px);
  border: 1px solid var(--c-border-mid);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  z-index: 30;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-entrance), visibility var(--t-entrance);
}
.part-picker.visible { opacity: 1; visibility: visible; }

.workspace:has(.right-panel.collapsed) .part-picker { right: 56px; }

.part-picker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3);
  border-bottom: 1px solid var(--c-border);
}
.part-picker__name {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--c-text);
}
.part-picker__close {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  color: var(--c-text-3);
  font-size: 16px;
  cursor: pointer;
  border-radius: var(--r-sm);
}
.part-picker__close:hover { color: var(--c-text); background: rgba(255,255,255,0.06); }

.part-picker__section {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--c-border);
}
.part-picker__section:last-of-type { border-bottom: none; }

.part-picker__label {
  font-size: var(--text-2xs);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--c-text-3);
  margin-bottom: var(--sp-2);
}

/* ── Mod list ── */
.part-picker__mods {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.part-mod-item {
  padding: 5px 8px;
  font-size: var(--text-2xs);
  color: var(--c-text-2);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--t-fast);
}
.part-mod-item:hover {
  background: rgba(255,255,255,0.06);
  color: var(--c-text);
}
.part-mod-item.installed {
  color: var(--c-text);
  background: var(--c-cta-glow);
}
.part-mod-item.installed::before {
  content: '✓ ';
  color: var(--c-cta);
}
.part-picker__empty {
  font-size: var(--text-2xs);
  color: var(--c-text-3);
  font-style: italic;
}

/* ── Color swatches ── */
.part-picker__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: var(--sp-2);
}
.part-swatch {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color var(--t-fast), transform var(--t-feedback);
}
.part-swatch:hover { transform: scale(1.2); }
.part-swatch.active { border-color: var(--c-cta); }

.part-picker__hex-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.part-picker__color-input {
  width: 28px; height: 28px;
  padding: 0; border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  background: transparent;
}
.part-picker__color-input::-webkit-color-swatch-wrapper { padding: 0; }
.part-picker__color-input::-webkit-color-swatch {
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--r-sm);
}
.part-picker__hex-text {
  flex: 1;
  background: var(--c-surface-1);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  color: var(--c-text);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  padding: 4px 8px;
}
.part-picker__hex-text:focus { outline: none; border-color: var(--c-border-mid); }
/* Keyboard focus ring for the hex code field (#A8 / WCAG 2.4.7). */
.part-picker__hex-text:focus-visible { outline: 2px solid var(--c-accent-bright); outline-offset: 1px; }

/* ── Finish toggle ── */
.part-picker__finishes {
  display: flex;
  gap: 4px;
}
.finish-btn {
  flex: 1;
  padding: 5px 0;
  font-size: var(--text-2xs);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-text-3);
  background: transparent;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--t-fast);
}
.finish-btn:hover { color: var(--c-text-2); border-color: var(--c-border-mid); }
.finish-btn.active {
  color: var(--c-text);
  background: rgba(255,255,255,0.08);
  border-color: var(--c-border-bright);
}

/* ── Apply all checkbox ── */
.part-picker__all {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3) var(--sp-3);
  font-size: var(--text-2xs);
  color: var(--c-text-3);
  cursor: pointer;
  pointer-events: auto;
}
.part-picker__all input[type="checkbox"] {
  accent-color: var(--c-cta);
}

/* ── Taillight inspect tooltip (explode view) ─────────────── */
.taillight-tooltip {
  position: fixed;
  z-index: 9999;
  padding: 10px 16px;
  background: rgba(10, 10, 14, 0.88);
  backdrop-filter: blur(18px);
  border: 1px solid var(--c-cta-dim);
  border-radius: 8px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  /* Show delay 300ms (playbook §1, --t-tooltip-delay) confirms intent, not an
     accidental graze; hide is immediate so it dismisses cleanly on mouse-leave. */
  transition: opacity 0.2s var(--t-tooltip-delay), transform 0.2s var(--t-tooltip-delay);
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: 300px;
}
.taillight-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
  /* No delay on hide — dismiss is instant when .visible is removed. */
  transition: opacity 0.2s, transform 0.2s;
}
.taillight-tooltip strong {
  font: 600 13px/1.3 'Space Grotesk', sans-serif;
  color: #e8e8ec;
}
.taillight-tooltip span {
  font: 400 11px/1.4 'Inter', sans-serif;
  color: rgba(255, 255, 255, 0.55);
}