/* Apex Agri v2. Page styles only; scrollcraft.css is the mechanism. */

:root {
  --sc-canvas:     #131C16;
  --sc-surface:    #1C2820;
  --sc-ink:        #F3EDE0;
  --sc-ink-soft:   #C9C0AC;
  --sc-accent:     #C9A45C;
  --sc-accent-ink: #131C16;
  --sc-font-display: "Cormorant", "Iowan Old Style", Georgia, serif;
  --sc-font-text:    "Geist", system-ui, sans-serif;
  --sc-shadow-color: 140 25% 5%;

  --gold-line: color-mix(in oklab, var(--sc-accent) 88%, var(--sc-ink));
  --bar-h: clamp(3.5rem, 3rem + 1.4vw, 4.5rem);
}

html, body { background: var(--sc-canvas); color: var(--sc-ink); }
body {
  font-family: var(--sc-font-text);
  font-size: var(--sc-t-base);
  line-height: var(--sc-leading-body);
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- type -- */
.display {
  margin: 0;
  font-family: var(--sc-font-display);
  font-weight: 600;
  font-size: var(--sc-t-2xl);
  line-height: 1.02;
  letter-spacing: -0.012em;
  text-wrap: balance;
  color: var(--sc-ink);
}
.display em { font-style: italic; font-weight: 500; color: var(--gold-line); }
.display--hero { font-size: clamp(2.6rem, 1.4rem + 4.2vw, 5.4rem); line-height: 0.98; }
.display--close { font-size: clamp(2.3rem, 1.5rem + 2.5vw, 4rem); }
.lede {
  margin: 0;
  max-width: 34ch;
  font-size: var(--sc-t-lg);
  line-height: 1.45;
  color: var(--sc-ink);
  text-wrap: pretty;
}
.body {
  margin: 0;
  max-width: 40ch;
  color: var(--sc-ink-soft);
  font-size: var(--sc-t-base);
  line-height: 1.62;
  text-wrap: pretty;
}
.hint {
  margin: var(--sc-2) 0 0;
  font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
  color: var(--gold-line);
}

/* ---------------------------------------------------------------- copy -- */
.copy { display: grid; gap: var(--sc-4); position: absolute; z-index: 2; }
.copy .display + .body,
.copy .display + .lede { margin-top: var(--sc-1); }
.copy--hero { width: fit-content; max-width: min(34rem, 52vw); gap: var(--sc-5); bottom: clamp(2rem, 6vh, 4.5rem); }
.copy--spread { max-width: 30rem; }
.copy--spread .body { max-width: 34ch; }
.sc-copy--trail.copy { justify-items: end; }
.copy--hero .quote { justify-self: start; margin-top: var(--sc-2); }
.copy--top {
  left: var(--sc-gutter);
  top: calc(var(--bar-h) + clamp(2rem, 8vh, 6rem));
  max-width: 30rem;
}
.copy--column {
  left: var(--sc-gutter);
  top: 50%;
  translate: 0 -50%;
  max-width: 26rem;
}
.copy--close {
  left: 50%;
  bottom: clamp(2.5rem, 9vh, 6.5rem);
  translate: -50% 0;
  width: min(64rem, calc(100vw - 2 * var(--sc-gutter)));
  justify-items: center;
  text-align: center;
}
.copy--close .body { max-width: 46ch; }
.copy--close .quote { margin-top: var(--sc-3); }
.credit-corner {
  position: absolute; right: var(--sc-gutter); bottom: var(--sc-4); z-index: 3; margin: 0;
  font-size: 0.7rem; letter-spacing: 0.03em; color: var(--sc-ink-soft); opacity: 0.6;
  transition: opacity var(--sc-d-fast) var(--sc-ease-out);
}
.credit-corner a { color: inherit; text-decoration: none; }
.credit-corner:hover, .credit-corner:focus-within { opacity: 1; }
.credit-corner a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.credit-corner a:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: 2px; }
.proofline { margin: var(--sc-2) 0 0; font-size: var(--sc-t-sm); letter-spacing: 0.02em; color: var(--gold-line); text-wrap: balance; }

/* ---------------------------------------------------------------- scrims --
   Siblings of the copy, windowed with it, shaped to where the copy sits. */
