/* Homepage: hero, the production line and the capacity meter (key figures live in glance.css).
   html.motion = JS on and motion allowed. Without it every scroll sequence renders as a static sheet. */

/* ---------- 01 Hero ---------- */
@property --hp { syntax: "<number>"; inherits: true; initial-value: 0; }

.hero {
  position: relative;
  padding-top: var(--hdr-h);
  overflow: clip;
}
.hero__in {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gut);
  align-content: start;
  min-height: calc(100svh - var(--hdr-h));
  padding-bottom: 40px;
}
.hero__in::before {
  content: "";
  position: absolute;
  inset: 0 var(--pad);
  pointer-events: none;
  background-image: linear-gradient(to right, var(--rule) 1px, transparent 1px);
  background-size: calc((100% + var(--gut)) / var(--cols)) 100%;
  opacity: 0.55;
}
.hero__meta {
  grid-column: 1 / -1;
  grid-row: 1;
  display: grid;
  grid-template-columns: subgrid;
  padding-block: 14px;
  border-bottom: 1px solid var(--ink);
  color: var(--ink-2);
}
.hero__meta li { grid-column: span 3; }
.hero__meta .k { color: var(--red-ink); margin-right: 6px; }

.hero__title {
  grid-column: 1 / -1;
  grid-row: 2;
  position: relative;
  margin-top: clamp(28px, 5.5vh, 64px);
}
.hero__kicker {
  display: block;
  max-width: 17em;
  font-size: clamp(24px, 2.6vw, 40px);
  font-weight: 600;
  font-stretch: 92%;
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.hero__big {
  display: block;
  margin-top: clamp(18px, 3vh, 36px);
  margin-left: -0.05em;
  font-size: clamp(84px, 14.6vw, 228px);
  font-weight: 800;
  font-stretch: 75%;
  line-height: 0.8;
  letter-spacing: -0.055em;
}
.hero__line {
  display: block;
  overflow: clip;
  padding-block: 0.04em 0.05em;
  white-space: pre;
}
.hero__scale { font-stretch: calc(75% + var(--hp) * 25%); }
.ch { display: inline-block; }
.ch--dot { color: var(--red); }

.hero__foot {
  grid-column: 1 / -1;
  grid-row: 3;
  display: grid;
  grid-template-columns: subgrid;
  align-items: end;
  margin-top: clamp(28px, 4vh, 48px);
  padding-top: 20px;
  border-top: 1px solid var(--ink);
}
.hero__lead { grid-column: 1 / 6; font-size: 18px; line-height: 1.45; max-width: 36em; }
.hero__ctas { grid-column: 6 / 13; display: flex; gap: 12px; flex-wrap: wrap; padding-left: var(--gut); }

/* The three-star mark: the starting point of the homepage star journey. */
.hero__mark {
  position: relative;
  grid-column: 8 / 13;
  grid-row: 2;
  align-self: end;
  justify-self: end;
  width: min(100%, clamp(260px, 30vw, 440px));
  margin-bottom: 8px;
  pointer-events: none;
}
/* The TSF logo: #tsf-three plus #three-stars, traced from assets/Brands/tsflogo.png. */
.hero__stars { display: block; width: 100%; height: auto; overflow: visible; color: var(--red); }
/* Where the "3" is drawn, the large star keeps the logo's open outline. */
.hero__stars, .line .print, .line .carton, .line .stencil { --heal: 0; }
.hero__mark figcaption { margin-top: 12px; color: var(--ink-2); text-align: right; }

@media (prefers-reduced-motion: no-preference) {
  .ch {
    animation: ch-in 1s var(--ease-out) both;
    animation-delay: calc(var(--i) * 42ms + 120ms);
  }
  .motion .hero__stars { --star-stroke: 1.6; animation: star-draw 1.8s var(--ease-out) 0.6s both; }
  @supports (animation-timeline: scroll()) {
    .hero {
      animation: hero-progress linear both;
      animation-timeline: scroll(root);
      animation-range: 0 80vh;
    }
  }
}
@keyframes ch-in { from { transform: translateY(102%); font-stretch: 62%; } }
@keyframes hero-progress { to { --hp: 1; } }

@media (max-width: 1180px) {
  .hero__lead { grid-column: 1 / 7; }
  .hero__ctas { grid-column: 7 / 13; }
}
@media (max-width: 899px) {
  .hero__in { min-height: auto; padding-bottom: 48px; }
  .hero__meta { row-gap: 6px; }
  .hero__meta li { grid-column: span 4; }
  .hero__meta li:nth-child(n + 3) { display: none; }
  .hero__title { margin-top: 36px; }
  .hero__kicker { font-size: 26px; }
  .hero__big { font-size: 20.5vw; margin-top: 24px; }
  .hero__mark {
    grid-column: 1 / -1;
    grid-row: 3;
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
    margin: 28px 0 0;
  }
  .hero__stars { width: clamp(150px, 42vw, 280px); }
  .hero__mark figcaption { margin: 0; text-align: left; }
  .hero__foot { grid-row: 4; }
  .hero__lead, .hero__ctas { grid-column: 1 / -1; }
  .hero__ctas { padding-left: 0; margin-top: 24px; }
  .hero__ctas .btn { width: 100%; }
}

/* ---------- 05 Capacity meter ("Now multiply it") ---------- */
.meter {
  position: relative;
  margin-top: 56px;
  padding: 36px 40px 30px;
  background: var(--ink);
  color: var(--paper);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gut);
  row-gap: 18px;
  align-items: center;
  overflow: clip;
}
.meter__tag { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; color: #FFB3B3; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); flex: none; }
.meter__lead, .meter__was { font-size: 26px; line-height: 1.15; font-weight: 600; font-stretch: 90%; letter-spacing: -0.015em; }
.meter__top { grid-column: 1 / 5; grid-row: 2; align-self: end; display: grid; }
.meter__top > * { grid-area: 1 / 1; }
.meter__was { color: rgba(243, 241, 236, 0.78); }
.meter__was-num { position: relative; z-index: 4; display: inline-block; font-weight: 800; font-stretch: 80%; color: var(--paper); }
.meter__was-txt { transition: opacity 0.4s ease 0.45s; }
.meter__unit { grid-column: 1 / 5; grid-row: 3; display: grid; }
.meter__unit > * { grid-area: 1 / 1; }
/* Invisible copy of the longest unit text keeps the meter height fixed from shift to live. */
.meter__unit-sizer { visibility: hidden; }
.meter__note { grid-column: 1 / 5; grid-row: 4; align-self: start; max-width: 32ch; font-size: 15px; line-height: 1.45; color: rgba(243, 241, 236, 0.72); transition: opacity 0.4s ease 0.6s; }
.meter__window { grid-column: 1 / 5; grid-row: 5; display: flex; align-items: center; gap: 12px; color: rgba(243, 241, 236, 0.72); font-variant-numeric: tabular-nums; transition: opacity 0.4s ease 0.6s; }
.meter__bar { position: relative; width: 96px; height: 3px; overflow: hidden; background: rgba(243, 241, 236, 0.22); }
.meter__bar i { position: absolute; inset: 0; background: var(--red); transform: scaleX(0); transform-origin: left center; transition: transform 0.25s linear; }
.meter__bar i.is-reset { transition: none; }
.meter[data-phase="shift"] .meter__was { visibility: hidden; }
.meter[data-phase="shift"] .meter__was-txt,
.meter[data-phase="shift"] .meter__note,
.meter[data-phase="shift"] .meter__window { opacity: 0; transition: none; }
.meter[data-phase="hour"] .meter__window { display: none; }
.meter:not([data-phase="shift"]) .meter__tilde { display: none; }
.meter:not([data-phase="shift"]) .meter__lead--shift { opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0s 0.2s; }
.meter__board {
  grid-column: 5 / 13;
  grid-row: 2 / 6;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.06em;
  font-size: clamp(64px, 9.4vw, 148px);
  font-weight: 800;
  font-stretch: 80%;
  line-height: 1;
}
.meter__tilde, .meter__sep { color: var(--red); padding-inline: 0.04em; }
.meter__calc {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(243, 241, 236, 0.22);
  color: rgba(243, 241, 236, 0.78);
}

.flap {
  --flip-ms: 110ms;
  position: relative;
  display: inline-block;
  width: 0.7em;
  height: 1.12em;
  perspective: 3em;
}
.flap__num, .flap__layer {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 0.05em;
  background: #222220;
  color: var(--paper);
  backface-visibility: hidden;
}
.flap::after {
  content: "";
  position: absolute;
  inset: calc(50% - 0.012em) 0 auto;
  height: 0.024em;
  background: var(--ink);
  z-index: 3;
}
.flap__layer--top, .flap__leaf--top { clip-path: inset(0 0 50% 0); }
.flap__layer--bot, .flap__leaf--bot { clip-path: inset(50% 0 0 0); }
.flap__leaf--top { z-index: 2; background: #2A2A28; }
.flap__leaf--bot { z-index: 2; transform: rotateX(90deg); }
.flap.is-flipping .flap__leaf--top { animation: leaf-top var(--flip-ms) ease-in forwards; }
.flap.is-flipping .flap__leaf--bot { animation: leaf-bot var(--flip-ms) ease-out var(--flip-ms) forwards; }
@keyframes leaf-top { to { transform: rotateX(-90deg); } }
@keyframes leaf-bot { from { transform: rotateX(90deg); } to { transform: rotateX(0deg); } }

@media (max-width: 899px) {
  .meter { grid-template-columns: 1fr; padding: 28px 20px 22px; margin-top: 40px; margin-inline: calc(var(--pad) * -1); }
  .meter__top, .meter__unit, .meter__note, .meter__window, .meter__board { grid-column: 1; grid-row: auto; }
  .meter__lead, .meter__was { font-size: 22px; }
  .meter__board { justify-content: flex-start; font-size: 14.5vw; }
  .meter__calc { flex-direction: column; }
}

.mult .meter { margin-top: 0; }
.mult__link { margin-top: 28px; }

.cap .nums__cell { position: relative; }
.star-dock { position: absolute; top: 12px; right: 14px; width: 30px; height: 30px; pointer-events: none; }
@media (max-width: 899px) {
  .star-dock { right: 0; width: 24px; height: 24px; }
}

/* ---------- 04 Production line ---------- */
.line-intro { padding-bottom: 48px; }
.line-intro .sec__head { margin-bottom: 28px; }
.line-intro .sec__head + .sec__lead { margin-top: 0; margin-bottom: 0; }

@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }

.line {
  --stations: 10;
  --seg: 70svh;
  --t: calc(var(--p) * var(--stations));
  --greige: #ECE4CF;
  --dyed: #9BB9D9;

  /* track index: holds on each station, indexes to the next over the last 20% */
  --x: calc(
    clamp(0, (var(--t) - 0.8) * 5, 1) + clamp(0, (var(--t) - 1.8) * 5, 1) +
    clamp(0, (var(--t) - 2.8) * 5, 1) + clamp(0, (var(--t) - 3.8) * 5, 1) +
    clamp(0, (var(--t) - 4.8) * 5, 1) + clamp(0, (var(--t) - 5.8) * 5, 1) +
    clamp(0, (var(--t) - 6.8) * 5, 1) + clamp(0, (var(--t) - 7.8) * 5, 1) +
    clamp(0, (var(--t) - 8.8) * 5, 1));
  --step: calc(
    clamp(0, (var(--x) - 0.5) * 100, 1) + clamp(0, (var(--x) - 1.5) * 100, 1) +
    clamp(0, (var(--x) - 2.5) * 100, 1) + clamp(0, (var(--x) - 3.5) * 100, 1) +
    clamp(0, (var(--x) - 4.5) * 100, 1) + clamp(0, (var(--x) - 5.5) * 100, 1) +
    clamp(0, (var(--x) - 6.5) * 100, 1) + clamp(0, (var(--x) - 7.5) * 100, 1) +
    clamp(0, (var(--x) - 8.5) * 100, 1));

  /* process progress per station; embellishment runs longer (print, then embroidery) and is mirrored in journey.js */
  --a0: clamp(0, (var(--t) - 0.12) / 0.62, 1);
  --a1: clamp(0, (var(--t) - 1.12) / 0.62, 1);
  --a2: clamp(0, (var(--t) - 2.12) / 0.62, 1);
  --a3: clamp(0, (var(--t) - 3.12) / 0.62, 1);
  --a4: clamp(0, (var(--t) - 4.04) / 0.74, 1);
  --a5: clamp(0, (var(--t) - 5.12) / 0.62, 1);
  --a6: clamp(0, (var(--t) - 6.12) / 0.62, 1);
  --a7: clamp(0, (var(--t) - 7.12) / 0.62, 1);
  --a8: clamp(0, (var(--t) - 8.12) / 0.62, 1);
  --a9: clamp(0, (var(--t) - 9.12) / 0.62, 1);

  /* sub-phases */
  --dfill: clamp(0, var(--a1) / 0.2, 1);
  --dye: clamp(0, (var(--a1) - 0.1) / 0.5, 1);
  --dout: clamp(0, (var(--a1) - 0.45) / 0.3, 1);
  --dpile: clamp(0, (var(--a1) - 0.7) / 0.3, 1);
  --mk: clamp(0, var(--a3) * 5, 1);
  --cut: clamp(0, (var(--a3) - 0.1) / 0.6, 1);
  --sepc: clamp(0, (var(--a3) - 0.72) / 0.28, 1);
  --fd: clamp(0, var(--a4) / 0.12, 1);
  --sw: clamp(0, (var(--a4) - 0.14) / 0.32, 1);
  --pr: clamp(0, (var(--sw) * 128 - 28) / 70, 1);
  --fl: clamp(0, (var(--a4) - 0.48) / 0.12, 1);
  --hd: clamp(0, (var(--a4) - 0.6) / 0.1, 1);
  --em: clamp(0, (var(--a4) - 0.7) / 0.22, 1);
  --hl: clamp(0, (var(--a4) - 0.92) / 0.08, 1);
  --jn: clamp(0, var(--a5) / 0.3, 1);
  --st: clamp(0, (var(--a5) - 0.3) / 0.7, 1);
  --sep: calc(var(--sepc) * (1 - var(--jn)));
  --sc: clamp(0, var(--a6) / 0.68, 1);
  --sp: clamp(0, (var(--a6) - 0.72) / 0.22, 1);
  --f1: clamp(0, var(--a7) / 0.3, 1);
  --f2: clamp(0, (var(--a7) - 0.32) / 0.3, 1);
  --bg: clamp(0, (var(--a7) - 0.66) / 0.34, 1);
  --ca: clamp(0, var(--a8) / 0.25, 1);
  --dr: clamp(0, (var(--a8) - 0.26) / 0.36, 1);
  --fc: clamp(0, (var(--a8) - 0.66) / 0.34, 1);
  --in: clamp(0, var(--a9) / 0.45, 1);
  --dc: clamp(0, (var(--a9) - 0.45) / 0.4, 1);
  --sl: clamp(0, (var(--a9) - 0.86) / 0.14, 1);

  position: relative;
}

.line__anchors { position: absolute; inset: 0; pointer-events: none; }
.line__anchors span { position: absolute; left: 0; top: calc((var(--i) + 0.78) * var(--seg)); height: 1px; width: 1px; }
.line__pin { border-top: 1px solid var(--ink); }

/* rail */
/* Content-sized columns let "Embellishment" take the room the short names leave. */
.rail__list { display: grid; grid-template-columns: repeat(var(--stations), auto); gap: 6px; }
.rail li { --on: 0; --done: 1; }
.rail a {
  position: relative;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 0 12px;
  text-decoration: none;
  color: color-mix(in srgb, var(--ink) calc(var(--on) * 100%), var(--ink-2));
  font-size: 11.5px;
}
.rail a span {
  padding: 3px 5px;
  border: 1px solid currentColor;
  background: color-mix(in srgb, var(--ink) calc(var(--on) * 100%), transparent);
  color: color-mix(in srgb, var(--paper) calc(var(--on) * 100%), currentColor);
}
.rail a::before, .rail a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--rule);
}
.rail a::after { background: var(--red); transform-origin: 0 50%; transform: scaleX(var(--done)); }
.rail a:hover { color: var(--red-ink); }
@media (min-width: 900px) and (max-width: 1099px) {
  .rail a { flex-direction: column; align-items: flex-start; gap: 5px; }
}

