/*
  LSI home page
  Brief
  - Audience: Australian real-estate agents; their job is to join the waitlist.
  - Message: LSI stops you losing commission in the messy middle of the deal, every morning at 7:30, and nothing goes out without you.
  - Constraints: same-origin scripts and styles only (see _headers, no inline style attributes), no libraries, LSI cockpit tokens, no vendor names, real app screens with demo deals, WCAG 2.2 AA.

  Direction: "Procedural daybreak": a motion reel cut to one working day. Night cockpit to full daylight in hard colour cuts.
  References: the client's motion reference reel (striped sun over wireframe terrain; extruded type on amber; orbit rings; flat colour cuts),
  Teenage Engineering (a product screen treated as the hero object), Stripe Press covers (one flat colour per idea).
  Signature move: the sun rises over a wireframe land whose peaks are the agent's deals, and scrolling runs the clock from 05:12 to 07:30.
  One particle world (field.js) runs under the content from the end of the hero to the footer and takes a new product shape per section.
  Dark start by design; colour scenes change with the time of day, so there is no theme switch.
*/
:root {
  --amber: oklch(0.76 0.165 68);
  --paper: oklch(0.975 0.006 90);
  --ink: oklch(0.17 0.02 262);
  --ink-2: oklch(0.32 0.02 262);
  --blue: oklch(0.36 0.21 266);
  --yolk: oklch(0.85 0.165 88);
  --ember: oklch(0.6 0.17 45);
  --extrude: oklch(0.38 0.11 45);
}
body { font-weight: 400; }

/* ---------- Device frame around real screens ---------- */
.world { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
/* Section colours paint below the world, content above it. */
.rise { z-index: 3; }
main .wrap, .footer { position: relative; z-index: 2; }
.footer { z-index: 3; background: var(--canvas); }
.lift { display: inline-block; overflow: clip; padding-bottom: 0.14em; margin-bottom: -0.14em; vertical-align: top; }
.lift > span { display: inline-block; transform: translateY(112%) rotate(4deg); transform-origin: 0 100%; transition: transform 860ms cubic-bezier(0.22, 1, 0.36, 1); transition-delay: calc(var(--i) * 55ms); }
.is-up .lift > span { transform: none; }
.btn--gold { transition: translate 180ms cubic-bezier(0.22, 1, 0.36, 1), background-color var(--t-micro) ease; }

.device {
  --lean-x: 0; --lean-y: 0; transform: perspective(1400px) rotateY(calc(var(--lean-x) * 14deg)) rotateX(calc(var(--lean-y) * -10deg)); transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
  position: relative; margin: 0; aspect-ratio: 390 / 844; padding: 8px; border-radius: 40px; background: oklch(0.11 0.012 262);
  border: 1px solid oklch(0.97 0.01 262 / 0.2); box-shadow: 0 40px 90px -30px oklch(0 0 0 / 0.75);
}
.device img { width: 100%; height: 100%; border-radius: 32px; object-fit: cover; }

/* ---------- Sunrise ---------- */
.rise { --p: 0; position: relative; margin-top: -72px; height: 240svh; }
.rise__stage { position: sticky; top: 0; height: 100svh; min-height: 640px; overflow: clip; background: oklch(0.13 0.012 262); }
.sky { position: absolute; inset: 0; }
.sky canvas { display: block; width: 100%; height: 100%; }

/* Without WebGL or JavaScript: the sun, drawn flat */
html:not(.js) .sky canvas, .no-gl .sky canvas { display: none; }
html:not(.js) .sky::after, .no-gl .sky::after {
  content: ""; position: absolute; left: 67%; bottom: 30%; width: 44vh; aspect-ratio: 1; translate: -50% 0; border-radius: 50%;
  background: repeating-linear-gradient(180deg, transparent 0 58%, oklch(0.13 0.012 262) 58% 62%, transparent 62% 70%), linear-gradient(var(--yolk), var(--ember));
}
html:not(.js) .rise, .no-gl .rise { height: auto; }

.rise__grid { position: relative; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) clamp(240px, 22vw, 300px); column-gap: clamp(24px, 6vw, 96px); align-items: center; }
.rise__copy, .rise__ready { grid-area: 1 / 1; min-width: 0; }
.rise__copy { padding-top: 72px; opacity: clamp(0, 1 - (var(--p) - 0.05) * 5, 1); translate: 0 calc(var(--p) * -80px); }
.rise__kicker { color: var(--gold); font-size: var(--step--1); font-weight: 500; margin-bottom: 18px; }
.rise h1 { font-size: clamp(2.75rem, 1rem + 5vw, 5.25rem); line-height: 0.98; letter-spacing: -0.05em; font-weight: 750; max-width: 8.8em; }
.rise .lede { color: var(--fg); max-width: 30em; }
.rise .waitlist__status { color: var(--fg-2); }

