/* ==========================================================================
   STACKD — 设计令牌 + 骨架样式
   配色锁死：炭黑 #141210 / 奶油 #F5EDDC / 火焰橙 #FF5A1F
   同色相派生：#1D1A17（面板）/ #2A2622（分隔线）/ #A99F92（暗场次要字）
   口味本色只进产品层与 12% 色带，不碰底色与字色。
   ========================================================================== */

:root {
  /* 锁定三色 */
  --ink: #141210;
  --cream: #F5EDDC;
  --flame: #FF5A1F;

  /* 同色相派生（已批） */
  --panel: #1D1A17;
  --panel-2: #23201C;
  --rule: #2A2622;
  --muted: #A99F92;

  /* 字体栈：不下载任何字体文件 */
  --display: "Arial Black", "Arial Bold", Impact, Haettenschweiler,
             "Franklin Gothic Heavy", "Noto Sans SC", sans-serif;
  --text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "Noto Sans SC", sans-serif;

  /* 节奏 */
  --gap: clamp(16px, 2.2vw, 32px);
  --pad: clamp(20px, 5vw, 88px);
  --nav-h: 56px;

  /* 动效常数（JS 里同值引用） */
  --e-in: cubic-bezier(0.16, 1, 0.3, 1);
  --e-out: cubic-bezier(0.7, 0, 0.84, 0);
  --e-move: cubic-bezier(0.76, 0, 0.24, 1);
}

/* 口味本色：只在这四组变量里出现 */
[data-flavor="classic"] {
  --bun: #E3A45C;        --bun-shade: #C98F49;
  --patty: #7A3F26;      --patty-shade: #5F301C;  --patty-mark: #4A2415;
  --cheese: #F0B429;     --cheese-shade: #D49E20;
  --veg: #6E9B4A;        --veg-shade: #5E853E;
  --veg2: #C8452E;       --veg2-shade: #A93726;
  --sesame: #F7E7C8;
}
[data-flavor="smoke"] {
  --bun: #D9984F;        --bun-shade: #B67B41;
  --patty: #5A2F1E;      --patty-shade: #482517;  --patty-mark: #3D1C10;
  --cheese: #B4501F;     --cheese-shade: #9A4419;
  --veg: #7C6A3E;        --veg-shade: #665836;
  --veg2: #8A4B2A;       --veg2-shade: #733E22;
  --sesame: #F2DCB6;
}
[data-flavor="herb"] {
  --bun: #E3A45C;        --bun-shade: #C98F49;
  --patty: #6B3A24;      --patty-shade: #572E1C;  --patty-mark: #45241A;
  --cheese: #4E7A3A;     --cheese-shade: #3F6230;
  --veg: #7FAE55;        --veg-shade: #6A9746;
  --veg2: #C8452E;       --veg2-shade: #A93726;
  --sesame: #F7E7C8;
}

/* ---------- 底色节奏 ---------- */
.on-dark  { --bg: var(--ink);   --fg: var(--cream); --sub: rgba(245,237,220,.56); --hair: rgba(245,237,220,.14); }
.on-light { --bg: var(--cream); --fg: var(--ink);   --sub: rgba(20,18,16,.62);    --hair: rgba(20,18,16,.14); }

/* ==========================  基础  ========================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--text);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.55;
  letter-spacing: -0.005em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.eyebrow {
  font-family: var(--text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sub);
}

.h2 {
  font-size: clamp(34px, 5.2vw, 76px);
  line-height: 0.86;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  margin: 10px 0 18px;
}

.lede {
  max-width: 34ch;
  color: var(--sub);
  font-size: clamp(14px, 1.15vw, 17px);
}

.note {
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--sub);
  opacity: .8;
}

section { background: var(--bg); color: var(--fg); }

/* ==========================  01 顶栏  ========================== */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: 0 var(--pad);
  color: var(--cream);
  mix-blend-mode: normal;
  background: transparent;
  transition: background .28s var(--e-in), height .28s var(--e-in), border-color .28s var(--e-in);
  border-bottom: 1px solid transparent;
}
.nav--compact {
  height: 44px;
  background: rgba(20,18,16,.92);
  border-bottom-color: rgba(245,237,220,.14);
  backdrop-filter: blur(6px);
}
.nav__mark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--display);
  font-size: 19px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.nav__links {
  display: flex;
  gap: clamp(2px, 1.1vw, 18px);
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245,237,220,.72);
}
.nav__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px; padding: 6px 6px; border-bottom: 1px solid transparent; }
.nav__links a:hover { color: var(--cream); border-bottom-color: var(--flame); }
.nav__tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  padding: 3px 7px;
  border: 1px solid var(--flame);
  color: var(--flame);
}

/* ==========================  02 HERO  ========================== */
.hero {
  position: relative;
  height: 240svh;           /* 240vh 行程：100vh 用来钉住，140vh 用来驱动拆解 */
}
.hero__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  overflow: clip;
  padding: calc(var(--nav-h) + 16px) var(--pad) clamp(24px, 5vh, 56px);
}