.scrim { position: absolute; pointer-events: none; z-index: 1; opacity: 0; will-change: opacity; }
.scrim--lead {
  inset: auto auto 0 0; width: min(84rem, 96vw); height: 86vh;
  background: radial-gradient(110% 100% at 0% 100%,
    color-mix(in oklab, var(--sc-canvas) 92%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 78%, transparent) 36%,
    color-mix(in oklab, var(--sc-canvas) 40%, transparent) 58%,
    transparent 78%);
}
.scrim--trail {
  inset: auto 0 0 auto; width: min(70rem, 94vw); height: 78vh;
  background: radial-gradient(110% 100% at 100% 100%,
    color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 84%, transparent) 40%,
    color-mix(in oklab, var(--sc-canvas) 44%, transparent) 62%,
    transparent 82%);
}
.scrim--top {
  inset: 0 auto auto 0; width: min(62rem, 90vw); height: 70vh;
  background: radial-gradient(115% 100% at 0% 0%,
    color-mix(in oklab, var(--sc-canvas) 93%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 78%, transparent) 40%,
    color-mix(in oklab, var(--sc-canvas) 38%, transparent) 62%,
    transparent 80%);
}
.scrim--column {
  inset: 0 auto 0 0; width: min(46rem, 70vw);
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--sc-canvas) 88%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 62%, transparent) 55%,
    transparent 100%);
}
.scrim--band {
  inset: auto 0 0 0; height: 82vh;
  background:
    radial-gradient(60% 55% at 50% 78%, color-mix(in oklab, var(--sc-canvas) 70%, transparent) 0%, transparent 100%),
    linear-gradient(0deg,
      color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 80%, transparent) 42%,
      color-mix(in oklab, var(--sc-canvas) 40%, transparent) 72%,
      transparent 100%);
}

/* ---------------------------------------------------------------- quote --
   One label, one action, everywhere: Get a quote, opens WhatsApp. */
.quote {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: 0 var(--sc-5);
  border-radius: var(--sc-r-pill);
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font: 500 var(--sc-t-sm)/1 var(--sc-font-text);
  letter-spacing: 0.02em;
  text-decoration: none; white-space: nowrap;
  box-shadow: var(--sc-e2), inset 0 1px 0 color-mix(in oklab, white 35%, transparent);
  transition: transform var(--sc-d-fast) var(--sc-ease-out),
              background-color var(--sc-d-fast) var(--sc-ease-out);
}
.quote:active { transform: scale(0.97); }
.quote:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .quote:hover { background: color-mix(in oklab, var(--sc-accent) 86%, white); }
}
.quote--bar { min-height: 2.5rem; padding: 0 var(--sc-4); }
.quote--close { min-height: 3.25rem; padding: 0 var(--sc-6); font-size: var(--sc-t-base); }

/* ------------------------------------------------------------------ bar -- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  height: var(--bar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--sc-gutter);
  background: linear-gradient(180deg, color-mix(in oklab, var(--sc-canvas) 78%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 40%, transparent) 60%, transparent 100%);
}
.bar__mark {
  display: inline-flex; align-items: center; gap: var(--sc-3);
  color: var(--gold-line); text-decoration: none;
  font-family: "Gilda Display", var(--sc-font-display); font-weight: 400;
  font-size: clamp(0.95rem, 0.85rem + 0.3vw, 1.1rem); letter-spacing: 0.18em; text-transform: uppercase;
}
.bar__mark img { width: auto; height: clamp(2.4rem, 2rem + 1vw, 3rem); }
.bar__mark span { text-shadow: 0 1px 2px color-mix(in oklab, var(--sc-canvas) 70%, transparent), 0 0 18px color-mix(in oklab, var(--sc-canvas) 85%, transparent); }
.bar__end { display: flex; align-items: center; gap: var(--sc-5); }
.bar__nav { display: flex; gap: var(--sc-5); }
.bar__nav a {
  color: var(--sc-ink); text-decoration: none;
  font-size: var(--sc-t-sm); letter-spacing: 0.02em;
  padding: var(--sc-2) 0;
  text-shadow: 0 1px 10px color-mix(in oklab, var(--sc-canvas) 80%, transparent);
  background: linear-gradient(var(--sc-accent), var(--sc-accent)) 0 100% / 0 1px no-repeat;
  transition: background-size var(--sc-d-fast) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out);
}
.bar__nav a[aria-current="page"] { color: var(--gold-line); background-size: 100% 1px; }
.bar__nav a:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 4px; border-radius: 2px; }
@media (hover: hover) and (pointer: fine) { .bar__nav a:hover { background-size: 100% 1px; } }
.bar__mark:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 6px; border-radius: 4px; }

/* ---------------------------------------------------------------- route --
   The nav is a map of the flight. Each stop scrolls to that leg. */
