/* ==========================================================================
   Feature demos — pure CSS motion graphics (no video files)
   ========================================================================== */
.fd { --d: 12s; background:#0d1117; border-radius:16px; overflow:hidden; color:#e6edf3; font-family:'Inter',sans-serif; box-shadow:0 0 0 1px rgba(255,255,255,.06); }
.fd-bar { display:flex; align-items:center; gap:8px; padding:10px 14px; background:#161b22; font-size:12px; font-weight:600; color:#9da7b3; }
.fd-bar i { width:9px; height:9px; border-radius:50%; background:#ff5f57; display:inline-block; }
.fd-bar i:nth-child(2){ background:#febc2e; } .fd-bar i:nth-child(3){ background:#28c840; }
.fd-bar span { margin-left:6px; flex:1; }
.fd-bar b { font-size:10px; letter-spacing:.08em; text-transform:uppercase; background:rgba(255,77,139,.18); color:#ff7aa8; padding:3px 9px; border-radius:99px; }
.fd-stage { position:relative; min-height:320px; padding:22px; display:flex; flex-direction:column; justify-content:center; gap:14px; overflow:hidden; }
.fd-stage.center { align-items:center; text-align:center; }
.fd-cap { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; }
.fd * { box-sizing:border-box; }

/* 1 · Offline transcription */
.fd-wave { display:flex; align-items:center; gap:3px; height:64px; }
.fd-wave s { flex:1; background:linear-gradient(#ff4d8b,#b8a4ed); border-radius:3px; min-width:3px; animation:fdwave 1.1s ease-in-out infinite; }
@keyframes fdwave { 0%,100%{ height:14% } 50%{ height:100% } }
.fd-prog { height:6px; border-radius:6px; background:#1f2630; overflow:hidden; }
.fd-prog u { display:block; height:100%; width:0; background:#a4d4c5; animation:fdprog 8s linear infinite; }
@keyframes fdprog { 0%{width:0} 90%,100%{width:100%} }
.fd-line { font-size:14px; font-family:ui-monospace,Menlo,monospace; color:#c9d1d9; white-space:nowrap; overflow:hidden; width:0; border-right:2px solid #ff4d8b; animation:fdtype 8s steps(40,end) infinite; }
.fd-line:nth-of-type(2){ animation-delay:1.6s; } .fd-line:nth-of-type(3){ animation-delay:3.2s; }
@keyframes fdtype { 0%{width:0} 18%,92%{width:100%} 100%{width:0} }
.fd-badges { display:flex; gap:8px; flex-wrap:wrap; }
.fd-badges em { font-style:normal; font-size:11px; font-weight:600; padding:5px 11px; border-radius:99px; background:#1f2630; color:#a4d4c5; }

/* 2 · Smart pacing */
.fd-pills { display:flex; gap:8px; justify-content:center; }
.fd-pills span { font-size:12px; font-weight:600; padding:6px 13px; border-radius:99px; background:#1f2630; color:#9da7b3; animation:fdpill 9s infinite; }
.fd-pills span:nth-child(2){ animation-delay:3s } .fd-pills span:nth-child(3){ animation-delay:6s }
@keyframes fdpill { 0%,30%{ background:#ff4d8b; color:#fff } 33.3%,100%{ background:#1f2630; color:#9da7b3 } }
.fd-split { position:relative; height:150px; width:100%; }
.fd-split > div { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; opacity:0; animation:fdshow 9s infinite; }
.fd-split > div:nth-child(2){ animation-delay:3s } .fd-split > div:nth-child(3){ animation-delay:6s }
@keyframes fdshow { 0%{opacity:0; transform:translateY(8px)} 4%,30%{opacity:1; transform:none} 34%,100%{opacity:0} }
.fd-chip { background:#fff; color:#0a0a0a; font-weight:800; padding:6px 14px; border-radius:8px; font-size:20px; }
.fd-chip.y { background:#ffdc2e; } .fd-chip.k { background:#ff4d8b; color:#fff; }
.fd-note { font-size:12px; color:#9da7b3; }

/* 3 · Multilingual */
.fd-lang { position:relative; width:100%; height:110px; }
.fd-lang > div { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; opacity:0; animation:fdshow5 15s infinite; }
.fd-lang > div b { font-size:30px; font-weight:800; color:#fff; }
.fd-lang > div small { font-size:12px; color:#a4d4c5; letter-spacing:.1em; text-transform:uppercase; margin-top:6px; }
.fd-lang > div:nth-child(2){animation-delay:3s} .fd-lang > div:nth-child(3){animation-delay:6s} .fd-lang > div:nth-child(4){animation-delay:9s} .fd-lang > div:nth-child(5){animation-delay:12s}
@keyframes fdshow5 { 0%{opacity:0; transform:scale(.94)} 3%,18%{opacity:1; transform:none} 21%,100%{opacity:0} }
.fd-tags { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.fd-tags span { font-size:11px; padding:4px 10px; border-radius:99px; background:#1f2630; color:#c9d1d9; }

/* 4 · Animated styles */
.fd-phone { position:relative; width:190px; height:300px; margin:0 auto; border-radius:26px; background:linear-gradient(160deg,#2b3340,#11151b); box-shadow:0 0 0 5px #222a35; overflow:hidden; }
.fd-style { position:absolute; left:0; right:0; bottom:58px; text-align:center; padding:0 10px; opacity:0; animation:fdshow6 18s infinite; font-weight:900; font-size:25px; line-height:1.1; text-transform:uppercase; }
.fd-style:nth-child(2){animation-delay:3s} .fd-style:nth-child(3){animation-delay:6s} .fd-style:nth-child(4){animation-delay:9s} .fd-style:nth-child(5){animation-delay:12s} .fd-style:nth-child(6){animation-delay:15s}
@keyframes fdshow6 { 0%{opacity:0; transform:translateY(18px) scale(.9)} 2%,15%{opacity:1; transform:none} 17%,100%{opacity:0} }
.fd-style em { font-style:normal; display:inline-block; }
.s-yellow { color:#fff; font-family:Anton,Impact,sans-serif; letter-spacing:.02em; } .s-yellow em { background:#ffdc2e; color:#111; padding:0 6px; transform:skewX(-8deg); }
.s-lava { color:#ffb347; text-shadow:0 0 12px #ff3d00,0 2px 0 #b71c00; }
.s-ice { color:#d8f3ff; text-shadow:0 0 14px #5ac8ff; letter-spacing:.04em; }
.s-beast { color:#fff; -webkit-text-stroke:2px #000; text-shadow:0 4px 0 #ff4d8b; font-size:28px; }
.s-horror { color:#ff2d2d; animation-name:fdshow6, fdshake; animation-duration:18s, .12s; animation-iteration-count:infinite, infinite; text-shadow:0 0 10px #600; }
.s-horror:nth-child(5){ animation-delay:12s, 0s }
@keyframes fdshake { 0%,100%{ translate:0 0 } 25%{ translate:-2px 1px } 50%{ translate:2px -1px } 75%{ translate:-1px -2px } }
.s-emoji { color:#fff; text-shadow:0 3px 0 #7b5cff; }
.fd-stylename { position:absolute; top:12px; left:0; right:0; text-align:center; font-size:10px; letter-spacing:.14em; color:#9da7b3; text-transform:uppercase; }

/* 5 · Dictionary */
.fd-dict { display:grid; gap:10px; }
.fd-row { display:flex; align-items:center; gap:10px; background:#161b22; padding:10px 14px; border-radius:12px; font-size:14px; opacity:0; transform:translateX(-12px); animation:fdrow 9s infinite; }
.fd-row:nth-child(2){animation-delay:1.2s} .fd-row:nth-child(3){animation-delay:2.4s}
@keyframes fdrow { 0%{opacity:0; transform:translateX(-12px)} 8%,85%{opacity:1; transform:none} 95%,100%{opacity:0} }
.fd-row s { color:#ff7a7a; } .fd-row b { color:#a4d4c5; margin-left:auto; } .fd-row span { color:#6b7684; }
.fd-fix { background:#161b22; border-radius:12px; padding:14px; font-size:15px; }
.fd-fix .bad, .fd-fix .good { display:inline-block; }
.fd-fix .bad { color:#ff7a7a; text-decoration:line-through; animation:fdbad 9s infinite; }
.fd-fix .good { color:#a4d4c5; font-weight:700; animation:fdgood 9s infinite; opacity:0; }
@keyframes fdbad { 0%,45%{opacity:1} 50%,95%{opacity:.25} 100%{opacity:1} }
@keyframes fdgood { 0%,45%{opacity:0; transform:translateY(6px)} 52%,92%{opacity:1; transform:none} 100%{opacity:0} }

/* 6 · Copy / paste style */
.fd-clips { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; }
.fd-clip { background:#161b22; border-radius:14px; padding:16px 10px; text-align:center; font-weight:900; font-size:20px; min-height:84px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; }
.fd-clip small { font-size:10px; letter-spacing:.1em; color:#9da7b3; font-weight:600; }
.fd-clip.src { color:#ffdc2e; text-shadow:0 3px 0 #b8860b; font-family:Anton,Impact,sans-serif; }
.fd-clip.dst { animation:fdpaste 6s infinite; }
@keyframes fdpaste { 0%,55%{ color:#fff; text-shadow:none; font-family:inherit; transform:none } 62%{ transform:scale(1.08) } 68%,92%{ color:#ffdc2e; text-shadow:0 3px 0 #b8860b; font-family:Anton,Impact,sans-serif; transform:none } 100%{ color:#fff; text-shadow:none } }
.fd-arrow { font-size:22px; color:#ff4d8b; animation:fdfly 6s infinite; }
@keyframes fdfly { 0%,20%{ opacity:.2; transform:translateX(-6px) } 35%,55%{ opacity:1; transform:translateX(6px) } 70%,100%{ opacity:.2 } }
.fd-btns { display:flex; gap:10px; justify-content:center; }
.fd-btns span { font-size:12px; font-weight:700; padding:8px 16px; border-radius:10px; background:#1f2630; color:#c9d1d9; }
.fd-btns span:first-child { animation:fdclick 6s infinite; } .fd-btns span:last-child { animation:fdclick 6s 3.2s infinite; }
@keyframes fdclick { 0%,10%{ background:#1f2630 } 14%,22%{ background:#ff4d8b; color:#fff; transform:scale(.96) } 28%,100%{ background:#1f2630; color:#c9d1d9; transform:none } }

/* 7 · Swap MOGRTs */
.fd-timeline { display:grid; gap:8px; }
.fd-track { display:flex; gap:8px; }
.fd-mog { flex:1; border-radius:10px; padding:14px 6px; text-align:center; font-weight:800; font-size:13px; text-transform:uppercase; animation:fdswap 8s infinite; }
.fd-mog:nth-child(2){ animation-delay:.15s } .fd-mog:nth-child(3){ animation-delay:.3s } .fd-mog:nth-child(4){ animation-delay:.45s }
@keyframes fdswap {
  0%,40%{ background:#ffdc2e; color:#111; font-family:Anton,Impact,sans-serif }
  45%{ transform:scale(.9); opacity:.4 }
  50%,90%{ background:#1a3a3a; color:#a4d4c5; font-family:inherit; text-shadow:0 0 10px #5ac8ff; transform:none; opacity:1; letter-spacing:.06em }
  95%{ transform:scale(.9); opacity:.4 }
  100%{ background:#ffdc2e; color:#111; opacity:1 }
}
.fd-swapbtn { margin:0 auto; font-size:12px; font-weight:700; padding:9px 18px; border-radius:10px; background:#ff4d8b; color:#fff; animation:fdpulse 8s infinite; }
@keyframes fdpulse { 0%,38%{ transform:none } 42%{ transform:scale(.93) } 46%,100%{ transform:none } }
.fd-keep { font-size:12px; color:#9da7b3; text-align:center; }

/* 8 · Save preset */
.fd-ctrl { display:grid; gap:10px; }
.fd-slider { display:flex; align-items:center; gap:10px; font-size:12px; color:#9da7b3; }
.fd-slider span { width:56px; }
.fd-slider div { flex:1; height:6px; background:#1f2630; border-radius:6px; position:relative; }
.fd-slider div::after { content:""; position:absolute; left:0; top:0; bottom:0; border-radius:6px; background:#b8a4ed; width:30%; animation:fdgrow 8s infinite; }
.fd-slider:nth-child(2) div::after { background:#ffb084; animation-delay:.4s; }
@keyframes fdgrow { 0%{width:20%} 30%,100%{width:75%} }
.fd-save { margin-left:auto; font-size:12px; font-weight:700; padding:8px 16px; border-radius:10px; background:#1f2630; color:#fff; animation:fdsave 8s infinite; }
@keyframes fdsave { 0%,36%{ background:#1f2630 } 40%,48%{ background:#ff4d8b; transform:scale(.95) } 52%,100%{ background:#1f2630; transform:none } }
.fd-presets { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.fd-preset { background:#161b22; border-radius:10px; padding:12px 6px; text-align:center; font-size:11px; color:#c9d1d9; }
.fd-preset b { display:block; font-size:16px; margin-bottom:3px; }
.fd-preset.new { animation:fdnew 8s infinite; opacity:0; border:1px solid #ff4d8b; }
@keyframes fdnew { 0%,50%{ opacity:0; transform:scale(.7) } 58%,92%{ opacity:1; transform:none } 100%{ opacity:0 } }

@media (prefers-reduced-motion: reduce) { .fd *, .fd *::before, .fd *::after { animation-duration:0.01s !important; animation-iteration-count:1 !important; } .fd-line{width:100%} .fd-row,.fd-style:first-of-type,.fd-split>div:first-child,.fd-lang>div:first-child{opacity:1;transform:none} }
@media (max-width:640px) { .fd-stage{ min-height:280px; padding:16px } .fd-clips{ grid-template-columns:1fr } .fd-arrow{ transform:rotate(90deg); text-align:center } }

/* Live Premiere demos (iframes of the real UI replica) */
.fd-live { position: relative; aspect-ratio: 16 / 9; width: 100%; border-radius: 14px; overflow: hidden; background: #0c0c0c; box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.fd-live iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #0c0c0c; }