/* Scroll choreography layer. Everything here applies only under html.motion (set in <head> when motion is allowed). */
.rail, .cursor-glow, .stage, .story, .ticker { display: none; }

html.motion body { overflow-x: clip; }
html.motion .top { position: fixed; inset: 0 0 auto 0; background: linear-gradient(180deg, rgb(0 0 0 / 0.72), rgb(0 0 0 / 0)); border: 0; backdrop-filter: none; }
html.motion[data-nav="light"] .top { --mts-ink: #000; --mts-ink-muted: #333; color: var(--mts-ink); background: linear-gradient(180deg, rgb(241 242 242 / 0.88), rgb(241 242 242 / 0)); }

/* Progress rail */
html.motion .rail { display: block; position: fixed; left: clamp(10px, 1.8vw, 26px); top: 50%; z-index: 30; height: 42vh; width: 3px; transform: translateY(-50%); }
.rail::after { content: ""; position: absolute; inset: -12px -16px -12px -10px; }
.rail::before { content: ""; position: absolute; inset: 0; background: var(--mts-hairline); border-radius: 3px; }
.rail-fill { position: absolute; inset: 0; border-radius: 3px; background: linear-gradient(var(--mts-blue) 50%, var(--mts-green) 50%); transform-origin: top; transform: scaleY(0); }
.rail-ticks { list-style: none; margin: 0; padding: 0; }
.rail-ticks li { position: absolute; left: -3px; width: 9px; height: 9px; margin-top: -4px; border-radius: 50%; background: var(--mts-surface-100); border: 2px solid var(--mts-hairline); transition: background 0.3s, border-color 0.3s, transform 0.3s; }
.rail-ticks li span { position: absolute; left: 20px; top: -4px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mts-ink); opacity: 0; transform: translateX(-6px); transition: opacity 0.3s, transform 0.3s; white-space: nowrap; background: rgb(0 0 0 / 0.7); padding: 0.15rem 0.5rem; border-radius: 4px; }
.rail-ticks li.is-on { background: var(--mts-green); border-color: var(--mts-green); transform: scale(1.35); }
.rail:hover .rail-ticks li span { opacity: 1; transform: none; }

/* Cursor light */
html.motion .cursor-glow { display: block; position: fixed; left: 0; top: 0; z-index: 2; width: 70vmax; height: 70vmax; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, color-mix(in srgb, var(--mts-green) 11%, transparent), transparent 70%); transform: translate(calc(var(--mx, 50vw) - 50%), calc(var(--my, 50vh) - 50%)); mix-blend-mode: screen; opacity: 0; transition: opacity 0.8s; }
html.motion .cursor-glow.on { opacity: 1; }