.route {
  position: fixed; z-index: var(--sc-z-chrome);
  right: var(--sc-gutter); top: 50%; translate: 0 -50%;
}
.route ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-1); position: relative; }
.route ol::before {
  content: ""; position: absolute; right: 0.28rem; top: 0.9rem; bottom: 0.9rem;
  width: 1px; background: var(--sc-hairline-strong);
}
.route a {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--sc-3);
  min-height: 2.25rem;
  color: var(--sc-ink-soft); text-decoration: none;
  font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  transition: color var(--sc-d-fast) var(--sc-ease-out);
}
.route a::after {
  content: ""; flex: none; width: 0.6rem; height: 0.6rem; border-radius: 50%;
  border: 1px solid var(--sc-ink-soft); background: var(--sc-canvas);
  position: relative; z-index: 1;
  transition: background-color var(--sc-d-fast) var(--sc-ease-out),
              border-color var(--sc-d-fast) var(--sc-ease-out),
              transform var(--sc-d-fast) var(--sc-ease-out);
}
.route a span {
  opacity: 0; transform: translateX(6px);
  transition: opacity var(--sc-d-fast) var(--sc-ease-out), transform var(--sc-d-fast) var(--sc-ease-out);
  text-shadow: 0 1px 8px color-mix(in oklab, var(--sc-canvas) 80%, transparent);
}
.route a[aria-current="true"] { color: var(--sc-ink); }
.route a[aria-current="true"]::after { background: var(--sc-accent); border-color: var(--sc-accent); transform: scale(1.25); }
.route a[aria-current="true"] span,
.route a:focus-visible span { opacity: 1; transform: none; }
.route a:focus-visible { outline: none; color: var(--sc-ink); }
.route a:focus-visible::after { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .route:hover a span { opacity: 1; transform: none; }
  .route a:hover { color: var(--sc-ink); }
}
.route__now { display: none; }

/* ----------------------------------------------------------- hero depth --
   Film behind, headline in the middle, leaves in front, dust drifting.
   flora.js writes --hp (hero progress 0..1). */
.hero-depth { position: absolute; inset: 0; pointer-events: none; z-index: 3; --hp: 0; }
.hero-depth__leaves {
  position: absolute; right: -6vw; top: -16vh;
  width: min(40vw, 50rem); height: auto;
  filter: blur(3px) brightness(0.78) saturate(0.9);
  transform-origin: 100% 0;
  transform: translate3d(calc(var(--hp) * 14vw), calc(var(--hp) * -34vh), 0) scale(calc(1 + var(--hp) * 0.35));
  opacity: calc(1 - var(--hp) * 1.6);
  will-change: transform, opacity;
}
.hero-depth__dust {
  position: absolute; inset: -10vh 0 0 30vw;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, color-mix(in oklab, var(--sc-accent) 80%, white) 50%, transparent 51%),
    radial-gradient(1px 1px at 34% 58%, color-mix(in oklab, var(--sc-accent) 70%, white) 50%, transparent 51%),
    radial-gradient(2px 2px at 58% 30%, color-mix(in oklab, var(--sc-accent) 60%, white) 50%, transparent 51%),
    radial-gradient(1px 1px at 72% 66%, color-mix(in oklab, var(--sc-accent) 80%, white) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 86% 18%, color-mix(in oklab, var(--sc-accent) 70%, white) 50%, transparent 51%),
    radial-gradient(1px 1px at 46% 80%, color-mix(in oklab, var(--sc-accent) 70%, white) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 22% 74%, color-mix(in oklab, var(--sc-accent) 60%, white) 50%, transparent 51%);
  background-size: 340px 300px;
  opacity: calc(0.55 - var(--hp) * 0.7);
  transform: translate3d(0, calc(var(--hp) * -12vh), 0);
  filter: blur(0.4px);
  will-change: transform, opacity;
}

