/* Second-pass futuristic product concept screens. The artwork, the screen layouts and the animation are Codex's,
   refined in exeterlabs-v9 on 2026-10-06. The chrome uses v9's ink, 2px outlines
   and 12/16px radius card grammar. The seven screens are aspirational
   product visions, labelled in-frame and in the caption as illustrative. */

.concept-preview { min-width: 0; margin: 0; }
.preview-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; font: 600 12px/18px var(--ui); color: var(--muted); }
.preview-toolbar > span { display: inline-flex; align-items: center; gap: 8px; }
.preview-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(167,138,255,.22); }
.preview-toolbar > div { display: flex; gap: 8px; }
.preview-toolbar button, .preview-dialog button { border: 2px solid var(--ink); border-radius: 1000px; background: #fff; padding: 8px 14px; color: var(--ink); font: 600 12px/18px var(--ui); cursor: pointer; min-height: 38px; transition: background .12s ease-in-out, color .12s ease-in-out, border-color .12s ease-in-out; }
.preview-toolbar button:hover, .preview-dialog button:hover { background: #f1f0fe; }
.preview-toolbar .preview-expand { background: var(--ink); color: #fff; }
.preview-toolbar .preview-expand:hover { background: #434fcf; border-color: #434fcf; color: #fff; }
.preview-expand span { margin-left: 6px; }
.preview-stage { position: relative; overflow: hidden; border: 2px solid var(--ink); border-radius: 12px; background: #fff; isolation: isolate; }
.preview-svg { display: block; width: 100%; height: auto; font-family: var(--sans); }
.preview-stage .preview-svg { transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.preview-stage:hover .preview-svg { transform: scale(1.025); }

/* The frame the screen sits in, per slot. A badge would cover the screen's own in-frame footer. */
.card-media.concept-preview { margin: 16px 16px 0; }
.card-media.concept-preview figcaption { padding-left: 0; }
.band-media.concept-preview { margin-inline: auto; }
.stepsim-support { padding: 12px; }
.stepsim-support figcaption { padding: 8px 4px 0; }

/* Precision dashboard motion. Values stay readable throughout each ambient loop. */
.preview-v2 { font-family: var(--ui); }
.preview-v2 .preview-label { letter-spacing: .07em; }
.preview-ambient { animation: preview-ambient 16s ease-in-out infinite alternate; }
.preview-bar { transform-box: fill-box; transform-origin: center bottom; animation: preview-bars 10s ease-in-out infinite; }
.preview-bar:nth-of-type(3n) { animation-delay: -2s; }
.preview-bar:nth-of-type(3n+1) { animation-delay: -4s; }
.preview-chart-line { stroke-dasharray: 100; animation: preview-trace 2.6s cubic-bezier(.2,.7,.2,1) both; }
.preview-ring { animation: preview-ring 10s ease-in-out infinite; }
.preview-flow { stroke-dasharray: 3 18; animation: preview-flow 4s linear infinite; }
.preview-map-halo { transform-box: fill-box; transform-origin: center; animation: preview-halo 5s ease-out infinite; }
.preview-map-halo:nth-of-type(3n) { animation-delay: -1.6s; }
.preview-map-halo:nth-of-type(3n+1) { animation-delay: -3.2s; }
.preview-pulse { animation: preview-pulse 4s ease-in-out infinite; }
.preview-orbit { transform-box: fill-box; transform-origin: center; stroke-dasharray: 80 15 4 15; animation: preview-orbit 28s linear infinite; }
.preview-offscreen *, .preview-paused *, .preview-modal-open .concept-preview * { animation-play-state: paused !important; }
@keyframes preview-ambient { from { transform: translate(-18px, 7px); } to { transform: translate(18px, -10px); } }
@keyframes preview-bars { 0%, 100% { transform: scaleY(.88); } 45%, 65% { transform: scaleY(1); } }
@keyframes preview-trace { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes preview-ring { 0%, 100% { stroke-dasharray: calc(var(--ring-value) * .94) 100; } 45%, 65% { stroke-dasharray: var(--ring-value) 100; } }
@keyframes preview-flow { to { stroke-dashoffset: -84; } }
@keyframes preview-halo { 0% { transform: scale(.85); opacity: .65; } 85%, 100% { transform: scale(1.45); opacity: 0; } }
@keyframes preview-pulse { 50% { opacity: .4; } }
@keyframes preview-orbit { to { transform: rotate(360deg); } }

/* Inside the dark panel: the same controls, inverted. */
.panel .preview-toolbar { color: #c9c9ca; }
.panel .preview-toolbar button { background: transparent; border-color: var(--divider); color: #e4e4e5; }
.panel .preview-toolbar button:hover { background: rgba(228,228,229,.14); }
.panel .preview-toolbar .preview-expand { background: #e4e4e5; border-color: #e4e4e5; color: var(--ink); }
.panel .preview-toolbar .preview-expand:hover { background: #fff; border-color: #fff; color: var(--ink); }
.panel .preview-stage { border-color: var(--divider); box-shadow: 7px 5px 0 #000; } /* matches .panel-shot img on the dark dither */
.panel .concept-preview figcaption { color: #c9c9ca; }

/* Enlarged view: native dialog, Escape to close, focus returns to Explore. */
.preview-dialog { width: min(1360px, calc(100% - 40px), calc((100dvh - 220px) * 1.579)); max-width: none; max-height: calc(100dvh - 40px); padding: 0; border: 2px solid var(--ink); border-radius: 20px; background: var(--page); color: var(--ink); overflow: auto; box-shadow: 0 32px 100px rgba(28,28,29,.45); }
.preview-dialog::backdrop { background: rgba(28,28,29,.72); backdrop-filter: blur(12px); }
.preview-dialog-head { padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: var(--page); position: sticky; top: 0; z-index: 1; }
.preview-dialog-head p { font: 600 12px/18px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.preview-dialog-head h2 { font: 500 30px/38px var(--serif); letter-spacing: -.02em; }
.preview-dialog .preview-close { padding: 10px 16px; }
.preview-close span { font-size: 20px; margin-left: 8px; }
.preview-dialog-screen { overflow-x: auto; overscroll-behavior: contain; background: #fff; }
.preview-dialog-screen .preview-svg { width: 100%; max-width: none; }
.preview-dialog-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px; font: 400 14px/20px var(--sans); color: var(--muted); border-top: 2px solid var(--divider); }
body.preview-modal-open { overflow: hidden; }

@media (max-width: 639px) {
  .preview-toolbar { font-size: 11px; gap: 8px; }
  .preview-toolbar button { padding-inline: 10px; }
  .preview-dialog { width: calc(100% - 16px); max-height: calc(100dvh - 16px); border-radius: 16px; }
  .preview-dialog-head { padding: 14px; gap: 10px; }
  .preview-dialog-head h2 { font-size: 24px; line-height: 30px; }
  .preview-dialog-screen .preview-svg { width: 1000px; }
  .preview-dialog-foot { align-items: flex-start; padding: 14px; font-size: 12px; }
  .preview-dialog-foot p::after { content: ' Swipe across to explore.'; }
  .preview-dialog-foot button { flex: none; }
}

@media (prefers-reduced-motion: reduce) {
  .concept-preview *, .preview-dialog * { animation: none !important; transition: none !important; }
  .preview-stage:hover .preview-svg { transform: none; }
  .preview-pause, .preview-dialog-pause { display: none; }
}