.rise__ready { padding-top: 72px; opacity: clamp(0, (var(--p) - 0.66) * 6, 1); translate: 0 calc((1 - clamp(0, (var(--p) - 0.66) * 3, 1)) * 40px); }
.rise__time {
  font-size: clamp(5rem, 15vw, 13rem); line-height: 0.9; font-weight: 800; letter-spacing: -0.06em; color: var(--yolk);
  text-shadow: 1px 1px 0 var(--ember), 2px 2px 0 var(--ember), 3px 3px 0 var(--ember), 4px 4px 0 var(--ember), 5px 5px 0 var(--ember), 6px 6px 0 var(--extrude), 7px 7px 0 var(--extrude), 8px 8px 0 var(--extrude);
}
.rise__line { margin-top: 14px; font-size: var(--step-3); font-weight: 650; letter-spacing: -0.035em; }

.device--hero { grid-area: 1 / 2; align-self: start; margin-top: 11svh; translate: 0 calc((1 - var(--p)) * 24svh); rotate: calc((1 - var(--p)) * 2.5deg); }

.flag {
  position: absolute; left: 0; top: 0; display: block; padding: 6px 10px 6px 24px; margin: -30px 0 0 -6px; white-space: nowrap;
  border-radius: 8px; background: oklch(0.13 0.012 262 / 0.9); border: 1px solid oklch(0.85 0.165 88 / 0.5);
  font: 500 0.8125rem/1.3 var(--mono); color: var(--fg); opacity: 0; transition: opacity var(--t-state) var(--ease-out);
}
.flag i { position: absolute; left: 9px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--yolk); }
.flag.is-on { opacity: 1; }

.log {
  position: absolute; left: max(var(--gutter), calc((100% - var(--wrap)) / 2)); bottom: 24px; display: flex; gap: 12px; align-items: baseline;
  font: 500 0.875rem/1.4 var(--mono); color: var(--fg-2);
}
.log b { color: var(--yolk); font-weight: 500; font-size: 1rem; }

@media (max-width: 900px) {
  .rise { height: auto; }
  .rise__stage { position: relative; height: auto; min-height: 0; padding-bottom: 72px; }
  .sky { inset: auto 0 0; height: 640px; }
  .rise__grid { display: block; height: auto; }
  .rise__copy { padding-top: 104px; opacity: 1; translate: none; }
  .rise__ready, .flag { display: none; }
  .device--hero { width: min(72vw, 280px); margin: 40px auto 0; translate: none; rotate: none; }
  .log { left: var(--gutter); bottom: 16px; }
}
@media (max-width: 380px) { .rise h1 { font-size: 2.3rem; } }

