/* v2 hero — dark brand band, thin inner frame, huge white editorial headline,
   wide product photograph bridging into the products section. */

.hero {
  position: relative;
  background:
    radial-gradient(90% 120% at 100% 0%, rgb(255 255 255 / 0.05) 0%, transparent 55%),
    var(--green-800);
}

.hero__inner {
  padding-top: calc(124px + var(--space-8));
}

/* thin-bordered editorial frame around the hero content */
.hero__frame {
  position: relative;
  border: 1px solid var(--ondark-line);
  border-bottom: 0;
  padding: clamp(2rem, 4vw, 4rem) clamp(1.5rem, 3.5vw, 3.5rem) clamp(2.5rem, 5vw, 5rem);
}
/* corner accent dot */
.hero__frame::before {
  content: "";
  position: absolute;
  top: -4px; left: -4px;
  width: 8px; height: 8px;
  background: var(--green-200);
}

/* The aside only carries the products cue, so the headline takes the wider share. */
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 3fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: end;
}

.hero__title {
  margin-top: var(--space-6);
  color: #fff;
  font-size: var(--text-display);
  font-weight: 700;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  max-width: 22ch;
}

.hero__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding-bottom: var(--space-2);
  border-left: 1px solid var(--ondark-line);
  padding-left: clamp(1.25rem, 2.5vw, 2.5rem);
}

.hero__lead { color: var(--ondark-70); }

/* Outlined button that scrolls down to the products section. It spans the aside
   column, with the label on the left and the chevron pinned to the right edge. */
.hero__scroll {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  min-height: 46px;
  padding: 0 1.15rem;
  border: 1px solid var(--ondark-line);
  border-radius: var(--radius-xs);
  background: rgb(255 255 255 / 0.06);
  color: var(--ondark-100);
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.hero__scroll:hover {
  background: #fff;
  border-color: #fff;
  color: var(--green-900);
}

/* small chevron pointing down, nudging to invite the scroll */
.hero__scroll-arrow {
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-25%) rotate(45deg);
  animation: hero-scroll-bob 3.4s var(--ease-in-out) 2s infinite;
}

@keyframes hero-scroll-bob {
  0%, 100% { transform: translateY(-25%) rotate(45deg); }
  50% { transform: translateY(15%) rotate(45deg); }
}

/* staggered one-time reveal */
.hero__frame .section-chip,
.hero__title,
.hero__aside > * {
  animation: v2-rise var(--duration-slow) var(--ease-out) both;
}
.hero__title { animation-delay: 90ms; }
.hero__aside > *:nth-child(1) { animation-delay: 200ms; }
.hero__aside > *:nth-child(2) { animation-delay: 300ms; }

/* ---- Wide media strip bridging dark -> light ---- */
.hero__media {
  position: relative;
  z-index: 2;
  border: 1px solid var(--ondark-line);
  border-top: 0;
  padding: clamp(0.75rem, 1.5vw, 1.25rem);
  padding-top: 0;
  background: transparent;
}

.hero__media-inner {
  overflow: hidden;
  animation: v2-mask-reveal 900ms var(--ease-in-out) 250ms both;
}

/* ---- Animated extrusion-line scene (replaces the photo) ----
   Engineering-illustration SVG of a cast-film line. Choreography: the scene
   DRAWS ITSELF IN on load (staggered stroke draw), then the film web carries
   travelling light sheens from the extruder over the chill roll and guide
   rollers onto the winding roll; rollers rotate; a halo breathes behind the
   roll; translucent sheets drift. All motion is slow and low-contrast; under
   prefers-reduced-motion (base.css) every animation completes instantly,
   leaving the finished static illustration. */

/* Aspect ratio tracks the viewBox (1400/520) so "meet" shows the whole line with
   no cropping and no letterboxing; narrower screens get a little extra height. */
.hero__anim {
  display: block;
  width: 100%;
  aspect-ratio: 1400 / 520;
  background:
    radial-gradient(120% 160% at 82% 30%, rgb(169 198 187 / 0.05) 0%, transparent 55%),
    var(--green-900);
}

