/* Southern Cross Fertilisers — homepage, Option E ("the stockpile")
   Layered on top of hero-d.css. The hero photograph, masthead and every band
   below the fold are Option D unchanged; this file adds the centred claim
   and the foreground stockpile that climbs over the photograph on scroll,
   the way the treed hills do on fora.so — but built from granulated
   fertiliser and fading into the deep phosphate green rather than black.

   Motion is driven by one custom property, --p (0 at the top of the page,
   1 when the hero has scrolled fully past), set by the script in
   hero-e.html. With --p at 0 the composition is static, which is also the
   reduced-motion state. */

.hero-e {
  --p: 0;
  /* How far each layer travels over one hero-height of scroll, as a share
     of the hero height. The front layer moves fastest and the hero image
     drifts up slightly, which is what sells the depth. */
  --rise-back:  0.18;
  --rise-mid:   0.34;
  --rise-front: 0.56;
  --drift-media: 0.12;

  overflow: visible;         /* the stockpile is allowed below the hero's edge */
  z-index: 2;                /* and sits over the landing band beneath */
}

/* The photograph still needs clipping — only the mounds spill out. */
.hero-e .hero-d__media { overflow: hidden; }
.hero-e .hero-d__media img {
  object-position: 50% 58%;
  transform: translate3d(0, calc(var(--p) * var(--drift-media) * -100%), 0) scale(1.06);
  transform-origin: 50% 40%;
  will-change: transform;
}

/* The claim sits in the upper half of the frame now, above the pile. The
   left scrim is dropped and the base scrim is reshaped: the copy no longer
   sits in the lowest band, so the darkest stops move up to carry it. */
.hero-e .hero-d__scrim--left { display: none; }
.hero-e .hero-d__scrim--base {
  background: linear-gradient(0deg,
    rgba(8, 33, 8, 0.10) 0%,
    rgba(8, 33, 8, 0.42) 30%,
    rgba(8, 33, 8, 0.62) 52%,
    rgba(8, 33, 8, 0.48) 70%,
    rgba(8, 33, 8, 0.18) 100%);
}
.hero-e .hero-d__scrim--top {
  background: linear-gradient(180deg,
    rgba(8, 33, 8, 0.78) 0%,
    rgba(8, 33, 8, 0.40) 18%,
    rgba(8, 33, 8, 0.10) 36%);
}

.hero-e__inner {
  justify-content: flex-start;
  align-items: center;
  padding-top: clamp(96px, 13vh, 150px);
  text-align: center;
  /* The copy recedes slightly as the pile rises, so the pile reads as
     coming toward the reader rather than the headline running away. */
  transform: translate3d(0, calc(var(--p) * -6vh), 0);
  opacity: calc(1 - var(--p) * 0.9);
  will-change: transform, opacity;
}
.hero-e__copy { max-width: 1040px; }

.hero-e__eyebrow {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(10.5px, 0.9vw, 12px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-muted);       /* 8.2 on the deep-green scrim */
  margin: 0 0 clamp(14px, 1.8vw, 22px);
}
.hero-e h1 {
  font-size: clamp(2.125rem, 5.2vw, 4.4rem);
  margin-bottom: clamp(14px, 1.8vw, 22px);
}
.hero-e__standfirst {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.55;
  color: var(--bone-muted);
  max-width: 52ch;
  margin: 0 auto clamp(20px, 2.4vw, 30px);
  text-wrap: pretty;
}

/* On medium screens the deliberate Laptop L break would combine with a
   natural wrap and turn the headline into three lines. Let the browser find
   the cleanest two-line measure there; the colour change stays inline. */
@media (min-width: 641px) and (max-width: 1050px) {
  .hero-e h1 br { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-e__copy > * { animation: hero-d-rise 640ms cubic-bezier(0.22, 0.61, 0.36, 1) both; }
  .hero-e__copy > :nth-child(2) { animation-delay: 80ms; }
  .hero-e__copy > :nth-child(3) { animation-delay: 160ms; }
  .hero-e__copy > :nth-child(4) { animation-delay: 240ms; }
}

/* ------------------------------------------------------------- stockpile */

.mounds {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
}
.mounds__layer {
  position: absolute;
  left: 50%;
  bottom: 0;
  /* Wider than the viewport so the edges never show during the rise and
     the composition holds on ultrawide screens. Height follows width, so
     the pile scales with the frame like the fora.so hills do. */
  width: max(100vw, 1280px);
  margin-left: calc(max(100vw, 1280px) / -2);
  display: block;
  line-height: 0;
  will-change: transform;
}
.mounds__layer img { width: 100%; height: auto; display: block; }

/* Resting positions are a share of each layer's OWN height (percentages in
   translate refer to the element), so the crests land in the same place at
   every viewport width. The rise is in viewport heights so the three layers
   pass each other at the same rate whatever size the images render at. */
.mounds__layer--back  { --rest: 34%; --rise: var(--rise-back); }
.mounds__layer--mid   { --rest: 46%; --rise: var(--rise-mid); }
.mounds__layer--front { --rest: 56%; --rise: var(--rise-front); }
.mounds__layer {
  transform: translate3d(0, calc(var(--rest) - var(--p) * var(--rise) * 100svh), 0);
}

/* The ground each layer fades into. Every layer carries its own fade so its
   bottom edge is never exposed when a faster layer in front of it moves on;
   the fade is a child, so it travels with the layer. Each reaches solid deep
   green before the image's bottom edge. The extents are sized so that at
   rest none of the three reaches the landing band's copy — the front fade is
   the longest and lands about 60px short of the eyebrow at 1440x900. */
.mounds__fade {
  position: absolute;
  left: -2%;
  right: -2%;
  top: var(--fade-top, 30%);
  height: var(--fade-h, 120%);
  background: linear-gradient(180deg,
    rgba(8, 33, 8, 0) 0%,
    rgba(8, 33, 8, 0.55) 18%,
    rgba(8, 33, 8, 0.90) 32%,
    var(--green-deep) 40%);
}
.mounds__layer--back  { --fade-top: 50%; --fade-h: 60%; }
.mounds__layer--mid   { --fade-top: 45%; --fade-h: 70%; }
.mounds__layer--front { --fade-top: 30%; --fade-h: 120%; }

/* The band the stockpile lands on. Extra top padding leaves room for the
   pile to settle; the copy is pushed below its lowest resting point. */
.landing {
  position: relative;
  z-index: 1;
  padding-top: clamp(320px, 40vh, 420px);
  padding-bottom: clamp(56px, 7vw, 96px);
}
.landing__inner { max-width: 820px; text-align: center; }
.landing__text {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.3vw, 1.85rem);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--bone);
  margin: 0;
  text-wrap: balance;
}

