/* Animated "demo loop" covers for the Interactive Web Apps section.
   Replaces the static app_*.png screenshots with short looping CSS/SVG
   mockups of each app's actual interaction, in the same dark mock-UI style. */

/* ---------- two independent, independently-clickable boxes per project ---------- */
.projects-list { display: flex; flex-direction: column; gap: 1.9rem; }

.project-row { display: flex; gap: 0; align-items: stretch; }

/* small fine black X centered in the gap — sized so it doesn't touch either box.
   All Xs share one unstaggered animation so they pulse together, slowly. */
.proj-beam { flex: 0 0 2.4rem; width: 2.4rem; display: flex; align-items: center; justify-content: center; }
.beam-x { width: 1.6rem; aspect-ratio: 1 / 1; display: block; overflow: visible; }
.beam-x line {
  stroke: #ffffff;
  stroke-width: 3.2;
  stroke-linecap: round;
  animation: xGlowPulse 5s ease-in-out infinite;
}
@keyframes xGlowPulse {
  0%, 100% { opacity: 0.88; filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.7)); }
  50% { opacity: 1; filter: drop-shadow(0 0 19px rgba(255, 255, 255, 1)) drop-shadow(0 0 30px rgba(255, 255, 255, 0.85)); }
}

@media (prefers-reduced-motion: reduce) {
  .beam-x line { animation: none; opacity: 0.85; }
}

@media (max-width: 820px) {
  .project-row { flex-direction: column; gap: 0; }
  .proj-beam { flex: 0 0 1.6rem; width: 100%; height: 1.6rem; }
}

