/* ============================================
   ASSEMBLY LINE — box variant (consumer electronics page).
   One retail box on a roller conveyor; the camera follows it while the
   conveyor, floor and a print-and-apply labeler per station scroll past. Each
   labeler feeds its step's label down onto the box face over the earlier
   ones. Shared shell, screen and nav styles: assembly-line.css. Moving parts
   are placed by assembly-line-box.js; the numbers there (in u) must match the
   sizes here.

   Vertical budget, in u, from the rig's bottom: conveyor legs 0–20, side rail
   20–36, roller bed 36–92 (behind the box), box face 44–360 with its top face
   to 404, labels 60–348 on the face, print head 396–456 (clear of the box: the
   label hangs from its slot, then drops 58u onto the face), roll to 490,
   labeler arm 492–510 and post to ~518; the rig is 520u. Height caps use
   73.8cqh, so the rig fills ~96% of the stage (520/400 × 73.8).
   ============================================ */

.line__conveyor,
.line__carton,
.line__frontrail,
.line__labelers,
.line__marker,
.line__tape {
  display: none;
}


/* ── Labels: flat paper, the step printed on it ── */
.line--box .line__label {
  position: relative;
  width: var(--line-w);
  height: calc(288 * var(--u));
}

.line--box .line__panel {
  height: 100%;
  --d: 0;
  border-radius: 3px;
  background: #FFFDF7;
  /* A hairline under a stuck label; while the pad holds it off the face
     (--lift 0–1, set by JS) it casts a shadow onto the box. */
  --paper-shadow:
    0 1px 0 rgba(12, 24, 41, 0.25),
    0 calc(var(--lift, 0) * 26 * var(--u)) calc(var(--lift, 0) * 34 * var(--u)) rgba(0, 0, 0, calc(var(--lift, 0) * 0.4));
  box-shadow: var(--paper-shadow);
}

/* Paper angled away from the light (it comes from above) reads darker. */
.line--box .line__screen::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(12, 24, 41, 0.6), rgba(12, 24, 41, 0.3));
  opacity: var(--shade, 0);
}

.line--box .line__panel::before,
.line--box .line__panel::after,
.line--box .line__led,
.line--box .line__pass,
.line--box .line__glare {
  display: none;
}

/* The label is the screen: no bezel, no inset. */
.line--box .line__screen {
  inset: 0;
  border: 0;
  border-radius: 2px;
  background: transparent;
}

.line--box .line__light,
.line--box .line__unit.is-on .line__light {
  opacity: 1;
  background: #FFFDF7;
  transition: none;
}

.line--box .line__unit.is-powering .line__light {
  animation: none;
}

.line--box .line__unit.is-on .line__panel {
  box-shadow: var(--paper-shadow);
}

/* A barcode down the label's left margin — in the padding, so it costs the
   text no room. */
.line--box .line__light::before {
  content: '';
  position: absolute;
  left: 1.7cqw;
  top: 4.6cqw;
  bottom: 5cqw;
  width: 2.2cqw;
  background: repeating-linear-gradient(to bottom,
    var(--color-navy) 0 2px, transparent 2px 4px,
    var(--color-navy) 4px 5px, transparent 5px 7px,
    var(--color-navy) 7px 10px, transparent 10px 12px,
    var(--color-navy) 12px 13px, transparent 13px 16px);
  opacity: 0.85;
}


/* ── Live rig ── */
.line--box.line--live .line__rig {
  --line-w: min(720px, 56cqw, 73.8cqh);
  --rig-h: 520;
}

@media (max-width: 1023px) {
  .line--box.line--live .line__rig {
    --line-w: min(600px, 70cqw, 73.8cqh);
  }
}

@media (max-width: 640px) {
  .line--box.line--live .line__rig {
    --line-w: min(78cqw, 73.8cqh);
  }
}

