/* ============================================================
   Scroll-driven official site demo · UI Interaction Kit
   Tokens first, then scenes. Scroll position is the source of truth.
   ============================================================ */

:root{
  --bg:#0b0d12;
  --panel:#141821;
  --panel-2:#1a1f2b;
  --text:#e9ecf4;
  --dim:#9aa3b8;
  --dim-2:#6d768e;
  --line:#252c3b;
  --accent:#6ea8fe;
  --accent-soft:rgba(110,168,254,.18);
  --shadow:0 24px 60px rgba(0,0,0,.45);
  --holo-bg:#05070c;
  --holo-fill:#123a63;
  --holo-emis:#3b82f6;
  --holo-wire:#bfdbfe;
  --holo-ghost:#31405f;
  --holo-disc:#93c5fd;
  --track2:#2f3b52;
  --ok:#4ade80;

  --x-metal:#2a3145;
  --x-metal-2:#1d2431;
  --x-board:#22334a;
  --x-battery:#2b3a33;
  --x-detail:#39435c;
  --x-line:#39435c;
  --x-accent:var(--accent);
  --x-accent-soft:var(--accent-soft);
  --x-tag:var(--dim);

  --nav-h:64px;
  --maxw:1180px;
}

[data-theme="light"]{
  --bg:#f6f7fb;
  --panel:#ffffff;
  --panel-2:#eef1f7;
  --text:#141a26;
  --dim:#5b6579;
  --dim-2:#8b95a8;
  --line:#dfe4ee;
  --accent:#2563eb;
  --accent-soft:rgba(37,99,235,.12);
  --shadow:0 20px 48px rgba(20,30,60,.14);
  --holo-bg:#eaeef6;
  --holo-fill:#c7d9f2;
  --holo-emis:#2563eb;
  --holo-wire:#1e40af;
  --holo-ghost:#b3c1d6;
  --holo-disc:#2563eb;
  --track2:#c9d3e4;
  --ok:#16a34a;

  --x-metal:#e6eaf2;
  --x-metal-2:#d7dde9;
  --x-board:#c9d8ea;
  --x-battery:#cfe3d6;
  --x-detail:#b9c3d8;
  --x-line:#c3cbd9;
  --x-tag:var(--dim);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:var(--accent)}

.skip{
  position:absolute;left:-9999px;top:0;background:var(--panel);color:var(--text);
  padding:10px 14px;z-index:100;border:1px solid var(--line);border-radius:0 0 8px 0;
}
.skip:focus{left:0}

/* ---------------- nav (stable while scenes change) ---------------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:var(--maxw);margin:0 auto;height:var(--nav-h);
  display:flex;align-items:center;gap:18px;padding:0 22px;
}
.brand{color:var(--text);text-decoration:none;font-weight:700;font-size:15px;letter-spacing:.2px}
.brand span{color:var(--dim);font-weight:500;margin-left:6px}
.chapters{display:flex;gap:4px;margin-left:auto}
.chapters a{
  color:var(--dim);text-decoration:none;font-size:13px;padding:6px 11px;border-radius:999px;
}
.chapters a:hover{color:var(--text);background:var(--panel-2)}
.nav-actions{display:flex;align-items:center;gap:8px}
.badge{
  font-size:11px;color:var(--dim);border:1px solid var(--line);border-radius:999px;
  padding:4px 9px;white-space:nowrap;
}
.btn{
  background:var(--panel-2);color:var(--text);border:1px solid var(--line);
  border-radius:8px;padding:6px 11px;font-size:12.5px;cursor:pointer;text-decoration:none;
}
.btn:hover{border-color:var(--accent)}
.nav-progress{height:2px;background:transparent}
.nav-progress span{display:block;height:100%;width:0;background:var(--accent)}

/* ---------------- scenes ---------------- */
.scene{position:relative}
.scene .sticky{
  position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h));
  display:flex;flex-direction:column;justify-content:center;
  max-width:var(--maxw);margin:0 auto;padding:24px 22px;
}
.eyebrow{
  margin:0 0 10px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim-2);
}
h1{font-size:clamp(30px,4.4vw,54px);line-height:1.06;margin:0 0 14px;letter-spacing:-.02em}
h2{font-size:clamp(24px,3vw,38px);line-height:1.14;margin:0 0 12px;letter-spacing:-.01em}
h3{font-size:17px;margin:0 0 6px}
.lede{margin:0;color:var(--dim);max-width:56ch;font-size:15px}
.stage-note{margin:14px 0 0;font-size:12.5px;color:var(--dim-2);max-width:60ch}

