/* Hình minh họa động cho thẻ bước quy trình và các section (Views/V2/Shared/_StepScene.cshtml), kiểu Lottie bằng SVG + CSS.
   Chưa cuộn tới (hoặc giảm chuyển động / không có JS): hiện hình tĩnh đầy đủ.
   js/v2/site.js thêm .is-armed cho khung [data-scenes] rồi .is-in khi cuộn tới: các thẻ chạy lần lượt theo --i. */

/* ---------- Khung và màu ---------- */
.cz-scene {
  --sc-paper: #FFFFFF;
  --sc-line: rgba(15, 35, 56, 0.14);
  --sc-muted: #D3DDEA;
  --sc-soft: rgba(0, 161, 255, 0.14);
  --sc-b: var(--cz-blue-primary);
  --sc-m: var(--cz-mint);
  --sc-a: var(--cz-amber);
  --sc-r: var(--cz-rose);
  --sc-cursor: #0F172A;
  display: block;
  width: 100%;
  height: var(--sc-h, 112px);
  margin: 0 auto 16px;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, #F2F9FF 0%, #E3F2FE 100%);
  border: 1px solid rgba(0, 161, 255, 0.14);
  overflow: hidden;
}
html[data-theme="dark"] .cz-scene,
.contact-next .cz-scene {
  --sc-paper: #1B2F47;
  --sc-line: rgba(255, 255, 255, 0.14);
  --sc-muted: rgba(148, 163, 184, 0.42);
  --sc-soft: rgba(56, 189, 248, 0.2);
  --sc-b: #38BDF8;
  --sc-cursor: #E2E8F0;
  background: linear-gradient(160deg, rgba(56, 189, 248, 0.12) 0%, rgba(56, 189, 248, 0.04) 100%);
  border-color: rgba(56, 189, 248, 0.2);
}

.cz-scene * { transform-box: fill-box; transform-origin: center; }
.cz-scene .o-l { transform-origin: left center; }
.cz-scene .o-r { transform-origin: right center; }
.cz-scene .o-t { transform-origin: center top; }
.cz-scene .o-b { transform-origin: center bottom; }