/* ---------- Quiet ---------- */
.quiet { position: relative; overflow: clip; background: var(--amber); color: var(--ink); padding-block: clamp(96px, 12vw, 160px) clamp(64px, 8vw, 112px); }
.quiet__word { height: clamp(150px, 28vw, 400px); display: grid; place-items: center; }
.quiet__word span { font-size: clamp(5rem, 22vw, 20rem); font-weight: 800; letter-spacing: -0.04em; color: var(--extrude); line-height: 1; }
.has-world .quiet__word span { visibility: hidden; }
.quiet__copy { margin-top: clamp(28px, 4vw, 48px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px clamp(24px, 5vw, 72px); align-items: end; }
.quiet h2 { font-size: var(--step-4); line-height: 1; letter-spacing: -0.045em; font-weight: 750; }
.quiet__copy p { font-size: var(--step-1); line-height: 1.45; max-width: 30em; }
@media (max-width: 760px) { .quiet__copy { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Day: the scene colour follows the chapter ---------- */
.day {
  --bg: var(--canvas); --text: var(--fg); --soft: var(--fg-2); --stamp: var(--gold); --disc: var(--yolk); --x: -32%; --y: 34%;
  position: static; background: var(--bg); color: var(--text); padding-top: var(--section); overflow: clip; transition: color 280ms ease 120ms;
}
.day__wipe { position: sticky; top: 0; display: block; height: 100svh; margin-bottom: -100svh; clip-path: polygon(0 0, 0 0, 0 0, 0 0); }
.day__grid.wrap { position: static; }
.beat > * { position: relative; z-index: 2; }
.day:has([data-chapter="draft"].is-active) { --bg: var(--paper); --text: var(--ink); --soft: var(--ink-2); --stamp: var(--ink); --disc: var(--amber); --x: -16%; --y: -6%; }
.day:has([data-chapter="chase"].is-active) { --bg: var(--amber); --text: var(--ink); --soft: var(--ink); --stamp: var(--ink); --disc: var(--paper); --x: 0%; --y: -22%; }
.day:has([data-chapter="inbox"].is-active) { --bg: var(--blue); --text: var(--paper); --soft: oklch(0.93 0.02 266); --stamp: var(--yolk); --disc: var(--yolk); --x: 16%; --y: -6%; }
.day:has([data-chapter="proof"].is-active) { --bg: var(--yolk); --text: var(--ink); --soft: var(--ink); --stamp: var(--ink); --disc: var(--ember); --x: 32%; --y: 34%; }
.day__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; }
.day__head h2 { font-size: var(--step-3); line-height: 1.04; letter-spacing: -0.04em; font-weight: 750; }
.day__head p { color: var(--soft); font-size: var(--step--1); }
.day__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); }
.beat { min-height: 92svh; display: flex; flex-direction: column; justify-content: center; }
.beat__time { font: 500 1.125rem var(--mono); color: var(--stamp); }
.beat h3 { margin-top: 12px; font-size: clamp(2.25rem, 1.4rem + 3vw, 4rem); line-height: 1.02; letter-spacing: -0.045em; font-weight: 750; max-width: 10em; }
.beat p:not(.beat__time) { margin-top: 18px; max-width: 28em; color: var(--soft); font-size: var(--step-1); line-height: 1.45; }
.beat__shot { display: none; }
.day__stage { z-index: 2; position: sticky; top: 0; height: 100svh; padding-top: 72px; display: grid; place-items: center; }
.day__stage .device { width: auto; height: min(calc(100svh - 112px), 720px); }
.day__stage .device img { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); clip-path: inset(100% 0 0 0 round 32px); transition: clip-path 620ms cubic-bezier(0.65, 0, 0.35, 1); }
.day__stage .device img.is-active { clip-path: inset(0 0 0 0 round 32px); z-index: 1; }
@media (max-width: 900px) {
  .day { padding-top: 0; }
  .day__head { padding-block: var(--section) 24px; }
  .day__grid { display: block; width: 100%; }
  .day__stage { display: none; }
  .beat { min-height: 0; padding: 56px var(--gutter); --c: var(--canvas); background: var(--c); }
  .beat[data-chapter="today"] { color: var(--fg); --soft: var(--fg-2); --stamp: var(--gold); }
  .beat[data-chapter="draft"] { --c: var(--paper); color: var(--ink); --soft: var(--ink-2); --stamp: var(--ink); }
  .beat[data-chapter="chase"] { --c: var(--amber); color: var(--ink); --soft: var(--ink); --stamp: var(--ink); }
  .beat[data-chapter="inbox"] { --c: var(--blue); color: var(--paper); --soft: oklch(0.93 0.02 266); --stamp: var(--yolk); }
  .beat[data-chapter="proof"] { --c: var(--yolk); color: var(--ink); --soft: var(--ink); --stamp: var(--ink); }
  .beat { position: relative; overflow: clip; }
  .beat__shot { --p: 0; transform: perspective(900px) translateY(calc((1 - var(--p)) * 64px)) rotateX(calc((1 - var(--p)) * 16deg)) scale(calc(0.9 + var(--p) * 0.1)); display: block; width: min(76vw, 300px); height: auto; margin: 32px auto 0; border-radius: 28px; box-shadow: 0 0 0 1px oklch(0.97 0.01 262 / 0.2), 0 24px 60px -24px oklch(0 0 0 / 0.6); }
}

