/* MoTeF — 3 motion graphic giới thiệu tính năng (mục #tinh-nang trên index.html).
   Mỗi thẻ .demo là một cảnh SVG chạy theo bước (data-step do demo.js đặt).
   Phần tử có data-on="1 2" sẽ nhận class .on khi đang ở bước 1 hoặc 2. */

.demos { padding: 88px 0 96px; background: #fff; }
.demos .head { text-align: center; max-width: 720px; margin: 0 auto 44px; }
.demo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }

.demo {
  --c: var(--brand);
  --s: var(--acc-soft);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 20px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: var(--shadow);
}
.demo-top { display: flex; align-items: center; gap: 12px; }
.demo-top .num {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--c);
  color: #fff;
  font-weight: 900;
  font-size: 20px;
}
.demo h3 { font-size: 22px; line-height: 1.2; }

.stage {
  position: relative;
  aspect-ratio: 320 / 380;
  border-radius: 22px;
  overflow: hidden;
  background: var(--s);
}
.stage svg { display: block; width: 100%; height: 100%; }
html:not(.js) .stage, html:not(.js) .steps { display: none; }

/* Thanh bước: bấm để xem lại một bước */
.steps { display: flex; gap: 6px; }
.steps button {
  flex: 1;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: var(--line);
  overflow: hidden;
  cursor: pointer;
  position: relative;
}
.steps button i { position: absolute; inset: 0; background: var(--c); transform: scaleX(0); transform-origin: left; }
.steps button.done i { transform: none; }
.steps button.on i { animation: dm-fill var(--d, 2s) linear forwards; }
.steps button:focus-visible { outline: 3px solid var(--c); outline-offset: 2px; }
@keyframes dm-fill { to { transform: none; } }

.cap { margin: 0; min-height: 3.1em; font-weight: 900; font-size: 18px; line-height: 1.3; color: var(--ink); }
.cap span { display: none; }
.cap span.on { display: block; animation: dm-cap .45s var(--ease); }
@keyframes dm-cap { from { opacity: 0; transform: translateY(6px); } }
.demo-more { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.55; }

/* Nút thuyết minh nằm cạnh thanh bước (demo.js tạo) */
.dm-bar { display: flex; align-items: center; gap: 12px; }
.dm-bar .steps { flex: 1; min-width: 0; }
.dm-snd {
  flex: none;
  padding: 8px 14px;
  border: 2px solid var(--c);
  border-radius: 999px;
  background: #fff;
  color: var(--c);
  font: inherit;
  font-weight: 900;
  font-size: 14.5px;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
}
.dm-snd.on { background: var(--c); color: #fff; }
.dm-snd:focus-visible { outline: 3px solid var(--c); outline-offset: 2px; }
.dm-snd:not(.on) { animation: dm-nudge 2.6s ease-in-out infinite; }
@keyframes dm-nudge { 0%, 80%, 100% { box-shadow: 0 0 0 0 transparent; } 90% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--c) 22%, transparent); } }

/* ---------- Phần tử SVG dùng chung ---------- */
.f { opacity: 0; transition: opacity .45s var(--ease), transform .55s var(--ease); transition-delay: var(--dl, 0s); }
.f.on { opacity: 1; }
.f.up { transform: translateY(14px); }
.f.up.on { transform: none; }
.f.pop { transform: scale(.7); transform-box: fill-box; transform-origin: center; }
.f.pop.on { transform: none; }