/* stage: the drawing */
.stage {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--paper-hi);
  background-image: radial-gradient(rgba(17, 17, 17, 0.14) 1px, transparent 1.2px);
  background-size: 20px 20px;
  border: 1px solid var(--ink);
}
.stage__svg { flex: 1 1 auto; min-height: 0; width: 100%; height: 100%; }
.stage use { color: var(--red); }

.tblock {
  display: grid;
  grid-template-columns: 1fr 0.9fr 1.5fr 1fr;
  border-top: 1px solid var(--ink);
  font-size: 11px;
}
.tblock > div { padding: 7px 10px 8px; border-left: 1px solid var(--ink); min-width: 0; }
.tblock > div:first-child { border-left: 0; }
.tblock dt { color: var(--ink-2); font-size: 9.5px; }
.tblock dd { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.roll-digits, .roll-words {
  display: inline-block;
  height: 1.4em;
  overflow: hidden;
  vertical-align: bottom;
}
.roll-digits > span, .roll-words > span {
  display: block;
  height: 1.4em;
  transform: translateY(calc(var(--step) * -100%));
  transition: transform 0.35s var(--ease-out);
}
.tblock__st dd { color: var(--red-ink); }

/* conveyor */
.belt__rail { stroke: var(--ink); stroke-width: 1.5; fill: none; }
.belt__rollers {
  stroke: var(--ink);
  stroke-width: 10;
  stroke-dasharray: 2 18;
  stroke-dashoffset: calc(var(--x) * 640px);
  fill: none;
  opacity: 0.55;
}

/* station apparatus slides past the fixed product */
.st { transform: translateX(calc((var(--i) - var(--x)) * 640px)); }
.lbl { font: 500 11px var(--f-mono); letter-spacing: 0.1em; fill: var(--ink-2); }

/* 01 knit: yarn feeds the cylinder, greige jersey flows down onto the roll */
.yarn { fill: none; stroke: var(--ink); stroke-width: 0.9; stroke-dasharray: 4 3; stroke-dashoffset: calc(var(--a0) * -84px); }
.knit-needles { stroke: var(--ink); stroke-width: 20; stroke-opacity: 0.45; stroke-dasharray: 1 4; stroke-dashoffset: calc(var(--a0) * -50px); }
.knit-web { transform: translateY(calc(var(--a0) * 60px)); }
.knit-roll { transform-origin: 320px 400px; transform: scaleY(calc(0.45 + var(--a0) * 0.55)); }

/* 02 dye: greige rope circulates in the jet vessel and leaves dyed */
.dye-edge { fill: none; stroke: var(--ink); stroke-width: 11; stroke-linejoin: round; }
.dye-web { fill: none; stroke: var(--dyed); stroke-width: 8; stroke-linejoin: round; }
.dye-web--greige { stroke: var(--greige); }
.dye-web--rope { stroke: color-mix(in srgb, var(--dyed) calc(var(--dye) * 100%), var(--greige)); }
.dye-flow { fill: none; stroke: var(--ink); stroke-opacity: 0.3; stroke-dasharray: 5 7; stroke-dashoffset: calc(var(--a1) * -240px); }
.dye-out { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--dout)); }
.dye-liquor { transform: translateY(calc((0.8 - var(--dfill) * 0.35) * 132px)); }
.dye-reel { transform-origin: 392px 180px; transform: rotate(calc(var(--a1) * 540deg)); }
.dye-pile { clip-path: inset(calc((1 - var(--dpile)) * 100% - 4px) -4px -4px -4px); }

