/* Scroll story: spin → front → zoom into the screen */
.xs { position: relative; height: 720vh; }
.xs-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.xs-intro { position: absolute; left: 0; right: 0; top: calc(env(safe-area-inset-top, 0px) + 112px); display: grid; justify-items: center; text-align: center; gap: var(--s2); padding-inline: 16px; z-index: 3; will-change: opacity, transform; }
.xs-intro h1 { font-size: var(--t-hero); line-height: 1; font-weight: 700; letter-spacing: -.045em; text-wrap: balance; max-width: 14ch; }
.xs-intro h1 span { color: var(--ink-3); }
.xs-intro p { font-size: 18px; color: var(--ink-2); max-width: 48ch; text-wrap: balance; }
.xs-intro .row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: var(--s1); }
.xs-mach { position: absolute; left: 0; top: 0; width: var(--mw); aspect-ratio: 1800 / 1242; transform-origin: 0 0; z-index: 1; }
.xs-mach > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.xs-quad { position: absolute; left: 0; top: 0; width: 2048px; height: 1280px; transform-origin: 0 0; border-radius: 14px; overflow: hidden; opacity: 0; }
.xs-quad.black { background: #0c0d10; }
.xs-quad img { width: 100%; height: 100%; display: block; }
.xs-stats { position: absolute; z-index: 2; pointer-events: none; }
.xst { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: clamp(14px, 1.6vw, 22px); opacity: 0; will-change: opacity, transform; width: max-content; }
.xst b { font-size: clamp(52px, 5.4vw, 88px); white-space: nowrap; line-height: .95; font-weight: 700; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.xst b small { font-size: .32em; font-weight: 600; color: var(--ink-3); letter-spacing: -.01em; margin-left: .18em; }
.xst span { font-size: clamp(16px, 1.35vw, 20px); line-height: 1.35; color: var(--ink-2); max-width: 11em; }
.xst i { order: 1; display: block; width: 3px; height: 1.9em; border-radius: 2px; background: var(--accent); font-size: clamp(16px, 1.35vw, 20px); }
.xst span { order: 2; }
.xs-flat { position: absolute; left: 50%; z-index: 2; opacity: 0; box-sizing: border-box; background: #0a0b0d; border-radius: clamp(14px, 1.6vw, 26px); overflow: hidden; box-shadow: 0 40px 80px -40px rgba(16,24,40,.35), 0 0 0 1px rgba(0,0,0,.04); }
.xs-flat img { width: 100%; height: 100%; display: block; object-fit: fill; border-radius: 6px; }
.xs-copy { position: absolute; left: 0; right: 0; display: grid; justify-items: center; text-align: center; gap: var(--s2); padding-inline: 16px; opacity: 0; z-index: 3; }
.xs-copy h2 { font-size: var(--t-h2, clamp(32px, 4.4vw, 60px)); line-height: 1.04; font-weight: 700; letter-spacing: -.04em; text-wrap: balance; }
.xs-copy h2 span { color: var(--ink-3); }
.xs-copy p { font-size: clamp(16px, 1.4vw, 19px); color: var(--ink-2); max-width: 46ch; text-wrap: balance; }
.xs-foot { position: absolute; left: 0; right: 0; bottom: calc(var(--s4) + env(safe-area-inset-bottom, 0px)); display: flex; justify-content: center; align-items: center; gap: var(--s2); font-size: 13px; color: var(--ink-3); z-index: 3; transition: opacity .3s; }
.xs-foot .bar { width: 160px; height: 2px; border-radius: 2px; background: var(--line); overflow: hidden; }
.xs-foot .bar i { display: block; height: 100%; width: 100%; background: var(--ink); transform-origin: left; transform: scaleX(0); }
@media (max-width: 960px) { .xs { height: 620vh; } .xs-intro { top: calc(env(safe-area-inset-top, 0px) + 96px); } .xst b { font-size: clamp(40px, 11vw, 56px); } .xst span { font-size: 14px; max-width: 9.5em; } .xst i { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .xs { height: auto; } .xs-pin { position: relative; } }

/* dive: no edge fading — the frame stays bigger than the window where the machine is cut */
.xs-mach > img#xsframe { position: absolute; inset: 0; z-index: 1; }
#xsrefl { position: absolute; left: 0; width: 100%; height: 100%; object-fit: contain; transform: scaleY(-1); transform-origin: 50% 50%; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent var(--yf, 80%), rgba(0,0,0,.17) var(--yb, 96%), transparent calc(var(--yb, 96%) + .5%));
  mask-image: linear-gradient(to bottom, transparent var(--yf, 80%), rgba(0,0,0,.17) var(--yb, 96%), transparent calc(var(--yb, 96%) + .5%)); }
.xs-quad.ui { z-index: 2; }
.xs-quad.glass { width: 1000px; height: 1000px; border-radius: 0; opacity: 1; z-index: 3; pointer-events: none;
  /* a soft window-like reflection: brighter toward the upper-left corner, plus a broad, blurred sweep */
  background:
    radial-gradient(130% 100% at 0% 0%, rgba(255,255,255,.17), rgba(255,255,255,.07) 30%, rgba(255,255,255,.015) 55%, rgba(255,255,255,0) 70%),
    linear-gradient(114deg, rgba(255,255,255,0) calc(var(--g, 40%) - 20%), rgba(255,255,255,.075) var(--g, 40%), rgba(255,255,255,0) calc(var(--g, 40%) + 20%));
  mix-blend-mode: screen; }
.xs-flat { left: 0; margin: 0; }
.xs-flat::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 100% at 0% 0%, rgba(255,255,255,.1), rgba(255,255,255,.03) 35%, rgba(255,255,255,0) 60%); }

/* English headline: a little more air between letters and lines */
html[lang=en] .xs-intro h1 { letter-spacing: -.032em; line-height: 1.06; }
.xs-tag { position: absolute; left: 50%; top: 0; z-index: 2; margin: 0; opacity: 0; pointer-events: none; white-space: nowrap; text-align: center;
  font-size: clamp(30px, 3.4vw, 52px); font-weight: 700; letter-spacing: -.04em; line-height: 1.1; color: var(--ink-3); transform: translate(-50%, 16px); will-change: opacity, transform; }
.xs-tag span { transition: color .35s var(--ease, ease); }
.xs-tag span.on { color: var(--ink); }
@media (max-width: 960px) { .xs-tag { font-size: clamp(24px, 7vw, 34px); } }
/* number and label share one centre line: the middle of the digits */
.xst { align-items: center; }
.xst span, .xst i { position: relative; top: var(--xst-dy, 0px); }
.xst b small { vertical-align: .76em; }
.xst b small.base { vertical-align: baseline; }
.xs-swipe { position: absolute; left: 50%; top: 0; z-index: 2; width: 34px; height: 54px; transform: translateX(-50%); opacity: 0; pointer-events: none; display: none; }
.xs-swipe svg { width: 100%; height: 100%; fill: none; stroke: var(--ink-3); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.xs-swipe .dot { fill: var(--ink-3); stroke: none; animation: xs-swipe 2.4s ease-in-out infinite; }
.xs-swipe .up { animation: xs-swipe-up 2.4s ease-in-out infinite; }
.xs-swipe .dn { animation: xs-swipe-dn 2.4s ease-in-out infinite; }
@keyframes xs-swipe { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(-7px); } 75% { transform: translateY(7px); } }
@keyframes xs-swipe-up { 0%, 50%, 100% { opacity: .3; } 25% { opacity: 1; } }
@keyframes xs-swipe-dn { 0%, 50%, 100% { opacity: .3; } 75% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .xs-swipe .dot, .xs-swipe .up, .xs-swipe .dn { animation: none; } }

/* story layers are pictures/text only: never catch clicks meant for the hero buttons */
.xs-copy, .xs-flat, .xs-foot { pointer-events: none; }