/* ---------- Radar ---------- */
.scan { background: oklch(0.11 0.012 262); padding-block: var(--section); overflow: clip; }
.scan__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.scan h2 { font-size: var(--step-4); line-height: 1; letter-spacing: -0.045em; font-weight: 750; }
.scan__sub { margin-top: 18px; color: var(--fg-2); max-width: 32em; }
.scan__list { margin-top: 24px; display: grid; }
.scan__list button {
  width: 100%; min-height: 64px; padding: 12px 0 12px 20px; display: grid; gap: 2px; text-align: left; cursor: pointer; font: inherit; color: var(--fg-2);
  background: none; border: 0; border-top: 1px solid var(--line); position: relative; transition: color var(--t-micro) ease;
}
.scan__list li:last-child button { border-bottom: 1px solid var(--line); }
.scan__list button::before { content: ""; position: absolute; left: 2px; top: 22px; width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); transition: background-color var(--t-micro) ease; }
.scan__list button { grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; }
.scan__list b { color: var(--fg); font-weight: 600; grid-column: 1; }
.scan__list span { grid-column: 1; }
.scan__list em { grid-area: 1 / 2 / 3 / 3; align-self: center; font: 500 0.9375rem var(--mono); color: var(--fg-3); transition: color var(--t-state) ease; }
.scan__list button[aria-pressed="true"] em { color: var(--yolk); }
.scan__list button[aria-pressed="true"] b { text-decoration: line-through; text-decoration-color: var(--yolk); }
.scan__tally { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.scan__tally .num { font-size: var(--step-4); font-weight: 750; letter-spacing: -0.04em; color: var(--yolk); font-variant-numeric: tabular-nums; }
.scan__tally p:not(.num) { color: var(--fg-2); }
.scan__again { font: inherit; color: var(--yolk); background: none; border: 0; min-height: 44px; padding: 0; text-decoration: underline; cursor: pointer; }
.scan__list span { font-size: 0.9375rem; }
.scan__list button:hover { color: var(--fg); }
.scan__list button[aria-pressed="true"] { color: var(--yolk); }
.scan__list button[aria-pressed="true"]::before { background: var(--yolk); }
.scan__list button:active b { opacity: 0.8; }

.scope { container-type: size; position: relative; aspect-ratio: 1; width: min(100%, 560px); justify-self: center; border-radius: 50%; overflow: clip; }
.scope__ring { position: absolute; border-radius: 50%; border: 1px solid oklch(0.85 0.165 88 / 0.3); inset: 0; }
.scope__ring:nth-of-type(3) { inset: 17%; }
.scope__ring:nth-of-type(4) { inset: 34%; }
.scope__sun { position: absolute; inset: 44%; border-radius: 50%; background: var(--yolk); box-shadow: 0 0 60px 12px oklch(0.76 0.165 68 / 0.5); }
.scope__sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, oklch(0.76 0.165 68 / 0.34), transparent 22%); animation: sweep-round 6s linear infinite; }
@keyframes sweep-round { to { rotate: 360deg; } }
.blip { --cx: 0; --cy: 0; position: absolute; width: 16px; height: 16px; margin: -8px; border-radius: 50%; background: var(--yolk); transition: translate 760ms cubic-bezier(0.65, 0, 0.35, 1), opacity 300ms ease 560ms; }
.blip::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid oklch(0.85 0.165 88 / 0.55); animation: blip-call 1.8s ease-out infinite; }
.blip.is-safe { translate: calc(var(--cx) * 1cqw) calc(var(--cy) * 1cqh); opacity: 0; }
.blip.is-safe::after { animation: none; }
@keyframes blip-call { 70%, 100% { transform: scale(1.75); opacity: 0; } }
.blip[data-blip-dot="ocean"] { left: 62%; top: 34%; --cx: -12; --cy: 16; }
.blip[data-blip-dot="elm"] { left: 26%; top: 44%; --cx: 24; --cy: 6; }
.blip[data-blip-dot="kent"] { left: 72%; top: 76%; --cx: -22; --cy: -26; }
.blip[data-blip-dot="mill"] { left: 13%; top: 74%; --cx: 37; --cy: -24; }
@media (max-width: 900px) { .scan__grid { grid-template-columns: minmax(0, 1fr); } .scope { order: -1; width: min(100%, 420px); } }

