/* Mesa page: "the product tour".
   Identity: a centered hero where the product window stands on a mesa, a sticky chapter rail,
   one ink statement, and the layers shown as a labelled cross-section of the rock.
   Motion: the mesa rises under the window on load; chapter progress follows the scroll;
   leader lines draw in to name each layer. Load after site.css. */

/* Hero */
.m-hero { position: relative; overflow: hidden; padding: var(--space-9) 0 0; background: var(--surface); }
.m-hero__head { display: flex; flex-direction: column; align-items: center; max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--page-margin); text-align: center; }
.m-hero__title { max-width: 15ch; }
.m-hero__lead { max-width: 40em; }
.m-hero__actions { justify-content: center; }
.m-stage { position: relative; margin-top: var(--space-8); }
.m-stage__win { position: relative; z-index: 1; width: min(820px, calc(100% - 2 * var(--page-margin))); margin: 0 auto; }
/* The window hovers just above the flat cap of the mesa (cap top is 135px below the top of the 340px drawing; 18px gap). */
.m-stage__land { max-width: 1440px; margin: -117px auto 0; }
.m-stage__land svg { height: 340px; }
.m-stage__land .fz-mesa, .m-stage__land .fz-butte, .m-stage__land .fz-far { animation: fz-rise 1200ms var(--ease-settle) both; }
.m-stage__land .fz-far { animation-delay: 150ms; }
.m-stage__land .fz-butte { animation-delay: 300ms; }
.m-stage__land .fz-mesa { animation-delay: 450ms; }
.m-stage .mk-enter:not(.on) { transform: translateY(24px); }

/* Product windows in the chapters grow in from their base (only until they enter) */
.m-chapter .mk-enter { transform-origin: 50% 100%; }
.m-chapter .mk-enter:not(.on) { transform: scale(0.94); }

/* Chapter tour */
.m-tour { position: relative; padding: var(--space-10) 0 var(--space-10); background: var(--canvas); timeline-scope: --m-ch1, --m-ch2, --m-ch3, --m-tour; }
.m-tour__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; view-timeline-name: --m-tour; }
.m-rail { grid-column: 1 / span 4; position: sticky; top: calc(var(--nav-height) + var(--space-6)); display: flex; flex-direction: column; gap: var(--space-5); padding-right: var(--space-6); }
.m-rail__title { margin: 0; color: var(--ink); text-wrap: balance; }
.m-rail__list { list-style: none; margin: 0; padding: 0; display: grid; }
.m-rail__link { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--hairline); color: var(--ink); text-decoration: none; }
.m-rail__num { color: var(--ink-muted); font: 600 13px/20px var(--font-sans); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.m-rail__name { display: block; color: var(--ink); font: 600 20px/28px var(--font-display); letter-spacing: -0.005em; }
.m-rail__sub { display: block; color: var(--ink-muted); font: 400 14px/22px var(--font-sans); }
.m-rail__link:hover .m-rail__name { color: var(--accent); }
.m-rail__track { height: 2px; border-radius: 2px; background: var(--hairline); overflow: hidden; }
.m-rail__fill { display: block; height: 100%; background: var(--brand-mahogany); transform-origin: left; }

.m-chapters { grid-column: 5 / span 8; display: flex; flex-direction: column; gap: var(--space-11); }
.m-chapter { display: flex; flex-direction: column; gap: var(--space-4); scroll-margin-top: calc(var(--nav-height) + var(--space-6)); }
.m-chapter--1 { view-timeline-name: --m-ch1; }
.m-chapter--2 { view-timeline-name: --m-ch2; }
.m-chapter--3 { view-timeline-name: --m-ch3; }
.m-chapter__title { margin: 0; color: var(--ink); text-wrap: balance; }
.m-chapter__lead { margin: 0; color: var(--ink-secondary); max-width: var(--measure); text-wrap: pretty; }
.m-chapter__ui { margin-top: var(--space-4); }
.m-points { list-style: none; margin: var(--space-5) 0 0; padding: var(--space-5) 0 0; border-top: 1px solid var(--hairline); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.m-points li { display: grid; gap: 6px; align-content: start; }
.m-points img { width: 24px; height: 24px; }
.m-points__title { margin: 4px 0 0; color: var(--ink); font: 600 16px/24px var(--font-sans); }
.m-points__body { margin: 0; color: var(--ink-secondary); font: 400 14px/22px var(--font-sans); text-wrap: pretty; }

/* Built-in oversight: the one ink statement, with a slow scan over finished sessions */
.m-warden { position: relative; overflow: hidden; padding: var(--space-10) 0; background: var(--surface-ink); color: var(--on-ink); }
.m-warden__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center; }
.m-warden__title { margin: 0; color: var(--on-ink); max-width: 860px; font: 600 56px/1.04 var(--font-display); letter-spacing: -0.03em; text-wrap: balance; }
.m-warden__k { color: var(--brand-sky); }
.m-warden__body { margin: 0 0 var(--space-3); color: var(--on-ink-muted); max-width: var(--measure); text-wrap: pretty; }
.m-scan { container-type: inline-size; position: relative; display: flex; align-items: flex-end; gap: 6px; width: 100%; max-width: 880px; height: 56px; margin: var(--space-7) auto 0; }
.m-scan__tick { flex: 1; height: 100%; border-radius: 2px; background: color-mix(in srgb, var(--on-ink) 14%, transparent); }
.m-scan__tick--s { height: 50%; }
.m-scan__tick--m { height: 72%; }
.m-scan__tick--flag { background: var(--brand-sky); }
.m-scan__beam { position: absolute; top: -10px; bottom: -10px; left: 0; width: 72px; border-radius: 6px; background: color-mix(in srgb, var(--brand-sky) 22%, transparent); animation: m-beam 9s var(--ease-standard) infinite alternate; }
.m-scan__cap { margin: var(--space-3) 0 0; color: var(--on-ink-muted); }
@keyframes m-beam { from { transform: translateX(0); } to { transform: translateX(calc(100cqw - 72px)); } }

/* Layers: one mesa, cut open, with each rock band named */
.m-layers { padding: var(--space-10) 0; background: var(--surface); }
.m-layers__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; margin-top: var(--space-8); }
.m-layers__art { grid-column: 1 / span 8; }
.m-layers__text { grid-column: 10 / span 3; }
.m-layers .mx-name { font-size: 19px; }
.m-layers .mx-sub { font-size: 16px; }
.m-control__label { margin: 0; color: var(--ink-muted); font: 600 12px/16px var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; }
.m-control { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; }
.m-control li { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) 0; border-top: 1px solid var(--hairline); color: var(--ink-secondary); }
.m-control li b { color: var(--ink); font-weight: 600; }
.m-control img { width: 20px; height: 20px; flex: none; margin-top: 3px; }

