/* Hybrid of the three concepts.
   Base: concept 2 (its menu, type, hero, film under a lime curtain, pinned product scene, footer).
   From concept 1: light and dark sections alternate, as on the live site.
   From concept 3: each product family has its own shade of the brand's greens, changing with the scroll.
   Only the differences live here; everything else comes from ../k2/k2.css. */

@property --fam-bg { syntax: "<color>"; inherits: true; initial-value: #021b15; }

/* ---------- light sections ---------- */
.k4 .is-light {
  background: var(--white); color: var(--green);
  --line: rgba(2, 39, 31, 0.14); --muted: rgba(2, 39, 31, 0.68);
  --sch-line: var(--green); --sch-soft: rgba(2, 39, 31, 0.3); --sch-accent: #8f9c12; --sch-pulse: var(--lime); --sch-label: rgba(2, 39, 31, 0.7);
  --face-top: color-mix(in srgb, var(--sch-line) 3%, transparent); --face-side: color-mix(in srgb, var(--sch-line) 8%, transparent);
  --face-end: color-mix(in srgb, var(--sch-line) 15%, transparent); --face-gap: color-mix(in srgb, var(--sch-line) 34%, transparent);
  --face-in: color-mix(in srgb, var(--sch-line) 20%, transparent);
}
.k4 .is-light.is-sage { background: var(--sage-50); }
/* sections now carry their own background: room at the bottom where the next section changes colour */
.k4 .sec.is-light, .k4 .sec:has(+ .is-light) { padding-bottom: clamp(84px, 10vw, 160px); }
/* the menu cells stay dark and readable over paper */
.k4 .nav__cell { background: rgba(2, 39, 31, 0.86); }
.k4 .nav__cell:hover, .k4 .nav__drop:focus-within { background: rgba(13, 74, 59, 0.92); }

/* lime marks that live on the dark page become the deep olive on paper */
.k4 .is-light :is(.head__eyebrow, .ratings h3, .case__body .mono, .case__num span) { color: #6f7a0e; }
.k4 .is-light .post__arr, .k4 .is-light .faq__list summary::after { color: var(--green); }
.k4 .is-light :is(.faq__list summary:hover, .rowlink:hover) { color: #6f7a0e; }
.k4 .is-light .flow::after { background: var(--green); }
.k4 .is-light .flow__n { color: rgba(2, 39, 31, 0.2); }
.k4 .is-light .paper { background: var(--sage-100); }
.k4 .is-light .paper__letter { color: rgba(2, 39, 31, 0.06); }
.k4 .is-light .btn--glass { --bg: rgba(2, 39, 31, 0.07); --fg: var(--green); }
.k4 .is-light .btn--glass:hover { --bg: rgba(2, 39, 31, 0.12); }
.k4 .is-light .note { background: rgba(2, 39, 31, 0.05); }
@media (hover: hover) and (pointer: fine) {
  .k4 .is-light .post:is(:hover, :focus-visible) { background: rgba(2, 39, 31, 0.045); }
}

/* ---------- product scene: each family on its own green (concept 3) ---------- */
@media (min-width: 901px) {
  .k4 .prod__track { --fam-bg: #e2e9e4; }
  .k4 .prod__track[data-active="1"] { --fam-bg: #d2dcd4; }
  .k4 .prod__track[data-active="2"] { --fam-bg: #bdc7ae; }
  .k4 .prod__track[data-active="3"] { --fam-bg: #021b15; }
  .k4 .prod__track[data-active="4"] { --fam-bg: #02271f; }
  .k4 .prod__track { transition: --fam-bg 0.9s var(--ease); }
  .k4 .prod__map {
    background:
      repeating-linear-gradient(162deg, transparent 0 58px, var(--map-line) 58px 59px),
      repeating-linear-gradient(52deg, transparent 0 58px, var(--map-line) 58px 59px),
      var(--fam-bg);
  }
  .k4 .prod__track:not([data-active="3"], [data-active="4"]) .prod__stage {
    color: var(--green); --map-line: rgba(2, 39, 31, 0.06);
    --sch-line: var(--green); --sch-soft: rgba(2, 39, 31, 0.3); --sch-accent: #6f7a0e; --sch-pulse: var(--lime); --sch-label: rgba(2, 39, 31, 0.7);
    --face-top: color-mix(in srgb, var(--sch-line) 3%, transparent); --face-side: color-mix(in srgb, var(--sch-line) 8%, transparent);
    --face-end: color-mix(in srgb, var(--sch-line) 15%, transparent); --face-gap: color-mix(in srgb, var(--sch-line) 34%, transparent);
    --face-in: color-mix(in srgb, var(--sch-line) 20%, transparent);
  }
  .k4 .prod__track:is([data-active="3"], [data-active="4"]) .prod__stage { --map-line: rgba(244, 247, 213, 0.05); }
  .k4 .prod__track:not([data-active="3"], [data-active="4"]) .prod__tabs button { background: rgba(2, 39, 31, 0.07); color: rgba(2, 39, 31, 0.7); }
  .k4 .prod__track:not([data-active="3"], [data-active="4"]) .prod__tabs button:not(.is-active):hover { background: rgba(2, 39, 31, 0.12); color: var(--green); }
  .k4 .prod__track .prod__tabs button.is-active { background: var(--lime); color: var(--green); }
}

/* ---------- fly-through (shared/fly/fly.js): one camera take, three held screens ----------
   The figures sit on a lime band of their own just before it (.figband); then the stage pins for the take (.is-full),
   captions follow the scroll, and at the end (.is-paper) the scene has become the paper of the next section: the
   captions turn green. Lite (no WebGL, less motion, data saver, presentation preview): a still, captions under it. */
.fly { position: relative; background: var(--deep); }
.fly__curtain { position: relative; padding: clamp(64px, 10vw, 150px) 0; background: var(--lime); color: var(--green); --line: rgba(2, 39, 31, 0.2); --muted: rgba(2, 39, 31, 0.72); }
.figband .figures { border-top: 0; border-bottom: 0; }
.figband .figures dt { font-size: clamp(36px, 3.333vw, 72px); letter-spacing: -0.04em; }
.figband .figures dd { font-size: 12px; }
.fly__stage { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--deep); }
.fly__poster, .fly__canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* the still lies over the canvas until the first frame is drawn (and again if the graphics card gives up) */
.fly__poster { z-index: 1; }
.fly:not(.is-live) .fly__canvas { visibility: hidden; }
.fly__canvas { display: none; }
/* lite: the still keeps its frame, the captions follow under it */
.fly:not(.is-full) .fly__stage { aspect-ratio: auto; }
.fly:not(.is-full) .fly__poster { position: relative; height: auto; aspect-ratio: 16 / 9; }

.fly.is-full .fly__pin { height: 260vh; height: 260lvh; }
.fly.is-full .fly__stage { position: sticky; top: 0; height: 100vh; height: 100lvh; aspect-ratio: auto; }
.fly.is-full .fly__canvas, .fly.is-full .fly__caps { display: block; }
.fly.is-full .fly__poster { transition: opacity 0.6s var(--ease); }
.fly.is-live .fly__poster { opacity: 0; }
/* a low shade under the captions, gone on paper */
.fly.is-full .fly__stage::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 45%; pointer-events: none;
  background: linear-gradient(to top, rgba(2, 27, 21, 0.7), rgba(2, 27, 21, 0)); transition: opacity 0.6s var(--ease);
}
.fly.is-paper .fly__stage::after { opacity: 0; }
/* the menu over the lime band: its lime tiles turn green so they do not vanish */
.nav-on-lime .nav__logo, .nav-on-lime .nav__cta, .nav-on-lime .nav__grid { background: var(--green); color: var(--lime); }
.nav-on-lime .nav__grid i { background: var(--lime); }

/* captions: copy from the MDC500 page. Lite: all three under the still, in a row. Full: one at a time, lower left,
   lifted by the height of a phone's bottom toolbar when it shows (100lvh stage, the toolbar covers its foot). */
.fly__caps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding: clamp(40px, 6vw, 80px) var(--gutter); }
.fly__cap { color: var(--cream); font-size: clamp(22px, 2vw, 30px); font-weight: 300; line-height: 1.12; letter-spacing: -0.03em; }
.fly__cap .mono { display: block; margin-bottom: 18px; font-size: 12px; letter-spacing: 0.08em; line-height: 1.4; color: var(--lime); transition: color 0.6s var(--ease); }
.fly__cap .fly__steps { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.fly__steps span { color: rgba(244, 247, 213, 0.6); transition: color 0.5s var(--ease); }
.fly__steps span.is-on { color: var(--lime); }
.fly.is-full .fly__caps { display: block; position: absolute; left: 0; right: 0; bottom: calc(100lvh - 100svh + clamp(40px, 8svh, 96px)); z-index: 2; padding: 0; pointer-events: none; }
.fly.is-full .fly__cap {
  position: absolute; left: var(--gutter); bottom: 0; max-width: min(20ch, calc(100% - 2 * var(--gutter)));
  font-size: clamp(30px, 3.1vw, 54px); line-height: 1.06; letter-spacing: -0.035em;
  opacity: 0; visibility: hidden; transform: translate3d(0, 18px, 0); filter: blur(6px);
  transition: opacity 0.7s var(--ease), transform 0.9s var(--ease), filter 0.7s var(--ease), color 0.6s var(--ease), visibility 0s linear 0.7s;
}
.fly.is-full .fly__cap.is-on { opacity: 1; visibility: visible; transform: none; filter: none; transition-delay: 0.12s, 0.12s, 0.12s, 0s, 0s; }
.fly__link { margin-top: 26px; font-size: 16px; letter-spacing: 0; color: var(--cream); pointer-events: auto; }
.fly.is-full .fly__cap:not(.is-on) .fly__link { pointer-events: none; }
.fly.is-paper .fly__cap, .fly.is-paper .fly__link { color: var(--green); }
.fly.is-paper .fly__steps span { color: rgba(2, 39, 31, 0.6); }
.fly.is-paper .fly__steps span.is-on { color: #6f7a0e; }
@media (max-width: 900px) {
  .fly__stage { aspect-ratio: 4 / 3; }
  .fly:not(.is-full) .fly__poster { aspect-ratio: 4 / 3; object-position: 32% 50%; }
  .fly__caps { grid-template-columns: 1fr; }
  .fly.is-full .fly__pin { height: 240vh; height: 240lvh; }
  .fly.is-full .fly__cap { font-size: clamp(26px, 7.4vw, 34px); max-width: calc(100% - 2 * var(--gutter)); }
  .fly__cap .mono { margin-bottom: 12px; font-size: 11px; }
}