/* ============================================================
   Nurevo Design System — Demo Snippet component
   A "how it works" card: cinematic background (AI-generated) +
   a 3-4 step animated overlay that loops through the real flow,
   plus "See demo" and "Contact" CTAs.
   Depends on nurevo-tokens.css + nurevo-components.css.
   v1.0 — 2026-09-27
   ============================================================ */

.nv-snips { display: grid; gap: var(--nv-sp-6); grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .nv-snips { grid-template-columns: 1fr; } }

.nv-snip {
  display: flex; flex-direction: column;
  border: 1px solid var(--nv-border); border-radius: var(--nv-radius);
  background: var(--nv-bg); overflow: hidden; box-shadow: var(--nv-shadow-sm);
  transition: transform var(--nv-dur) var(--nv-ease), box-shadow var(--nv-dur) var(--nv-ease), border-color var(--nv-dur);
}
.nv-snip:hover { transform: translateY(-3px); box-shadow: var(--nv-shadow-md); border-color: var(--nv-n-300); }

/* Stage = the "video" area: cinematic still + animated step overlay */
.nv-snip__stage {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--nv-n-900) center/cover no-repeat;
}
.nv-snip__stage::after { /* readability gradient */
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(15,23,42,.15) 0%, rgba(15,23,42,.35) 45%, rgba(15,23,42,.82) 100%);
}
/* Slow ken-burns drift to feel alive like a clip */
.nv-snip__bg {
  position: absolute; inset: -6%; background: inherit; background-size: cover; background-position: center;
  animation: nv-kb 18s ease-in-out infinite alternate; will-change: transform;
}
@keyframes nv-kb {
  from { transform: scale(1.02) translate(0,0); }
  to   { transform: scale(1.10) translate(-1.5%, -1.5%); }
}

/* Real video clip (lazy-loaded) sits above the poster image */
.nv-snip__vid {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;
  opacity: 0; transition: opacity .5s var(--nv-ease);
}
.nv-snip__vid[data-loaded] { opacity: 1; }
/* When video is showing, the ken-burns still fades under it */
.nv-snip__vid[data-loaded] + .nv-snip__bg { opacity: 0; transition: opacity .5s var(--nv-ease); }

/* Demo badge + play affordance */
.nv-snip__badge {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  font-size: var(--nv-fs-xs); font-weight: var(--nv-fw-bold); letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--nv-radius-pill);
  color: #0e7490; background: #ecfeffee; border: 1px solid #a5f3fc;
}
.nv-snip__live {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--nv-fs-xs); font-weight: var(--nv-fw-semi); color: #fff;
  background: rgba(15,23,42,.55); padding: 4px 10px; border-radius: var(--nv-radius-pill); backdrop-filter: blur(4px);
}
.nv-snip__live b { width: 7px; height: 7px; border-radius: 50%; background: #34d399; animation: nv-pulse 1.6s ease-in-out infinite; }
@keyframes nv-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

/* Animated step overlay */
.nv-snip__steps {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: var(--nv-sp-4) var(--nv-sp-5);
}
.nv-snip__flow { display: flex; gap: 6px; margin-bottom: 10px; }
.nv-snip__flow span {
  flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.28);
  overflow: hidden; position: relative;
}
.nv-snip__flow span.active::before {
  content: ""; position: absolute; inset: 0; background: var(--nv-brand-gradient);
  transform-origin: left; animation: nv-fill 2.6s linear forwards;
}
.nv-snip__flow span.done::before { content:""; position:absolute; inset:0; background: var(--nv-brand-gradient); }
@keyframes nv-fill { from { transform: scaleX(0) } to { transform: scaleX(1) } }

.nv-snip__step { min-height: 3.2em; }
.nv-snip__step-k {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--nv-fs-xs); font-weight: var(--nv-fw-bold); letter-spacing: .05em; text-transform: uppercase;
  color: #fff; opacity: .85; margin-bottom: 4px;
}
.nv-snip__step-k i {
  font-style: normal; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  background: var(--nv-brand-gradient); font-size: 11px; font-weight: 700;
}
.nv-snip__step-t { color: #fff; font-size: var(--nv-fs-base); font-weight: var(--nv-fw-semi); line-height: 1.3; margin: 0; }
.nv-snip__step.enter { animation: nv-stepin .5s var(--nv-ease) both; }
@keyframes nv-stepin { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: translateY(0) } }

/* Body: title + CTAs */
.nv-snip__body { padding: var(--nv-sp-5); display: flex; flex-direction: column; gap: var(--nv-sp-3); flex: 1; }
.nv-snip__title { display: flex; align-items: center; gap: 10px; }
.nv-snip__title h3 { margin: 0; font-size: var(--nv-fs-lg); }
.nv-snip__title .nv-snip__ico { font-size: 22px; }
.nv-snip__desc { color: var(--nv-text-muted); font-size: var(--nv-fs-sm); margin: 0; flex: 1; }
.nv-snip__cta { display: flex; gap: var(--nv-sp-3); flex-wrap: wrap; margin-top: auto; }
.nv-snip__cta .nv-btn { flex: 1; justify-content: center; min-width: 130px; }

/* Reduced motion: hold on step 1, no drift */
@media (prefers-reduced-motion: reduce) {
  .nv-snip__bg { animation: none; }
  .nv-snip__flow span.active::before { animation: none; transform: scaleX(1); }
  .nv-snip__live b { animation: none; }
}