/* ---------------------------------------------------------------- field --
   The signature: field-guide labels that draw on when the reader stops
   inside the tree. flora.js places them; CSS draws and retracts them. */
.field { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.field__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.field__lines line {
  stroke: var(--gold-line); stroke-width: 1; vector-effect: non-scaling-stroke;
  stroke-dasharray: var(--len, 200); stroke-dashoffset: var(--len, 200);
  transition: stroke-dashoffset 160ms var(--sc-ease-out);
}
.field__lines circle {
  fill: none; stroke: var(--gold-line); stroke-width: 1;
  transform-box: fill-box; transform-origin: center; transform: scale(0.6); opacity: 0;
  transition: opacity 140ms var(--sc-ease-out), transform 140ms var(--sc-ease-out);
}
.tag {
  position: absolute; left: 0; top: 0;
  max-width: 15rem;
  padding: var(--sc-2) var(--sc-3);
  border-top: 1px solid var(--gold-line);
  background: color-mix(in oklab, var(--sc-canvas) 78%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: var(--sc-ink);
  font-size: var(--sc-t-xs); line-height: 1.4; letter-spacing: 0.01em;
  opacity: 0; transform: translateY(4px);
  transition: opacity 140ms var(--sc-ease-out), transform 140ms var(--sc-ease-out);
}
.tag b { display: block; font-weight: 500; color: var(--gold-line); letter-spacing: var(--sc-track-wide); text-transform: uppercase; font-size: 0.68rem; margin-bottom: 2px; }
.tag i { font-style: italic; }
.field.is-on .field__lines line { stroke-dashoffset: 0; transition-duration: 420ms; transition-delay: calc(var(--i, 0) * 70ms); }
.field.is-on .field__lines circle { opacity: 1; transform: scale(1); transition-delay: calc(var(--i, 0) * 70ms); }
.field.is-on .tag { opacity: 1; transform: none; transition-duration: 240ms; transition-delay: calc(var(--i, 0) * 70ms + 260ms); }

/* ---------------------------------------------------------------- misc -- */

/* Lenis owns wheel smoothing; native smooth scrolling would fight it. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

::selection { background: var(--sc-accent); color: var(--sc-accent-ink); }

/* ---------------------------------------------------------------- phone --
   Art-directed, not shrunk. Copy moves to a bottom band, the leaves crop to
   the top edge, the route becomes one line with the current stop. */
@media (max-width: 860px) {
  .bar__mark span { display: none; }
  .bar__end, .bar__nav { gap: var(--sc-4); }
  .bar__nav a { font-size: var(--sc-t-xs); letter-spacing: 0.04em; }
  .copy--hero { max-width: none; right: var(--sc-gutter); }
  .display--hero { font-size: clamp(2.3rem, 1.4rem + 5vw, 3.4rem); }
  .copy--top, .copy--column {
    top: auto; bottom: clamp(2.5rem, 10vh, 5rem); translate: none;
    right: var(--sc-gutter); max-width: none;
  }
  .scrim--top, .scrim--column, .scrim--lead, .scrim--trail {
    inset: auto 0 0 0; width: auto; height: 70vh;
    background: linear-gradient(0deg,
      color-mix(in oklab, var(--sc-canvas) 90%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 66%, transparent) 48%,
      transparent 100%);
  }
  .hero-depth__leaves { width: 78vw; right: -18vw; top: -4vh; }
  .hero-depth__dust { inset: -10vh 0 30vh 10vw; }
  .route { top: auto; bottom: auto; right: auto; left: 0; top: var(--bar-h); translate: none; width: 100%; padding: 0 var(--sc-gutter); }
  .route ol { display: none; }
  .route__now {
    display: block; margin: 0;
    font-size: 0.68rem; letter-spacing: var(--sc-track-wide); text-transform: uppercase;
    color: var(--gold-line);
  }
  .tag { max-width: 11rem; }
  /* Paused inside the tree, the phone gives the frame to the labels. */
  .copy--column, .scrim--column { transition: opacity 200ms var(--sc-ease-out); }
  .field-on .copy--column, .field-on .scrim--column { opacity: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-depth__leaves, .hero-depth__dust { transform: none; }
  .field__lines line, .field__lines circle, .tag { transition: none; }
}