/* ==========================================================================
   Terrain — Figma "Terrain - Page" 650:425 (1920 x 8570)
     hero          0     → 1396
     terrain 1     1396  → 2499
     terrain 2     2499  → 3495
     terrain 3     3495  → 4580
     valley plate  3624  → 5416   (absolute, behind)
     dusk gradient 4567  → 6312   (absolute, above)
     statement     5376
     frog          5655  → 7303
     closing       7354  → 8008
     footer        8008  → 8570
   ========================================================================== */

.terrain { position: relative; background: var(--c-page); }

/* Sections sit above the valley plate but below the dusk gradient.  The
   closing band opts out: nothing overlaps it, and a stacking context there
   would strand its artwork's mix-blend-mode. */
.terrain > section:not(.terrain__closing),
.terrain__void,
.terrain__gap { position: relative; z-index: 1; }

/* ---- Hero (video 1920 x 1396) ------------------------------------------ */
.terrain__hero { height: 139.6rem; }

/* Figma: linear-gradient(#000 → transparent) over the full frame, normal blend */
.terrain__hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

/* Bricolage exposes an `opsz` axis and the Figma file does not use one setting
   throughout: the animated editorial paragraphs sit at their natural optical
   size, while the display headings and statements are pinned to opsz 14.
   Measured against the Figma renders — natural sizing leaves these ~8.2% narrow. */
.terrain__hero .page-hero__statement {
  font-variation-settings: 'opsz' 14, 'wdth' 100;
  left: 7.1rem;
  top: 39.4rem;
  width: 167.4rem;
}

/* ---- The three terrain chapters ---------------------------------------- */
.terrain-1, .terrain-2, .terrain-3 {
  width: 100%;
  overflow: hidden;
}

.terrain-1 { height: 110.3rem; }
.terrain-2 { height: 99.6rem; }
.terrain-3 { height: 108.5rem; }

.terrain__heading {
  position: absolute;
  font-family: var(--f-editorial);
  font-weight: var(--fw-light);
  font-size: var(--fs-heading);
  line-height: normal;
  font-variation-settings: 'opsz' 14, 'wdth' 100;
  color: var(--c-ink);
  white-space: nowrap;
}

.terrain__icon { position: absolute; display: block; }

/* The plates grow as they scroll in, the same move as the Manifesto's.  Each
   one is anchored on the edge that faces its copy, so it opens out into the
   empty half of the spread and never reaches across the text.  The 0.705
   start scale lives in js/animations.js; the origins belong here, because
   which edge is pinned is a fact about the layout, not about the motion. */
.terrain__figure {
  position: absolute;
  overflow: hidden;
  margin: 0;
  transform-origin: 100% 0;        /* top right — copy sits to the right */
  will-change: transform;
}

/* Terrain 2 mirrors the spread (copy left, plate right), so that plate is
   anchored on its left edge and grows the other way. */
.terrain-2 .terrain__figure { transform-origin: 0 0; }

.terrain__figure img { width: 100%; height: 100%; object-fit: cover; }

.terrain__block { position: absolute; }
.terrain__block .eyebrow { position: absolute; left: 0; top: 0; white-space: nowrap; }
.terrain__body {
  position: absolute;
  left: 0;
  top: 5.5rem;
  width: 100%;
  font-family: var(--f-body);
  font-weight: var(--fw-light);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--c-ink);
}

/* Terrain 1 — Climate & Microclimate (Figma 650:667) */
.terrain-1 .terrain__heading { left: 106.4rem; top: 10rem; }
.terrain-1 .terrain__icon    { left: 99rem;    top: 11.7rem;  width: 5rem; height: 5rem; }
.terrain-1 .terrain__figure  { left: 43.2rem;  top: 11.8rem;  width: 50.3rem; height: 37.7rem; }
.terrain-1 .terrain__block   { left: 99.5rem;  width: 69.5rem; }
.terrain-1 .terrain__block--a { top: 23.4rem; }
.terrain-1 .terrain__block--b { top: 61.9rem; }

/* Terrain 2 — Geomorphology & Landscape (Figma 650:674), right-aligned */
.terrain-2 .terrain__heading {
  left: 12.5rem;
  top: 11.8rem;
  width: 100rem;
  line-height: 7rem;
  text-align: right;
  white-space: normal;
}
.terrain-2 .terrain__icon    { left: 8.1rem;   top: 13rem;    width: 4.9rem; height: 4.7rem; }
.terrain-2 .terrain__figure  { left: 118.5rem; top: 12.5rem;  width: 31.4rem; height: 41.8rem; }
.terrain-2 .terrain__block   { left: 37.8rem;  width: 73.7rem; text-align: right; }
.terrain-2 .terrain__block .eyebrow { left: auto; right: 0; }
.terrain-2 .terrain__block--a { top: 23.8rem; }
.terrain-2 .terrain__block--b { top: 58.3rem; }