.hero__bg {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: clamp(48px, 14vw, 190px);
  line-height: 0.8;
  letter-spacing: -0.05em;
  text-align: center;
  white-space: nowrap;
  color: rgba(245,237,220,.055);
  pointer-events: none;
  user-select: none;
}

.hero__stage {
  position: relative;
  z-index: 2;
  width: min(500px, 48vw);
  justify-self: center;
  align-self: center;
  display: grid;
  place-items: center;
}

.burger { width: 100%; height: auto; overflow: visible; }
.burger__layers .L {
  will-change: transform;
  transform-box: fill-box;
  transform-origin: center;
}
.burger__layers .L + .L { filter: drop-shadow(0 1px 0 rgba(20,18,16,.18)); }

.hero__copy {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 10px;
  justify-self: start;
}
.hero__title {
  font-size: clamp(38px, 7.4vw, 108px);
  line-height: 0.84;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}
.hero__title span { display: block; }
.hero__sub { color: var(--sub); max-width: 42ch; }

.hero__cue {
  position: absolute;
  bottom: 22px;
  left: 50%;
  translate: -50% 0;
  width: 1px;
  height: 46px;
  background: linear-gradient(to bottom, transparent, rgba(245,237,220,.45));
  overflow: hidden;
}
.hero__cue span {
  position: absolute;
  inset: 0 auto auto 0;
  width: 1px;
  height: 14px;
  background: var(--flame);
}

/* ==========================  03 BUILD  ========================== */
.build {
  padding: clamp(72px, 11vh, 150px) var(--pad) clamp(64px, 9vh, 120px);
}
.build__head { max-width: min(100%, 780px); }

.build__stage {
  margin-top: clamp(28px, 4.5vh, 56px);
  max-width: 1080px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(120px, 170px) minmax(0, 1fr) minmax(120px, 170px);
  gap: var(--gap);
  align-items: center;
}

.tray { display: grid; gap: 10px; align-content: center; }
.tray__item {
  appearance: none;
  border: 1px solid var(--hair);
  background: transparent;
  color: var(--fg);
  padding: 14px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  cursor: grab;
  touch-action: none;
  min-height: 44px;
}
.tray__item:hover { border-color: var(--fg); }
.tray__item:active { cursor: grabbing; }

.rig { display: grid; justify-items: center; gap: 16px; }
.rig__svg {
  width: min(440px, 100%);
  height: auto;
  overflow: visible;
  touch-action: none;
}
.rig__stack use { will-change: transform; }
.rig__base { stroke: var(--hair); stroke-width: 2; fill: none; }
.rig__hint {
  font-family: var(--text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  fill: var(--sub);
}
.rig__stamp {
  font-family: var(--text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  fill: var(--flame);
  opacity: 0;
}

/* 拖拽中的浮层：跟手，不参与布局 */
.ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 80;
  pointer-events: none;
  will-change: transform, opacity;
  filter: drop-shadow(0 14px 20px rgba(20,18,16,.26));
}
.ghost svg { width: 100%; height: 100%; display: block; overflow: visible; }

.readout {
  display: flex;
  gap: clamp(18px, 4vw, 46px);
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.readout div { display: grid; gap: 2px; }
.readout dt {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sub);
}
.readout dd { margin: 0; font-family: var(--display); font-size: clamp(22px, 2.6vw, 34px); line-height: 1; }
.readout small { font-family: var(--text); font-size: 11px; font-weight: 600; letter-spacing: .08em; margin-left: 3px; }

.rig__actions { display: flex; gap: 10px; }
.btn {
  appearance: none;
  border: 1px solid var(--fg);
  background: var(--fg);
  color: var(--bg);
  padding: 12px 26px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  min-height: 44px;
}
.btn--ghost { background: transparent; color: var(--fg); }
.btn:disabled { opacity: .4; cursor: not-allowed; }

/* ==========================  04 COMBO  ========================== */
.combo { padding: clamp(72px, 11vh, 150px) var(--pad) clamp(64px, 9vh, 120px); }
.combo__head { max-width: min(100%, 780px); }
.combo__stage {
  margin-top: clamp(28px, 4vh, 56px);
  display: grid;
  place-items: center;
}
.box { width: min(600px, 92vw); height: auto; overflow: visible; }
.box__item { will-change: transform; }
.box__body path:first-child,
.box__lid path:first-child { stroke: rgba(245,237,220,.2); stroke-width: 1; }
.box__lid { will-change: transform; }

/* ==========================  05 LINEUP  ========================== */
.lineup {
  position: relative;
  overflow: clip;
  padding: clamp(72px, 11vh, 150px) 0 clamp(64px, 9vh, 120px);
}
.lineup__head { max-width: min(100%, 780px); padding: 0 var(--pad); }

/* 口味名作背景巨字，随当前口味交叉 */
.lineup__ghost {
  position: absolute;
  inset: 0;
  pointer-events: none;
  user-select: none;
  font-family: var(--display);
  font-size: clamp(64px, 17vw, 260px);
  line-height: 0.8;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: var(--fg);
}
.lineup__ghost span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  white-space: nowrap;
  opacity: 0;
  will-change: opacity;
}

