/* 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 ---- */
.hx-film-base { fill: none; stroke: rgb(255 255 255 / 0.5); stroke-width: 1.75; }
.hx-film-band {
  fill: none;
  stroke: rgb(169 198 187 / 0.13);
  stroke-width: 16;
  stroke-linecap: round;
}
/* faint micro-flow underlay */
.hx-film-flow {
  fill: none;
  stroke: var(--green-200);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 0.4 2.2;
}
/* light sheens travelling along the web (the premium touch) */
.hx-sheen {
  fill: none;
  stroke: #EAF4EF;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 10 90;
  filter: url(#hxBlur);
}
.hx-sheen--b { stroke-width: 6; stroke: rgb(169 198 187 / 0.5); }

/* 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; }
.hx-sheen.hx-fade { animation: hx-fadein 1.1s var(--ease-out) 2.2s forwards, hx-travel 5.4s linear 2.2s infinite; }
.hx-sheen--b.hx-fade { animation: hx-fadein 1.1s var(--ease-out) 2.2s forwards, hx-travel 5.4s linear -0.5s 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 rings */
.hx-pack { fill: none; stroke: rgb(255 255 255 / 0.3); stroke-width: 1.4; }
.hx-pack--faint { stroke: rgb(255 255 255 / 0.16); }
.hx-pack-outer { fill: none; stroke: rgb(169 198 187 / 0.6); stroke-width: 2; }
.hx-seam { stroke: rgb(169 198 187 / 0.3); stroke-width: 1; }

/* ---- 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 */
.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; }
@keyframes hx-drift { to { translate: 14px -10px; } }

/* 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; }
}

/* signage board on a post carrying the BPI logo */
.hx-post { stroke: rgb(255 255 255 / 0.5); stroke-width: 2; }
.hx-board { fill: rgb(14 31 26 / 0.72); stroke: rgb(255 255 255 / 0.28); stroke-width: 1.4; }
.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); }
}

/* 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); } }

/* the dark band stops mid-image: seam into the light products section */
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: clamp(4rem, 10vw, 9rem);
  background: var(--paper-050);
}
.hero .container { position: relative; z-index: 1; }

/* ---- 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-base { stroke-width: 3.4; }
  .hero__anim .hx-film-band { stroke-width: 22; }
  .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; }
}