/* ═══ FRAME SLIDESHOW — real exported Figma frames ═══════════════════════
   Presentation, not simulation: a dark ground, the frame contained inside it
   with room to breathe, and a quiet caption. Nothing is redrawn.
   ═══════════════════════════════════════════════════════════════════════ */

.vw {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: clamp(.8rem, 2vw, 1.3rem);
}

/* ── Caption row ───────────────────────────────────────── */
.vw-head {
  display: flex;
  align-items: baseline;
  gap: .8rem;
}
.vw-crumb {
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  color: var(--bone-ghost);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vw-crumb b {
  color: var(--accent, var(--bone));
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.vw-count {
  margin-left: auto;
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  color: var(--bone-ghost);
  font-variant-numeric: tabular-nums;
  flex: none;
}

/* ── Stage ─────────────────────────────────────────────── */
.vw-stagewrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.vw-stage {
  position: relative;
  flex: 1;
  min-width: 0;
  aspect-ratio: 16 / 10;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  padding: clamp(1rem, 3.2vw, 3rem);
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  background:
    radial-gradient(ellipse 70% 60% at 50% 42%,
      color-mix(in srgb, var(--accent, #fff) 5%, transparent), transparent 68%),
    var(--void);
  overflow: hidden;
  cursor: zoom-in;
}

.vw-art {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .68);
}
.vw-art.is-in { animation: vwIn 420ms var(--e-out); }
@keyframes vwIn { from { opacity: 0; transform: translateY(8px) scale(.985); } }

.vw-zoom {
  position: absolute;
  top: .7rem; right: .7rem;
  z-index: 4;
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--r-xs);
  border: 1px solid var(--hairline-2);
  background: color-mix(in srgb, var(--void) 70%, transparent);
  backdrop-filter: blur(8px);
  color: var(--bone-faint);
  opacity: 0;
  transition: opacity var(--t-base), color var(--t-base), transform var(--t-fast) var(--e-snap);
}
.vw-stage:hover .vw-zoom, .vw-zoom:focus-visible { opacity: 1; }
.vw-zoom:hover { color: var(--accent, var(--signal)); }
.vw-zoom:active { transform: scale(.9); }
.vw-zoom svg { width: 13px; height: 13px; }

/* ── Prev / next ───────────────────────────────────────── */
.vw-nav {
  flex: none;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--bone-faint);
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast), transform var(--t-fast) var(--e-snap);
}
.vw-nav:hover {
  color: var(--accent, var(--signal));
  border-color: color-mix(in srgb, var(--accent, var(--signal)) 45%, transparent);
  background: var(--surface-2);
}
.vw-nav:active { transform: scale(.88); }
.vw-nav svg { width: 15px; height: 15px; }
@media (max-width: 700px) { .vw-nav { display: none; } }

/* ── Control row ───────────────────────────────────────── */
.vw-bar {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
}
.vw-play {
  padding: .38rem .85rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline-2);
  background: var(--surface-2);
  font-family: var(--ff-mono);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bone-dim);
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
  flex: none;
}
.vw-play:hover {
  color: var(--accent, var(--signal));
  border-color: color-mix(in srgb, var(--accent, var(--signal)) 50%, transparent);
}
.vw-play.is-playing { color: var(--pulse); border-color: color-mix(in srgb, var(--pulse) 55%, transparent); }

.vw-meta {
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  color: var(--bone-ghost);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Filmstrip ─────────────────────────────────────────── */
.vw-strip {
  display: flex;
  gap: .4rem;
  overflow-x: auto;
  padding-bottom: .4rem;
  scrollbar-width: thin;
}
.vw-strip::-webkit-scrollbar { height: 5px; }
.vw-strip::-webkit-scrollbar-thumb { background: var(--ink-500); border-radius: 3px; }

.vw-thumb {
  position: relative;
  flex: none;
  width: 106px;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--ink-800);
  text-align: left;
  transition: border-color var(--t-base), transform var(--t-fast) var(--e-snap), background var(--t-base);
}
.vw-thumb img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: saturate(.85) brightness(.8);
  transition: filter var(--t-base);
}
.vw-thumb span {
  display: block;
  padding: .3rem .4rem;
  font-family: var(--ff-mono);
  font-size: .54rem;
  letter-spacing: .06em;
  color: var(--bone-ghost);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vw-thumb:hover { border-color: var(--hairline-2); transform: translateY(-2px); }
.vw-thumb:hover img { filter: none; }
.vw-thumb.is-active {
  border-color: var(--accent, var(--signal));
  background: color-mix(in srgb, var(--accent, var(--signal)) 10%, transparent);
}
.vw-thumb.is-active img { filter: none; }
.vw-thumb.is-active span { color: var(--accent, var(--signal)); }

/* The board leads every project — mark it so the strip reads as an index. */
.vw-thumb--board::after {
  content: 'BOARD';
  position: absolute;
  top: 4px; left: 4px;
  padding: .1rem .3rem;
  border-radius: 3px;
  background: color-mix(in srgb, var(--void) 78%, transparent);
  border: 1px solid var(--hairline-2);
  font-family: var(--ff-mono);
  font-size: .46rem;
  letter-spacing: .12em;
  color: var(--bone-dim);
}

/* ═══ LIGHTBOX ═════════════════════════════════════════════════════════ */
#lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: clamp(1rem, 4vw, 3rem);
  background: color-mix(in srgb, var(--void) 95%, transparent);
  backdrop-filter: blur(16px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 280ms var(--e-out), visibility 280ms;
}
#lightbox.is-open { opacity: 1; visibility: visible; }

.lb-fig {
  max-width: min(1500px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  align-items: center;
  transform: scale(.965);
  transition: transform 380ms var(--e-spring);
}
#lightbox.is-open .lb-fig { transform: none; }

.lb-fig img {
  max-width: 100%;
  max-height: calc(100vh - 10rem);
  object-fit: contain;
  border-radius: var(--r-sm);
  box-shadow: 0 40px 100px rgba(0,0,0,.78);
}
.lb-fig figcaption {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  flex-wrap: wrap;
  justify-content: center;
}
.lb-fig b {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 1rem;
  color: var(--bone);
}
.lb-fig span {
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  color: var(--bone-ghost);
}

.lb-close {
  position: absolute;
  top: 1rem; right: 1.2rem;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--hairline-2);
  background: var(--surface-2);
  color: var(--bone-dim);
  font-size: .9rem;
  transition: color var(--t-fast), border-color var(--t-fast), transform var(--t-fast) var(--e-snap);
}
.lb-close:hover { color: var(--pulse); border-color: var(--pulse); }
.lb-close:active { transform: scale(.9); }

.lb-nav {
  flex: none;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--hairline-2);
  background: var(--surface-2);
  color: var(--bone-dim);
  transition: color var(--t-fast), border-color var(--t-fast), transform var(--t-fast) var(--e-snap);
}
.lb-nav:hover { color: var(--signal); border-color: color-mix(in srgb, var(--signal) 50%, transparent); }
.lb-nav:active { transform: scale(.9); }
.lb-nav svg { width: 18px; height: 18px; }
@media (max-width: 700px) { .lb-nav { position: absolute; bottom: 1.2rem; } .lb-prev { left: 1.2rem; } .lb-next { right: 1.2rem; } }