/* ==========================================================================
   The furrow — signature motif.
   A bent diagonal lifted from the logo's plowed fields. It shapes section
   edges, drifts as parallax bands, and drives the preloader.
   ========================================================================== */

/* --- Section edges --------------------------------------------------------
   A section with .furrow-top meets the one above along a curve rather than a
   straight line, so each act plows into the next. Margin pulls it up over the
   preceding section by the depth of the curve, otherwise the clip just leaves
   a gap of page background.
   -------------------------------------------------------------------------- */

.furrow-top {
  clip-path: url(#furrow-top);
  margin-block-start: clamp(-88px, -6vw, -40px);
  padding-block-start: clamp(64px, 8vw, 128px);
}

.furrow-top--alt {
  clip-path: url(#furrow-top-alt);
}

/* Light meeting light. Everywhere else a furrow edge has a photograph or a
   dark panel on one side and the curve reads on its own; between two pale
   tones the 3% step is invisible and the boundary looks like a straight line.
   drop-shadow follows the clip-path silhouette exactly — a border or a
   pseudo-element can only ever draw the element's rectangle — so this is a
   hairline along the actual curve, at whatever depth the section's height
   gives it. */
.furrow-top--hairline {
  filter: drop-shadow(0 -1px 0 rgb(35 31 32 / 0.14));
}

/* Safari occasionally drops an SVG clip-path on a composited, transformed
   ancestor. Falling back to no clip is correct — the section simply gets a
   straight edge, which is a cosmetic loss, not a broken layout. */
@supports not (clip-path: url(#furrow-top)) {
  .furrow-top {
    clip-path: none;
    margin-block-start: 0;
  }
}

/* A floating band: both edges bent, negative margin on both sides so it
   overlaps the section above AND below — for a full-bleed section (e.g. a
   video) that needs its own curve at both boundaries rather than relying on
   the next section's top curve. */
.furrow-band {
  clip-path: url(#furrow-band);
  margin-block: clamp(-88px, -6vw, -40px);
  padding-block: clamp(64px, 8vw, 128px);
}

@supports not (clip-path: url(#furrow-band)) {
  .furrow-band {
    clip-path: none;
    margin-block: 0;
  }
}

/* --- Parallax bands -------------------------------------------------------
   Three strokes at different depths. Positioned absolutely inside a section,
   translated by furrow.js at 0.15 / 0.35 / 0.6 of scroll.
   -------------------------------------------------------------------------- */

.furrows {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.furrows svg {
  position: absolute;
  inset-inline-start: 50%;
  inline-size: max(1440px, 130%);
  block-size: auto;
  transform: translateX(-50%);
  overflow: visible;
}

.furrow-line {
  fill: none;
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}

.furrow-line--1 {
  stroke: var(--field);
  opacity: 0.28;
}
.furrow-line--2 {
  stroke: var(--olive);
  opacity: 0.22;
}
.furrow-line--3 {
  stroke: var(--earth);
  opacity: 0.18;
}

/* On dark sections the strokes need to be light to stay visible at all. */
[data-bg="field"] .furrow-line,
[data-bg="earth"] .furrow-line,
[data-bg="stone-deep"] .furrow-line,
[data-bg="ink"] .furrow-line {
  stroke: var(--paper);
  opacity: 0.16;
}

/* Section content must sit above the decorative bands.
   z-index only — do NOT set position here. `.section > .act__inner` is two
   classes and would out-specify the `position: sticky` that pins the acts in
   sections.css, silently turning every pinned section back into a normal one.
   Sticky is already a positioned value, so z-index applies without help. */
.section > .container {
  position: relative;
  z-index: 1;
}

.section > .act__inner,
.section > .values__pin {
  z-index: 1;
}

/* --- Media slots ----------------------------------------------------------
   Placeholder for the eucalyptus footage. Swaying strokes stand in for the
   real sway so the acts can be laid out and reviewed at the right scale.
   Replaced in place — the slot keeps its box, only the contents change.
   -------------------------------------------------------------------------- */

.media-slot {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--ink-05);
}

.media-slot__sway {
  inline-size: 100%;
  block-size: 100%;
}

.sway-line {
  fill: none;
  stroke: var(--field);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.35;
  transform-origin: bottom center;
}

[data-bg="field"] .sway-line,
[data-bg="earth"] .sway-line,
[data-bg="stone-deep"] .sway-line {
  stroke: var(--paper);
  opacity: 0.4;
}

.media-slot__note {
  position: absolute;
  inset-block-end: var(--u-4);
  inset-inline-start: var(--u-4);
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  letter-spacing: var(--ls-label);
  color: var(--t-muted);
}