/* Terrain 3 — Soil Profile & Terroir (Figma 650:685) */
.terrain-3 .terrain__heading { left: 106.7rem; top: 11.3rem; }
.terrain-3 .terrain__icon    { left: 98.7rem;  top: 12.762rem; width: 5.3rem; height: 5.3rem; }
.terrain-3 .terrain__figure  { left: 48.5rem;  top: 12.9rem;   width: 46rem; height: 46.2rem; }
.terrain-3 .terrain__block   { left: 98.5rem;  width: 69.5rem; }
.terrain-3 .terrain__block--a { top: 24.7rem; }
.terrain-3 .terrain__block--b { top: 59.2rem; }

/* ---- Valley plate (Figma "image 19" 650:428) ---------------------------- */
.terrain__valley {
  position: absolute;
  left: 0;
  top: 362.4rem;
  width: 192rem;
  height: 179.2rem;
  z-index: 0;
  background: var(--c-black);
  pointer-events: none;
}
.terrain__valley img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Empty run between the last chapter and the frog scene */
.terrain__void { height: 107.5rem; }
.terrain__gap  { height: 5.1rem; }

/* ---- Dusk gradient (Figma "Gradient" 701:1782) -------------------------- */
.terrain__dusk { position: absolute; left: 0; top: 0; width: 100%; z-index: 2; pointer-events: none; }
.terrain__dusk > div { position: absolute; left: 0; width: 100%; }
.terrain__dusk-in {
  top: 456.7rem; height: 85.1rem;
  background: linear-gradient(179.6389deg, rgba(0, 0, 0, 0) 0.70107%, #000 98.843%);
}
.terrain__dusk-solid { top: 541.6rem; height: 23.9rem; background: var(--c-black); }
.terrain__dusk-out {
  top: 565.4rem; height: 65.8rem;
  background: linear-gradient(359.7208deg, rgba(0, 0, 0, 0) 0.70107%, #000 98.843%);
}

/* ---- Centred statement over the dusk (Figma 650:1250) ------------------- */
.terrain__statement {
  position: absolute;
  left: 50%;
  top: 537.6rem;
  width: 108.6rem;
  margin-left: -54.3rem;
  z-index: 3;
  font-family: var(--f-editorial);
  font-weight: var(--fw-light);
  font-size: var(--fs-editorial);
  line-height: var(--lh-statement);
  font-variation-settings: 'opsz' 14, 'wdth' 100;
  color: #676767;
  text-align: center;
}

/* ==========================================================================
   Frog scene (Figma 650:1259) — blur → spotlight → facts
   Same three-part reveal as the home map.
   ========================================================================== */
.frog {
  position: relative;
  left: -0.5rem;
  width: 192.5rem;
  height: 164.8rem;
  overflow: hidden;
  background: var(--c-black);
}

.frog__layer { position: absolute; inset: 0; }
.frog__layer img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }

/* Figma "Frogo Image - Blur": blur 15px over rgba(0,0,0,.4).  Bled 30px past
   the frame so the blur's own faded edge is cropped — see css/home.css. */
.frog__layer--blur {
  inset: -3rem;
  filter: blur(1.5rem);
  opacity: 0;
  transition: opacity 0.9s var(--ease-out);
}
.frog__layer--blur::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); }

/* Only the stacked layout has a band below the plate to carry. */
.frog__layer--tail { display: none; }

/* The spotlight and its ring, sized like the home map's — this scene is the
   same component idea and the client's reference shot confirms it.  The
   `Circle` node on the Terrain frame is 388 wide at opacity 0, which is the
   state it STARTS from rather than the size it opens to; taken as the finished
   size it made the frog's spotlight half the map's.  In the reference shot the
   ring fits at r 264.4 of 1377 px, and the copy beside it pins the scale at
   about 1.35 design px per shot px: r 356, against the map's own 353.  Same
   circle, so the same numbers — clip to 33.1rem inside a 70.6rem ring, opening
   from 0.31 exactly as the map does.
   The ring itself was simply missing here; it is the map's asset, which is the
   same dotted circle. */