.line--box.line--live .line__conveyor,
.line--box.line--live .line__frontrail,
.line--box.line--live .line__labelers {
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.line--box.line--live .line__conveyor  { z-index: 1; }
.line--box.line--live .line__box       { z-index: 2; }
.line--box.line--live .line__frontrail { z-index: 3; }
.line--box.line--live .line__labelers  { z-index: 4; }

/* Floor stripes scroll with the scenery; widen them so the shift never
   uncovers an edge. */
.line--box.line--live .line__walkway {
  left: calc(-40 * var(--u));
  right: calc(-40 * var(--u));
  will-change: transform;
}


/* Roller conveyor (bed, side rail, axles, legs): shared with the tote rig,
   in assembly-line.css. */

/* ── The box: kraft carton, tape, the label stack ── */
.line--box.line--live .line__box {
  display: block;
  position: absolute;
  left: 50%;
  bottom: calc(44 * var(--u));
  width: 0;
  height: 0;
  transform-origin: 0 0;
  will-change: transform;
}

.line--box.line--live .line__carton,
.line--box.line--live .line__tape {
  display: block;
}

.line__carton {
  left: calc(-220 * var(--u));
  bottom: 0;
  width: calc(440 * var(--u));
  height: calc(316 * var(--u));
  --d: calc(44 * var(--u));
  --f: #C8955A;
  --t: #DDB27A;
  --s: #A77A46;
  border-radius: 2px;
}

/* Branded tape along the top seam, laid by the case sealer from the box's
   leading (right) end back as the box passes under it (JS sets --tape 0–1). */
.line__tape {
  position: absolute;
  left: calc(-198 * var(--u));
  bottom: calc(331 * var(--u));
  width: calc(440 * var(--u));
  height: calc(14 * var(--u));
  box-sizing: border-box;
  border-block: 1.5px solid var(--color-saffron-dark);
  background: linear-gradient(to bottom, var(--line-lit-top), var(--color-saffron));
  transform-origin: 100% 50%;
  transform: skewX(-45deg) scaleX(var(--tape, 0));
}

.line--box.line--live .line__track {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
}

.line--box.line--live .line__label {
  position: absolute;
  left: calc(-200 * var(--u));
  top: calc(-304 * var(--u));   /* bottom 16u above the box's bottom edge */
  /* It curls about its top edge while hanging from the head's slot. */
  transform-origin: 50% 0;
  will-change: transform, clip-path;
}


/* ── Labelers: post, arm, hanger, print head, label roll ── */
.line__labeler {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 0;
  will-change: transform;
}

.line__labeler > i {
  position: absolute;
}

.line__lb-post {
  left: calc(290 * var(--u));
  bottom: 0;
  width: calc(20 * var(--u));
  height: calc(510 * var(--u));
  --d: calc(10 * var(--u));
  --f: var(--line-alloy);
  --t: var(--line-alloy-top);
  --s: var(--line-alloy-side);
}

.line__lb-arm {
  left: calc(-230 * var(--u));
  bottom: calc(492 * var(--u));
  width: calc(540 * var(--u));
  height: calc(18 * var(--u));
  --d: calc(10 * var(--u));
  --f: var(--line-alloy);
  --t: var(--line-alloy-top);
  --s: var(--line-alloy-side);
}

.line__lb-hanger {
  bottom: calc(452 * var(--u));
  width: calc(16 * var(--u));
  height: calc(42 * var(--u));
  --d: calc(8 * var(--u));
  --f: var(--line-alloy);
  --t: var(--line-alloy-top);
  --s: var(--line-alloy-side);
}

.line__lb-hanger--l { left: calc(-212 * var(--u)); }
.line__lb-hanger--r { left: calc(196 * var(--u)); }

/* Print head: as wide as the label, so the paper visibly comes out of it.
   It hangs clear of the box; a label feeding out hangs with its top 3–16u
   up inside the slot, hiding the line it feeds from. */
.line__lb-head {
  left: calc(-220 * var(--u));
  bottom: calc(396 * var(--u));
  width: calc(440 * var(--u));
  height: calc(64 * var(--u));
  --d: calc(14 * var(--u));
  --f: var(--color-saffron);
  --t: var(--line-lit-top);
  --s: var(--color-saffron-dark);
  border-radius: 3px;
}

/* Station number on the head's little display. */
.line__lb-lcd {
  position: absolute;
  left: calc(14 * var(--u));
  top: calc(12 * var(--u));
  padding: 0.25em 0.5em 0.2em;
  border: 1.5px solid var(--line-ink);
  border-radius: 3px;
  background: var(--color-navy);
  color: var(--line-lit-top);
  font-family: var(--font-mono);
  font-size: max(9px, calc(11 * var(--u)));
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.08em;
  line-height: 1;
}

.line__lb-led {
  position: absolute;
  right: calc(16 * var(--u));
  top: calc(15 * var(--u));
  width: calc(8 * var(--u));
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px solid var(--line-ink);
  background: #5E4A16;
  transition: background-color 0.15s, box-shadow 0.15s;
}

.line__labeler.is-printing .line__lb-led {
  background: #3DDC7A;
  box-shadow: 0 0 8px 2px rgba(61, 220, 122, 0.6);
}

/* The slot the label feeds out of, full width along the bottom edge; it
   glows while the print line is hot. */
.line__lb-slot {
  position: absolute;
  left: calc(10 * var(--u));
  right: calc(10 * var(--u));
  bottom: calc(3 * var(--u));
  height: calc(7 * var(--u));
  border-radius: 99px;
  background: #1A1F27;
  transition: background-color 0.15s, box-shadow 0.15s;
}

.line__labeler.is-printing .line__lb-slot {
  background: #FFB24A;
  box-shadow: 0 0 12px 3px rgba(255, 178, 74, 0.55);
}

/* Label stock on top of the head, seen side-on: a wide roll whose layer
   lines run down into the head as it unwinds (JS moves --feed). Spindle hubs
   at both ends. */
.line__lb-roll {
  left: calc(-190 * var(--u));
  bottom: calc(462 * var(--u));
  width: calc(380 * var(--u));
  height: calc(28 * var(--u));
  box-sizing: border-box;
  border: var(--line-stroke) solid var(--line-ink);
  border-radius: calc(14 * var(--u));
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 35%, rgba(12, 24, 41, 0) 60%, rgba(12, 24, 41, 0.22)),
    repeating-linear-gradient(to bottom, #FFFDF7 0 calc(3 * var(--u)), #E4DBCB calc(3 * var(--u)) calc(4 * var(--u)));
  background-position: 0 0, 0 var(--feed, 0px);
}

.line__lb-roll::before,
.line__lb-roll::after {
  content: '';
  position: absolute;
  top: 50%;
  width: calc(14 * var(--u));
  aspect-ratio: 1;
  margin-top: calc(-7 * var(--u));
  border: 1.5px solid var(--line-ink);
  border-radius: 50%;
  background: #3A4250;
}

.line__lb-roll::before { left: calc(-9 * var(--u)); }
.line__lb-roll::after  { right: calc(-9 * var(--u)); }


/* ── Case sealer before the packaging station: tape roll on a hanger, a
   wipe-down roller riding the top seam where the tape is being laid. ── */
.line__sealer {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 0;
  will-change: transform;
}

.line__sealer > i {
  position: absolute;
  box-sizing: border-box;
}

.line__sl-rod {
  left: calc(-6 * var(--u));
  bottom: calc(450 * var(--u));
  width: calc(8 * var(--u));
  height: 100vh;
  background: var(--line-alloy-side);
  border-inline: var(--line-stroke) solid var(--line-ink);
}

/* Bracket from the roll's hub down to the wipe roller. */
.line__sl-arm {
  left: calc(-6 * var(--u));
  bottom: calc(426 * var(--u));
  width: calc(55 * var(--u));
  height: calc(8 * var(--u));
  border: var(--line-stroke) solid var(--line-ink);
  border-radius: 99px;
  background: var(--line-alloy);
  transform-origin: calc(4 * var(--u)) 50%;
  transform: rotate(59deg);
}

.line__sl-roll {
  left: calc(-25 * var(--u));
  bottom: calc(407 * var(--u));
  width: calc(46 * var(--u));
  aspect-ratio: 1;
  border: var(--line-stroke) solid var(--line-ink);
  border-radius: 50%;
  background: radial-gradient(circle, #3A4250 0 18%, var(--line-ink) 18% 23%, #FFE0B5 23% 40%, var(--color-saffron) 40%);
  transform: rotate(var(--spin, 0deg));
}

.line__sl-roll::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 6%;
  height: 22%;
  width: 1.5px;
  margin-left: -0.75px;
  background: rgba(12, 24, 41, 0.45);
}

.line__sl-wiper {
  left: calc(14 * var(--u));
  bottom: calc(382 * var(--u));
  width: calc(16 * var(--u));
  aspect-ratio: 1;
  border: var(--line-stroke) solid var(--line-ink);
  border-radius: 50%;
  background: #3A4250;
}


/* ── Station marker on the floor stand, fixed with the box ── */
.line--box.line--live .line__marker {
  display: block;
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: calc(4 * var(--u));
  transform: translateX(-50%);
}

.line__marker .line__plate {
  position: static;
  transform: none;
  display: inline-block;
}