.lineup__belt {
  position: relative;
  margin-top: clamp(28px, 4vh, 56px);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(260px, 40vw, 520px);
  gap: var(--gap);
  padding: 0 var(--pad) 12px;
  /* 右侧留一张卡的余量，末卡才能滚到左边成为当前卡 */
  padding-right: calc(100vw - var(--pad) - clamp(260px, 40vw, 520px));
  overflow-x: auto;
  scrollbar-width: none;
  cursor: grab;
  touch-action: pan-y;
  outline: none;
}
.lineup__belt::-webkit-scrollbar { display: none; }
.lineup__belt.dragging { cursor: grabbing; }
.lineup__belt:focus-visible { outline: 2px solid var(--flame); outline-offset: -2px; }

.card {
  border: 1px solid var(--hair);
  padding: clamp(18px, 3vw, 34px);
  min-height: clamp(240px, 34vh, 360px);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px;
  background: transparent;
}
.card.on { border-color: var(--cheese); }
.card__art { width: 100%; height: auto; align-self: center; overflow: visible; }
.card__meta { display: grid; gap: 4px; }
.card__meta p { font-size: 13px; color: var(--sub); }
.card h3 {
  font-size: clamp(24px, 3.2vw, 42px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.lineup__bar {
  margin: 18px var(--pad) 0;
  height: 2px;
  background: var(--hair);
  overflow: hidden;
}
.lineup__bar span {
  display: block;
  height: 100%;
  background: var(--cheese);
  transform: scaleX(.06);
  transform-origin: left center;
  will-change: transform;
}

/* ==========================  06 HEAT  ========================== */
.heat { padding: clamp(72px, 11vh, 150px) var(--pad) clamp(64px, 9vh, 120px); }
.heat__head { max-width: min(100%, 780px); }
.heat__stage {
  margin-top: clamp(24px, 3.4vh, 48px);
  display: grid;
  justify-items: center;
  gap: 10px;
}
.patty-view { width: min(560px, 86vw); height: auto; overflow: visible; }
.patty-shadow { fill: #000; opacity: .5; }
.grill { fill: none; stroke: var(--hair); stroke-width: 2; stroke-linecap: round; }

.slider { width: min(560px, 86vw); margin-top: 10px; padding: 24px 0 6px; position: relative; touch-action: none; }
.slider__track { height: 2px; background: var(--hair); position: relative; }
.slider__fill { position: absolute; inset: 0 auto 0 0; width: 50%; background: var(--flame); }
.slider__handle {
  position: absolute;
  top: 26px;
  translate: -50% -50%;
  left: 50%;
  width: 44px; height: 44px;          /* 触摸区放到 44，视觉圆点由内层画 */
  display: grid;
  place-items: center;
  cursor: grab;
}
.slider__handle span {
  width: 24px; height: 24px;
  border: 2px solid var(--cream);
  border-radius: 50%;
  background: var(--ink);
}
.slider__handle:focus-visible { outline: 2px solid var(--flame); outline-offset: 4px; }

.heat__label {
  font-family: var(--display);
  font-size: clamp(22px, 3vw, 38px);
  letter-spacing: -0.02em;
}
.heat__note { font-size: 12px; color: var(--sub); }

/* ==========================  07 页脚  ========================== */
.foot {
  padding: clamp(56px, 8vh, 110px) var(--pad) clamp(40px, 6vh, 72px);
  border-top: 1px solid var(--hair);
  display: grid;
  gap: 10px;
}
.foot__name {
  font-family: var(--display);
  font-size: clamp(40px, 12vw, 180px);
  line-height: 0.8;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}
.foot__line { font-weight: 600; letter-spacing: 0.06em; }
.foot__note { color: var(--sub); max-width: 52ch; font-size: 13px; }
.foot__meta {
  margin-top: 14px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sub);
}

/* ==========================  颗粒  ========================== */
.grain {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' seed='17' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
}

/* ==========================  降级  ========================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
  .hero__cue { display: none; }
}

/* ==========================  移动端  ========================== */
@media (max-width: 767px) {
  .nav__links { display: none; }
  .hero__stage { width: min(500px, 82vw); }
  .hero__sub { font-size: 14px; }
  .build__stage {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .rig { order: -1; }
  .rig__svg { width: min(360px, 92%); }
  .tray {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 8px;
  }
  .tray__item { text-align: center; padding: 12px 6px; font-size: 11px; letter-spacing: .06em; }
  .readout { gap: 20px; }
  .lineup__belt { grid-auto-columns: clamp(200px, 76vw, 320px); }
}