/* ==========================================================================
   project-viewer.css
   Interactive 3D model viewer for project detail pages.
   Scoped to .ps-* classes so nothing here can leak into vdim.webflow.css.
   ========================================================================== */

:root {
  /* Instrument palette — VDIM slate + tan, tuned for legibility on a dark
     viewport. --tan in vdim.webflow.css is #b29e8454 (33% alpha), which is
     unreadable as text, so these are its solid forms. */
  --ps-panel: #233034;
  --ps-panel-glass: rgba(35, 48, 52, .84);
  --ps-rule: #33474d;
  --ps-paper: #edeff1;
  --ps-dim: #8fa3a8;
  --ps-data: #d8c7a8;
  --ps-accent: #b29e84;

  --ps-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
             "Liberation Mono", monospace;
}

/* --------------------------------------------------------------------------
   Spec strip — sits between the h1 and the stage
   -------------------------------------------------------------------------- */

/* body.body-7 is a column flex container, so the explicit width is required:
   auto side-margins alone would suppress the stretch and shrink this to fit,
   floating it away from the h1 it belongs to. The 1200px cap plus 20px inline
   padding reproduces .container.w-container, so the strip lines up with the
   heading above it. */
.ps-spec {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem 1.5rem;
  width: 100%;
  max-width: 1200px;
  margin: -1.5rem auto 1.75rem;
  padding: 0 20px;
  font-family: Inter, sans-serif;
}

.ps-spec-item {
  display: flex;
  align-items: baseline;
  gap: .5rem;
}

.ps-spec-k {
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #7d8f94;
}

.ps-spec-v {
  font-family: var(--ps-mono);
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
  color: var(--ps-panel);
}

/* --------------------------------------------------------------------------
   Stage — full-bleed dark viewport replacing the usual .image-service hero
   -------------------------------------------------------------------------- */

.ps-stage {
  position: relative;
  flex: 0 0 auto;          /* don't let the column flex container squash the stage */
  width: 100%;
  height: 72vh;            /* fallback for browsers without dvh */
  height: min(72dvh, 780px);
  min-height: 420px;
  background: var(--ps-panel);
  overflow: hidden;
  /* hairline top/bottom so the dark band reads as a deliberate inset panel
     rather than a bleed of the footer */
  border-top: 1px solid var(--ps-rule);
  border-bottom: 1px solid var(--ps-rule);
}

.ps-stage model-viewer {
  width: 100%;
  height: 100%;
  display: block;
  background: radial-gradient(circle at 50% 42%,
              #2e4147 0%, var(--ps-panel) 55%, #141d20 100%);
  --poster-color: transparent;
  --progress-bar-height: 0px;   /* we draw our own */
}

/* Expanded fallback for browsers without element fullscreen (iOS Safari) */
.ps-stage.is-expanded {
  position: fixed;
  inset: 0;
  z-index: 9999;
  height: 100%;
  max-height: none;
  border: 0;
}

/* --------------------------------------------------------------------------
   Poster — what everyone sees before any geometry is downloaded
   -------------------------------------------------------------------------- */

.ps-poster {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ps-poster-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Scrim keeps the CTA legible over any frame the capture happens to produce */
.ps-poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%,
              rgba(20, 29, 32, .35) 0%, rgba(20, 29, 32, .72) 100%);
}

.ps-poster-cta {
  position: relative;
  z-index: 1;
  text-align: center;
  font-family: Inter, sans-serif;
}

.ps-explore {
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ps-panel);
  background: var(--ps-data);
  border: 0;
  border-radius: .6em;              /* matches .c-button radius */
  padding: .85em 1.9em;
  cursor: pointer;
  transition: transform .18s ease, background-color .18s ease;
}

.ps-explore:hover,
.ps-explore:focus-visible {
  background: var(--ps-paper);
  transform: translateY(-2px);
}

.ps-poster-note {
  margin-top: .85rem;
  font-family: var(--ps-mono);
  font-size: .7rem;
  letter-spacing: .04em;
  color: var(--ps-dim);
}

