/* Motion vignettes — self-drawing line art and sequenced UI, in the spirit of
   Lottie but native SVG + CSS. They play once when scrolled into view and
   loop gently; with reduced motion they render in their final state. */

.vignette { position: relative; aspect-ratio: 4 / 3; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); overflow: hidden; }
.bg-soft .vignette { background: var(--bg); }
.vignette svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.vignette .ln { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.vignette .ln-2 { fill: none; stroke: var(--line-2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.vignette .ln-blue { fill: none; stroke: var(--blue); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.vignette .fill-ink { fill: var(--ink); }
.vignette .fill-blue { fill: var(--blue); }
.vignette .fill-soft { fill: var(--bg-2); }
.vignette .fill-line { fill: var(--line); }
.vignette text { font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; fill: var(--ink-3); text-transform: uppercase; }
.vignette text.t-ink { fill: var(--ink); }
.vignette text.t-white { fill: #fff; }

/* Drawing: every [data-draw] path strokes on from 0 to full length. */
.vignette [data-draw] { stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400); }
.vignette [data-pop] { opacity: 0; transform-box: fill-box; transform-origin: center; }
.vignette [data-fade] { opacity: 0; }

.vignette.play [data-draw] { animation: v-draw var(--dur, 1.2s) var(--ease) forwards; animation-delay: var(--d, 0s); }
.vignette.play [data-pop] { animation: v-pop 420ms var(--ease) forwards; animation-delay: var(--d, 0s); }
.vignette.play [data-fade] { animation: v-fade 500ms var(--ease) forwards; animation-delay: var(--d, 0s); }

@keyframes v-draw { to { stroke-dashoffset: 0; } }
@keyframes v-pop { 0% { opacity: 0; transform: scale(0.6); } 100% { opacity: 1; transform: scale(1); } }
@keyframes v-fade { to { opacity: 1; } }

/* A slow scan line for the verification panel */
.vignette .scan { opacity: 0; }
.vignette.play .scan { animation: v-scan 2.4s var(--ease) 0.6s 1 forwards; }
@keyframes v-scan { 0% { opacity: 0.9; transform: translateY(0); } 90% { opacity: 0.9; } 100% { opacity: 0; transform: translateY(150px); } }

.vignette-caption { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }

.motion-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.motion-row > div { display: grid; gap: 18px; align-content: start; }
.motion-row h3 { margin-top: 6px; }
.motion-row p { color: var(--ink-3); }
@media (max-width: 860px) { .motion-row { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .vignette [data-draw] { stroke-dashoffset: 0 !important; animation: none !important; }
  .vignette [data-pop], .vignette [data-fade] { opacity: 1 !important; animation: none !important; transform: none !important; }
  .vignette .scan { display: none; }
}