/* Pupfish Soft — project micro movies */
.project-card{position:relative;display:flex;flex-direction:column}
.project-copy{display:flex;flex:1;flex-direction:column}

/* Card rhythm: keep repeated content starting points and bottom actions visually consistent. */
.project-meta{min-height:30px;align-content:flex-start}
.project-lede{min-height:58px}
.project-points{margin-top:18px}
.project-coming{margin-top:auto;padding-top:18px}
.project-actions{margin-top:auto;padding-top:22px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.project-actions .button,.project-demo-trigger{
  min-height:44px;
  width:auto;
  max-width:100%;
  padding:0 15px;
  border:1px solid #AFC1D6;
  border-radius:12px;
  background:#fff;
  color:#1F4DB8;
  font:800 11px/1.2 system-ui,sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
}
.project-demo-trigger{cursor:pointer}
.project-actions .button:hover,.project-demo-trigger:hover{background:#F3F7FC;border-color:#86A5C8}
.project-demo-trigger::after{content:' →'}
.project-demo{position:absolute;inset:10px;z-index:20;border-radius:16px;background:#F7FAFD;border:1px solid #D6E0EB;box-shadow:0 20px 55px rgba(15,23,38,.2);opacity:0;visibility:hidden;transform:translateY(8px) scale(.985);transition:opacity .18s ease,transform .18s ease,visibility .18s;overflow:hidden;pointer-events:none}
.project-card.demo-open .project-demo{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.project-demo-shell{height:100%;min-height:330px;display:grid;grid-template-rows:auto 1fr auto;padding:18px;background:linear-gradient(145deg,#FBFCFE,#EDF3F8)}
.project-demo-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.project-demo-head span{font:800 11px/1.2 system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#315D92;white-space:normal;overflow-wrap:break-word;word-break:normal}
.project-demo-close{display:grid;place-items:center;border:0;background:transparent;color:#0F1726;width:32px;height:32px;border-radius:50%;font-size:23px;line-height:1;cursor:pointer;flex:0 0 auto}
.project-demo-stage{position:relative;min-height:236px;margin-top:10px;border-radius:14px;background:#fff;overflow:hidden;border:1px solid #D6E0EB}
.demo-scene{position:absolute;inset:0;padding:18px;opacity:0;display:flex;flex-direction:column;justify-content:center;min-width:0}
.project-card.demo-open .project-demo.is-running .demo-scene.s1{animation:demoScene1 20s linear infinite}.project-card.demo-open .project-demo.is-running .demo-scene.s2{animation:demoScene2 20s linear infinite}.project-card.demo-open .project-demo.is-running .demo-scene.s3{animation:demoScene3 20s linear infinite}.project-card.demo-open .project-demo.is-running .demo-scene.s4{animation:demoScene4 20s linear infinite}.project-card.demo-open .project-demo.is-running .demo-scene.s5{animation:demoScene5 20s linear infinite}
.demo-kicker{font:800 10px/1.2 system-ui,sans-serif;letter-spacing:.11em;text-transform:uppercase;color:#315D92;margin-bottom:9px;white-space:normal;word-spacing:.12em}
.demo-title{font:700 24px/1.08 Georgia,serif;color:#0F1726;margin:0 0 14px;white-space:normal;overflow-wrap:break-word;word-break:normal}
.demo-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:12px;background:#EDF3F8;margin:6px 0;font:600 13px/1.3 system-ui,sans-serif;color:#162235;min-width:0}
.demo-row>div{display:grid;gap:3px;min-width:0}.demo-row strong,.demo-row small{display:block;white-space:normal;overflow-wrap:break-word;word-break:normal}.demo-row strong{font-weight:800}.demo-row small{color:#5B6F89;font-weight:600}.demo-row>span{flex:0 0 auto}
.demo-pill{display:inline-flex;align-items:center;gap:6px;width:max-content;max-width:100%;border-radius:999px;background:#EAF1FB;color:#315D92;padding:7px 10px;font:800 11px/1.2 system-ui,sans-serif;white-space:normal;overflow-wrap:break-word}
.demo-metric{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:8px}.demo-metric div{padding:12px 10px;border-radius:12px;background:#EDF3F8;min-width:0}.demo-metric strong{display:block;font:800 17px/1.1 system-ui,sans-serif;color:#0F1726;white-space:normal;overflow-wrap:break-word}.demo-metric span{display:block;margin-top:4px;font:600 10px/1.2 system-ui,sans-serif;color:#5B6F89;white-space:normal;overflow-wrap:break-word}
.demo-check{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#1F4DB8;color:white;font:900 16px/1 system-ui,sans-serif}.demo-time,.demo-language{font:800 10px/1 system-ui,sans-serif;letter-spacing:.08em;color:#315D92}
.demo-wave-mini{display:flex;align-items:center;gap:7px;height:60px;margin:4px 0 14px}.demo-wave-mini i{display:block;width:8px;border-radius:99px;background:#3E79E6}.demo-wave-mini i:nth-child(1){height:30%}.demo-wave-mini i:nth-child(2){height:55%}.demo-wave-mini i:nth-child(3){height:88%}.demo-wave-mini i:nth-child(4){height:48%}.demo-wave-mini i:nth-child(5){height:76%}.demo-wave-mini i:nth-child(6){height:42%}.demo-wave-mini i:nth-child(7){height:64%}
.project-demo-foot{padding-top:12px}.demo-progress{height:3px;background:rgba(15,23,38,.11);overflow:hidden;border-radius:99px}.demo-progress::after{content:'';display:block;height:100%;width:100%;background:#1F4DB8;transform-origin:left;transform:scaleX(0)}.project-card.demo-open .project-demo.is-running .demo-progress::after{animation:demoProgress 20s linear infinite}.project-demo-foot p{margin:8px 0 0;font:600 11px/1.35 system-ui,sans-serif;color:#5B6F89;white-space:normal;overflow-wrap:break-word}
.recorder-card .project-demo-shell{background:linear-gradient(145deg,#F8FBFF,#EDF3F8)}.pollyglott-card .project-demo-shell{background:linear-gradient(145deg,#F7FCFC,#EEF2FF)}
@keyframes demoScene1{0%,19%{opacity:1}20%,100%{opacity:0}}@keyframes demoScene2{0%,19%{opacity:0}20%,39%{opacity:1}40%,100%{opacity:0}}@keyframes demoScene3{0%,39%{opacity:0}40%,59%{opacity:1}60%,100%{opacity:0}}@keyframes demoScene4{0%,59%{opacity:0}60%,79%{opacity:1}80%,100%{opacity:0}}@keyframes demoScene5{0%,79%{opacity:0}80%,99%{opacity:1}100%{opacity:0}}@keyframes demoProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(max-width:520px){.project-demo{inset:6px}.project-demo-shell{min-height:310px;padding:14px}.project-demo-stage{min-height:228px}.demo-scene{padding:14px}.demo-title{font-size:21px}.demo-metric{gap:5px}.demo-metric div{padding:10px 7px}}
@media(prefers-reduced-motion:reduce){.project-demo,.demo-scene,.demo-progress::after{transition:none!important;animation:none!important}.project-demo .demo-scene{display:none}.project-demo .demo-scene.s1{display:flex;opacity:1}.demo-progress{display:none}}


/* Mobile card rhythm: do not force desktop text heights in a single-column stack. */
@media(max-width:850px){
  .project-meta{min-height:0;margin-bottom:10px}
  .project-lede{min-height:0}
  .project-actions{padding-top:18px}
}
@media(max-width:520px){
  .project-actions{display:grid;grid-template-columns:1fr}
  .project-actions .button,.project-demo-trigger{width:100%;justify-content:center;text-align:center}
}