.dm-note { font-size: 13px; font-weight: 800; fill: var(--muted); }
.dm-lbl { font-size: 14px; font-weight: 800; fill: var(--ink); }
.dm-chip { font-size: 14.5px; font-weight: 800; }
.dm-hand { font-family: 'Bradley Hand', 'Segoe Print', 'Comic Sans MS', 'Marker Felt', cursive; fill: #2B3A8C; }
.dm-txt { font-size: 13px; font-weight: 800; fill: var(--ink); }
.dm-hint { font-size: 11.5px; font-weight: 800; fill: var(--ink); }
.dm-brand { fill: var(--brand); }

.dash { stroke-dasharray: 7 7; animation: dm-dash 1s linear infinite; }
@keyframes dm-dash { to { stroke-dashoffset: -14; } }

.radar { transform-box: fill-box; transform-origin: center; animation: dm-radar 1.8s ease-out infinite; }
.radar.b { animation-delay: .9s; }
@keyframes dm-radar { from { transform: scale(.4); opacity: .7; } to { transform: scale(1.9); opacity: 0; } }

/* ---------- Cảnh 1: AI trông con học ---------- */
.kid { transform-origin: 130px 250px; transition: transform .7s var(--ease); }
.kid.on { transform: translate(10px, 12px) rotate(11deg); }
.kid-head { transform-origin: 130px 190px; transition: transform .7s var(--ease); }
.kid-head.on { transform: translate(6px, 8px) rotate(8deg); }
.brk { stroke: #12B886; transition: stroke .4s, opacity .45s var(--ease); }
.brk.on { opacity: 1; }
[data-step="2"] .brk { stroke: #FF8A3D; }
.scan { animation: dm-scan 1.3s ease-in-out infinite alternate; }
@keyframes dm-scan { from { transform: translateY(0); } to { transform: translateY(70px); } }
.cone { animation: dm-cone 1.6s ease-in-out infinite alternate; }
@keyframes dm-cone { from { opacity: .35; } to { opacity: 1; } }
.pen { animation: dm-pen .7s ease-in-out infinite alternate; }
@keyframes dm-pen { from { transform: translateX(0); } to { transform: translateX(8px); } }
.write { animation: dm-write 2.4s linear infinite; }
@keyframes dm-write { from { stroke-dashoffset: 70; } to { stroke-dashoffset: 0; } }
.sweat.on { animation: dm-sweat 1.1s ease-in infinite; }
@keyframes dm-sweat { from { transform: translateY(-4px); } to { transform: translateY(10px); } }
.ring-fg { stroke-dashoffset: 213.6; transition: stroke-dashoffset 1.1s var(--ease) .35s; }
.ring-fg.on { stroke-dashoffset: 19.2; }

/* ---------- Cảnh 2: chụp bài, nhận gợi ý ---------- */
.dm-scan2 { animation: dm-scan2 1.2s ease-in-out infinite alternate; }
@keyframes dm-scan2 { from { transform: translateY(0); } to { transform: translateY(104px); } }
.shutter { transform-box: fill-box; transform-origin: center; }
.shutter.on { animation: dm-press .5s ease-out; }
@keyframes dm-press { 40% { transform: scale(.72); } }
.flash { opacity: 0; }
.flash.on { animation: dm-flash .55s ease-out; }
@keyframes dm-flash { 0% { opacity: 0; } 25% { opacity: .95; } 100% { opacity: 0; } }

/* ---------- Cảnh 3: trò chuyện với MoTeF ---------- */
.mascot-art { animation: h-bob 2.4s ease-in-out infinite; }
.m3-eyes { transform-box: fill-box; transform-origin: center; animation: h-blink 4.2s infinite; }
.mouth { transform-box: fill-box; transform-origin: 50% 0; }
.mouth.on { animation: dm-talk .3s ease-in-out infinite alternate; }
@keyframes dm-talk { from { transform: scaleY(.3); } to { transform: scaleY(1); } }
.wave { opacity: 0; }
.wave.on { animation: dm-wave 1s ease-out infinite; }
.wave.b.on { animation-delay: .5s; }
@keyframes dm-wave { from { opacity: 0; } 30% { opacity: .9; } to { opacity: 0; } }
.mic-ring { transform-box: fill-box; transform-origin: center; }
.mic-ring.on { animation: dm-radar 1.2s ease-out infinite; }
.dotty circle { transform-box: fill-box; transform-origin: center; }
.dotty.on circle { animation: dm-dot .9s ease-in-out infinite; }
.dotty.on circle:nth-child(2) { animation-delay: .15s; }
.dotty.on circle:nth-child(3) { animation-delay: .3s; }
@keyframes dm-dot { 40% { transform: translateY(-5px); } }
.star { font-size: 22px; }
.star.on { animation: dm-star 1.6s ease-out infinite; }
.star.b.on { animation-delay: .5s; }
.star.c.on { animation-delay: 1s; }
@keyframes dm-star {
  0% { opacity: 0; transform: translateY(8px) scale(.6); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-26px) scale(1.15); }
}

@media (max-width: 1020px) {
  .demo-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
}
@media (max-width: 520px) {
  .demos { padding: 64px 0; }
  .demo { padding: 16px 16px 20px; border-radius: 24px; }
}