/* ---- stroke palette: structure / detail / accent ---- */
.hx-structure line,
.hx-structure rect,
.hx-structure polygon { fill: none; stroke: rgb(255 255 255 / 0.62); stroke-width: 1.6; }
.hx-structure-c { fill: none; stroke: rgb(255 255 255 / 0.62); stroke-width: 1.6; }
.hx-detail line { stroke: rgb(255 255 255 / 0.22); stroke-width: 1; }
.hx-detail-c { fill: none; stroke: rgb(255 255 255 / 0.2); stroke-width: 1; }
.hx-detail-l { stroke: rgb(255 255 255 / 0.35); stroke-width: 1.2; }
.hx-dot { fill: var(--green-200); }
.hx-accent path { fill: none; stroke: var(--green-200); stroke-width: 2; }

/* ---- entrance: staggered self-drawing strokes ---- */
.hx-draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: hx-drawin 1s var(--ease-out) forwards;
}
.hx-d1 { animation-delay: 0.05s; }
.hx-d2 { animation-delay: 0.3s; }
.hx-d3 { animation-delay: 0.55s; animation-duration: 0.9s; }
.hx-d4 { animation-delay: 0.8s; animation-duration: 1.1s; }
.hx-d5 { animation-delay: 1.1s; animation-duration: 1.5s; }
@keyframes hx-drawin { to { stroke-dashoffset: 0; } }

/* ---- entrance: soft fades for fills/bands ---- */
.hx-fade { opacity: 0; animation: hx-fadein 1.1s var(--ease-out) forwards; animation-delay: 0.5s; }
.hx-fade--film { animation-delay: 2s; }
.hx-fade--late { animation-delay: 2.3s; }
@keyframes hx-fadein { to { opacity: 1; } }

/* ---- film web: the strongest path in the composition ----
   Built up like real cast film rather than drawn as one line: a wide soft halo
   sits underneath, a translucent body carries a gradient along the run, two
   offset edges catch the light the way a ribbon's edges do, and specular
   highlights travel the full length from die to winding roll. */