/* ---------- Daylight ---------- */
.daylight { background: var(--paper); color: var(--ink); padding-bottom: var(--section); overflow: clip; }
.daylight__sky { height: clamp(220px, 34vw, 400px); }
.daylight h2 { margin-top: clamp(32px, 5vw, 64px); font-size: clamp(2.75rem, 1.2rem + 5.6vw, 5.75rem); line-height: 0.98; letter-spacing: -0.05em; font-weight: 750; max-width: 9em; }
.nots { margin-top: clamp(32px, 5vw, 56px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px clamp(24px, 4vw, 48px); }
.nots li { border-top: 2px solid var(--ink); padding-top: 14px; display: grid; gap: 8px; align-content: start; }
.nots b { font-size: var(--step-2); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.nots span { color: var(--ink-2); }
.window { --p: 1; --lean-x: 0; --lean-y: 0; transform-origin: 50% 100%; transform: perspective(1800px) rotateX(calc((1 - var(--p)) * 26deg + var(--lean-y) * -3deg)) rotateY(calc(var(--lean-x) * 4deg)) scale(calc(0.86 + var(--p) * 0.14)); margin: clamp(48px, 7vw, 88px) 0 0; border-radius: var(--r-lg); overflow: clip; background: var(--ink); box-shadow: 0 40px 90px -40px oklch(0.17 0.02 262 / 0.6); }
.window__bar { display: flex; gap: 8px; padding: 12px 16px; }
.window__bar i { width: 11px; height: 11px; border-radius: 50%; background: oklch(0.97 0.01 262 / 0.22); }
.window img { width: 100%; height: auto; }
.window figcaption { padding: 12px 16px; color: var(--fg-2); font-size: var(--step--1); }
@media (max-width: 760px) { .nots { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Doors: a type index; hovering floods the row ---------- */
.doors.section { background: var(--canvas); padding-block: var(--section); }
.doors .section-head { max-width: 30em; min-height: clamp(160px, 26vh, 300px); }
.doors__ring { position: absolute; right: 0; top: -40px; width: 44%; height: 340px; }
.index__go { text-align: right; }
@media (max-width: 900px) { .doors__ring { position: static; width: 100%; height: 240px; } .index__go { text-align: left; } }
.index { margin-top: 32px; }
.index li { border-top: 1px solid var(--line-strong); }
.index li:last-child { border-bottom: 1px solid var(--line-strong); }
.index__row { position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr) 230px 24px; gap: 8px 24px; align-items: baseline; padding: clamp(20px, 3vw, 36px) 12px; color: var(--fg); text-decoration: none; overflow: clip; isolation: isolate; transition: color 220ms ease; }
.index__row::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--yolk); clip-path: inset(0 100% 0 0); transition: clip-path 420ms cubic-bezier(0.22, 1, 0.36, 1); }
.index__kicker { color: var(--gold); font-size: var(--step--1); }
.index__row b { font-size: clamp(1.75rem, 1rem + 3vw, 3.5rem); line-height: 1.04; letter-spacing: -0.04em; font-weight: 750; transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1); }
.index__go { color: var(--fg-2); }
.index__row svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; align-self: center; transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1); }
.index__row:hover, .index__row:focus-visible { color: var(--ink); }
.index__row:hover::before, .index__row:focus-visible::before { clip-path: inset(0 0 0 0); }
.index__row:hover b, .index__row:focus-visible b { transform: translateX(16px); }
.index__row:hover svg, .index__row:focus-visible svg { transform: translateX(6px); }
.index__row:hover span, .index__row:focus-visible span { color: var(--ink); }
@media (max-width: 760px) { .index__row { grid-template-columns: minmax(0, 1fr) 24px; } .index__kicker, .index__row b, .index__go { grid-column: 1; } .index__row svg { grid-area: 1 / 2 / 4 / 3; } }

/* ---------- Close ---------- */
.close { background: var(--ember); color: var(--ink); padding-block: var(--section); overflow: clip; }
.close__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.close__offer { position: relative; min-width: 0; }
.close__price {
  font-size: clamp(5rem, 11.5vw, 11rem); line-height: 0.9; font-weight: 800; letter-spacing: -0.06em; color: var(--yolk);
  text-shadow: 1px 1px 0 var(--extrude), 2px 2px 0 var(--extrude), 3px 3px 0 var(--extrude), 4px 4px 0 var(--extrude), 5px 5px 0 var(--extrude), 6px 6px 0 var(--extrude), 7px 7px 0 var(--extrude), 8px 8px 0 var(--extrude);
}
.close h2 { margin-top: 20px; font-size: var(--step-3); line-height: 1.04; letter-spacing: -0.04em; font-weight: 750; max-width: 13em; }
.close__offer > p:last-of-type { margin-top: 14px; max-width: 30em; font-size: var(--step-1); line-height: 1.45; }
.close__sun { position: absolute; right: 0; top: -8px; width: clamp(96px, 13vw, 150px); height: auto; }
.close__form { margin: 0; width: 100%; padding: clamp(20px, 3vw, 32px); border-radius: var(--r-lg); background: var(--ink); color: var(--fg); }
.close__form .pilot__alt { margin: 0; text-align: center; }
.close__form .waitlist__status { color: var(--fg-2); }
@media (max-width: 900px) { .close__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Reduced motion: one still frame, every scene in its final state ---------- */
@media (prefers-reduced-motion: reduce) {
  .rise { height: auto; }
  .rise__stage { position: relative; height: auto; min-height: 100svh; }
  .rise__copy { opacity: 1; translate: none; }
  .blip, .blip::after { animation: none; transition: opacity 1ms; }
  .rise__ready { display: none; }
  .device--hero { margin-top: 112px; translate: none; rotate: none; }
  .scope__sweep { animation: none; }
  .window, .beat__shot { transform: none; }
  .day__stage .device img { transition: none; }
}