/* landing.css — the home page: a scroll story over one live 3D stage, then the product sections.
   Built on the Kerf tokens; loaded only by Views/Home/Index.cshtml (after tokens.css, app.css, site.css). */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* The site nav, fixed and transparent over the dark hero; solid (and back in the page theme) after the story. */
.nav--overlay { position: fixed; inset: 0 0 auto 0; transition: background-color var(--dur-base), border-color var(--dur-base); }
.nav--overlay[data-solid="false"] { background: linear-gradient(180deg, rgb(8 8 8 / 0.72), rgb(8 8 8 / 0)); background-clip: padding-box; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--color-text); }
/* The assistant button would sit on the chapter panels: it waits until the story is over. */
html[data-in-story="true"] .assistant-fab { opacity: 0; visibility: hidden; pointer-events: none; }
.nav--overlay[data-solid="false"] .nav__link:hover { background: rgb(255 255 255 / 0.1); }
.nav--overlay[data-solid="false"] .brand__img--light { display: none; }
.nav--overlay[data-solid="false"] .brand__img--dark { display: block; }

/* ── story ── */
.story { position: relative; background: #070707; color: var(--color-text); }
.story__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; touch-action: pan-y; cursor: grab; }
.story__stage:active { cursor: grabbing; }
.story__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 900ms ease; }
.story[data-ready="true"] canvas { opacity: 1; }
.story__poster { position: absolute; inset: 0; background: #0b0b0a url(/kerf/images/hero-wall.webp) center / cover no-repeat; filter: blur(14px) brightness(0.55); transform: scale(1.08); }
.story__scrim { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(180deg, rgb(0 0 0 / 0.42) 0%, rgb(0 0 0 / 0) 22%, rgb(0 0 0 / 0) 70%, rgb(0 0 0 / 0.5) 100%); }
.story__loading { position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%); display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-mono); font-size: var(--text-caption); color: var(--color-text-muted); padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); background: rgb(0 0 0 / 0.5); backdrop-filter: blur(8px); transition: opacity 400ms; }
.story[data-ready="true"] .story__loading { opacity: 0; pointer-events: none; }
.story__ribs { width: 22px; --ribs-h: 12px; animation: pulse 1.2s var(--ease-in-out) infinite; }
.story__hint { position: absolute; left: var(--space-4); bottom: var(--space-4); display: none; align-items: center; gap: var(--space-2); margin: 0; font-family: var(--font-mono); font-size: var(--text-overline); letter-spacing: 0.06em; text-transform: uppercase; color: rgb(255 255 255 / 0.62); pointer-events: none; opacity: 0; transition: opacity 600ms; }
.story[data-ready="true"] .story__hint { opacity: 1; }
.story__hint .icon { width: 1.1rem; height: 1.1rem; }
@media (min-width: 56rem) { .story__hint { display: flex; } }

.story__chapters { position: relative; margin-top: -100vh; margin-top: -100svh; pointer-events: none; }
.chapter { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; position: relative; padding-block: 5.5rem 3rem; }
.chapter .container { width: 100%; }
.chapter a, .chapter button, .chapter input, .chapter label, .chapter .glass { pointer-events: auto; }
.chapter + .chapter { margin-top: 35vh; }

.chapter--hero { align-items: flex-end; padding-bottom: 12vh; }
.chapter__copy { max-width: 40rem; display: grid; gap: var(--space-5); text-shadow: 0 2px 30px rgb(0 0 0 / 0.65); }
.chapter__copy .display { font-size: clamp(2.6rem, 1.2rem + 6.2vw, 6rem); line-height: 0.96; }
.chapter__copy .lead { color: rgb(255 255 255 / 0.84); max-width: 30em; }
.chapter__copy .btn { text-shadow: none; }
.ticks3 { display: inline-block; width: 15px; height: 10px; margin-right: 10px; vertical-align: -1px; background: repeating-linear-gradient(90deg, var(--color-primary) 0 3px, transparent 3px 6px); }
.scrollcue { position: absolute; left: 50%; bottom: 1.25rem; width: 22px; height: 36px; margin-left: -11px; border: 1.5px solid rgb(255 255 255 / 0.5); border-radius: 12px; display: none; }
.scrollcue span { position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: #fff; animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }
@media (min-width: 56rem) { .scrollcue { display: block; } }
@media (prefers-reduced-motion: reduce) { .scrollcue span, .story__ribs { animation: none; } }

.glass { background: rgb(16 16 15 / 0.68); backdrop-filter: blur(18px) saturate(1.25); -webkit-backdrop-filter: blur(18px) saturate(1.25); border: 1px solid rgb(255 255 255 / 0.1); border-radius: var(--radius-xl); box-shadow: 0 24px 80px rgb(0 0 0 / 0.5); }
.chapter__card { max-width: 25rem; padding: var(--space-5); display: grid; gap: var(--space-4); }
.chapter__card--wide { max-width: 29rem; }
.chapter__card p { color: var(--color-text-muted); margin: 0; }
.chapter__card h2, .lpanel h2 { font-size: var(--text-h2); margin: 0; }
.chapter--right .container { display: flex; justify-content: flex-end; }
.chapter--right { align-items: flex-end; }
@media (min-width: 56rem) { .chapter--right { align-items: center; } }

.specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding-top: var(--space-4); border-top: 1px solid rgb(255 255 255 / 0.12); }
.specs--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 30rem) { .specs--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.specs dt { font-family: var(--font-mono); font-size: var(--text-overline); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-subtle); }
.specs dd { margin: 2px 0 0; font-family: var(--font-mono); font-size: var(--text-body); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-text); white-space: nowrap; }