/* Closing: mahogany, with what happens in the demo */
.m-close { padding: var(--space-10) 0; background: var(--brand-mahogany); color: #ffffff; }
.m-close__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
.m-close__grid > div { grid-column: 1 / span 6; }
.m-close__k { color: #e9d3cf; }
.m-close__title { margin: var(--space-3) 0 0; color: #ffffff; font: 600 56px/1.04 var(--font-display); letter-spacing: -0.03em; text-wrap: balance; max-width: 14ch; }
.m-close__body { margin: var(--space-4) 0 0; color: #e9d3cf; font: 400 19px/30px var(--font-sans); }
.m-close__plan { grid-column: 8 / span 5; list-style: none; margin: 0; padding: 0; counter-reset: none; }
.m-close__plan li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; padding: var(--space-5) 0; border-top: 1px solid #ffffff33; color: #e9d3cf; font: 400 16px/26px var(--font-sans); }
.m-close__plan li:last-child { border-bottom: 1px solid #ffffff33; }
.m-close__plan b { display: block; color: #ffffff; font: 600 18px/26px var(--font-display); }
.m-close__n { color: #e9d3cf; font: 600 13px/26px var(--font-sans); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }

/* Scroll-linked motion, where the browser supports it. Without support, everything simply shows. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .m-rail__fill { animation: m-fill linear both; animation-timeline: --m-tour; animation-range: contain 0% contain 100%; }
    .m-rail__item { animation: m-active linear both; animation-range: cover 15% cover 85%; }
    .m-rail__item--1 { animation-timeline: --m-ch1; }
    .m-rail__item--2 { animation-timeline: --m-ch2; }
    .m-rail__item--3 { animation-timeline: --m-ch3; }
    .m-stage__win { animation: m-lift linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
    .m-points li { animation: m-grow linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
    .m-layers__art { view-timeline-name: --m-xsec; }
    .m-layers .mx-lead { stroke-dasharray: 1; animation: m-draw linear both; animation-timeline: --m-xsec; }
    .m-layers .mx-label text, .m-layers .mx-dot { animation: m-fade linear both; animation-timeline: --m-xsec; }
    .m-layers .mx-label:nth-of-type(2) .mx-lead, .m-layers .mx-label:nth-of-type(2) text, .m-layers .mx-label:nth-of-type(2) .mx-dot { animation-range: entry 30% cover 40%; }
    .m-layers .mx-label:nth-of-type(3) .mx-lead, .m-layers .mx-label:nth-of-type(3) text, .m-layers .mx-label:nth-of-type(3) .mx-dot { animation-range: entry 45% cover 45%; }
    .m-layers .mx-label:nth-of-type(4) .mx-lead, .m-layers .mx-label:nth-of-type(4) text, .m-layers .mx-label:nth-of-type(4) .mx-dot { animation-range: entry 60% cover 50%; }
    .m-layers .mx-label:nth-of-type(5) .mx-lead, .m-layers .mx-label:nth-of-type(5) text, .m-layers .mx-label:nth-of-type(5) .mx-dot { animation-range: entry 75% cover 55%; }
    .m-close__plan li { animation: m-grow linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
  }
}
@keyframes m-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes m-active { 0%, 100% { opacity: 0.4; } 14%, 86% { opacity: 1; } }
@keyframes m-lift { to { translate: 0 -40px; } }
@keyframes m-grow { from { opacity: 0; scale: 0.96; } to { opacity: 1; scale: 1; } }
@keyframes m-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes m-fade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .m-scan__beam { animation: none; display: none; }
}

/* Tablet and down */
@media (max-width: 960px) {
  .m-tour__grid { grid-template-columns: 1fr; }
  .m-rail { grid-column: 1; position: static; padding-right: 0; margin-bottom: var(--space-8); }
  .m-rail__track { display: none; }
  .m-chapters { grid-column: 1; gap: var(--space-10); }
  .m-layers__art, .m-layers__text { grid-column: 1 / -1; }
  .m-layers__text { margin-top: var(--space-7); }
  .m-close__grid > div, .m-close__plan { grid-column: 1 / -1; }
  .m-close__plan { margin-top: var(--space-7); }
}
@media (max-width: 767px) {
  .m-hero { padding-top: var(--space-7); }
  .m-stage__land svg { height: 260px; }
  .m-stage__land { margin-top: -89px; }
  .m-points { grid-template-columns: 1fr; }
  .m-tour, .m-warden, .m-layers, .m-close { padding: var(--space-8) 0; }
  .m-warden__title, .m-close__title { font-size: 36px; }
}