/* =====================================================================
   LIVING PAGES — Belcher Lawnscapes (BOISE AI)
   Kit stylesheet, retuned to this site's own tokens (css/tokens.css).
   Light roles, everywhere on the site:
     glacier  = the water left in the line (the thing ice breaks)
     amber    = the work: sunlit spray, and the air that clears the line
     cream    = the moment a zone runs dry
   The site's ember stays its alarm colour (a split, a dry gap).
   ===================================================================== */
:root {
  --lp-ice: var(--color-frost-text);
  --lp-ice-glow: var(--color-glacier);
  --lp-gold: var(--color-accent);
  --lp-gold-glow: oklch(74% .15 60);
  --lp-cream: oklch(96% .03 80);
  --lp-void: var(--color-paper);
  --lp-glass: oklch(16.5% .016 60 / .62);
  --lp-wrap: var(--shell-wide);
  --lp-band: clamp(16rem, 50vw, 72svh);
}

/* ------------------------------------------------------------ heroes */
.lp { position: relative; height: calc(var(--lp-len, 380) * 1svh); background: var(--lp-void); }
.lp-pin { position: sticky; top: 0; height: 100svh; overflow: clip; isolation: isolate; }
/* the backdrop under the canvas doubles as the no-WebGL fallback: the poster, or a dusk gradient */
.lp-pin::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    var(--lp-poster, none) center / cover no-repeat,
    radial-gradient(70% 32% at 62% 6%, oklch(52% .11 50 / .35), transparent 70%),
    radial-gradient(60% 50% at 70% 70%, oklch(40% .09 235 / .16), transparent 70%),
    linear-gradient(180deg, oklch(15% .02 40), oklch(12% .016 70) 60%, var(--lp-void));
}
.lp .lp-pin::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14%; pointer-events: none; z-index: 1;
  background: linear-gradient(0deg, var(--color-paper-sunk), transparent); }
.lp-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.4s cubic-bezier(.2,.7,.2,1); z-index: 0; }
.lp.ready .lp-canvas { opacity: 1; }

/* beats: the page's own words ride over the scene */
.lp-beats { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.lp-beat {
  position: absolute; left: max(24px, calc((100vw - var(--lp-wrap)) / 2 + clamp(1.15rem, 4.5vw, 3rem))); top: 54%;
  width: min(34rem, calc(100% - 48px)); translate: 0 -50%;
  will-change: opacity, transform, filter;
}
.lp-beat a, .lp-beat button, .lp-beat input, .lp-beat select, .lp-beat textarea, .lp-beat label { pointer-events: auto; }
.lp-beat::before {
  content: ""; position: absolute; inset: -22% -16%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, oklch(11% .013 62 / .8), oklch(11% .013 62 / .42) 62%, transparent);
  filter: blur(8px);
}