/* 03 fabric */
.sheet { transform-origin: 50px 0; transform: scaleX(var(--a2)); opacity: calc(1 - var(--sepc)); }
.roll { transform: translateX(calc(var(--a2) * 300px)); }

/* 04 cut */
.piece { fill: url(#knit-dyed); stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; }
.collar { fill: none; stroke: var(--ink); stroke-width: 7; stroke-linecap: round; }
.pieces { opacity: var(--sepc); clip-path: inset(-40px -40px calc(var(--f2) * 42%) -40px); }
.marker path { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 6 5; }
.marker { opacity: calc(var(--mk) * (1 - var(--sepc))); }
.cut {
  fill: none;
  stroke: var(--red);
  stroke-width: 2.2;
  stroke-linejoin: round;
  clip-path: inset(-4px calc((1 - var(--cut)) * 100%) -4px -4px);
  opacity: calc(1 - var(--sepc));
}
.gantry { transform: translateX(calc(var(--cut) * 238px)); }
.sleeve--l {
  transform-origin: 146px 128px;
  transform: translate(calc(var(--sep) * -30px), calc(var(--sep) * 10px)) rotate(calc(var(--sep) * -8deg)) scaleX(calc(1 - var(--f1) * 0.97));
}
/* The embroidered mark rides on the right sleeve panel. */
.sleeve--r, .emb-mark {
  transform-origin: 254px 128px;
  transform: translate(calc(var(--sep) * 30px), calc(var(--sep) * 10px)) rotate(calc(var(--sep) * 8deg)) scaleX(calc(1 - var(--f1) * 0.97));
}

/* 05 embellishment: screen print, then embroidery */
/* Parked 420 units up: clear of the stage's letterbox margin while the embroidery head works. */
.frame { transform: translateY(calc((1 - var(--fd) + var(--fl)) * -420px)); }
.stencil { color: var(--ink) !important; opacity: 0.2; }
.squeegee { transform: translateX(calc(var(--sw) * 128px)); }
.print { clip-path: inset(-2px calc((1 - var(--pr)) * 100%) -2px -2px); }
.emb { transform: translateY(calc((1 - var(--hd) + var(--hl)) * -420px)); }
.emb__bar { transform: translateY(calc(sin(var(--t) * 42rad) * 4px)); }
.stage .emb-mark { --sd: var(--em); --star-stroke: 6; color: var(--ink); }

/* 06 sew */
.stitch path { fill: none; stroke: var(--red); stroke-width: 1.6; stroke-dasharray: 4 3; }
.stitch-reveal path {
  stroke-dasharray: 1 1;
  stroke-dashoffset: calc(1 - clamp(0, (var(--st) - var(--k) * 0.2) / 0.4, 1));
}
.stitch { opacity: calc(1 - var(--f2)); }
.needle__bar { transform: translateY(calc(sin(var(--t) * 42rad) * 6px)); }

/* 07 QC */
.scan { transform: translateY(calc(118px + var(--sc) * 250px)); opacity: calc(min(var(--sc) * 8, 1) * (1 - var(--sp))); }
.stamp { transform-origin: 420px 332px; transform: rotate(-7deg) scale(calc(1.7 - var(--sp) * 0.7)); opacity: var(--sp); }
.stamp__big { font: 800 22px var(--f-sans); font-stretch: 80%; letter-spacing: 0.02em; fill: var(--red-ink); }
.stamp__small { font: 500 8.5px var(--f-mono); letter-spacing: 0.1em; fill: var(--red-ink); }

/* 08 fold + bag */
.bag { transform: translateY(calc((1 - var(--bg)) * -340px)); opacity: var(--bg); }

/* 09 carton */
.pack { transform-origin: 200px 147px; transform: translateY(calc(var(--dr) * 166px)) scale(calc(1 - var(--dr) * 0.22)); }
.carton { opacity: var(--ca); transform: translateY(calc((1 - var(--ca)) * 50px)); }
.cflap--l { transform-origin: 120px 249px; transform: rotate(calc(-110deg + var(--fc) * 110deg)); }
.cflap--r { transform-origin: 280px 249px; transform: rotate(calc(110deg - var(--fc) * 110deg)); }
.tape { opacity: clamp(0, (var(--fc) - 0.86) * 8, 1); }

/* 10 container */
/* The container sits behind the product; the carton fades into its dark hold before the doors close. */
.prod { transform-origin: 200px 315px; transform: scale(calc(1 - var(--in) * 0.3)); opacity: clamp(0, (1 - var(--in)) / 0.6, 1); }
.door--l { transform-origin: 164px 0; transform: scaleX(calc(0.05 + var(--dc) * 0.95)); }
.door--r { transform-origin: 476px 0; transform: scaleX(calc(0.05 + var(--dc) * 0.95)); }
.seal { opacity: var(--sl); }
.ctr__text { font: 500 11px var(--f-mono); letter-spacing: 0.14em; fill: var(--paper); }
.seal__text { font: 500 7.5px var(--f-mono); letter-spacing: 0.06em; fill: #fff; }

/* station panels */
.station:focus-visible { outline-offset: -3px; }
.station__no { display: flex; flex-direction: column; gap: 4px; }
.station__no .mono { color: var(--ink-2); }
.station__n {
  font-size: clamp(72px, 7.6vw, 120px);
  font-weight: 800;
  font-stretch: 72%;
  line-height: 0.82;
  letter-spacing: -0.04em;
  color: var(--red);
}
.station__name {
  margin-top: 18px;
  font-size: clamp(26px, 2.2vw, 34px);
  font-weight: 750;
  font-stretch: 88%;
  line-height: 1;
  letter-spacing: -0.025em;
}
.station__stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 26px;
  padding-top: 14px;
  border-top: 1px solid var(--ink);
}
.station__stat .num { font-size: clamp(48px, 4.6vw, 72px); }
.station__stat .num--word { font-size: clamp(40px, 3.6vw, 56px); }
.station__stat .mono { color: var(--ink-2); }
.station__copy { margin-top: 18px; font-size: 15.5px; line-height: 1.5; max-width: 26em; }
.station__fig img { aspect-ratio: 3 / 2; }

.belt-bar {
  display: none;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  padding-block: 14px 18px;
  color: var(--ink-2);
  font-size: 11px;
}
.belt-bar__meter {
  position: relative;
  display: block;
  height: 10px;
  background:
    repeating-linear-gradient(to right, var(--ink) 0 1px, transparent 1px calc(100% / var(--stations))) 0 0 / 100% 100%,
    linear-gradient(var(--rule), var(--rule)) 0 50% / 100% 1px no-repeat;
  border-right: 1px solid var(--ink);
}
.belt-bar__meter i {
  position: absolute;
  inset: 3px 0;
  background: var(--red);
  transform-origin: 0 50%;
  transform: scaleX(var(--p));
}

/* static sheet: no JS or reduced motion */
:root:not(.motion) .line { --p: 0.699; }
:root:not(.motion) .line__anchors { display: none; }
:root:not(.motion) .rail { padding-block: 20px 4px; }
:root:not(.motion) .roll-digits > span,
:root:not(.motion) .roll-words > span { transition: none; }
@media (min-width: 900px) {
  :root:not(.motion) .line__main { padding-block: 32px 80px; }
  :root:not(.motion) .stage { max-width: 820px; margin-inline: auto; }
  :root:not(.motion) .stage__svg { height: auto; aspect-ratio: 4 / 3; }
  :root:not(.motion) .track {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 48px var(--gut);
    margin-top: 56px;
  }
  :root:not(.motion) .station__n { font-size: 64px; }
  :root:not(.motion) .station__fig { margin-top: 20px; }
}
@media (min-width: 1200px) {
  :root:not(.motion) .track { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* motion: rail follows the line */
.motion .rail li {
  --on: clamp(0, min((var(--x) - var(--i) + 0.5) * 20, (var(--i) + 0.5 - var(--x)) * 20), 1);
  --done: clamp(0, var(--t) - var(--i), 1);
}
.motion .line.is-scripted { animation: none; }

/* motion, desktop: pinned horizontal line */
@media (min-width: 900px) {
  .motion .line { height: calc(100svh + var(--stations) * var(--seg)); }
  .motion .line__pin {
    position: sticky;
    top: 0;
    height: 100svh;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    padding-top: var(--hdr-h);
    overflow: clip;
  }
  .motion .rail { padding-block: 12px 10px; }
  .motion .line__main {
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gut);
    overflow: clip;
    padding-block: 4px 0;
  }
  .motion .stage { grid-column: 4 / 10; z-index: 1; min-height: 0; }
  .motion .track {
    position: absolute;
    inset: 0 auto 0 0;
    display: flex;
    width: calc(var(--stations) * 100%);
    transform: translateX(calc(var(--x) * -100% / var(--stations)));
  }
  .motion .station {
    flex: 0 0 calc(100% / var(--stations));
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gut);
    align-items: center;
    padding-inline: var(--pad);
  }
  .motion .station__text { grid-column: 1 / 4; }
  .motion .station__fig { grid-column: 10 / 13; }
  .motion .station__fig img { aspect-ratio: 3 / 4; }
  .motion .belt-bar { display: grid; }

  @supports (animation-timeline: view()) {
    .motion .line {
      animation: line-progress linear both;
      animation-timeline: view();
      animation-range: contain 0% contain 100%;
    }
  }
}
@media (min-width: 900px) and (max-height: 820px) {
  .motion .station__n { font-size: 72px; }
  .motion .station__stat { margin-top: 16px; }
  .motion .station__stat .num { font-size: 48px; }
  .motion .station__copy { font-size: 14.5px; }
  .motion .station__fig img { aspect-ratio: 4 / 5; }
}

/* narrow screens: vertical sequence (sticky drawing when motion is allowed) */
@media (max-width: 899px) {
  .line__main { padding-inline: 0; }
  .stage { border-inline: 0; }
  .tblock { grid-template-columns: 0.8fr 1.4fr 1fr; font-size: 10px; }
  .tblock > div:first-child { display: none; }
  .tblock > div:nth-child(2) { border-left: 0; }
  .station { padding: 36px var(--pad) 40px; border-bottom: 1px solid var(--rule); }
  .station__n { font-size: 72px; }
  .station__fig { margin-top: 26px; }
  .rail__list { display: flex; flex-wrap: wrap; gap: 4px 14px; }
  :root:not(.motion) .stage__svg { height: auto; aspect-ratio: 4 / 3; }

  .motion .rail, .motion .line__anchors { display: none; }
  .motion .stage { position: sticky; top: var(--hdr-h); z-index: 2; height: 44svh; }
  .motion .station { min-height: 76svh; }
}

@keyframes line-progress { from { --p: 0; } to { --p: 1; } }

/* ---------- Star journey overlay (assets/js/journey.js) ---------- */
.journey { position: fixed; inset: 0; z-index: 40; overflow: hidden; pointer-events: none; }
.journey__star {
  position: absolute;
  left: 0;
  top: 0;
  width: 400px;
  max-width: none;
  height: 400px;
  overflow: visible;
  opacity: 0;
  color: var(--red);
  transform-origin: 50% 50%;
}
.journey__star.is-glowing { filter: drop-shadow(0 0 5px rgba(255, 86, 64, 0.95)) drop-shadow(0 0 14px rgba(255, 60, 40, 0.55)); }
.journey__star path {
  fill: currentColor;
  fill-rule: evenodd;
  stroke: currentColor;
  stroke-opacity: 0;
  stroke-linejoin: round;
  stroke-dasharray: 1;
}
/* The fill-in strokes overlap at their joins; evenodd would punch holes there. */
.journey__star .journey__heal { fill-rule: nonzero; }
.journey.is-igniting .journey__star path {
  animation: star-ignite 1.3s var(--ease-out) both;
  animation-delay: calc(0.45s + var(--n) * 0.26s);
}
.journey__star .journey__heal { stroke: none; }
@keyframes star-ignite {
  0% { stroke-dashoffset: 1; stroke-opacity: 1; fill-opacity: 0; }
  55% { stroke-dashoffset: 0; stroke-opacity: 1; fill-opacity: 0; }
  100% { stroke-dashoffset: 0; stroke-opacity: 0; fill-opacity: 1; }
}
.journey-on .hero__logo-stars,
.journey-on .line .stencil--stars,
.journey-on .cta__logo-stars { visibility: hidden; }