/* Process animations — the three "what you'll learn" cards on /free/.
   All loops run on the compositor (transform/opacity/background-position only).
   Base styles = the assembled final state; keyframes hide-and-reveal, so
   prefers-reduced-motion degrades to a complete static picture. */

.stage{position:relative;height:150px;background:#0A1224;border:1px solid var(--hair);
  border-radius:12px;overflow:hidden;margin-bottom:14px}

/* ---------- Part 1 · code becomes a page (9s loop) ---------- */
.stage-code .mini{position:absolute;top:24px;border-radius:8px;background:#101A30;border:1px solid #263149}
.stage-code .editor{left:7%;width:52%;height:100px;padding:10px}
.stage-code .preview{right:7%;width:30%;height:100px;padding:10px}
.stage-code .tabs{display:flex;gap:5px;margin-bottom:8px}
.stage-code .tabs i{width:6px;height:6px;border-radius:50%;background:#33405C;display:block}
.stage-code .line{display:block;height:6px;border-radius:3px;margin:7px 4px;transform-origin:left center;
  animation:line-in 9s ease-out infinite}
.stage-code .line.l1{width:70%;background:#22C55E55;animation-delay:.2s}
.stage-code .line.l2{width:45%;background:#7C89A3;animation-delay:.9s}
.stage-code .line.l3{width:80%;background:#F6821F55;animation-delay:1.6s}
.stage-code .line.l4{width:55%;background:#7C89A3;animation-delay:2.3s}
.stage-code .caret{position:absolute;left:10px;top:78px;width:7px;height:10px;background:#22C55E;
  animation:caret 1s steps(2) infinite}
.stage-code .connector{position:absolute;left:59%;right:33%;top:72px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--green),transparent);
  background-size:45% 100%;background-repeat:no-repeat;animation:sweep 9s linear infinite}
.stage-code .p-bar{display:block;height:8px;border-radius:3px;background:#F6821F;margin:4px 4px 10px;
  transform-origin:left center;animation:pop-in 9s cubic-bezier(.23,1,.32,1) infinite;animation-delay:3.9s}
.stage-code .p-hero{display:block;height:34px;border-radius:5px;background:#1C2A47;margin:0 4px 8px;
  transform-origin:center bottom;animation:pop-in 9s cubic-bezier(.23,1,.32,1) infinite;animation-delay:4.25s}
.stage-code .p-btn{display:block;height:10px;width:55%;border-radius:3px;background:#22C55E;margin:0 4px;
  transform-origin:left center;animation:pop-in 9s cubic-bezier(.23,1,.32,1) infinite;animation-delay:4.6s}

@keyframes line-in{
  0%{opacity:0;transform:scaleX(0)}
  5%{opacity:1;transform:scaleX(1)}
  88%{opacity:1}
  94%{opacity:0}
  100%{opacity:0;transform:scaleX(0)}
}
@keyframes caret{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes pop-in{
  0%,38%{opacity:0;transform:scaleY(.6)}
  46%{opacity:1;transform:scaleY(1.06)}
  50%{transform:scaleY(1)}
  88%{opacity:1}
  94%{opacity:0}
  100%{opacity:0;transform:scaleY(.6)}
}
@keyframes sweep{
  0%,64%{opacity:0;background-position:-45% 0}
  68%{opacity:1}
  84%{opacity:1;background-position:145% 0}
  87%{opacity:0;background-position:145% 0}
  100%{opacity:0;background-position:145% 0}
}

/* ---------- Part 2 · the funnel collects emails (8s loop) ---------- */
.stage-funnel .node{position:absolute;top:56px;width:60px;height:34px;border-radius:9px;background:#101A30;
  border:1px solid var(--hair);display:flex;align-items:center;justify-content:center;
  font-family:'Space Grotesk',sans-serif;font-size:9px;letter-spacing:1.2px;color:var(--slate);
  animation:node-glow 8s ease-in-out infinite}
.stage-funnel .n1{left:8%;animation-delay:0s}
.stage-funnel .n2{left:50%;margin-left:-30px;animation-delay:2.5s}
.stage-funnel .n3{right:8%;animation-delay:5s}
.stage-funnel .conn{position:absolute;top:71px;height:2px;border-radius:1px;
  background:linear-gradient(90deg,var(--hair),var(--green),var(--hair));
  background-size:50% 100%;background-repeat:no-repeat;animation:conn-flow 8s linear infinite}
.stage-funnel .c12{left:calc(8% + 60px);right:calc(50% + 30px);animation-delay:1.1s}
.stage-funnel .c23{left:calc(50% + 30px);right:calc(8% + 60px);animation-delay:3.6s}
.stage-funnel .counter{position:absolute;right:8%;top:14px;height:22px;width:76px}
.stage-funnel .counter span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:600;border-radius:999px;
  border:1px solid var(--hair);color:var(--slate);background:#101A30;animation:count 8s ease-in-out infinite}
.stage-funnel .counter .c0{animation-delay:0s}
.stage-funnel .counter .c1{color:var(--green);border-color:#22C55E66;animation-delay:2.7s}
.stage-funnel .counter .c2{color:var(--green);border-color:#22C55E66;animation-delay:5.1s}

@keyframes node-glow{
  0%{border-color:var(--hair);color:var(--slate);box-shadow:none}
  5%{border-color:var(--green);color:var(--cloud);box-shadow:0 0 18px rgba(34,197,94,.25)}
  86%{border-color:var(--green);color:var(--cloud);box-shadow:0 0 18px rgba(34,197,94,.25)}
  92%{border-color:var(--hair);color:var(--slate);box-shadow:none}
  100%{border-color:var(--hair);color:var(--slate);box-shadow:none}
}
@keyframes conn-flow{
  0%,10%{background-position:-50% 0;opacity:.25}
  20%{opacity:1}
  34%{background-position:150% 0;opacity:1}
  38%{opacity:.25}
  90%{opacity:.25;background-position:150% 0}
  100%{opacity:.25;background-position:-50% 0}
}
@keyframes count{
  0%{opacity:0;transform:translateY(4px)}
  4%{opacity:1;transform:translateY(0)}
  30%{opacity:1}
  34%{opacity:0;transform:translateY(-4px)}
  100%{opacity:0;transform:translateY(-4px)}
}

/* ---------- Part 3 · deploy for $0 (10s loop) ---------- */
.stage-deploy .folder{position:absolute;left:9%;bottom:20px;width:64px;height:44px;border-radius:6px;
  background:#101A30;border:1px solid #33405C;animation:folder-pulse 10s ease-in-out infinite}
.stage-deploy .folder::before{content:"";position:absolute;top:-8px;left:0;width:26px;height:8px;
  border-radius:4px 4px 0 0;background:#101A30;border:1px solid #33405C;border-bottom:0}
.stage-deploy .file{position:absolute;left:14px;width:36px;height:5px;border-radius:2px;background:#7C89A3;
  animation:file-up 10s ease-out infinite}
.stage-deploy .file.f1{bottom:12px;animation-delay:1.4s}
.stage-deploy .file.f2{bottom:22px;background:#22C55E66;animation-delay:2s}
.stage-deploy .arrow{position:absolute;left:calc(9% + 27px);bottom:34px;width:10px;height:34px;
  background:linear-gradient(180deg,var(--green),transparent);clip-path:polygon(35% 30%,65% 30%,65% 100%,35% 100%);
  transform-origin:center bottom;animation:arrow-up 10s cubic-bezier(.23,1,.32,1) infinite}
.stage-deploy .globe{position:absolute;left:38%;top:26px;width:54px;height:54px;border-radius:50%;
  border:1px solid #33405C;background:radial-gradient(circle at 35% 30%, #1C2A47, #0E1830);
  animation:globe-in 10s cubic-bezier(.165,.84,.44,1) infinite}
.stage-deploy .globe::before{content:"";position:absolute;inset:-7px;border-radius:50%;
  border:1.5px dashed #22C55E66;animation:spin 7s linear infinite}
.stage-deploy .urlpill{position:absolute;right:7%;top:34px;height:26px;padding:0 12px;border-radius:999px;
  border:1px solid var(--hair);background:#101A30;display:flex;align-items:center;gap:6px;
  font-family:ui-monospace,Menlo,monospace;font-size:10.5px;color:var(--cloud);
  transform-origin:right center;animation:pill-in 10s cubic-bezier(.165,.84,.44,1) infinite}
.stage-deploy .urlpill .lock{width:8px;height:10px;border-radius:2px;border:1.5px solid #7C89A3;
  border-top-left-radius:4px;border-top-right-radius:4px;animation:lock-in 10s ease-in-out infinite}
.stage-deploy .zerotag{position:absolute;right:7%;bottom:22px;padding:5px 13px;border-radius:999px;
  background:var(--green);color:var(--ink);font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:12px;
  transform-origin:right center;animation:tag-pop 10s cubic-bezier(.23,1,.32,1) infinite}

@keyframes file-up{
  0%,8%{opacity:0;transform:translateY(6px)}
  16%{opacity:1;transform:translateY(0)}
  88%{opacity:1}
  94%{opacity:0}
  100%{opacity:0;transform:translateY(6px)}
}
@keyframes arrow-up{
  0%,22%{opacity:0;transform:scaleY(.2)}
  30%{opacity:1;transform:scaleY(1)}
  44%{opacity:1}
  54%{opacity:0}
  100%{opacity:0;transform:scaleY(.2)}
}
@keyframes globe-in{
  0%,28%{opacity:0;transform:scale(.7)}
  36%{opacity:1;transform:scale(1.05)}
  40%{transform:scale(1)}
  90%{opacity:1}
  95%{opacity:0}
  100%{opacity:0;transform:scale(.7)}
}
@keyframes pill-in{
  0%,42%{opacity:0;transform:translateY(8px)}
  50%{opacity:1;transform:translateY(0)}
  90%{opacity:1}
  95%{opacity:0}
  100%{opacity:0;transform:translateY(8px)}
}
@keyframes lock-in{
  0%,55%{border-color:#7C89A3}
  60%{border-color:var(--green)}
  90%{border-color:var(--green)}
  95%{border-color:#7C89A3}
  100%{border-color:#7C89A3}
}
@keyframes tag-pop{
  0%,56%{opacity:0;transform:scale(.8)}
  62%{opacity:1;transform:scale(1.05)}
  65%{transform:scale(1)}
  92%{opacity:1}
  96%{opacity:0}
  100%{opacity:0;transform:scale(.8)}
}
@keyframes folder-pulse{
  0%,8%{box-shadow:none}
  14%{box-shadow:0 0 16px rgba(34,197,94,.3)}
  88%{box-shadow:0 0 16px rgba(34,197,94,.3)}
  94%{box-shadow:none}
  100%{box-shadow:none}
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Above-the-fold machine strip (6s master loop) ---------- */
.machine{display:flex;align-items:flex-start;gap:8px;margin:26px 0 2px;max-width:640px}
.mstation{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:7px;width:118px}
.micon{position:relative;height:52px;width:64px;border-radius:10px;background:#0A1224;
  border:1px solid var(--hair);animation:station-glow 6s ease-in-out infinite}
.mlabel{font-family:'Space Grotesk',sans-serif;font-size:10.5px;letter-spacing:1.1px;
  text-transform:uppercase;color:var(--muted);text-align:center;animation:label-glow 6s ease-in-out infinite}
.m-code .micon,.m-code .mlabel{animation-delay:0s}
.m-funnel .micon,.m-funnel .mlabel{animation-delay:2.2s}
.m-live .micon,.m-live .mlabel{animation-delay:4.4s}
.mconn{flex:1;height:2px;border-radius:1px;margin-top:26px;
  background:linear-gradient(90deg,var(--hair) 20%,var(--green) 50%,var(--hair) 80%);
  background-size:200% 100%;animation:conn-flow2 6s linear infinite}
.mconn.c1{animation-delay:1.4s}
.mconn.c2{animation-delay:3.6s}

/* station 1: the editor */
.m-editor{position:absolute;inset:8px;display:flex;flex-direction:column;gap:5px;justify-content:center}
.m-editor i{display:block;height:5px;border-radius:2px;transform-origin:left center;
  animation:mline 6s ease-out infinite}
.m-editor i:nth-child(1){width:70%;background:#22C55E66;animation-delay:0s}
.m-editor i:nth-child(2){width:45%;background:#7C89A3;animation-delay:.35s}
.m-editor i:nth-child(3){width:58%;background:#F6821F66;animation-delay:.7s}

/* station 2: the funnel (form -> inbox) */
.m-form{position:absolute;left:8px;top:14px;width:22px;height:24px;border-radius:5px;
  background:#101A30;border:1px solid #33405C}
.m-form::before{content:"";position:absolute;left:4px;right:4px;top:5px;height:4px;border-radius:2px;background:#33405C}
.m-form::after{content:"";position:absolute;left:4px;right:4px;top:13px;height:5px;border-radius:2px;background:var(--green)}
.m-env{position:absolute;right:8px;top:17px;width:18px;height:14px;border-radius:3px;
  border:1.5px solid var(--orange);background:#101A30;animation:env-fly 6s ease-in-out infinite}
.m-env::before{content:"";position:absolute;inset:2px;border-top:6px solid var(--orange);
  border-left:6px solid transparent;border-right:6px solid transparent}

/* station 3: live for $0 */
.m-globe{position:absolute;left:8px;top:9px;width:30px;height:30px;border-radius:50%;
  border:1px solid #33405C;background:radial-gradient(circle at 35% 30%,#1C2A47,#0E1830)}
.m-globe::before{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px dashed #22C55E66;
  animation:spin 5s linear infinite}
.m-tag{position:absolute;right:6px;bottom:6px;padding:2px 7px;border-radius:999px;background:var(--green);
  color:var(--ink);font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:9.5px;
  transform-origin:center;animation:tag-pulse 6s ease-in-out infinite}

@keyframes station-glow{
  0%{border-color:var(--hair);box-shadow:none}
  4%{border-color:var(--green);box-shadow:0 0 16px rgba(34,197,94,.28)}
  24%{border-color:var(--green);box-shadow:0 0 16px rgba(34,197,94,.28)}
  30%{border-color:var(--hair);box-shadow:none}
  100%{border-color:var(--hair);box-shadow:none}
}
@keyframes label-glow{
  0%{color:var(--muted)} 4%{color:var(--cloud)} 24%{color:var(--cloud)} 30%{color:var(--muted)}
  100%{color:var(--muted)}
}
@keyframes conn-flow2{
  0%,16%{background-position:-200% 0;opacity:.3}
  30%{opacity:1}
  44%{background-position:200% 0;opacity:1}
  50%{opacity:.3}
  100%{background-position:200% 0;opacity:.3}
}
@keyframes mline{
  0%{opacity:0;transform:scaleX(0)}
  8%{opacity:1;transform:scaleX(1)}
  86%{opacity:1}
  92%{opacity:0}
  100%{opacity:0;transform:scaleX(0)}
}
@keyframes env-fly{
  0%,30%{transform:translateX(-34px) scale(.7);opacity:0}
  36%{opacity:1}
  44%{transform:translateX(0) scale(1);opacity:1}
  88%{opacity:1}
  92%{opacity:0}
  100%{transform:translateX(-34px) scale(.7);opacity:0}
}
@keyframes tag-pulse{
  0%,52%{opacity:0;transform:scale(.7)}
  58%{opacity:1;transform:scale(1.12)}
  62%{transform:scale(1)}
  90%{opacity:1}
  95%{opacity:0}
  100%{opacity:0;transform:scale(.7)}
}

@media (prefers-reduced-motion: reduce){
  .micon{border-color:var(--green)}
  .mlabel{color:var(--cloud)}
  .mconn{opacity:.7}
  .m-editor i{opacity:1;transform:none}
  .m-env{opacity:1;transform:none}
  .m-tag{opacity:1;transform:none}
}
@media(max-width:560px){
  .mstation{width:96px}
  .machine{gap:5px}
}
@media(max-width:374px){
  .mstation{width:84px}
  .machine{gap:4px}
}


@media (prefers-reduced-motion: reduce){
  .stage *{animation:none !important}
  .stage-code .line{opacity:1;transform:none}
  .stage-code .p-bar,.stage-code .p-hero,.stage-code .p-btn{opacity:1;transform:none}
  .stage-code .caret{display:none}
  .stage-code .connector{opacity:.6;background-position:0 0}
  .stage-funnel .node{border-color:var(--green);color:var(--cloud)}
  .stage-funnel .conn{opacity:.6}
  .stage-funnel .counter .c0{display:none}
  .stage-funnel .counter .c1,.stage-funnel .counter .c2{display:none}
  .stage-funnel .counter::after{content:"+2";position:absolute;inset:0;display:flex;align-items:center;
    justify-content:center;font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:600;
    border-radius:999px;border:1px solid #22C55E66;color:var(--green);background:#101A30}
  .stage-deploy .file{opacity:1;transform:none}
  .stage-deploy .arrow{opacity:1;transform:none}
  .stage-deploy .globe{opacity:1;transform:none}
  .stage-deploy .urlpill{opacity:1;transform:none}
  .stage-deploy .urlpill .lock{border-color:var(--green)}
  .stage-deploy .zerotag{opacity:1;transform:none}
}