/* ---------------- Pattern 1 · opening ---------------- */
.scene-open{height:300vh}
/* copy floats above the stage so fading it out never shifts the product */
.open-copy{position:absolute;left:22px;right:22px;top:12%;max-width:660px}
.scroll-hint{font-size:13px;color:var(--dim-2);margin:14px 0 0}

.stage{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  perspective:1400px;perspective-origin:50% 45%;
}
.laptop{position:relative;width:min(540px,78vw);height:320px;transform-style:preserve-3d}
.lid{
  position:absolute;left:0;right:0;bottom:34px;height:256px;
  transform-origin:bottom center;transform:rotateX(-92deg);
  transform-style:preserve-3d;will-change:transform;
}
.lid-inner{
  position:absolute;inset:0;border-radius:12px 12px 6px 6px;overflow:hidden;
  background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);
  backface-visibility:hidden;
}
.screen-ui{position:absolute;inset:0;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.screen-bar{display:flex;gap:5px}
.screen-bar i{width:7px;height:7px;border-radius:50%;background:var(--x-detail)}
.screen-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;flex:1}
.screen-card{
  background:var(--panel-2);border:1px solid var(--line);border-radius:9px;
  padding:9px 10px;display:flex;flex-direction:column;gap:2px;
}
.screen-card.wide{grid-column:1 / -1;justify-content:center}
.sc-k{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim-2)}
.sc-v{font-size:19px;font-weight:700;letter-spacing:-.01em}
.sc-bar{display:block;height:6px;border-radius:3px;background:var(--x-detail);overflow:hidden}
.sc-bar i{display:block;height:100%;background:var(--accent)}
.screen-glow{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 40%,rgba(110,168,254,.10));
}
.base{
  position:absolute;left:-3%;right:-3%;bottom:0;height:34px;border-radius:8px;
  background:var(--panel-2);border:1px solid var(--line);box-shadow:var(--shadow);
  transform:rotateX(58deg);transform-origin:bottom center;
  display:flex;align-items:center;justify-content:center;
}
.keyboard{display:flex;gap:4px;opacity:.55}
.keyboard i{display:block;width:16px;height:4px;border-radius:2px;background:var(--x-detail)}
.trackpad{
  position:absolute;left:50%;bottom:5px;width:52px;height:12px;margin-left:-26px;
  border:1px solid var(--x-line);border-radius:4px;opacity:.5;
}

/* ---------------- Pattern 2 · horizontal track ---------------- */
.scene-horizontal{height:320vh}
.h-head{max-width:820px}
.h-viewport{overflow:hidden;margin-top:20px}
.h-track{
  display:flex;gap:20px;will-change:transform;
  padding:4px 2px 14px;
}
.h-card{
  flex:0 0 clamp(260px,32vw,360px);
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:16px;box-shadow:var(--shadow);
}
.h-index{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim-2)}
.h-index em{font-style:normal;color:var(--accent)}
.h-media{
  margin:12px 0;border-radius:10px;overflow:hidden;border:1px solid var(--line);
  aspect-ratio:16/10;background:var(--panel-2);
}
.h-media img{width:100%;height:100%;object-fit:cover}
.h-card p{margin:0;color:var(--dim);font-size:14px}
.h-foot{margin-top:16px}
.h-bar{height:3px;border-radius:2px;background:var(--line);overflow:hidden}
.h-bar span{display:block;height:100%;width:0;background:var(--accent)}
.h-counter{margin:9px 0 0;font-size:12.5px;color:var(--dim-2)}
.h-counter span{color:var(--text);font-weight:600}