.cz-scene .sc-p { fill: var(--sc-paper); stroke: var(--sc-line); stroke-width: 1.5; }
.cz-scene .sc-f { fill: var(--sc-paper); stroke: var(--sc-muted); stroke-width: 1.5; }
.cz-scene .sc-s { fill: var(--sc-soft); }
.cz-scene .sc-bs { fill: var(--sc-soft); stroke: var(--sc-b); stroke-width: 1.5; }
.cz-scene .sc-ms { fill: rgba(0, 210, 180, 0.16); }
.cz-scene .sc-b { fill: var(--sc-b); }
.cz-scene .sc-m { fill: var(--sc-m); }
.cz-scene .sc-a { fill: var(--sc-a); }
.cz-scene .sc-r { fill: var(--sc-r); }
.cz-scene .sc-wf { fill: #FFFFFF; }
.cz-scene .sc-logo { fill: var(--sc-b); }
.cz-scene .sc-l { fill: none; stroke: var(--sc-muted); stroke-width: 4; stroke-linecap: round; }
.cz-scene .sc-ln { fill: none; stroke: var(--sc-line); stroke-width: 1.5; }
.cz-scene .sc-sb, .cz-scene .sc-sm, .cz-scene .sc-sa, .cz-scene .sc-sr, .cz-scene .sc-w, .cz-scene .sc-wl {
  fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.cz-scene .sc-sb { stroke: var(--sc-b); }
.cz-scene .sc-sm { stroke: var(--sc-m); }
.cz-scene .sc-sa { stroke: var(--sc-a); stroke-width: 2.6; }
.cz-scene .sc-sr { stroke: var(--sc-r); stroke-width: 2.2; }
.cz-scene .sc-w { stroke: #FFFFFF; stroke-width: 2.2; }
.cz-scene .sc-wl { stroke: rgba(255, 255, 255, 0.85); stroke-width: 4; }
.cz-scene .sc-dash { stroke-dasharray: 4 6; }
.cz-scene .sc-sel { fill: none; stroke: var(--sc-b); stroke-width: 2.2; }
.cz-scene .sc-match { fill: rgba(0, 210, 180, 0.14); stroke: var(--sc-m); stroke-width: 1.5; }
.cz-scene .sc-cur { fill: var(--sc-cursor); stroke: var(--sc-paper); stroke-width: 1.2; stroke-linejoin: round; }

/* ---------- Chiều cao khung theo từng khối ---------- */
.api-step-row-5 .cz-scene { --sc-h: 104px; }
.journey-step-compact .cz-scene { --sc-h: 96px; margin-bottom: 12px; }
.arch-card .cz-scene, .step-guide-grid .cz-scene { --sc-h: 132px; margin-bottom: 20px; }
.feature-card .cz-scene { --sc-h: 120px; margin-bottom: 18px; }
.compare-box .cz-scene { --sc-h: 130px; margin-bottom: 20px; }
.tier-item .cz-scene { --sc-h: 66px; width: 104px; flex: 0 0 104px; margin: 0; border-radius: var(--radius-md); }
@media (max-width: 480px) {
  /* Banner mobile: khung hình nằm trên, chữ xuống dưới cho đủ rộng */
  .tier-item { flex-wrap: wrap; gap: 12px; }
  .tier-item .cz-scene { --sc-h: 88px; width: 100%; flex-basis: 100%; }
}
.contact-next-steps .cz-scene { --sc-h: 120px; max-width: 280px; margin: 0 0 16px; }

/* ---------- Chuyển động ----------
   Một vòng 6s; phần tử xuất hiện theo --d, biến mất cũng theo thứ tự đó rồi lặp lại.
   --dl = trễ của thẻ (--i x 0.6s) + trễ riêng của phần tử (--d). Lớp a-* chỉ tính trên phần tử bên trong svg. */
.cz-scenes.is-armed svg [class^="a-"], .cz-scenes.is-armed svg [class*=" a-"] {
  --dl: calc(var(--i, 0) * 0.6s + var(--d, 0s));
  animation-duration: 6s;
  animation-delay: var(--dl);
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
  animation-play-state: paused;
}
.cz-scenes.is-armed.is-in svg [class^="a-"], .cz-scenes.is-armed.is-in svg [class*=" a-"] { animation-play-state: running; }

.cz-scenes.is-armed .a-pop { animation-name: czPop; }
.cz-scenes.is-armed .a-draw { animation-name: czDraw; }
.cz-scenes.is-armed .a-fade { animation-name: czFade; }
.cz-scenes.is-armed .a-slide { animation-name: czSlide; }
.cz-scenes.is-armed .a-go { animation-name: czGo; }
.cz-scenes.is-armed .a-flow { animation-name: czFlow; }
.cz-scenes.is-armed .a-bar { animation-name: czBar; }
.cz-scenes.is-armed .a-grow { animation-name: czGrow; }
.cz-scenes.is-armed .a-on { animation-name: czOn; }
.cz-scenes.is-armed .a-stamp { animation-name: czStamp; }
.cz-scenes.is-armed .a-swing { animation-name: czSwing; }
.cz-scenes.is-armed .a-hue { animation-name: czHue; animation-timing-function: linear; }
.cz-scenes.is-armed .a-ring { animation-name: czRing; animation-timing-function: ease-in-out; }
/* Chuyển động nền lặp nhanh, không theo vòng 6s */
.cz-scenes.is-armed .a-scan { animation-name: czScan; animation-duration: 2.4s; animation-timing-function: ease-in-out; }
.cz-scenes.is-armed .a-blink { animation-name: czBlink; animation-duration: 1.2s; animation-timing-function: ease-in-out; }
.cz-scenes.is-armed .a-wave { animation-name: czWave; animation-duration: 1.5s; animation-timing-function: ease-out; }
.cz-scenes.is-armed .a-dash { animation-name: czDash; animation-duration: 1s; animation-timing-function: linear; }
.cz-scenes.is-armed .a-lid { animation-name: czLid; animation-duration: 2.4s; animation-timing-function: ease-out; }

@keyframes czPop {
  0%, 6% { opacity: 0; transform: scale(0.4); }
  12% { opacity: 1; transform: scale(1.12); }
  16%, 72% { opacity: 1; transform: scale(1); }
  80%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes czDraw {
  0%, 6% { opacity: 1; transform: scaleX(0); }
  18%, 72% { opacity: 1; transform: scaleX(1); }
  80%, 100% { opacity: 0; transform: scaleX(1); }
}
@keyframes czFade {
  0%, 6% { opacity: 0; transform: translateY(6px); }
  14%, 72% { opacity: 1; transform: none; }
  80%, 100% { opacity: 0; transform: none; }
}
@keyframes czSlide {
  0%, 6% { opacity: 0; transform: translateX(-14px); }
  16%, 72% { opacity: 1; transform: none; }
  80%, 100% { opacity: 0; transform: none; }
}
@keyframes czGo {
  0%, 4% { opacity: 0; transform: none; }
  8% { opacity: 1; transform: none; }
  26%, 72% { opacity: 1; transform: translate(var(--dx, 0px), var(--dy, 0px)); }
  80%, 100% { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, 0px)); }
}
@keyframes czFlow {
  0%, 4% { opacity: 0; transform: none; }
  8% { opacity: 1; transform: none; }
  24% { opacity: 1; transform: translate(var(--dx, 0px), var(--dy, 0px)); }
  28%, 100% { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, 0px)); }
}
@keyframes czBar {
  0%, 8% { transform: scaleX(var(--from, 0.2)); }
  30%, 72% { transform: scaleX(var(--to, 1)); }
  86%, 100% { transform: scaleX(var(--from, 0.2)); }
}
@keyframes czGrow {
  0%, 6% { transform: scaleY(0); }
  20%, 72% { transform: scaleY(1); }
  84%, 100% { transform: scaleY(0); }
}
@keyframes czOn {
  0%, 8% { opacity: 0.2; }
  14%, 72% { opacity: 1; }
  80%, 100% { opacity: 0.2; }
}
@keyframes czStamp {
  0%, 6% { opacity: 0; transform: scale(1.8) rotate(-14deg); }
  12% { opacity: 1; transform: scale(0.92) rotate(-14deg); }
  16%, 72% { opacity: 1; transform: scale(1) rotate(-14deg); }
  80%, 100% { opacity: 0; transform: scale(1) rotate(-14deg); }
}
@keyframes czSwing {
  0%, 6% { opacity: 0; transform: rotate(-28deg); }
  14% { opacity: 1; transform: rotate(10deg); }
  20% { transform: rotate(-5deg); }
  26%, 72% { opacity: 1; transform: rotate(0); }
  80%, 100% { opacity: 0; transform: rotate(0); }
}
@keyframes czHue {
  0%, 28% { fill: var(--sc-b); }
  34%, 60% { fill: var(--sc-m); }
  66%, 94% { fill: var(--sc-a); }
  100% { fill: var(--sc-b); }
}
@keyframes czRing {
  0%, 36%, 100% { transform: rotate(0); }
  6% { transform: rotate(16deg); }
  12% { transform: rotate(-13deg); }
  18% { transform: rotate(9deg); }
  24% { transform: rotate(-5deg); }
  30% { transform: rotate(2deg); }
}
@keyframes czScan {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(var(--dy, 28px)); }
}
@keyframes czBlink {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}
@keyframes czWave {
  0% { opacity: 0; transform: translateX(0); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translateX(var(--dx, 34px)); }
}
@keyframes czDash {
  to { stroke-dashoffset: -20; }
}
@keyframes czLid {
  0%, 50%, 100% { transform: none; }
  14% { transform: translateY(-2.6px) rotate(-7deg); }
  26% { transform: translateY(0) rotate(2deg); }
  34% { transform: none; }
}

/* Thẻ không đặt --i thì lấy theo thứ tự trong khung */
.cz-scenes > :nth-child(2) { --i: 1; }
.cz-scenes > :nth-child(3) { --i: 2; }
.cz-scenes > :nth-child(4) { --i: 3; }
.cz-scenes > :nth-child(5) { --i: 4; }
.cz-scenes > :nth-child(6) { --i: 5; }