/* play panel */
.chapter--play { min-height: 190vh; min-height: 190svh; align-items: flex-start; padding-block: 0; }
.chapter--play .container { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: flex-end; justify-content: center; padding-bottom: var(--space-3); }
.lpanel { width: 100%; max-width: 26rem; padding: var(--space-4); display: grid; gap: var(--space-4); }
.lpanel__head { display: grid; gap: var(--space-1); }
.lpanel__group { display: grid; gap: var(--space-2); min-width: 0; }
.lpanel__row { display: grid; gap: var(--space-4); }
.lpanel__label { margin: 0; display: flex; justify-content: space-between; font-size: var(--text-label); font-weight: 600; color: var(--color-text); }
.lpanel__label output { font-family: var(--font-mono); font-weight: 500; color: var(--color-text-muted); }
.lpanel__more { margin: 0; font-size: var(--text-caption); color: var(--color-text-subtle); }
.lpanel__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid rgb(255 255 255 / 0.12); }
.lpanel__live { margin: 0; font-family: var(--font-mono); font-size: var(--text-caption); color: var(--color-text-muted); }
.lpanel__live b { color: var(--color-text); }
.lpanel__error { margin: 0; font-size: var(--text-body-sm); color: #ff9d8a; }
.lpanel .range { --range-halo: transparent; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.tile { position: relative; aspect-ratio: 1; padding: 0; border: 1.5px solid rgb(255 255 255 / 0.14); border-radius: var(--radius-lg); overflow: hidden; background: #0c0c0b; cursor: pointer; color: inherit; font: inherit; transition: border-color 150ms, transform 150ms; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.85; filter: sepia(0.55) saturate(1.5) hue-rotate(-12deg) contrast(1.15); transition: opacity 150ms, transform 400ms; }
.tile span { position: absolute; inset: auto 0 0 0; padding: 14px 6px 6px; font-size: 0.6875rem; font-weight: 600; line-height: 1.15; text-align: center; background: linear-gradient(0deg, rgb(0 0 0 / 0.85), transparent); }
.tile:hover { border-color: rgb(255 255 255 / 0.4); } .tile:hover img { transform: scale(1.06); opacity: 1; }
.tile[aria-pressed="true"] { border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 30%, transparent); }
.tile:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (min-width: 30rem) { .lpanel__row { grid-template-columns: auto 1fr; align-items: end; } }
@media (min-width: 56rem) {
  .chapter--play .container { align-items: center; justify-content: flex-end; padding-bottom: 0; }
  .lpanel { padding: var(--space-5); gap: var(--space-5); }
}
@media (max-width: 55.99rem) {
  .lpanel__head h2 { font-size: var(--text-h3); }
  .lpanel__more { display: none; }
  .chapter__card { max-width: none; }
}

.sheet { margin: 0; display: grid; gap: var(--space-2); }
.sheet img { width: 100%; aspect-ratio: 2 / 1; object-fit: contain; background: #f1ece2; border-radius: var(--radius-md); padding: 6px; }
.sheet figcaption { font-size: var(--text-caption); color: var(--color-text-subtle); }

.only-no3d { display: none; }
.no3d .only-3d { display: none; } .no3d .only-no3d { display: inline; } .no3d a.only-no3d { display: inline-flex; }
/* no WebGL: static hero, interactive chapters removed */
.no3d .story__stage canvas, .no3d .story__loading, .no3d .story__hint, .no3d .chapter:not(.chapter--hero) { display: none; }
.no3d .story__poster { filter: brightness(0.6); transform: none; }
.no3d .chapter + .chapter { margin-top: 0; }

/* sections after the story */
.gens { align-items: stretch; }
.gen-card .card__body { display: grid; gap: var(--space-3); align-content: start; justify-items: start; }
.steps { counter-reset: step; display: grid; gap: var(--space-5); padding: 0; margin: 0; }
.steps li { list-style: none; display: grid; gap: var(--space-2); padding-top: var(--space-4); border-top: var(--border-w-strong) solid var(--color-text); }
.steps li::before { counter-increment: step; content: "0" counter(step); font-family: var(--font-mono); font-size: var(--text-caption); color: var(--color-primary-text); }
@media (min-width: 48rem) { .steps { grid-template-columns: repeat(3, 1fr); } }

/* film strip */
.film__grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
.film__clip { margin: 0; position: relative; border-radius: var(--radius-xl); overflow: hidden; background: #0b0b0a; aspect-ratio: 16 / 9; }
.film__clip video { width: 100%; height: 100%; object-fit: cover; display: block; }
.film__clip figcaption { position: absolute; left: var(--space-3); bottom: var(--space-3); padding: 4px 10px; border-radius: var(--radius-full); background: rgb(0 0 0 / 0.55); backdrop-filter: blur(6px); color: #f2efe8; font-family: var(--font-mono); font-size: var(--text-overline); letter-spacing: 0.06em; text-transform: uppercase; }
@media (min-width: 48rem) { .film__grid { grid-template-columns: repeat(3, 1fr); } .film__clip--wide { grid-column: 1 / -1; aspect-ratio: 21 / 9; } }
.story__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.no3d .story__video { display: block; }

.gen-card .card__link { color: inherit; }
.story .swatch { border-color: rgb(255 255 255 / 0.18); }
.lpanel .btn--block { margin-top: calc(var(--space-1) * -1); }
@media (max-width: 55.99rem) { .lpanel { gap: var(--space-3); } .lpanel__head .overline { display: none; } }