/* labels projected from 3D */
.lp-labels { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.lp-label {
  position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; will-change: transform, opacity;
  font-family: var(--font-mono); font-size: .66rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--color-ink);
  text-shadow: 0 0 12px var(--lp-gold-glow), 0 1px 3px #000;
}
.lp-label > span { display: block; transform: translate(-50%, -100%); padding-bottom: 10px; }
.lp-label > span::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 1px; height: 8px; background: currentColor; opacity: .7; }
.lp-label.on { color: var(--lp-cream); text-shadow: 0 0 14px var(--lp-gold-glow), 0 0 2px var(--lp-gold), 0 1px 3px #000; }
.lp-label.rain { color: var(--lp-ice); text-shadow: 0 0 14px var(--lp-ice-glow), 0 1px 3px #000; }

/* chrome: progress rail, skip, credit */
.lp-rail { position: absolute; right: 22px; top: 50%; translate: 0 -50%; height: 170px; width: 2px; border-radius: 2px; background: oklch(94% .01 70 / .12); z-index: 3; overflow: hidden; }
.lp-fill { position: absolute; inset: 0; background: linear-gradient(180deg, var(--lp-ice-glow), var(--lp-gold)); transform-origin: top; transform: scaleY(0); box-shadow: 0 0 12px var(--lp-gold-glow); }
.lp-skip {
  position: absolute; left: 50%; bottom: 22px; translate: -50% 0; z-index: 3; display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .24em; text-transform: uppercase; color: var(--color-ink-2);
  padding: 8px 14px; border-radius: 999px; border: 1px solid oklch(94% .01 70 / .16); background: oklch(13% .014 62 / .55); backdrop-filter: blur(6px);
}
.lp-skip:hover, .lp-skip:focus-visible { color: var(--color-ink); border-color: var(--lp-gold); }
.lp-skip svg { width: 10px; height: 14px; stroke: currentColor; fill: none; animation: lp-bob 2.2s ease-in-out infinite; }
@keyframes lp-bob { 50% { transform: translateY(3px); } }
.lp-credit { position: absolute; left: max(24px, calc((100vw - var(--lp-wrap)) / 2 + clamp(1.15rem, 4.5vw, 3rem))); bottom: 18px; z-index: 3; margin: 0; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: oklch(78% .015 64 / .78); max-width: 52ch; line-height: 1.5; }

/* ---------------------------------------------------- states
   pinned  = the engine is running, or JS decided before paint that it will (html.lp-gl)
   static  = reduced motion, no WebGL2, a failed scene, or no JS at all              */
.lp.static, html:not(.lp-gl) .lp:not(.lp-on) { height: auto; }
.lp.static .lp-canvas { display: none; }   /* the poster IS the still frame; nothing else draws */
.lp.static :is(.lp-skip, .lp-rail, .lp-labels), html:not(.lp-gl) .lp:not(.lp-on) :is(.lp-skip, .lp-rail, .lp-labels) { display: none; }
html.lp-gl .lp:not(.lp-on) .lp-beat:not([data-static]) { opacity: 0; visibility: hidden; }
.lp.nogl .lp-labels { display: none; }

@media (max-width: 720px) {
  .lp-beat { left: 20px; right: 20px; width: auto; text-align: left; translate: 0 0; top: auto; bottom: 12svh; }
  .lp-beat::before { inset: -26% -10%; }
  .lp-rail { right: 10px; height: 110px; }
  .lp-skip { left: 20px; translate: 0 0; bottom: 18px; }
  .lp-credit { top: calc(4.4rem + 10px); bottom: auto; left: 20px; right: 20px; font-size: .52rem; letter-spacing: .04em; color: oklch(78% .015 64 / .6); text-shadow: 0 1px 6px oklch(10% .012 62 / .9); }
  .lp-label { font-size: .54rem; letter-spacing: .14em; }
}

/* ------------------------------------------------------------ figures */
.fx { position: relative; width: 100%; aspect-ratio: var(--fx-ratio, 16 / 10); margin: var(--space-xl) 0; border-radius: var(--radius-lg); overflow: hidden; isolation: isolate; }
.fx-stage { position: absolute; inset: 0; }
.fx-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.2s ease; }
.fx.live .fx-stage canvas { opacity: 1; }
.fx::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--fx-poster, none) center / cover no-repeat; opacity: .9; }
.fx.live::before { opacity: 0; transition: opacity 1.2s ease; }
.fx.nogl::before { opacity: 1; }
.fx-labels { position: absolute; inset: 0; pointer-events: none; }
.fx-label { position: absolute; left: 0; top: 0; opacity: 0; white-space: nowrap; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--color-ink-2); text-shadow: 0 1px 4px #000; transition: color .4s; }
.fx-label i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--lp-ice-glow); box-shadow: 0 0 10px var(--lp-ice-glow); margin-right: 7px; vertical-align: 1px; }
.fx-label.on { color: #fff; }
.fx-label.gold i { background: var(--lp-gold); box-shadow: 0 0 10px var(--lp-gold-glow); }
.fx-label.ember i { background: var(--color-ember-text); box-shadow: 0 0 10px var(--color-ember); }
.fx-label.gold.on { color: var(--lp-cream); }
@media (max-width: 720px) { .fx { aspect-ratio: var(--fx-ratio-sm, 1 / 1); } .fx-label { font-size: .52rem; letter-spacing: .1em; } }

/* ------------------------------------------------------- finishing layer */
/* glow dividers: a hairline with a light that travels along it (amber: the work) */
.lp-divider { position: relative; height: 1px; margin: 0; background: linear-gradient(90deg, transparent, oklch(78% .15 62 / .38), transparent); overflow: visible; pointer-events: none; }
.lp-divider::after { content: ""; position: absolute; top: -2px; width: 70px; height: 5px; border-radius: 5px; background: radial-gradient(closest-side, var(--lp-cream), oklch(78% .15 62 / .6) 40%, transparent); filter: blur(1px); animation: lp-travel 8s linear infinite; }
@keyframes lp-travel { from { left: -70px; } to { left: 100%; } }

/* rows rise in as they arrive (only when JS marks the page) */
.lp-js .lp-rise { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.lp-js .lp-rise.in { opacity: 1; transform: none; }
.lp-js .lp-rise:nth-child(2) { transition-delay: .06s; } .lp-js .lp-rise:nth-child(3) { transition-delay: .12s; }
.lp-js .lp-rise:nth-child(4) { transition-delay: .18s; } .lp-js .lp-rise:nth-child(5) { transition-delay: .24s; }

/* the booking form: a quiet thaw along its top edge. Nothing inside it changes.
   (Its ::before/::after belong to the site's spotlight, so this is a background layer.) */
.book__form {
  background:
    linear-gradient(90deg, transparent, oklch(78% .15 62 / .75) 32%, oklch(96% .03 80 / .9) 50%, oklch(78% .15 62 / .75) 68%, transparent) top center / 74% 1px no-repeat,
    color-mix(in oklab, var(--color-paper-2) 92%, transparent);
  box-shadow: 0 40px 80px -50px var(--color-paper-sunk), 0 0 0 1px oklch(78% .15 62 / .05), 0 -22px 70px -40px oklch(74% .15 60 / .5);
}

/* the pipe rig: the freeze line figure sits over the rig's own canvas, which
   stays underneath as the fallback (no WebGL2, reduced motion) and keeps its label */
.rig__canvas-wrap > .lp-fx-freeze { position: absolute; inset: 0; margin: 0; aspect-ratio: auto; border-radius: inherit; z-index: 0; pointer-events: none; }
.rig__canvas-wrap > .rig__canvas { transition: opacity 1.2s ease; }
.rig__canvas-wrap:has(> .fx.live:not(.nogl)) > .rig__canvas { opacity: 0; }

/* FAQ: a hairline of light when a question opens */
.qa__item { transition: box-shadow .5s var(--ease-out); }
.qa__item[open] { box-shadow: inset 2px 0 0 var(--lp-gold), -8px 0 24px -14px var(--lp-gold-glow); }

@media (prefers-reduced-motion: reduce) {
  .lp-divider::after, .lp-skip svg { animation: none; }
  .lp-js .lp-rise { opacity: 1; transform: none; transition: none; }
}

/* =====================================================================
   #process — the blowout film
   ===================================================================== */
.process.lp { --lp-len: 560; padding: 0; background: var(--color-paper-sunk); }
@media (max-width: 720px) { .process.lp { --lp-len: 460; } }

/* pinned */
/* the stage fades up out of the page above it, and keeps the nav on dark */
:is(.lp.lp-on:not(.static), html.lp-gl .lp:not(.lp-on)) .lp-beats::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 18svh; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, var(--color-paper-sunk), oklch(10% .012 62 / .55) 45%, transparent);
}
:is(.lp.lp-on:not(.static), html.lp-gl .lp:not(.lp-on)) .steps { position: static; display: block; }
:is(.lp.lp-on:not(.static), html.lp-gl .lp:not(.lp-on)) .steps::before,
:is(.lp.lp-on:not(.static), html.lp-gl .lp:not(.lp-on)) .steps::after { display: none; }
:is(.lp.lp-on:not(.static), html.lp-gl .lp:not(.lp-on)) .process__head { display: grid; gap: var(--space-md); }
:is(.lp.lp-on:not(.static), html.lp-gl .lp:not(.lp-on)) .process__title { font-size: clamp(2.4rem, 1.3rem + 3.4vw, 4.4rem); max-width: 12ch; margin: 0; text-shadow: 0 2px 30px oklch(8% .01 60 / .85); }
:is(.lp.lp-on:not(.static), html.lp-gl .lp:not(.lp-on)) .process__lede { margin: 0; max-width: 30ch; text-shadow: 0 1px 18px oklch(8% .01 60 / .95); }
:is(.lp.lp-on:not(.static), html.lp-gl .lp:not(.lp-on)) .step {
  border: 0; padding: 0; grid-template-columns: minmax(0, 4.2rem) minmax(0, 1fr); width: min(36rem, calc(100% - 48px));
}
:is(.lp.lp-on:not(.static), html.lp-gl .lp:not(.lp-on)) .step h3 { font-size: clamp(1.9rem, 1.2rem + 2vw, 2.9rem); line-height: 1.02; margin-block-end: var(--space-md); text-shadow: 0 2px 26px oklch(8% .01 60 / .9); }
:is(.lp.lp-on:not(.static), html.lp-gl .lp:not(.lp-on)) .step p { font-size: var(--text-lg); color: var(--color-ink-2); text-shadow: 0 1px 16px oklch(8% .01 60 / .95); }
:is(.lp.lp-on:not(.static), html.lp-gl .lp:not(.lp-on)) .step__n { font-size: var(--text-sm); padding-inline-start: 1.7rem; text-shadow: 0 0 14px var(--lp-gold-glow); }
:is(.lp.lp-on:not(.static), html.lp-gl .lp:not(.lp-on)) .step__n::before {
  display: block; inset-inline-start: 0; inset-block-start: .55em; background: var(--color-accent); border-color: var(--color-accent);
  box-shadow: 0 0 18px color-mix(in oklab, var(--color-accent) 60%, transparent);
}
/* the schematic's legend stays, as the scene's key; the drawing itself is the scene now */
:is(.lp.lp-on:not(.static), html.lp-gl .lp:not(.lp-on)) .airline {
  position: absolute; inset: auto max(24px, calc((100vw - var(--lp-wrap)) / 2 + clamp(1.15rem, 4.5vw, 3rem))) 20px auto;
  padding: 8px 14px; gap: 0; background: oklch(13% .014 62 / .55); border: 1px solid oklch(94% .01 70 / .1); border-radius: 999px; backdrop-filter: blur(6px);
}
:is(.lp.lp-on:not(.static), html.lp-gl .lp:not(.lp-on)) .airline__svg { display: none; }
:is(.lp.lp-on:not(.static), html.lp-gl .lp:not(.lp-on)) .airline__legend { padding: 0; border: 0; }
:is(.lp.lp-on:not(.static), html.lp-gl .lp:not(.lp-on)) .airline__legend i.is-water { box-shadow: 0 0 8px var(--color-glacier); }
:is(.lp.lp-on:not(.static), html.lp-gl .lp:not(.lp-on)) .airline__legend i.is-air { box-shadow: 0 0 8px var(--color-accent); }
@media (max-width: 720px) {
  :is(.lp.lp-on:not(.static), html.lp-gl .lp:not(.lp-on)) .airline { display: none; }
  :is(.lp.lp-on:not(.static), html.lp-gl .lp:not(.lp-on)) .step { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  :is(.lp.lp-on:not(.static), html.lp-gl .lp:not(.lp-on)) .step > h3, :is(.lp.lp-on:not(.static), html.lp-gl .lp:not(.lp-on)) .step > p { grid-column: 1; }
  :is(.lp.lp-on:not(.static), html.lp-gl .lp:not(.lp-on)) .step h3 { font-size: 1.85rem; margin-block-end: var(--space-xs); }
  :is(.lp.lp-on:not(.static), html.lp-gl .lp:not(.lp-on)) .step p { font-size: var(--text-base); }
  :is(.lp.lp-on:not(.static), html.lp-gl .lp:not(.lp-on)) .process__title { font-size: 2.3rem; }
}

/* portrait screens wider than a phone (an upright tablet) frame the scene like a phone:
   the scene shifts up (blowout.js: aspect < 1), so the words go to the bottom */
@media (orientation: portrait) and (min-width: 721px) and (max-width: 1180px) {
  :is(.lp.lp-on:not(.static), html.lp-gl .lp:not(.lp-on)) .lp-beat { left: 40px; right: 40px; width: auto; max-width: 40rem; top: auto; bottom: 11svh; translate: 0 0; }
  :is(.lp.lp-on:not(.static), html.lp-gl .lp:not(.lp-on)) .step { width: auto; }
  :is(.lp.lp-on:not(.static), html.lp-gl .lp:not(.lp-on)) .airline { display: none; }
  .lp-credit { top: calc(4.4rem + 12px); bottom: auto; }
}

/* static: one still frame (the poster) as a band, then the section as it always read */
:is(.lp.static, html:not(.lp-gl) .lp:not(.lp-on)) .lp-pin { position: relative; height: auto; overflow: visible; padding-block: calc(var(--lp-band) + var(--space-xl)) var(--space-3xl); }
:is(.lp.static, html:not(.lp-gl) .lp:not(.lp-on)) .lp-pin::before {
  inset: 0 0 auto 0; height: var(--lp-band);
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent); mask-image: linear-gradient(180deg, #000 72%, transparent);
}
html:not(.lp-gl) .process.lp:not(.lp-on) .lp-pin::before { background-image: var(--lp-poster, url("/living/posters/blowout.webp")), linear-gradient(180deg, oklch(15% .02 40), var(--lp-void)); }
@media (max-width: 720px) { html:not(.lp-gl) .process.lp:not(.lp-on) .lp-pin::before { background-image: var(--lp-poster, url("/living/posters/blowout-sm.webp")), linear-gradient(180deg, oklch(15% .02 40), var(--lp-void)); } }
:is(.lp.static, html:not(.lp-gl) .lp:not(.lp-on)) .lp-pin::after { display: none; }
:is(.lp.static, html:not(.lp-gl) .lp:not(.lp-on)) .lp-credit { top: calc(var(--lp-band) - 2.4rem); bottom: auto; }
:is(.lp.static, html:not(.lp-gl) .lp:not(.lp-on)) .lp-beats {
  position: relative; inset: auto; pointer-events: auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(var(--space-xl), 5vw, var(--space-4xl)); align-items: start;
  max-width: var(--shell); margin-inline: auto; padding-inline: clamp(1.15rem, 4.5vw, 3rem);
}
:is(.lp.static, html:not(.lp-gl) .lp:not(.lp-on)) .lp-beat {
  position: relative; inset: auto; left: auto; top: auto; bottom: auto; translate: none; width: auto;
  opacity: 1 !important; transform: none !important; filter: none !important; visibility: visible !important;
}
:is(.lp.static, html:not(.lp-gl) .lp:not(.lp-on)) .lp-beat::before { display: none; }
:is(.lp.static, html:not(.lp-gl) .lp:not(.lp-on)) .process__head { order: -2; grid-column: 1 / -1; display: grid !important; gap: var(--space-md); max-width: 60rem; }
:is(.lp.static, html:not(.lp-gl) .lp:not(.lp-on)) .step.lp-beat { display: grid !important; }
@media (max-width: 60rem) {
  :is(.lp.static, html:not(.lp-gl) .lp:not(.lp-on)) .lp-beats { grid-template-columns: minmax(0, 1fr); }
}