/* ---------------- Pattern 3 · scroll-driven hologram scan ---------------- */
.scene-holo{height:340vh}
.x-head{max-width:760px}
.holo-stage{
  position:relative;margin-top:4px;flex:1;min-height:0;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:var(--holo-bg);
}
#holoCanvas{display:block;width:100%;height:100%;min-height:240px}
.holo-hud{
  position:absolute;left:14px;bottom:12px;font-variant-numeric:tabular-nums;
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);opacity:.9;pointer-events:none;
}
.holo-parts{
  position:absolute;right:14px;top:12px;display:flex;flex-direction:column;gap:5px;
  align-items:flex-end;pointer-events:none;
}
.holo-parts span{
  font-size:11px;letter-spacing:.04em;color:var(--dim-2);opacity:.5;
  transition:none;
}
.holo-parts span.on{color:var(--accent);opacity:1;font-weight:600}
.holo-fallback{
  position:absolute;inset:0;display:flex;flex-direction:column;gap:14px;
  align-items:center;justify-content:center;text-align:center;padding:24px;
  background:var(--holo-bg);color:var(--dim);font-size:13px;
}
.holo-fallback[hidden]{display:none}
.holo-fallback-art{display:flex;flex-direction:column;gap:7px;width:min(340px,80%)}
.holo-fallback-art i{display:block;height:14px;border-radius:4px;border:1px solid var(--line);background:var(--panel-2)}
.holo-fallback-art i:nth-child(1){background:var(--panel)}
.holo-fallback-art i:nth-child(3){background:var(--accent);opacity:.55}
.holo-fallback-art i:nth-child(4){background:var(--ok);opacity:.45}
.holo-fallback-art i:nth-child(5){background:var(--track2)}
.holo-fallback-note{font-size:12px;color:var(--dim-2)}
.stage-note.center{text-align:center}

/* ---------------- specs / outro ---------------- */
.scene-specs{padding:90px 0 40px}
.spec-wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.spec-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px 30px;
  margin:26px 0 0;padding:0;
}
.spec-grid dt{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim-2);margin-bottom:4px}
.spec-grid dd{margin:0 0 6px;padding-bottom:12px;border-bottom:1px solid var(--line);font-size:15px}
.outro{
  margin-top:52px;display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:center;
}
.outro img{width:100%;border-radius:16px;border:1px solid var(--line);aspect-ratio:4/3;object-fit:cover}
.outro-text p{color:var(--dim);font-size:14.5px}
.outro-links{display:flex;gap:16px;flex-wrap:wrap;font-size:14px}

.foot{
  border-top:1px solid var(--line);margin-top:40px;padding:26px 22px 40px;
  text-align:center;color:var(--dim-2);font-size:12.5px;
}
.foot p{margin:0 0 6px}
.foot .dot{margin:0 6px}
.foot-links a{color:var(--accent);text-decoration:none}

/* ============================================================
   Scroll-driven animations (CSS path). The JS fallback mirrors the
   same numbers, read from these custom properties.
   ============================================================ */