/* Hero stage */
html.stage-on .hero { display: none; }
html.stage-on .stage { display: block; position: relative; height: calc(100vh + var(--stage-scroll, 580vh)); }
.stage-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #000; isolation: isolate; }
.stage-scenes, .scene { position: absolute; inset: 0; }
.scene { opacity: 0; }
.rig { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.rig img { display: block; user-select: none; -webkit-user-drag: none; }
.rig svg { position: absolute; left: 0; top: 0; pointer-events: none; }
.rig iframe { position: absolute; left: 0; top: 0; border: 0; background: #000; transform-origin: 0 0; }
.stage-shade { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 42%, transparent 38%, rgb(0 0 0 / 0.62) 100%), linear-gradient(0deg, rgb(0 0 0 / 0.78) 0%, transparent 34%), linear-gradient(180deg, rgb(0 0 0 / 0.55) 0%, transparent 22%); }
.stage-copy { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: 6rem 5vw 3rem; pointer-events: none; }
.stage-title { margin: 0.4rem 0 1.2rem; font-size: clamp(3rem, 10.5vw, 9.5rem); line-height: 0.9; font-weight: 700; letter-spacing: -0.025em; text-transform: uppercase; }
.stage-title span { color: var(--mts-green); }
.stage-copy .lede { margin-inline: auto; max-width: 34ch; }
.hud { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.hud-clock { position: absolute; right: clamp(24px, 5vw, 84px); top: clamp(80px, 12vh, 120px); text-align: right; }
.hud-label { display: inline-block; margin-bottom: 0.6rem; padding: 0.3rem 0.9rem; border-radius: 9999px; background: var(--mts-blue); color: #000; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; }
.hud-time { display: block; text-shadow: 0 2px 30px rgb(0 0 0 / 0.65); font-size: clamp(2.6rem, 6.4vw, 5.6rem); line-height: 1; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.hud-caption { position: absolute; left: clamp(56px, 6vw, 110px); bottom: clamp(32px, 7vh, 84px); max-width: 22ch; text-shadow: 0 2px 28px rgb(0 0 0 / 0.7); }
.hud-title { margin: 0; font-size: clamp(1.9rem, 4vw, 3.4rem); line-height: 1.02; font-weight: 700; letter-spacing: -0.015em; }
.hud-sub { margin: 0.7rem 0 0; color: var(--mts-ink-muted); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.8rem; }
.hud-dots { position: absolute; right: clamp(24px, 5vw, 84px); bottom: clamp(32px, 7vh, 84px); display: flex; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.hud-dots li { width: 2.4rem; height: 0.3rem; border-radius: 9px; background: rgb(255 255 255 / 0.28); transition: background 0.4s; }
.hud-dots li.is-on { background: var(--mts-green); }
/* Grain hides the softness of the upscaled room photos and ties scenes together */
.stage-pin::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0.09; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.stage-hint { position: absolute; left: 50%; bottom: 2.2vh; margin: 0; transform: translateX(-50%); display: grid; justify-items: center; gap: 0.5rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--mts-ink-muted); }
.stage-hint i { width: 2px; height: 2.6rem; background: linear-gradient(var(--mts-green), transparent); transform-origin: top; animation: hint 1.8s ease-in-out infinite; }
@keyframes hint { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* Ticker */
html.motion .ticker { display: block; overflow: hidden; background: var(--mts-surface-000); border-block: 1px solid var(--mts-hairline); padding-block: 1.1rem; position: relative; z-index: 3; }
.ticker-track { display: flex; width: max-content; white-space: nowrap; font-size: clamp(1.5rem, 3.4vw, 2.8rem); font-weight: 700; letter-spacing: -0.015em; text-transform: uppercase; will-change: transform; }
.ticker-item { display: inline-flex; align-items: baseline; gap: 0.7rem; padding-right: 3rem; }
.ticker-item b { color: var(--mts-green); font-variant-numeric: tabular-nums; }
.ticker-item::after { content: ""; width: 0.55em; height: 0.55em; margin-left: 3rem; border-radius: 50%; background: var(--mts-blue); align-self: center; }

/* Story chapters */
html.motion .story { display: block; position: relative; z-index: 3; padding-block: 14vh 0; background: linear-gradient(180deg, var(--mts-surface-000), var(--mts-surface-100) 60%, var(--mts-surface-000)); }
html.motion .story > .wrap { width: min(100% - 2rem, 104rem); }
.story-head { padding-inline: clamp(1rem, 4vw, 4rem); }
.story-head .eyebrow { color: var(--mts-blue); }
.story-head h2 { margin: 0.4rem 0 0; font-size: clamp(2.6rem, 7vw, 6.4rem); line-height: 0.94; font-weight: 700; letter-spacing: -0.025em; text-transform: uppercase; }
.story-head h2 span { color: var(--mts-green); }
.story-body { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 0.8fr); gap: clamp(1rem, 3vw, 3.5rem); align-items: start; }
.story-device { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; align-content: start; padding-top: clamp(5rem, 15vh, 9rem); }
.story-device .edge-stage { padding: 0 0 4vh; }
.story-device .edge-device { --w: min(90cqw, 1500px, calc(76vh * var(--ratio))); }
.story-steps { list-style: none; margin: 0; padding: 0; }
.step { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-left: 1.6rem; border-left: 3px solid var(--mts-hairline); opacity: 0.26; transition: opacity 0.45s, border-color 0.45s; }
.step.is-on { opacity: 1; border-color: var(--mts-green); }
.step h3 { margin: 0 0 0.7rem; font-size: clamp(1.6rem, 2.6vw, 2.5rem); line-height: 1.06; letter-spacing: -0.01em; }
.step p { margin: 0; color: var(--mts-ink-muted); max-width: 32ch; font-size: 1.1rem; }
@media (min-width: 900px) {
  .story-body { grid-template-columns: minmax(0, 1fr); }
  .story-device, .story-steps { grid-area: 1 / 1; }
  .story-device { align-content: center; justify-items: center; padding-top: 4rem; row-gap: clamp(1.2rem, 4vh, 2.6rem); }
  .story-device::before { content: ""; position: absolute; inset: 14% -4% 4%; z-index: -1; background: radial-gradient(60% 55% at 50% 45%, color-mix(in srgb, var(--mts-blue) 16%, transparent), transparent 70%); pointer-events: none; }
  .story-device .edge-stage { width: 100%; padding: 0; }
  .story-device .edge-device { --w: min(94cqw, 1500px, calc(47vh * var(--ratio))); }
  .story-steps { pointer-events: none; }
  .step, .step.is-on { opacity: 0; border-color: transparent; }
}
.story-caption { display: none; }
@media (min-width: 900px) {
  .story-caption { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(1.2rem, 3vw, 3rem); align-items: end; width: min(100%, 76rem); padding-inline: clamp(0.5rem, 2vw, 2rem); }
  .cap-num { font-weight: 700; font-size: clamp(3rem, 6vw, 5.4rem); line-height: 0.82; font-variant-numeric: tabular-nums; color: var(--mts-green); }
  .cap-num small { margin-left: 0.5em; font-size: 0.26em; letter-spacing: 0.18em; color: var(--mts-ink-muted); }
  .cap-text { display: grid; gap: 0.5rem; max-width: 46rem; }
  .story-caption h3 { margin: 0; font-size: clamp(1.8rem, 3.1vw, 3rem); line-height: 1.02; letter-spacing: -0.015em; }
  .story-caption p { margin: 0; color: var(--mts-ink-muted); font-size: clamp(1rem, 1.3vw, 1.2rem); max-width: 52ch; }
  .cap-pips { grid-column: 1 / -1; display: flex; gap: 0.4rem; margin-top: 1.3rem; }
  .cap-pips i { flex: 1; height: 3px; border-radius: 3px; background: var(--mts-hairline); transition: background 0.4s; }
  .cap-pips i.is-on { background: var(--mts-green); }
  .story-themes[data-tone="light"] .cap-num, .story-themes[data-tone="light"] .cap-pips i.is-on { color: #006b1a; background-color: transparent; }
  .story-themes[data-tone="light"] .cap-pips i.is-on { background: #006b1a; }
}
html.motion .story.story-themes { background-image: none; background-color: var(--mts-surface-100); color: var(--mts-ink); }
.story-device .edge-screen::before { display: none; }
.story-themes[data-tone="light"] { --mts-ink: #000; --mts-ink-muted: #555; --mts-hairline: #d0d2d3; color: #000; }
.story-themes[data-tone="light"] .story-head h2 span { color: #006b1a; }
.story-themes[data-tone="light"] .story-head .eyebrow { color: #00668f; }
.story-themes[data-tone="light"] .step.is-on { border-color: #006b1a; }

/* Ghost pointer and spotlight, drawn inside the device screen (em = 1% of screen width) */
.ghost { position: absolute; left: 0; top: 0; z-index: 6; width: 3.4em; height: 3.4em; margin: -1.7em 0 0 -1.7em; pointer-events: none; opacity: 0; }
.ghost::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 0.24em solid #fff; background: rgb(255 255 255 / 0.2); box-shadow: 0 0 1.2em rgb(0 0 0 / 0.45); }
.ghost::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 0.22em solid var(--mts-green); opacity: 0; }
.ghost.tap::after { animation: ripple 0.7s ease-out; }
@keyframes ripple { from { transform: scale(0.4); opacity: 1; } to { transform: scale(2.4); opacity: 0; } }
.spot { position: absolute; z-index: 6; border: 0.2em solid var(--mts-green); border-radius: 0.7em; box-shadow: 0 0 0 0.5em color-mix(in srgb, var(--mts-green) 22%, transparent), 0 0 3em color-mix(in srgb, var(--mts-green) 45%, transparent); pointer-events: none; opacity: 0; }

/* Size strip: slot outline and the room left over */
.strip-slot { position: absolute; z-index: 5; border: 0.2em solid var(--mts-green); border-radius: 0.7em; pointer-events: none; box-shadow: 0 0 2.5em color-mix(in srgb, var(--mts-green) 40%, transparent); }
.strip-badge { position: absolute; z-index: 6; left: 0; top: 0; padding: 0.25em 0.9em; border-radius: 9999px; background: var(--mts-green); color: #000; font-weight: 700; font-size: 1.5em; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; pointer-events: none; }
.strip-ghost { position: absolute; z-index: 4; border: 0.14em dashed rgb(255 255 255 / 0.28); border-radius: 0.7em; display: grid; place-items: center; font-size: 1.5em; color: rgb(255 255 255 / 0.35); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; pointer-events: none; }

/* Free play block under each story */
html.motion .widget .widget-head { display: none; }
html.motion .widget { padding-block: 6vh 12vh; position: relative; z-index: 3; background: var(--mts-surface-000); }
html.motion .widget .wrap::before { content: "Your turn. Everything here is live."; display: block; margin-bottom: 1.4rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mts-blue); }
html.motion .themes { display: none; }
html.motion .how, html.motion .soon, html.motion .faq, html.motion .foot { position: relative; z-index: 3; }

/* Finale */
html.motion .how { border-top: 0; padding-block: 40vh 14vh; background: var(--mts-surface-000); }
.how-bridge { position: absolute; inset: 0 0 auto 0; height: 34vh; background: linear-gradient(var(--bridge-from), var(--mts-surface-000)); pointer-events: none; }
html.motion .how .wrap { position: relative; }
html.motion .how .section-head h2 { font-size: clamp(2.4rem, 6vw, 5rem); text-transform: uppercase; letter-spacing: -0.02em; }
html.motion .steps { display: block; position: relative; }
html.motion .steps li { display: grid; grid-template-columns: minmax(7rem, 15rem) minmax(0, 1fr); align-items: center; column-gap: clamp(1rem, 4vw, 4rem); padding: clamp(1.6rem, 5vh, 3rem) 0; background: none; border: 0; border-top: 1px solid var(--mts-hairline); border-radius: 0; }
html.motion .steps li:last-child { border-bottom: 1px solid var(--mts-hairline); }
html.motion .step-no { grid-row: 1 / span 2; display: block; width: auto; height: auto; margin: 0; border-radius: 0; background: none; font-size: clamp(6rem, 15vw, 12rem); line-height: 0.8; font-weight: 700; color: transparent; -webkit-text-stroke: 2px color-mix(in srgb, var(--mts-ink) 50%, transparent); transition: color 0.5s, -webkit-text-stroke-color 0.5s; }
html.motion .steps li.is-lit .step-no { color: var(--mts-green); -webkit-text-stroke-color: var(--mts-green); }
html.motion .steps h3 { grid-column: 2; align-self: end; margin: 0 0 0.5rem; font-size: clamp(1.8rem, 4vw, 3.4rem); line-height: 1; letter-spacing: -0.02em; }
html.motion .steps p { grid-column: 2; align-self: start; max-width: 40ch; font-size: clamp(1.05rem, 1.5vw, 1.3rem); }
html.motion .faq { padding-block: 14vh; background: var(--mts-surface-000); }
html.motion .faq .section-head h2 { font-size: clamp(2.4rem, 6vw, 5rem); text-transform: uppercase; letter-spacing: -0.02em; }
html.motion .faq-list { max-width: none; gap: 0; }
html.motion details { background: none; border: 0; border-top: 1px solid var(--mts-hairline); border-radius: 0; }
html.motion details:last-child { border-bottom: 1px solid var(--mts-hairline); }
html.motion summary { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.5rem 0; list-style: none; font-size: clamp(1.25rem, 2.4vw, 2rem); letter-spacing: -0.01em; transition: transform 0.3s, color 0.3s; }
html.motion summary::-webkit-details-marker { display: none; }
html.motion summary::after { content: "+"; flex: none; font-size: 2.4rem; line-height: 0.6; font-weight: 400; color: var(--mts-green); transition: transform 0.35s; }
html.motion details[open] summary::after { transform: rotate(45deg); }
html.motion summary:hover { transform: translateX(0.6rem); }
html.motion details p { padding: 0 0 1.8rem; max-width: 60ch; font-size: 1.15rem; }
html.motion { interpolate-size: allow-keywords; }
html.motion details::details-content { block-size: 0; overflow: clip; transition: block-size 0.4s ease, content-visibility 0.4s allow-discrete; }
html.motion details[open]::details-content { block-size: auto; }
html.motion .soon-marquee { display: flex; }
html.motion .soon { position: relative; overflow: hidden; padding-block: 26vh 22vh; text-align: left; background: radial-gradient(70% 60% at 30% 90%, color-mix(in srgb, var(--mts-green) 20%, transparent), transparent 70%), var(--mts-surface-000); }
.soon-marquee { display: none; position: absolute; inset: 8% 0 auto 0; width: max-content; font-size: clamp(7rem, 22vw, 20rem); font-weight: 700; line-height: 1; text-transform: uppercase; white-space: nowrap; color: transparent; -webkit-text-stroke: 2px rgb(255 255 255 / 0.07); pointer-events: none; will-change: transform; }
.soon-marquee span { padding-right: 2rem; }
html.motion .soon-inner { position: relative; z-index: 1; text-align: left; }
html.motion .soon-inner .lede { margin-inline: 0; text-align: left; }
.soon-title { margin: 0.4rem 0 1.4rem; font-size: clamp(2.4rem, 7vw, 7rem); line-height: 0.92; font-weight: 700; letter-spacing: -0.03em; text-transform: uppercase; }
.soon-title span { color: var(--mts-green); }
.soon-bars { display: grid; gap: 0.7rem; margin-top: 3rem; max-width: 36rem; }
.soon-bars i { display: block; height: 0.7rem; border-radius: 9999px; background: var(--mts-blue); transform-origin: left; }
.soon-bars i:last-child { background: var(--mts-green); width: 72%; }

/* Split text masks */
.split .line-mask { overflow: clip; padding-block: 0.06em; }

@media (max-width: 899.98px) {
  html.motion .rail { display: none; }
  html.motion .story { padding-block: 9vh 2vh; }
  .story-body { grid-template-columns: minmax(0, 1fr); }
  .story-device { top: 3.6rem; height: auto; z-index: 5; padding-bottom: 0.5rem; background: linear-gradient(var(--mts-surface-000) 80%, transparent); }
  .story-device .edge-device { --w: min(86cqw, 1180px, calc(40vh * var(--ratio))); }
  .step { min-height: 92vh; justify-content: flex-end; padding-bottom: 10vh; opacity: 0.62; }
  html.motion .top nav { display: none; }
  html.motion .hero { padding-top: 5.5rem; }
  html.motion .top-row { justify-content: flex-start; }
  .stage-title { font-size: clamp(2.6rem, 14vw, 5rem); }
  .soon-marquee { font-size: 30vw; }
  html.motion .steps li { grid-template-columns: 4.2rem minmax(0, 1fr); }
  html.motion .step-no { font-size: 4.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .stage-hint i { animation: none; }
}