/* the sheet drops a shadow, which is most of what separates it from the backdrop */
.hx-film-shadow { fill: rgb(4 14 11 / 0.45); stroke: none; }
.hx-film-halo {
  fill: none;
  stroke: var(--green-200);
  stroke-width: 34;
  stroke-linecap: round;
  opacity: 0.16;
  transition: opacity var(--duration-slow) var(--ease-out);
}
/* the surface itself — a filled shape between the two edges, not a stroke */
.hx-film-face { fill: url(#hxSheetFace); stroke: none; }
/* soft band down the middle: a flat sheet under tension is never perfectly flat */
.hx-film-gloss {
  fill: none;
  stroke: rgb(255 255 255 / 0.1);
  stroke-width: 15;
  stroke-linecap: round;
  filter: url(#hxBlur);
}
/* cross-web gauge lines, travelling with the material inside the surface */
.hx-web-ribs line { stroke: rgb(255 255 255 / 0.07); stroke-width: 1; }
.hx-web-ribs { animation: hx-web-ribs 3.4s linear infinite; }
@keyframes hx-web-ribs { to { transform: translateX(44px); } }

.hx-film-edge {
  fill: none;
  stroke: url(#hxFilmEdge);
  stroke-width: 1.4;
}
/* the far edge catches the light, the near one falls away */
.hx-film-edge--top { opacity: 1; }
.hx-film-edge--bottom { opacity: 0.5; }
.hx-film-core { fill: none; stroke: rgb(255 255 255 / 0.42); stroke-width: 1.4; }

/* faint micro-flow texture inside the material */
.hx-film-flow {
  fill: none;
  stroke: var(--green-200);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 0.4 2.4;
  opacity: 0.5;
}
/* Travelling specular highlights, carried on the two edges of the sheet rather
   than down its centre — light rakes along the corners of a moving web. */
.hx-sheen {
  fill: none;
  stroke: #EAF4EF;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 10 90;
  filter: url(#hxBlur);
}
/* Both edges are treated identically — the sheet is one piece, so its two sides
   must light up as mirror images of each other. The inner strands are much
   softer: they are there to bridge the gap between the edges, not to be seen as
   lines of their own. */
.hx-sheen--edge { stroke: rgb(255 255 255 / 0.58); stroke-width: 3; }
.hx-sheen--mid { stroke: rgb(234 244 239 / 0.17); stroke-width: 2.2; }

/* fade + persistent motion have to coexist: run both animations */
.hx-film-flow.hx-fade { animation: hx-fadein 1.1s var(--ease-out) 2s forwards, hx-microflow 3.2s linear 2s infinite; }
/* One clock for all four strands — no per-strand delay anywhere, which is what
   holds the band together as it travels. */
.hx-sheen.hx-fade { animation: hx-fadein 1.1s var(--ease-out) 2.2s forwards, hx-travel 5.4s linear 2.2s infinite; }
@keyframes hx-microflow { to { stroke-dashoffset: -26; } }
@keyframes hx-travel { from { stroke-dashoffset: 110; } to { stroke-dashoffset: -90; } }

/* ---- rotation: chill roll, guides, winding pack ---- */
.hx-spin {
  animation: hx-spinning 10s linear infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.hx-spin--chill { animation-duration: 14s; }
.hx-spin--fast { animation-duration: 8s; }
.hx-spin--rev { animation-duration: 9s; animation-direction: reverse; }
.hx-spin--pack { animation-duration: 26s; }
@keyframes hx-spinning { to { transform: rotate(360deg); } }

/* winding pack: layered rings over a lit mass, so it reads as wound material */
.hx-pack { fill: none; stroke: rgb(255 255 255 / 0.26); stroke-width: 1.3; }
.hx-pack--faint { stroke: rgb(255 255 255 / 0.13); }
.hx-pack-outer { fill: none; stroke: rgb(169 198 187 / 0.65); stroke-width: 2.2; }
.hx-seam { stroke: rgb(169 198 187 / 0.3); stroke-width: 1; }

/* rollers carry a subtle body and a highlight arc on the lit side */
.hx-roll-fill { opacity: 0; animation: hx-fadein 1.2s var(--ease-out) 1.4s forwards; }
.hx-roll-fill--main { animation-delay: 1.7s; }
.hx-roll-shine {
  fill: none;
  stroke: rgb(255 255 255 / 0.4);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0;
  animation: hx-fadein 1.2s var(--ease-out) 1.9s forwards;
}
.hx-roll-shine--main { stroke: rgb(255 255 255 / 0.5); stroke-width: 2.6; }

/* ---- background depth ---- */
.hx-pool { opacity: 0; animation: hx-fadein 1.6s var(--ease-out) 0.2s forwards; }
.hx-rule-lines line { stroke: rgb(255 255 255 / 0.05); stroke-width: 1; }

/* Layers drift apart very slightly, which reads as depth rather than motion.
   The offsets themselves are written by js/v2/hero-parallax.js as
   plain 2D translates — calc(var()) inside an SVG transform is unreliable across
   engines, so the script does the arithmetic and CSS only smooths the result.
   With no script the layers simply never move. */
.hx-depth,
.hx-machine,
.hx-web {
  transition: transform 600ms var(--ease-out);
}
.hx-depth { will-change: transform; }

/* ---- atmosphere ---- */
.hx-halo { animation: hx-fadein 1.1s var(--ease-out) 2.3s forwards, hx-breathe-halo 12s var(--ease-in-out) 3s infinite; }
@keyframes hx-breathe-halo {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}
.hx-halo { transform-box: fill-box; transform-origin: center; }

/* drifting translucent sheets, each at its own pace for parallax */
.hx-sheet.hx-fade { animation: hx-fadein 1.4s var(--ease-out) 2.3s forwards, hx-drift 18s var(--ease-in-out) 2.3s infinite alternate; }
.hx-sheet--b.hx-fade { animation: hx-fadein 1.4s var(--ease-out) 2.5s forwards, hx-drift 23s var(--ease-in-out) 2.5s infinite alternate-reverse; }
.hx-sheet--c.hx-fade { animation: hx-fadein 1.4s var(--ease-out) 2.7s forwards, hx-drift-slow 28s var(--ease-in-out) 2.7s infinite alternate; }
@keyframes hx-drift { to { translate: 14px -10px; } }
@keyframes hx-drift-slow { to { translate: -10px 8px; } }

/* machine status indicators: slow breathing, offset phases */
.hx-ind {
  fill: var(--green-200);
  animation: hx-ind 4.5s var(--ease-in-out) infinite;
}
.hx-ind--b { animation-delay: 2.2s; }
@keyframes hx-ind {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.9; }
}

/* finished goods: stretch film rolls on a pallet, same white line-art language */
.hx-goods rect,
.hx-goods ellipse { fill: none; stroke: rgb(255 255 255 / 0.62); stroke-width: 1.6; }
.hx-roll-body { fill: rgb(255 255 255 / 0.05) !important; }
.hx-roll-top { fill: rgb(255 255 255 / 0.09) !important; }
.hx-roll-core { stroke: rgb(255 255 255 / 0.4) !important; }
.hx-pallet { fill: rgb(255 255 255 / 0.04) !important; }
/* the load is itself wrapped in BPI stretch film */
.hx-wrap { fill: url(#hxWrap); stroke: rgb(255 255 255 / 0.3); stroke-width: 1; }
.hx-wrap-lines line { stroke: rgb(255 255 255 / 0.16); stroke-width: 1; }
.hx-fade--goods { animation-delay: 2.6s; }

/* light sliding across the wrapped load */
.hx-goods-sheen {
  fill: rgb(255 255 255 / 0.16);
  animation: hx-goods-sheen 9s var(--ease-in-out) 4s infinite;
}
@keyframes hx-goods-sheen {
  0%   { transform: translateX(1240px); opacity: 0; }
  8%   { opacity: 1; }
  30%  { transform: translateX(1420px); opacity: 0; }
  100% { transform: translateX(1420px); opacity: 0; }
}

/* BPI display panel: a translucent industrial screen with a double frame */
.hx-post { stroke: rgb(255 255 255 / 0.5); stroke-width: 2; }
.hx-board { fill: url(#hxPanel); stroke: rgb(255 255 255 / 0.3); stroke-width: 1.4; }
.hx-board-inner { fill: none; stroke: rgb(169 198 187 / 0.22); stroke-width: 1; }
.hx-board-glow {
  fill: none;
  stroke: rgb(169 198 187 / 0.35);
  stroke-width: 6;
  filter: url(#hxSoft);
  animation: hx-board-glow 7s var(--ease-in-out) 2.4s infinite;
}
@keyframes hx-board-glow {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.85; }
}
.hx-fade--logo { animation-delay: 1.7s; }

/* the sign feels lit: the logo breathes and light sweeps across the face */
.hx-logo {
  transform-box: fill-box;
  transform-origin: center;
  animation: hx-logo-breathe 7s var(--ease-in-out) 2.6s infinite;
}
@keyframes hx-logo-breathe {
  0%, 100% { opacity: 0.86; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.025); }
}
.hx-board-sheen {
  fill: rgb(255 255 255 / 0.18);
  animation: hx-board-sheen 10s var(--ease-in-out) 3.4s infinite;
}
@keyframes hx-board-sheen {
  0%   { transform: translateX(620px); opacity: 0; }
  7%   { opacity: 1; }
  26%  { transform: translateX(940px); opacity: 0; }
  100% { transform: translateX(940px); opacity: 0; }
}

/* pneumatic feed line from the silo */
.hx-pipe-wall { fill: none; stroke: rgb(255 255 255 / 0.45); stroke-width: 20; stroke-linecap: round; }
.hx-pipe-bore { fill: none; stroke: var(--green-900); stroke-width: 17; stroke-linecap: round; }
.hx-fade--pipe { animation-delay: 1.2s; }

/* pellets conveyed along the pipe into the loader (CSS motion path) */
.hx-feed {
  fill: rgb(169 198 187 / 0.9);
  offset-path: path("M30 48 L150 48 C182 48, 207 62, 207 90 L207 104");
  offset-rotate: 0deg;
  animation: hx-feed 2.8s linear 1.6s infinite;
}
.hx-feed--2 { animation-delay: 2.3s; animation-duration: 3.1s; }
.hx-feed--3 { animation-delay: 3s; animation-duration: 2.6s; }
.hx-feed--4 { animation-delay: 3.7s; animation-duration: 3.3s; }
@keyframes hx-feed {
  0%   { offset-distance: 0%; opacity: 0; }
  10%  { opacity: 0.9; }
  85%  { opacity: 0.9; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* heater bands wrapping the barrel */
.hx-band { fill: rgb(255 255 255 / 0.07); stroke: rgb(255 255 255 / 0.25); stroke-width: 1; }

/* temperature zones firing in sequence along the barrel */
.hx-zone {
  fill: var(--green-200);
  opacity: 0.16;
  animation: hx-zone 4.5s var(--ease-in-out) 2.6s infinite;
}
.hx-zone--2 { animation-delay: 2.9s; }
.hx-zone--3 { animation-delay: 3.2s; }
.hx-zone--4 { animation-delay: 3.5s; }
.hx-zone--5 { animation-delay: 3.8s; }
@keyframes hx-zone {
  0%, 100% { opacity: 0.16; }
  12% { opacity: 0.95; }
  40% { opacity: 0.16; }
}

/* control panel above the drive */
.hx-panel { fill: rgb(14 31 26 / 0.8); stroke: rgb(255 255 255 / 0.35); stroke-width: 1.4; }
.hx-screen {
  fill: rgb(169 198 187 / 0.18);
  stroke: rgb(169 198 187 / 0.4);
  stroke-width: 1;
  animation: hx-screen 6s var(--ease-in-out) 3s infinite;
}
@keyframes hx-screen {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}
.hx-screen-l { stroke: rgb(169 198 187 / 0.75); stroke-width: 1.4; }
.hx-fade--panel { animation-delay: 1.4s; }

/* molten polymer glowing at the die lips */
.hx-melt {
  fill: #EAF4EF;
  opacity: 0.25;
  transform-box: fill-box;
  transform-origin: center;
  animation: hx-melt 4s var(--ease-in-out) 2.8s infinite;
}
@keyframes hx-melt {
  0%, 100% { opacity: 0.25; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.35); }
}

/* polymer pellets dropping into the hopper */
.hx-pellet {
  fill: rgb(169 198 187 / 0.85);
  animation: hx-pellet 2.4s cubic-bezier(0.45, 0, 0.75, 0.55) infinite;
}
.hx-pellet--2 { animation-delay: 0.5s; animation-duration: 2.7s; }
.hx-pellet--3 { animation-delay: 1s; animation-duration: 2.2s; }
.hx-pellet--4 { animation-delay: 1.5s; animation-duration: 2.9s; }
.hx-pellet--5 { animation-delay: 1.9s; animation-duration: 2.5s; }
@keyframes hx-pellet {
  0%   { transform: translateY(96px); opacity: 0; }
  12%  { opacity: 0.9; }
  78%  { opacity: 0.9; }
  100% { transform: translateY(186px); opacity: 0; }
}

/* heat rising off the barrel */
.hx-heat-w {
  fill: none;
  stroke: rgb(169 198 187 / 0.4);
  stroke-width: 2;
  stroke-linecap: round;
  animation: hx-heat 5s var(--ease-in-out) 2.6s infinite;
}
.hx-heat-w--2 { animation-delay: 3.4s; animation-duration: 5.8s; }
.hx-heat-w--3 { animation-delay: 4.6s; animation-duration: 5.4s; }
@keyframes hx-heat {
  0%   { opacity: 0; transform: translateY(6px) scaleY(0.85); }
  25%  { opacity: 0.55; }
  100% { opacity: 0; transform: translateY(-30px) scaleY(1.15); }
}

/* winding roll: a new layer rippling outward */
.hx-growth {
  fill: none;
  stroke: rgb(169 198 187 / 0.55);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  animation: hx-growth 6.5s var(--ease-out) 3s infinite;
}
@keyframes hx-growth {
  0%   { opacity: 0; transform: scale(0.72); }
  15%  { opacity: 0.7; }
  100% { opacity: 0; transform: scale(3.25); }
}

/* the whole web breathes very slightly, like film under tension */
.hx-web {
  transform-box: fill-box;
  transform-origin: center;
  animation: hx-tension 9s var(--ease-in-out) 3s infinite;
}
@keyframes hx-tension {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50% { transform: translateY(1.5px) scaleY(1.012); }
}

/* counter-rotating machining ring on the chill roll */
.hx-ring { fill: none; stroke: rgb(255 255 255 / 0.26); stroke-width: 1.2; stroke-dasharray: 2 7; }
.hx-spin--ringrev { animation-duration: 21s; animation-direction: reverse; }

/* soft light nodes where the film web meets the rolls */
.hx-node {
  fill: #EAF4EF;
  opacity: 0.15;
  transform-box: fill-box;
  transform-origin: center;
  animation: hx-node 5.5s var(--ease-in-out) 2.4s infinite;
}
.hx-node--2 { animation-delay: 3.6s; }
.hx-node--3 { animation-delay: 4.8s; }
.hx-node--4 { animation-delay: 6s; }
@keyframes hx-node {
  0%, 100% { opacity: 0.15; transform: scale(1); }
  50% { opacity: 0.75; transform: scale(1.6); }
}

/* ---- operator ----
   Same open line work as the machine — no fills beyond the tablet, same stroke
   weights — so he belongs to the drawing instead of sitting on top of it. The
   descendant selectors below are scoped through .hx-worker rather than marked
   important, because the blanket rule that styles every shape in the figure
   would otherwise outrank a single class. */
.hx-worker path,
.hx-worker line,
.hx-worker circle,
.hx-worker ellipse,
.hx-worker polygon {
  fill: none;
  stroke: rgb(255 255 255 / 0.62);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hx-fade--worker { animation-delay: 2.1s; }
.hx-worker .hx-worker-shadow { fill: rgb(0 0 0 / 0.24); stroke: none; }
.hx-worker .hx-worker-detail { stroke: rgb(255 255 255 / 0.26); stroke-width: 1.1; }
.hx-worker .hx-worker-vest path { stroke: rgb(169 198 187 / 0.45); stroke-width: 1.2; }
.hx-worker .hx-worker-face path { stroke: rgb(255 255 255 / 0.72); stroke-width: 1.3; }
.hx-worker .hx-worker-eye { fill: rgb(255 255 255 / 0.8); stroke: none; }
.hx-worker .hx-worker-hand { fill: rgb(255 255 255 / 0.12); }
.hx-worker .hx-worker-tablet { fill: rgb(14 31 26 / 0.85); }
.hx-worker .hx-worker-screen {
  fill: rgb(169 198 187 / 0.35);
  stroke: none;
  animation: hx-worker-screen 11s var(--ease-in-out) 2.6s infinite;
}

/* One eleven-second round of work. Every part of him runs on that same clock and
   delay, so the beats land together: look left down the line, look right to the
   winder, settle on the tablet, tap it twice, nod at what it says, then lift a
   hand towards the machine. Blinking and breathing run on their own clocks
   underneath, which is what keeps him alive between the beats. */
.hx-worker-head {
  transform-box: view-box;
  transform-origin: 543px 292px;   /* base of the neck, so the head turns on it */
  animation: hx-worker-look 11s var(--ease-in-out) 2.6s infinite;
}
@keyframes hx-worker-look {
  0%, 5%   { transform: rotate(0deg); }
  14%, 22% { transform: rotate(-14deg); }   /* down the line */
  32%, 40% { transform: rotate(12deg); }    /* towards the winder */
  48%, 64% { transform: rotate(5deg); }     /* down to the tablet */
  68%      { transform: rotate(11deg); }    /* nod */
  72%      { transform: rotate(5deg); }
  76%      { transform: rotate(10deg); }
  80%      { transform: rotate(5deg); }
  86%, 92% { transform: rotate(9deg); }     /* back up to the machine */
  100%     { transform: rotate(0deg); }
}
/* the eyes lead the turn, which is what makes it read as looking not tilting */
.hx-worker-gaze { animation: hx-worker-gaze 11s var(--ease-in-out) 2.6s infinite; }
@keyframes hx-worker-gaze {
  0%, 5%   { transform: translateX(0); }
  12%, 22% { transform: translateX(-1.7px); }
  30%, 40% { transform: translateX(1.9px); }
  48%, 80% { transform: translateX(0.7px); }
  86%, 92% { transform: translateX(1.5px); }
  100%     { transform: translateX(0); }
}
/* blinks, off the beat so they never look mechanical */
.hx-worker .hx-worker-eye {
  transform-box: fill-box;
  transform-origin: center;
  animation: hx-worker-blink 11s linear 2.6s infinite;
}
@keyframes hx-worker-blink {
  0%, 19%   { transform: scaleY(1); }
  20%       { transform: scaleY(0.12); }
  21%, 37%  { transform: scaleY(1); }
  38%       { transform: scaleY(0.12); }
  39%, 69%  { transform: scaleY(1); }
  70%       { transform: scaleY(0.12); }
  71%, 100% { transform: scaleY(1); }
}
/* The near arm uses two different motions, because one does not serve both.
   The arm hangs close to vertical, so rotating it about the shoulder sweeps the
   hand sideways — fine for raising it towards the line, useless for pressing
   down on glass. The taps are therefore a short translate straight down (small
   enough that the shoulder does not visibly leave the torso), and the raised
   gesture is a rotation anchored on the shoulder. */
.hx-worker-tap {
  transform-box: view-box;
  transform-origin: 555px 302px;
  animation: hx-worker-tap 11s var(--ease-in-out) 2.6s infinite;
}
@keyframes hx-worker-tap {
  0%, 46%   { transform: translate(0, 0) rotate(0deg); }
  52%       { transform: translate(0.5px, 4px) rotate(0deg); }   /* first tap */
  57%       { transform: translate(0, 0) rotate(0deg); }
  62%       { transform: translate(0.5px, 4px) rotate(0deg); }   /* second tap */
  67%       { transform: translate(0, 0) rotate(0deg); }
  78%, 88%  { transform: translate(0, 0) rotate(-16deg); }       /* hand raised to the line */
  96%, 100% { transform: translate(0, 0) rotate(0deg); }
}
/* and each tap registers */
.hx-worker .hx-tap-ring {
  fill: none;
  stroke: rgb(234 244 239 / 0.8);
  stroke-width: 1.2;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: hx-tap-ring 11s var(--ease-out) 2.6s infinite;
}
@keyframes hx-tap-ring {
  0%, 51% { opacity: 0; transform: scale(0.3); }
  54%     { opacity: 0.85; }
  60%     { opacity: 0; transform: scale(2.2); }
  61%     { opacity: 0; transform: scale(0.3); }
  64%     { opacity: 0.85; }
  70%     { opacity: 0; transform: scale(2.2); }
  100%    { opacity: 0; transform: scale(2.2); }
}
@keyframes hx-worker-screen {
  0%, 49%   { opacity: 0.55; }
  53%       { opacity: 1; }
  58%       { opacity: 0.6; }
  63%       { opacity: 1; }
  69%, 100% { opacity: 0.55; }
}
/* weight shifts with the turn: he pivots on his feet, not on his middle */
.hx-worker-body {
  transform-box: view-box;
  transform-origin: 543px 430px;
  animation: hx-worker-shift 11s var(--ease-in-out) 2.6s infinite;
}
@keyframes hx-worker-shift {
  0%, 5%   { transform: translate(0, 0) rotate(0deg); }
  14%, 22% { transform: translate(-0.6px, 0) rotate(-1.5deg); }
  32%, 40% { transform: translate(0.6px, 0) rotate(1.2deg); }
  48%, 80% { transform: translate(0, -0.6px) rotate(0.3deg); }
  86%, 92% { transform: translate(0.5px, 0) rotate(0.8deg); }
  100%     { transform: translate(0, 0) rotate(0deg); }
}
/* breathing, on its own clock so it never syncs with the round */
.hx-worker-chest {
  transform-box: fill-box;
  transform-origin: bottom;
  animation: hx-worker-breathe 4.2s var(--ease-in-out) infinite alternate;
}
@keyframes hx-worker-breathe {
  from { transform: scaleY(1); }
  to   { transform: scaleY(1.018); }
}

/* rare diagonal gleam sweeping the whole scene */
.hx-gleam { opacity: 0; animation: hx-gleam 13s var(--ease-in-out) 4s infinite; }
@keyframes hx-gleam {
  0%   { opacity: 0; transform: translateX(0); }
  5%   { opacity: 1; }
  24%  { opacity: 0; transform: translateX(1700px); }
  100% { opacity: 0; transform: translateX(1700px); }
}

/* cinematic settle-in of the whole scene */
.hero__anim { animation: hx-settle 1.8s var(--ease-out) both; }
@keyframes hx-settle { from { transform: scale(1.035); } }

/* ---- hover: the line leans in, nothing pops up ----
   Visual emphasis only — no tooltips, cards or extra content. */
.hero__anim:hover .hx-film-halo { opacity: 0.3; }
.hero__anim:hover .hx-pack-outer { stroke: rgb(169 198 187 / 0.9); }
.hero__anim:hover .hx-roll-shine { stroke: rgb(255 255 255 / 0.65); }
.hero__anim:hover .hx-board-glow { opacity: 0.95; }
.hero__anim:hover .hx-dot { fill: #EAF4EF; }
.hero__anim .hx-pack-outer,
.hero__anim .hx-dot,
.hero__anim .hx-board-glow {
  transition: stroke var(--duration-base) var(--ease-out),
              fill var(--duration-base) var(--ease-out),
              opacity var(--duration-base) var(--ease-out);
}

/* The dark band stops mid-scene and fades into the products section, so the line
   work reads as continuing downward rather than being cut off. */
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: clamp(4rem, 10vw, 9rem);
  background:
    linear-gradient(180deg, rgb(18 42 35 / 0.55) 0%, var(--paper-050) 42%, var(--paper-050) 100%);
}
.hero .container { position: relative; z-index: 1; }

/* a thread of the film's language carried into the seam */
.hero__seam {
  position: relative;
  z-index: 2;
  height: clamp(2.5rem, 5vw, 4.5rem);
  background: var(--paper-050);
}
.hero__seam::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, var(--green-300) 0%, transparent 100%);
  opacity: 0.5;
}
.hero__seam::after {
  content: "";
  position: absolute;
  left: calc(50% - 2.5px);
  top: 0;
  width: 5px;
  height: 5px;
  border-radius: var(--radius-full);
  background: var(--green-600);
  animation: hero-seam-drop 4.5s var(--ease-in-out) 3s infinite;
}
@keyframes hero-seam-drop {
  0%, 100% { opacity: 0; transform: translateY(0); }
  20% { opacity: 0.9; }
  70% { opacity: 0; transform: translateY(clamp(2.5rem, 5vw, 4.5rem)); }
}

/* ---- Responsive ---- */
@media (max-width: 1200px) {
  .hero__inner { padding-top: calc(84px + var(--space-8)); }
}

@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; align-items: start; }
  .hero__aside {
    border-left: 0;
    border-top: 1px solid var(--ondark-line);
    padding-left: 0;
    padding-top: var(--space-6);
  }
  .hero__anim { aspect-ratio: 1400 / 560; }
}

@media (max-width: 560px) {
  .hero__frame { padding-inline: var(--space-4); }
  /* Slightly taller box + heavier strokes: at phone width the scene renders at
     roughly a quarter scale, where hairlines would fall below one device pixel. */
  .hero__anim { aspect-ratio: 1400 / 620; }
  .hero__anim .hx-structure line,
  .hero__anim .hx-structure rect,
  .hero__anim .hx-structure polygon,
  .hero__anim .hx-structure-c { stroke-width: 3; }
  .hero__anim .hx-detail line,
  .hero__anim .hx-detail-c { stroke-width: 2; }
  .hero__anim .hx-detail-l { stroke-width: 2.4; }
  .hero__anim .hx-film-core { stroke-width: 2.6; }
  .hero__anim .hx-film-halo { stroke-width: 42; }
  /* The edges are real geometry now, so they must not be nudged apart — moving
     them would peel them off the filled surface they bound. Weight only. */
  .hero__anim .hx-film-edge { stroke-width: 2.2; }
  .hero__anim .hx-web-ribs line { stroke-width: 1.6; }
  .hero__anim .hx-worker path,
  .hero__anim .hx-worker line,
  .hero__anim .hx-worker circle,
  .hero__anim .hx-worker polygon { stroke-width: 2.6; }
  .hero__anim .hx-worker .hx-worker-detail,
  .hero__anim .hx-worker .hx-worker-face path { stroke-width: 2; }
  .hero__anim .hx-pipe-wall { stroke-width: 24; }
  .hero__anim .hx-pipe-bore { stroke-width: 19; }
  .hero__anim .hx-post { stroke-width: 3.4; }
  .hero__anim .hx-board { stroke-width: 2.4; }
  .hero__anim .hx-accent path { stroke-width: 3.4; }
  .hero__anim .hx-pack,
  .hero__anim .hx-pack--faint { stroke-width: 2.4; }
  .hero__anim .hx-pack-outer { stroke-width: 3.4; }
  .hero__anim .hx-goods rect,
  .hero__anim .hx-goods ellipse { stroke-width: 3; }
  .hero__anim .hx-wrap { stroke-width: 2; }
  /* drop the finest texture so the silhouette stays clean when small */
  .hero__anim .hx-ring,
  .hero__anim .hx-seam { display: none; }
}