/* --------------------------------------------------------------------------
   Chrome — overlays the viewer once it is live. The layer itself is
   click-through so drag-to-orbit still reaches the canvas underneath.
   -------------------------------------------------------------------------- */

.ps-chrome {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease .1s, visibility 0s linear .4s;
  font-family: Inter, sans-serif;
}

.ps-stage.is-live .ps-chrome {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s ease .1s, visibility 0s;
}

.ps-chrome > * {
  pointer-events: auto;
}

/* --- deliverable tabs (top left) --- */

.ps-modes {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: .5rem;
}

.ps-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

/* The tabs are the primary control on the stage, so they read one step
   heavier than the camera-view buttons on the right. */
.ps-tab {
  min-width: 3.6rem;
  font-weight: 500;
}

.ps-tab[disabled] {
  opacity: .38;
  cursor: not-allowed;
}

/* --- view buttons + fullscreen (top right) --- */

.ps-tools {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: flex;
  gap: .35rem;
}

.ps-btn {
  font: inherit;
  font-family: var(--ps-mono);
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ps-accent);
  background: var(--ps-panel-glass);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--ps-rule);
  border-radius: 2px;
  padding: .4rem .65rem;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.ps-btn:hover {
  color: var(--ps-paper);
  border-color: var(--ps-accent);
}

.ps-btn[aria-pressed="true"] {
  color: var(--ps-panel);
  background: var(--ps-data);
  border-color: var(--ps-data);
}

.ps-btn[disabled] {
  opacity: .45;
  cursor: progress;
}

.ps-btn-icon {
  padding: .4rem .5rem;
  line-height: 1;
}

.ps-btn-icon svg {
  display: block;
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

/* One focus treatment for every control on the stage */
.ps-btn:focus-visible,
.ps-explore:focus-visible,
.ps-stage model-viewer:focus-visible {
  outline: 2px solid var(--ps-accent);
  outline-offset: 2px;
}

/* --- readout (bottom left) --- */

.ps-readout {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  margin: 0;
  min-width: 186px;
  background: var(--ps-panel-glass);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--ps-rule);
  border-radius: 2px;
  font-family: var(--ps-mono);
  font-size: .7rem;
}

.ps-readout-row {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: .4rem .7rem;
  border-bottom: 1px solid var(--ps-rule);
}

.ps-readout-row:last-child {
  border-bottom: 0;
}

.ps-readout dt {
  color: var(--ps-dim);
  letter-spacing: .05em;
}

.ps-readout dd {
  margin: 0;
  color: var(--ps-data);
  /* tabular figures stop the digits jittering as the camera moves */
  font-variant-numeric: tabular-nums;
}

/* --- hint (bottom right) --- */

.ps-hint {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  margin: 0;
  font-family: var(--ps-mono);
  font-size: .66rem;
  line-height: 1.7;
  text-align: right;
  color: var(--ps-dim);
}

/* --- load progress --- */

.ps-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--ps-data);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease, opacity .4s ease;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .ps-stage {
    height: 62vh;
    height: 62dvh;
    min-height: 380px;
  }

  .ps-spec {
    margin-top: -.75rem;
    gap: .4rem 1.1rem;
  }
}

@media (max-width: 620px) {
  .ps-hint {
    display: none;
  }

  .ps-readout {
    left: .6rem;
    bottom: .6rem;
    min-width: 150px;
    font-size: .65rem;
  }

  .ps-modes,
  .ps-tools {
    top: .6rem;
  }

  .ps-modes { left: .6rem; }
  .ps-tools { right: .6rem; }

  /* Tabs and camera views share the top row on narrow screens, so let the
     tabs wrap to a second line rather than run into the view buttons.
     min-width: 0 is load-bearing - flex items default to min-width: auto,
     which refuses to shrink below the row's content width and the cap is
     silently ignored. */
  .ps-modes { flex-direction: column; max-width: 45%; min-width: 0; }
  .ps-tabs { min-width: 0; max-width: 100%; }
  .ps-tab { min-width: 0; }

  .ps-btn {
    font-size: .6rem;
    padding: .35rem .5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ps-explore,
  .ps-btn,
  .ps-chrome,
  .ps-progress {
    transition: none;
  }
}