.hero-e .scroll-cue { z-index: 4; opacity: calc(1 - var(--p) * 3); }

@media (prefers-reduced-motion: reduce) {
  .hero-e { --p: 0 !important; }
  .hero-e .hero-d__media img { transform: scale(1.02); }
}

@media (max-width: 900px) {
  /* Option D lets the hero grow on small screens; here it must stay one
     viewport tall so the pile sits at the bottom of the first screen. */
  .hero-e { height: 100svh; max-height: none; min-height: 680px; }
  .hero-e__inner { padding-top: clamp(96px, 14vh, 140px); }
  .hero-e .hero-d__scrim--base {
    background: linear-gradient(0deg,
      rgba(8, 33, 8, 0.10) 0%,
      rgba(8, 33, 8, 0.55) 30%,
      rgba(8, 33, 8, 0.78) 55%,
      rgba(8, 33, 8, 0.62) 78%,
      rgba(8, 33, 8, 0.30) 100%);
  }
  /* Narrow frames make the wide layers small, so they are scaled up a
     little — but not so far that both crests leave the frame. The pile's
     crests sit at roughly 10% and 90% of the image width, so at 150vw they
     land just outside the viewport edges and their shoulders show; wider
     than that and the phone sees only the flat valley. Rest positions drop
     so more of each layer shows above the fold. */
  .mounds__layer { width: max(150vw, 560px); margin-left: calc(max(150vw, 560px) / -2); }
  .mounds__layer--back  { --rest: 24%; }
  .mounds__layer--mid   { --rest: 34%; }
  .mounds__layer--front { --rest: 44%; }
  .landing { padding-top: clamp(220px, 36vh, 320px); }
}

@media (max-width: 640px) {
  .hero-e .hero-d__media img { object-position: 55% 45%; }
  /* The portrait layer set has its crests at ~12% and ~88% of a 1200px
     frame, so it only needs a little bleed past the viewport edges. */
  .mounds__layer { width: max(130vw, 420px); margin-left: calc(max(130vw, 420px) / -2); }
  .mounds__layer--back  { --rest: 12%; --fade-top: 70%; --fade-h: 60%; }
  .mounds__layer--mid   { --rest: 22%; --fade-top: 65%; --fade-h: 80%; }
  .mounds__layer--front { --rest: 32%; --fade-top: 55%; --fade-h: 110%; }
  /* The layers are short against a tall phone viewport, so the fades start
     lower than on desktop or the front layers' fades green-out the back
     ridge's crests. Each still reaches solid green before its image ends
     (fade-top + 0.4 x fade-h stays under 100%). */
  .hero-e__standfirst { max-width: none; }
  .hero-e__copy .btn { width: 100%; min-height: 52px; }
}

/* ------------------------------------------------- smoothness: CSS timeline
   The JS path sets --p one frame after the scroll event, so the layers lag
   the page by a frame and the motion reads as a judder. Where the browser
   supports scroll-driven animations the same motion is expressed as
   keyframes on a scroll() timeline, which the compositor advances in lock
   step with the scroll — no JS, no lag. The keyframes resolve each layer's
   own --rest/--rise, so the tuning above still applies. The script in the
   page detects support and stays out of the way. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-e .mounds__layer,
    .hero-e .hero-d__media img,
    .hero-e__inner,
    .hero-e .scroll-cue {
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: scroll(root block);
      animation-range: 0 100svh;
    }
    .hero-e .mounds__layer      { animation-name: hero-e-layer; }
    .hero-e .hero-d__media img  { animation-name: hero-e-media; }
    .hero-e__inner              { animation-name: hero-e-copy; }
    .hero-e .scroll-cue         { animation-name: hero-e-cue; }
  }
}
@keyframes hero-e-layer {
  from { transform: translate3d(0, var(--rest), 0); }
  to   { transform: translate3d(0, calc(var(--rest) - var(--rise) * 100svh), 0); }
}
@keyframes hero-e-media {
  from { transform: translate3d(0, 0, 0) scale(1.06); }
  to   { transform: translate3d(0, calc(var(--drift-media) * -100%), 0) scale(1.06); }
}
@keyframes hero-e-copy {
  from { transform: translate3d(0, 0, 0); opacity: 1; }
  to   { transform: translate3d(0, -6vh, 0); opacity: 0.1; }
}
@keyframes hero-e-cue {
  from { opacity: 1; }
  33%  { opacity: 0; }
  to   { opacity: 0; }
}