/* an extremely subtle, fine hairline frame at rest — a shiny purple/bronze ring on hover */
.proj-box {
  position: relative;
  background: var(--card-bg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 1.7rem 1.9rem;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
  min-width: 0;
}
a.proj-box { cursor: pointer; }

.proj-box::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 13px;
  padding: 1px;
  background: linear-gradient(120deg, #C9A9F2 0%, #D8D8E2 25%, #3D3160 50%, #FFFBEF 75%, #6B5A99 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.proj-box:hover {
  border-color: transparent;
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 22px rgba(255, 255, 255, 0.3), 0 0 18px rgba(144, 137, 184, 0.25);
}

.proj-box:hover::after {
  opacity: 1;
}

.box-kicker {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #9a9aa2;
  margin-bottom: 1.1rem;
}
.box-kicker svg {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  stroke: url(#palantir-svg);
  stroke-width: 2.3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: all 0.3s ease;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}
.proj-box:hover .box-kicker svg { stroke: url(#bronze-svg); }
.box-kicker.muted { color: #9a9a9e; }

.proj-github-box { flex: 1 1 52%; }
.proj-github-box h3 { font-size: 1.25rem; margin-bottom: 0.5rem; color: var(--text-primary); }
.proj-github-box p { color: var(--text-secondary); font-size: 0.93rem; margin-bottom: 1rem; line-height: 1.6; flex: 1; }
.proj-meta { margin-top: auto; }

.proj-demo-box { flex: 0 0 42%; max-width: 42%; padding: 1.2rem 1.2rem 1.4rem; }
.proj-demo-box .box-kicker { margin-bottom: 0.9rem; }
.proj-demo-box .demo-cover { flex: 1; min-height: 170px; border-radius: 8px; }
.proj-demo-box .proj-video-wrap { position: relative; flex: 1; min-height: 170px; display: flex; }
.proj-demo-box .proj-video { position: absolute; inset: 0; border-radius: 8px; width: 100%; height: 100%; object-fit: cover; display: block; }
.proj-demo-box .proj-video-flash {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  z-index: 2;
}
.proj-demo-box .proj-video-flash.is-active {
  opacity: 0.92;
  transition: opacity 0.15s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .proj-demo-box .proj-video-flash { display: none; }
}

@media (max-width: 820px) {
  .project-row { flex-direction: column; }
  .proj-demo-box { max-width: 100%; flex: none; width: 100%; }
}

.demo-cover {
  --screen-panel: #0b0b0d;
  --screen-line: #232329;
  --screen-text: #d8d8dc;
  --screen-dim: #7a7a82;
  position: relative;
  overflow: hidden;
  background: #050505;
  container-type: inline-size;
}

/* ---------- shared fake-screen chrome ---------- */
.demo-cover .screen{position:absolute;inset:0;display:flex;flex-direction:column;color:var(--screen-text);font-family:'SF Mono',ui-monospace,Menlo,monospace;}
.demo-cover .topbar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:2.4cqw 4cqw;border-bottom:1px solid var(--screen-line);}
.demo-cover .topbar .title{font-size:clamp(7px,2.1cqw,12px);color:#9a9aa2;letter-spacing:0.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.demo-cover .dots{display:flex;gap:0.8cqw;flex:0 0 auto;margin-left:1cqw;}
.demo-cover .dots span{width:1.3cqw;height:1.3cqw;min-width:5px;min-height:5px;max-width:7px;max-height:7px;border-radius:50%;border:1px solid #4a4a52;display:block;}
.demo-cover .body{flex:1 1 auto;min-height:0;display:flex;gap:2.4cqw;padding:3cqw 4cqw;overflow:hidden;}
.demo-cover .body.stack{flex-direction:column;}
.demo-cover .col{display:flex;flex-direction:column;gap:2.4cqw;min-width:0;min-height:0;}
.demo-cover .panel{background:var(--screen-panel);border:1px solid var(--screen-line);border-radius:5px;padding:2.6cqw 3.2cqw;position:relative;overflow:hidden;min-width:0;min-height:0;}
.demo-cover .panel.grow{flex:1 1 auto;}
.demo-cover .panel.auto{flex:0 0 auto;}
.demo-cover .panel-title{font-size:clamp(6px,1.6cqw,9px);letter-spacing:0.08em;text-transform:uppercase;color:#77777f;margin-bottom:2.2cqw;white-space:nowrap;}
.demo-cover .row{font-size:clamp(7px,1.9cqw,11px);color:var(--screen-text);display:flex;justify-content:space-between;gap:1cqw;margin-bottom:1.6cqw;}
.demo-cover .dim{color:var(--screen-dim);}
.demo-cover .bar{height:2.6cqw;max-height:5px;min-height:2px;background:#26262c;border-radius:2px;overflow:hidden;margin-top:1.4cqw;margin-bottom:1.8cqw;}
.demo-cover .bar i{display:block;height:100%;background:#e2e2e6;width:0%;}
.demo-cover .big{font-size:clamp(13px,4.6cqw,20px);color:#f2f2f5;font-weight:600;line-height:1;}
.demo-cover .typewrap{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;width:0;}

/* ============ FOSTER MBA ============ */
.demo-cover.foster .prof-line{animation:fcaret 5s steps(20,end) infinite;}
@keyframes fcaret{0%{width:0;}14%{width:12ch;}70%{width:12ch;}82%{width:0;}100%{width:0;}}
.demo-cover.foster .fbar i{animation:fbarfill 5s ease-in-out infinite;}
@keyframes fbarfill{0%,16%{width:0%;}45%,100%{width:80%;}}
.demo-cover.foster svg{width:100%;height:100%;overflow:visible;display:block;}
.demo-cover.foster .edge{stroke:#33333a;stroke-width:1.4;fill:none;}
.demo-cover.foster .node{fill:#0b0b0d;stroke:#55555e;stroke-width:1.6;}
.demo-cover.foster .node.root{fill:#f2f2f5;}
.demo-cover.foster .n1{animation:fnode 5s ease-in-out infinite;}
.demo-cover.foster .n2{animation:fnode 5s ease-in-out infinite;animation-delay:.15s;}
.demo-cover.foster .n3{animation:fnode 5s ease-in-out infinite;animation-delay:.3s;}
.demo-cover.foster .n4{animation:fnode 5s ease-in-out infinite;animation-delay:.45s;}
.demo-cover.foster .e1{animation:fedge 5s ease-in-out infinite;}
.demo-cover.foster .e2{animation:fedge 5s ease-in-out infinite;animation-delay:.15s;}
.demo-cover.foster .e3{animation:fedge 5s ease-in-out infinite;animation-delay:.3s;}
.demo-cover.foster .e4{animation:fedge 5s ease-in-out infinite;animation-delay:.45s;}
@keyframes fnode{0%,18%{stroke:#55555e;}30%,100%{stroke:#f2f2f5;}}
@keyframes fedge{0%,18%{stroke:#33333a;}30%,100%{stroke:#c9c9d1;}}
.demo-cover.foster .reco-item b{display:block;font-size:clamp(7px,2cqw,11px);color:#f2f2f5;}
.demo-cover.foster .reco-item span{font-size:clamp(6px,1.6cqw,9px);color:#77777f;}
.demo-cover.foster .r1{animation:reco 5s ease-in-out infinite;animation-delay:1.9s;}
.demo-cover.foster .r2{animation:reco 5s ease-in-out infinite;animation-delay:2.25s;}
.demo-cover.foster .r3{animation:reco 5s ease-in-out infinite;animation-delay:2.6s;}
@keyframes reco{0%,38%{opacity:0;transform:translateX(1.6cqw);}50%,90%{opacity:1;transform:translateX(0);}100%{opacity:0;}}

/* ============ STOCK AGENT — forecast x sentiment merge ============ */
.demo-cover.stock{--dur:7s;}
.demo-cover.stock svg{width:100%;height:100%;display:block;}
.demo-cover.stock .fc-hist{stroke:#8a8a92;stroke-width:1.5;fill:none;stroke-dasharray:130;stroke-dashoffset:130;animation:fcHist var(--dur) ease-in-out infinite;}
.demo-cover.stock .fc-pred{stroke:#f2f2f5;stroke-width:1.5;stroke-dasharray:4 3;fill:none;stroke-dashoffset:60;animation:fcPred var(--dur) ease-in-out infinite;}
.demo-cover.stock .fc-dot{fill:#f2f2f5;opacity:0;animation:fcDot var(--dur) ease-in-out infinite;}
@keyframes fcHist{0%,4%{stroke-dashoffset:130;}30%,100%{stroke-dashoffset:0;}}
@keyframes fcPred{0%,30%{stroke-dashoffset:60;}52%,100%{stroke-dashoffset:0;}}
@keyframes fcDot{0%,48%{opacity:0;}54%,100%{opacity:1;}}
.demo-cover.stock .fc-now{font-size:clamp(10px,3cqw,15px);color:#e6e6ea;font-weight:600;}
.demo-cover.stock .fc-pred-label{font-size:clamp(6.5px,1.7cqw,9.5px);color:#6f6f77;opacity:0;animation:fcLabel var(--dur) ease-in-out infinite;}
.demo-cover.stock .fc-pred-label b{color:#e6e6ea;font-weight:600;}
@keyframes fcLabel{0%,50%{opacity:0;transform:translateY(0.5cqw);}58%,100%{opacity:1;transform:translateY(0);}}
.demo-cover.stock .sent-head{font-size:clamp(6.5px,1.7cqw,9.5px);color:#c7c7cd;min-height:2.6em;line-height:1.5;}
.demo-cover.stock .sent-tw{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;width:0;animation:sentType var(--dur) steps(38,end) infinite;}
@keyframes sentType{0%,6%{width:0;}42%,100%{width:34ch;}}
.demo-cover.stock .sent-meter{height:3px;background:#26262c;border-radius:2px;overflow:hidden;margin-top:1.8cqw;}
.demo-cover.stock .sent-meter i{display:block;height:100%;background:#e2e2e6;width:0%;animation:sentFill var(--dur) ease-in-out infinite;}
@keyframes sentFill{0%,44%{width:0%;}64%,100%{width:74%;}}
.demo-cover.stock .sent-score{font-size:clamp(6px,1.6cqw,8.5px);color:#77777f;margin-top:1cqw;opacity:0;animation:fcLabel var(--dur) ease-in-out infinite;animation-delay:0.1s;}
.demo-cover.stock .sent-score b{color:#e6e6ea;}
.demo-cover.stock .merge-row{display:flex;align-items:center;gap:1.6cqw;height:100%;}
.demo-cover.stock .beam{flex:1;height:1px;background:#2c2c32;position:relative;overflow:hidden;}
.demo-cover.stock .beam i{position:absolute;top:0;bottom:0;width:0%;background:#c9c9d1;}
.demo-cover.stock .beam.l i{left:0;animation:beamL var(--dur) ease-in-out infinite;}
.demo-cover.stock .beam.r i{right:0;animation:beamR var(--dur) ease-in-out infinite;}
@keyframes beamL{0%,66%{width:0%;}82%,100%{width:100%;}}
@keyframes beamR{0%,68%{width:0%;}84%,100%{width:100%;}}
.demo-cover.stock .call{flex:0 0 auto;text-align:center;padding:0 1.4cqw;}
.demo-cover.stock .call .badge{display:inline-block;font-size:clamp(7px,1.9cqw,11px);letter-spacing:0.06em;padding:1cqw 2.2cqw;border:1px solid #4a4a52;border-radius:3px;color:#77777f;font-weight:600;}
.demo-cover.stock .call .badge.hit{animation:badgehit var(--dur) ease-in-out infinite;}
@keyframes badgehit{0%,86%{color:#77777f;border-color:#4a4a52;background:transparent;}92%,100%{color:#0a0a0a;background:#f2f2f5;border-color:#f2f2f5;}}
.demo-cover.stock .call .sub{display:block;margin-top:0.9cqw;font-size:clamp(5.5px,1.4cqw,8px);color:#5c5c63;white-space:nowrap;}

/* ============ FORECASTING (contractor parts) ============ */
/* Same grid-readout texture as the deployed app, kept black/white/gray like the rest of the site. */
.demo-cover.forecast{
  --dur:7s;
  background:#050505;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size:12px 12px;
}
.demo-cover.forecast .screen{font-family:'Courier New',monospace;}
.demo-cover.forecast .topbar{border-bottom-color:var(--screen-line);}
.demo-cover.forecast .topbar .title{color:#d8d8dc;text-transform:uppercase;letter-spacing:0.06em;}
.demo-cover.forecast .panel{background:rgba(20,20,22,0.75);border-color:var(--screen-line);}
.demo-cover.forecast .panel-title{color:#9a9aa2;text-transform:uppercase;}
.demo-cover.forecast svg{width:100%;height:100%;display:block;}
.demo-cover.forecast .fc-hist{stroke:#8a8a92;stroke-width:1.5;fill:none;stroke-dasharray:130;stroke-dashoffset:130;animation:fcHist var(--dur) ease-in-out infinite;}
.demo-cover.forecast .fc-pred{stroke:#f2f2f5;stroke-width:1.5;stroke-dasharray:4 3;fill:none;stroke-dashoffset:60;animation:fcPred var(--dur) ease-in-out infinite;}
.demo-cover.forecast .fc-dot{fill:#f2f2f5;opacity:0;animation:fcDot var(--dur) ease-in-out infinite;}
.demo-cover.forecast .fc-now{font-size:clamp(10px,3cqw,15px);color:#e6e6ea;font-weight:600;}
.demo-cover.forecast .fc-pred-label{font-size:clamp(6.5px,1.7cqw,9.5px);color:#6f6f77;opacity:0;animation:fcLabel var(--dur) ease-in-out infinite;}
.demo-cover.forecast .fc-pred-label b{color:#e6e6ea;font-weight:600;}

/* Picture-in-picture: whole box opens the live app, the small corner badge opens the notebook. */
.proj-demo-box{position:relative;}
.proj-demo-main{display:flex;flex-direction:column;flex:1;min-width:0;min-height:0;text-decoration:none;color:inherit;}
.proj-pip-badge{
  position:absolute;
  right:1rem;
  bottom:1rem;
  z-index:5;
  display:flex;
  align-items:center;
  gap:0.75rem;
  padding:1.1rem 1.7rem;
  background:rgba(10,10,10,0.85);
  border:1px solid rgba(255,255,255,0.55);
  border-radius:9px;
  font-family:monospace;
  font-size:1.35rem;
  font-weight:700;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:#9a9aa2;
  text-decoration:none;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  box-shadow:0 0 10px rgba(255,255,255,0.35), 0 0 2px rgba(255,255,255,0.6);
  transition:all 0.25s ease;
}
.proj-pip-badge svg{width:1.9rem;height:1.9rem;flex:0 0 auto;stroke:url(#palantir-svg);stroke-width:2.3;transition:all 0.3s ease;}
.proj-pip-badge:hover{color:#fff;border-color:rgba(255,255,255,0.45);background:rgba(20,20,20,0.95);transform:translateY(-1px);}
.proj-pip-badge:hover svg{stroke:url(#bronze-svg);}

/* ============ FINANCE ============ */
.demo-cover.finance .ent b{display:block;font-size:clamp(7px,1.9cqw,11px);color:#f2f2f5;}
.demo-cover.finance .ent .k{font-size:clamp(6px,1.6cqw,9px);color:#77777f;}
.demo-cover.finance .ent{opacity:0;transform:translateX(1.6cqw);margin-bottom:2cqw;}
.demo-cover.finance .e1{animation:reco2 5s ease-in-out infinite;animation-delay:.1s;}
.demo-cover.finance .e2{animation:reco2 5s ease-in-out infinite;animation-delay:.4s;}
.demo-cover.finance .e3{animation:reco2 5s ease-in-out infinite;animation-delay:.7s;}
.demo-cover.finance .e4{animation:reco2 5s ease-in-out infinite;animation-delay:1.0s;}
@keyframes reco2{0%,6%{opacity:0;transform:translateX(1.6cqw);}16%,92%{opacity:1;transform:translateX(0);}100%{opacity:0;}}
.demo-cover.finance table{width:100%;border-collapse:collapse;font-size:clamp(6.5px,1.7cqw,10px);}
.demo-cover.finance th{text-align:left;color:#77777f;font-weight:500;padding-bottom:1.6cqw;font-size:clamp(6px,1.5cqw,8.5px);}
.demo-cover.finance td{padding:1cqw 0;color:#ccc;border-top:1px solid var(--screen-line);}
.demo-cover.finance td.pos{color:#77777f;}
.demo-cover.finance tr.hit td.pos{animation:posglow 5s ease-in-out infinite;}
.demo-cover.finance tr.r1.hit td.pos{animation-delay:2s;}
.demo-cover.finance tr.r3.hit td.pos{animation-delay:2.9s;}
@keyframes posglow{0%,100%{color:#77777f;}5%,15%{color:#fff;text-shadow:0 0 6px rgba(255,255,255,.6);}}
.demo-cover.finance .sbar i{animation:sbarfill 5s ease-in-out infinite;}
.demo-cover.finance .sbar.neg i{background:#666;}
.demo-cover.finance .sp i{animation-delay:3.6s;}
@keyframes sbarfill{0%,72%{width:0%;}90%,100%{width:68%;}}
.demo-cover.finance .sn i{animation-delay:3.8s;animation-name:sbarfill2;}
@keyframes sbarfill2{0%,74%{width:0%;}92%,100%{width:30%;}}

/* ============ CHATBOT WORKFLOW ============ */
.demo-cover.chatbot .agent-row{opacity:0.4;transition:opacity .3s;}
.demo-cover.chatbot .agent-row .name{font-size:clamp(7px,1.9cqw,10.5px);color:#ccc;}
.demo-cover.chatbot .agent-row .state{font-size:clamp(6px,1.5cqw,8.5px);color:#555;}
.demo-cover.chatbot .a1{animation:agentActive 5s ease-in-out infinite;}
.demo-cover.chatbot .a2{animation:agentActive 5s ease-in-out infinite;animation-delay:1.7s;}
@keyframes agentActive{0%,20%{opacity:0.4;}30%,60%{opacity:1;}70%,100%{opacity:0.4;}}
.demo-cover.chatbot .wf-node{border:1px solid #444;border-radius:4px;padding:1.6cqw 2cqw;font-size:clamp(6.5px,1.7cqw,10px);color:#999;text-align:center;}
.demo-cover.chatbot .wf-node.on{animation:nodeOn 5s ease-in-out infinite;}
.demo-cover.chatbot .wf-node.n2{animation:nodeOn 5s ease-in-out infinite;animation-delay:1.7s;}
@keyframes nodeOn{0%,20%{border-color:#444;color:#999;}30%,60%{border-color:#f2f2f5;color:#f2f2f5;}70%,100%{border-color:#444;color:#999;}}
.demo-cover.chatbot .wf-edge{width:2px;flex:0 0 auto;height:2cqw;background:#333;margin:0 auto;}
.demo-cover.chatbot .wf-edge.on{animation:edgeOn 5s ease-in-out infinite;animation-delay:1.5s;}
@keyframes edgeOn{0%,32%{background:#333;}42%,100%{background:#ccc;}}
.demo-cover.chatbot .log-line{font-size:clamp(6px,1.6cqw,9px);color:#ccc;opacity:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:1.4cqw;}
.demo-cover.chatbot .l1{animation:logIn 5s ease-in-out infinite;animation-delay:.1s;}
.demo-cover.chatbot .l2{animation:logIn 5s ease-in-out infinite;animation-delay:.6s;}
.demo-cover.chatbot .l3{animation:logIn 5s ease-in-out infinite;animation-delay:1.6s;}
.demo-cover.chatbot .l4{animation:logIn 5s ease-in-out infinite;animation-delay:2.3s;}
.demo-cover.chatbot .l5{animation:logIn 5s ease-in-out infinite;animation-delay:3.1s;}
@keyframes logIn{0%,4%{opacity:0;}10%,92%{opacity:1;}100%{opacity:0;}}

/* ============ EMBEDDING ============ */
.demo-cover.embedding .chk{font-size:clamp(6.5px,1.8cqw,10px);color:#666;margin-bottom:2cqw;}
.demo-cover.embedding .chk .box{display:inline-block;width:1.6em;text-align:center;}
.demo-cover.embedding .c1{animation:tickOn 5s ease-in-out infinite;animation-delay:.2s;}
.demo-cover.embedding .c2{animation:tickOn 5s ease-in-out infinite;animation-delay:1.0s;}
@keyframes tickOn{0%,10%{color:#666;}20%,100%{color:#eee;}}
.demo-cover.embedding .bars{display:flex;align-items:flex-end;gap:2.4cqw;height:100%;padding-top:2cqw;}
.demo-cover.embedding .grp{display:flex;flex-direction:column;align-items:center;gap:1cqw;flex:1;height:100%;}
.demo-cover.embedding .cols{display:flex;gap:0.8cqw;align-items:flex-end;flex:1;width:100%;}
.demo-cover.embedding .cols i{display:block;width:45%;background:#666;border-radius:1px 1px 0 0;height:0%;}
.demo-cover.embedding .cols i:first-child{background:#ccc;}
.demo-cover.embedding .grp span{font-size:clamp(5.5px,1.4cqw,8px);color:#77777f;}
.demo-cover.embedding .g1 .cols i:nth-child(1){animation:barh1 5s ease-in-out infinite;}
.demo-cover.embedding .g1 .cols i:nth-child(2){animation:barh1b 5s ease-in-out infinite;}
.demo-cover.embedding .g2 .cols i:nth-child(1){animation:barh2 5s ease-in-out infinite;}
.demo-cover.embedding .g2 .cols i:nth-child(2){animation:barh2b 5s ease-in-out infinite;}
.demo-cover.embedding .g3 .cols i:nth-child(1){animation:barh3 5s ease-in-out infinite;}
.demo-cover.embedding .g3 .cols i:nth-child(2){animation:barh3b 5s ease-in-out infinite;}
.demo-cover.embedding .g3.hit .cols i{animation-name:barh3hit,barh3bhit;}
@keyframes barh1{0%,30%{height:0%;}55%,100%{height:55%;}}
@keyframes barh1b{0%,30%{height:0%;}55%,100%{height:45%;}}
@keyframes barh2{0%,35%{height:0%;}60%,100%{height:64%;}}
@keyframes barh2b{0%,35%{height:0%;}60%,100%{height:68%;}}
@keyframes barh3hit{0%,40%{height:0%;background:#666;}65%,100%{height:80%;background:#fff;}}
@keyframes barh3bhit{0%,40%{height:0%;background:#666;}65%,100%{height:88%;background:#fff;}}
.demo-cover.embedding .latsvg{width:100%;height:100%;display:block;}
.demo-cover.embedding .l1{stroke:#eee;stroke-width:1.4;fill:none;stroke-dasharray:200;stroke-dashoffset:200;animation:ldraw 5s ease-in-out infinite;animation-delay:.3s;}
.demo-cover.embedding .l2{stroke:#666;stroke-width:1.4;fill:none;stroke-dasharray:200;stroke-dashoffset:200;animation:ldraw 5s ease-in-out infinite;animation-delay:.5s;}
@keyframes ldraw{0%,15%{stroke-dashoffset:200;}70%,100%{stroke-dashoffset:0;}}

/* ============ ML CHATBOT ============ */
.demo-cover.ml .bubble{border-radius:5px;padding:2cqw 2.6cqw;font-size:clamp(6.5px,1.7cqw,10px);line-height:1.5;margin-bottom:2cqw;max-width:82%;}
.demo-cover.ml .user{background:#222228;color:#eee;align-self:flex-end;opacity:0;animation:mlUser 5s ease-in-out infinite;}
@keyframes mlUser{0%,4%{opacity:0;transform:translateY(0.6cqw);}14%,100%{opacity:1;transform:translateY(0);}}
.demo-cover.ml .ai{background:#141417;border:1px solid #2a2a30;color:#ccc;opacity:0;animation:mlAi 5s ease-in-out infinite;animation-delay:.9s;}
@keyframes mlAi{0%,18%{opacity:0;transform:translateY(0.6cqw);}30%,100%{opacity:1;transform:translateY(0);}}
.demo-cover.ml .code{font-size:clamp(5.5px,1.4cqw,8px);color:#8a8a92;background:#050505;border:1px solid #222;border-radius:4px;padding:1.6cqw;margin-top:1.4cqw;overflow:hidden;white-space:nowrap;width:0;animation:mlCode 5s steps(40,end) infinite;animation-delay:1.7s;}
@keyframes mlCode{0%,34%{width:0;}70%,100%{width:34ch;}}
.demo-cover.ml .slider-row{margin-bottom:2.4cqw;}
.demo-cover.ml .slider-row .row{margin-bottom:1cqw;}
.demo-cover.ml .track{height:2px;background:#3a3a40;border-radius:2px;position:relative;}
.demo-cover.ml .knob{position:absolute;top:50%;width:1.8cqw;height:1.8cqw;min-width:6px;min-height:6px;max-width:9px;max-height:9px;border-radius:50%;background:#eee;transform:translate(-50%,-50%);left:0%;}
.demo-cover.ml .k1{animation:slide1 5s ease-in-out infinite;}
.demo-cover.ml .k2{animation:slide2 5s ease-in-out infinite;}
.demo-cover.ml .k3{animation:slide3 5s ease-in-out infinite;}
@keyframes slide1{0%,40%{left:0%;}65%,100%{left:65%;}}
@keyframes slide2{0%,45%{left:0%;}70%,100%{left:82%;}}
@keyframes slide3{0%,50%{left:0%;}75%,100%{left:88%;}}

@media (prefers-reduced-motion: reduce) {
  .demo-cover * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}