/* ============================================================
   Adssembly — hero assembly-line loop (drop-in component)
   Scoped under .adl-wrap. Transparent; sits on the hero paper.
   ============================================================ */
.assembly-stage { display: flex; justify-content: flex-start; width: 100%; }

.adl-wrap{
  --paper:#FBF6EE;          /* panel cream      */
  --ink:#1E1B16;            /* warm ink         */
  --cobalt:#E8552D;         /* persimmon accent */
  --puff:#ECE3D2;           /* smoke fill       */
  position:relative;width:100%;max-width:1000px;height:280px;
  font-family:'Hanken Grotesque',system-ui,sans-serif;
}
.adl-line{position:absolute;left:9%;right:11%;top:198px;height:5px;
  background-image:radial-gradient(circle,var(--cobalt) 1.7px,transparent 2.2px);
  background-size:14px 5px;background-position:0 center;background-repeat:repeat-x}
.adl-node{position:absolute;top:194px;width:13px;height:13px;border-radius:50%;
  background:var(--paper);border:2.5px solid var(--ink);transform:translate(-50%,0)}

.adl-client{position:absolute;top:178px;transform:translate(-50%,0);
  display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--ink)}
.adl-client svg{width:24px;height:24px}
.adl-client span{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10px;font-weight:500;letter-spacing:.08em}
.adl-client.is-gulp{animation:adl-gulp .55s ease-out}

.adl-pkg{position:absolute;top:184px;left:5%;width:30px;height:30px;
  background:#6E685C;border:2.5px solid var(--ink);border-radius:3px;
  box-shadow:3px 3px 0 0 var(--ink);transform:translate(-50%,0);
  display:flex;align-items:center;justify-content:center;transition:background-color .45s ease}
.adl-fx{display:flex;align-items:center;justify-content:center}
.adl-fx.is-pop{animation:adl-pop .4s ease-out}
.adl-icon{display:flex;color:#fff}
.adl-icon svg{width:16px;height:16px}
.adl-icon.is-spin{animation:adl-spin 1.1s linear infinite}

.adl-callout{position:absolute;bottom:108px;transform:translate(-50%,8px) scale(.7);
  transform-origin:bottom center;opacity:0;
  transition:opacity .3s ease,transform .35s cubic-bezier(.34,1.56,.64,1);
  background:var(--paper);border:2.5px solid var(--ink);border-radius:11px;
  box-shadow:4px 4px 0 0 var(--ink);padding:9px 13px;
  font-size:14px;font-weight:500;color:var(--ink);max-width:132px;line-height:1.35;text-align:center}
.adl-callout::after{content:"";position:absolute;left:50%;bottom:-9px;width:13px;height:13px;
  background:var(--paper);border-right:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);
  transform:translateX(-50%) rotate(45deg)}
.adl-callout.is-show{opacity:1;transform:translate(-50%,0) scale(1)}

.adl-poof{position:absolute;left:60%;top:135px;width:130px;height:130px;
  transform:translateX(-50%);opacity:0;transition:opacity .25s ease}
.adl-poof.is-editing{opacity:1}
.adl-puff{position:absolute;width:26px;height:26px;border-radius:50%;
  background:var(--puff);border:2px solid var(--ink);opacity:0}
.adl-poof.is-editing .adl-puff{animation:adl-puff .85s infinite ease-out}
.adl-tool{position:absolute;color:var(--ink);opacity:0}
.adl-tool svg{width:18px;height:18px}
.adl-poof.is-editing .adl-tool{animation:adl-toolpop .75s infinite alternate ease-in-out}
.adl-spark{position:absolute;width:8px;height:8px;background:var(--cobalt);opacity:0;transform:rotate(45deg)}
.adl-poof.is-editing .adl-spark{animation:adl-spark .6s infinite ease-out}

@keyframes adl-pop{0%{transform:scale(.2);opacity:.3}60%{transform:scale(1.28)}100%{transform:scale(1);opacity:1}}
@keyframes adl-spin{to{transform:rotate(360deg)}}
@keyframes adl-gulp{0%{transform:translate(-50%,0) scale(1)}25%{transform:translate(-50%,0) scale(1.4)}55%{transform:translate(-50%,0) scale(.9)}100%{transform:translate(-50%,0) scale(1)}}
@keyframes adl-puff{0%{transform:scale(.4) translate(0,0);opacity:0}30%{opacity:.95}100%{transform:scale(1.3) translate(var(--dx),var(--dy));opacity:0}}
@keyframes adl-toolpop{0%{transform:translateY(5px) rotate(-14deg);opacity:0}40%{opacity:1}100%{transform:translateY(-11px) rotate(14deg);opacity:1}}
@keyframes adl-spark{0%{transform:rotate(45deg) scale(0);opacity:0}50%{opacity:1}100%{transform:rotate(45deg) scale(1.5);opacity:0}}

/* accessibility: hold the FIRST frame for reduced-motion users */
@media (prefers-reduced-motion: reduce){
  .adl-pkg{left:14% !important;background:#6E685C !important}
  .adl-poof{opacity:0 !important}
  .adl-poof .adl-puff,.adl-poof .adl-tool,.adl-poof .adl-spark{animation:none}
  .adl-callout[data-i="0"]{opacity:1;transform:translate(-50%,0) scale(1)}
}

/* keep the belt readable on small screens */
@media (max-width: 620px){
  .adl-wrap{height:250px}
  .adl-callout{font-size:12px;max-width:108px;padding:7px 10px}
}
@media (max-width: 460px){
  .adl-wrap{height:230px}
  .adl-line{top:170px}
  .adl-node{top:166px}
  .adl-client{top:150px}
  .adl-client svg{width:20px;height:20px}
  .adl-pkg{top:156px;width:26px;height:26px}
  .adl-poof{top:112px}
  .adl-callout{bottom:96px;font-size:11px;max-width:96px;padding:6px 8px;line-height:1.3}
  /* nudge the edge bubbles inward so the speech tails never clip the viewport */
  .adl-callout[data-i="0"]{margin-left:34px}
  .adl-callout[data-i="3"]{margin-left:-34px}
}