.frog__layer--sharp {
  clip-path: circle(10.3rem at calc(50% - 0.05rem) 50%);
  transition: clip-path 1s var(--ease-inout);
}

.frog__ring {
  position: absolute;
  left: calc(50% - 0.05rem);
  top: 82.4rem;                    /* Figma Circle centre: 630 + 194 */
  width: var(--ring-d);
  height: var(--ring-d);
  transform: translate(-50%, -50%) scale(0.31);
  opacity: 0;
  transition: transform 1s var(--ease-inout), opacity 0.7s var(--ease-out);
  pointer-events: none;
  z-index: 2;
}

.frog.is-focused .frog__layer--blur  { opacity: 1; }
.frog.is-focused .frog__layer--sharp { clip-path: circle(33.1rem at calc(50% - 0.05rem) 50%); }
.frog.is-focused .frog__ring { transform: translate(-50%, -50%) scale(1); opacity: 1; }

/* Facts — parked off-canvas right (x 1925).  Same transform-based travel and
   per-card trigger as the home map.

   The three marks do not sit flush.  Measured off the client's reference shot
   of the focused scene (1377 px wide).  Its dotted ring fits at centre
   (706.5, 391.2) r 264.4, and each mark's copy starts at 0.951, 1.250 and
   0.963 of that radius from the centre — the middle one steps out, the other
   two sit back, which is what makes the group read as embracing the circle
   instead of as a flush column.
   The shot's scale was taken from the body copy, which is 365 wide by Figma
   and renders 266 and 271 px in the shot: about 1.35 design px per shot px.
   That puts the ring's centre at x 954 — the page centre, which is the check
   that the scale is right — and the three copy blocks at x 1299, 1405 and
   1303.  Minus each mark's own icon inset, that is the `--fact-x` below.
   `--fact-x` is the resting distance from the centre line and the parked
   position is derived from it, so all three still start off-canvas together
   at Figma's 1925. */
.frog-fact {
  position: absolute;
  --fact-x: 33.15rem;
  left: calc(50% + var(--fact-x));
  width: var(--fact-w);
  color: var(--c-white);
  opacity: 0;
  z-index: 3;
  transform: translateX(calc(96.25rem - var(--fact-x)));
  transition: transform 0.8s var(--ease-out), opacity 0.5s var(--ease-out);
}

.frog-fact.is-in { transform: none; opacity: 1; }

/* Icon over label over sentence, in flow — the same three lines the home map's
   fact cards and the sustainability marks are built from, so the three scenes
   present a point the same way.
   This was absolutely positioned, which let each of the three drift: the body
   was hand-placed per icon at top 5.6/5.2/4.1rem over icons 4/4.2/3.6rem tall,
   so the gap under the icon ran 16, 10 and 5px, and it was inset 2.9/2.1/1.4rem
   from the icon's left edge, so the icon hung out to the left of its own label
   — neither of which the other two scenes do.  In flow the gap is one number
   for all three and the icon is flush with the text. */
.frog-fact__icon { display: block; }

.frog-fact__body {
  margin-top: var(--fact-gap);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
}
.frog-fact__body b { display: block; font-weight: var(--fw-extrabold); text-transform: uppercase; }

/* The icons keep their drawn sizes: they are not one shape scaled to one box
   but three, sized in Figma to carry the same optical weight — a wide island,
   an upright swirl, a narrow drop. */
/* Placed by the shared rule documented in home.css: tops 24rem apart, the
   first 24rem + half the last card's height above the ring centre, and the x
   the ring's reach at each icon plus the shared 18rem standoff. */
.frog-fact--endemic { top: 43.1rem;  --fact-x: 35.84rem; }
.frog-fact--endemic .frog-fact__icon { width: 6.9rem; height: 4rem; }

.frog-fact--river { top: 72.3rem;  --fact-x: 43.3rem; }
.frog-fact--river .frog-fact__icon { width: 4rem; height: 4.2rem; }

.frog-fact--waters { top: 101.5rem;  --fact-x: 37.69rem; }
.frog-fact--waters .frog-fact__icon { width: 2.8rem; height: 3.6rem; }

.frog.is-static .frog__layer--blur,
.frog.is-static .frog__layer--sharp,
.frog.is-static .frog__ring,
.frog.is-static .frog-fact { transition: none; }

/* ---- Closing band (Figma 704:2174) ------------------------------------- */
.terrain__closing {
  height: 65.4rem;
  overflow: hidden;
}