@supports (animation-timeline: view()) {
  .scene-open{view-timeline-name:--open;view-timeline-axis:block}
  .scene-horizontal{view-timeline-name:--hscroll;view-timeline-axis:block}
  .scene-holo{view-timeline-name:--holo;view-timeline-axis:block}

  .lid{
    animation:lid-open linear both;
    animation-timeline:--open;
    animation-range:contain 0% contain 100%;
  }
  .open-copy h1{
    animation:copy-out linear both;
    animation-timeline:--open;
    animation-range:contain 6% contain 30%;
  }
  .open-copy .lede,
  .open-copy .eyebrow{
    animation:copy-out linear both;
    animation-timeline:--open;
    animation-range:contain 10% contain 38%;
  }
  .scroll-hint{
    animation:hint-out linear both;
    animation-timeline:--open;
    animation-range:contain 0% contain 8%;
  }
  /* the laptop base never rotates, it only drifts a little */
  .base{
    animation:base-drift linear both;
    animation-timeline:--open;
    animation-range:contain 0% contain 100%;
  }
  @keyframes lid-open{from{transform:rotateX(-92deg)}to{transform:rotateX(-6deg)}}
  @keyframes base-drift{from{transform:rotateX(58deg) translateY(0)}to{transform:rotateX(58deg) translateY(6px)}}
  @keyframes copy-out{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-24px)}}
  @keyframes hint-out{from{opacity:1}to{opacity:0}}

  /* Pattern 2 — travel distance is measured in JS (scrollWidth − clientWidth)
     and handed to CSS as a plain pixel length, so nothing is hard-coded here
     and the value is recomputed after font / image load and resize.
     (Chrome cannot interpolate translate3d(calc(-100% + 1136px)) — mixed
     percentage and length — so the distance must arrive as pixels.) */
  .h-track{
    animation:h-move linear both;
    animation-timeline:--hscroll;
    animation-range:contain 0% contain 100%;
  }
  @keyframes h-move{
    from{transform:translate3d(0,0,0)}
    to{transform:translate3d(var(--h-distance-negative,0px),0,0)}
  }
  .h-bar span{
    animation:h-fill linear both;
    animation-timeline:--hscroll;
    animation-range:contain 0% contain 100%;
  }
  @keyframes h-fill{from{width:0}to{width:100%}}

  /* Pattern 3 — the hologram scan is a WebGL canvas: the clipping plane,
     the scan disc and the camera all read the same scrubbed progress value
     from JS, so nothing here needs a CSS animation. The timeline below stays
     declared so the section still exposes a view timeline to any future use. */
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .scene{height:auto !important}
  .scene .sticky{position:static;height:auto;padding:48px 22px}
  .open-copy{position:static;max-width:660px}
  .lid{animation:none !important;transform:rotateX(-6deg)}
  .open-copy h1,.open-copy .lede,.open-copy .eyebrow,.scroll-hint{animation:none !important;opacity:1;transform:none}
  .base{animation:none !important}
  .h-viewport{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .h-track{animation:none !important;transform:none !important}
  .holo-fallback{position:static}
}

/* same static path, reachable without changing OS settings:
   scroll.html?motion=reduce — used to verify the fallback */
html[data-motion="reduce"] .scene{height:auto !important}
html[data-motion="reduce"] .scene .sticky{position:static;height:auto;padding:48px 22px}
html[data-motion="reduce"] .open-copy{position:static;max-width:660px}
html[data-motion="reduce"] .lid{animation:none !important;transform:rotateX(-6deg)}
html[data-motion="reduce"] .open-copy h1,
html[data-motion="reduce"] .open-copy .lede,
html[data-motion="reduce"] .open-copy .eyebrow,
html[data-motion="reduce"] .scroll-hint{animation:none !important;opacity:1;transform:none}
html[data-motion="reduce"] .base{animation:none !important}
html[data-motion="reduce"] .h-viewport{overflow-x:auto;-webkit-overflow-scrolling:touch}
html[data-motion="reduce"] .h-track{animation:none !important;transform:none !important}
html[data-motion="reduce"] .holo-fallback{position:static}

/* ---------------- responsive ---------------- */
@media (max-width:1080px){
  .chapters{display:none}
}
@media (max-width:820px){
  :root{--nav-h:58px}
  .scene-open{height:240vh}
  .scene-horizontal{height:auto}
  .scene-holo{height:280vh}
  .scene .sticky{padding:18px 16px}
  .badge{display:none}
  .laptop{width:min(400px,86vw);height:250px}
  .lid{height:196px}
  .open-copy{top:7%}
  .h-viewport{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .h-card{flex:0 0 78vw}
  .h-track{transform:none !important}
  .outro{grid-template-columns:1fr}
  .holo-parts{display:none}
}
@media (max-width:520px){
  h1{font-size:28px}
  .h-card{flex:0 0 84vw}
  .spec-grid{gap:14px 20px}
}