/* ══ 첫 화면 리뉴얼(2026-10-09) — parts/home.html · assets/home.js 와 짝 ══════════════
   색은 site.css 토큰만. 움직임은 html.motion 일 때만(스크립트가 «동작 줄이기» 를 보고 붙인다) —
   스크립트가 없거나 동작 줄이기면 모든 것이 마지막 모습으로 그냥 서 있다. */



/* ── ① 시동 ─────────────────────────────────────────────────────────── */
.ign { min-height: clamp(620px, calc(100svh - 150px), 900px); display: grid; align-items: center;
  overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--line-soft); --mx: 70%; --my: 45%; --acc: var(--amber); }
.ign-road { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.ign-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(520px circle at var(--mx) var(--my), color-mix(in srgb, var(--acc) 16%, transparent), transparent 70%),
    linear-gradient(180deg, var(--ink) 0%, transparent 22%, transparent 70%, var(--ink) 100%); }
.ign-in { width: 100%; max-width: 1080px; margin: 0 auto; padding: 56px 24px 88px;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
.ign-kick { display: flex; align-items: center; gap: 10px; margin: 0 0 18px;
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.led { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 var(--ok); }
.motion .led { animation: led 2.2s ease-out infinite; }
@keyframes led { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 70%, transparent); }
  70%, 100% { box-shadow: 0 0 0 10px transparent; } }
.ign-h { font-family: var(--f-disp); font-weight: 700; font-size: clamp(40px, 6.4vw, 84px);
  line-height: 1.02; letter-spacing: -.01em; margin: 0 0 22px; text-wrap: balance; }
.ign-h .ln { display: block; overflow: hidden; padding-bottom: .06em; }
.ign-h .w { display: block; }
.ign-h .hi { background: linear-gradient(100deg, var(--amber) 0%, #FFD48A 40%, var(--amber) 60%, var(--ice) 120%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.motion .ign-h .hi { animation: sheen 6s linear 2.4s infinite; }
@keyframes sheen { to { background-position: -220% 0; } }
.ign-sub { color: var(--muted); font-size: clamp(16px, 1.6vw, 18.5px); max-width: 40ch; margin: 0 0 30px; }
.ign-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 30px; }
.ign-cta .get { font-size: 17px; padding: 14px 24px; transition: transform .25s cubic-bezier(.2,.8,.2,1), filter .2s, background .2s, color .2s; }
.ign-cars { list-style: none; display: flex; flex-wrap: wrap; gap: 0; margin: 0; padding: 0;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.ign-cars li { padding: 0 14px; border-left: 1px solid var(--line); }
.ign-cars li:first-child { padding-left: 0; border-left: 0; color: var(--text); }

/* 처음 들어올 때 — 글줄이 아래에서 올라오고, 그 뒤가 차례로 */
.motion .ign .w, .motion .ign-kick, .motion .ign-sub, .motion .ign-cta, .motion .ign-cars li, .motion .g-hint {
  opacity: 0; }
.motion .ign .w { transform: translateY(105%); }
.motion .ign.go .w { animation: rise 1s cubic-bezier(.16,1,.3,1) forwards; }
.motion .ign.go .ln:nth-child(2) .w { animation-delay: .12s; }
.motion .ign.go .ign-kick { animation: fade .8s ease forwards; }
.motion .ign.go .ign-sub { animation: fadeUp .9s cubic-bezier(.16,1,.3,1) .35s forwards; }
.motion .ign.go .ign-cta { animation: fadeUp .9s cubic-bezier(.16,1,.3,1) .5s forwards; }
.motion .ign.go .ign-cars li { animation: fadeUp .7s ease forwards; }
.motion .ign.go .ign-cars li:nth-child(1) { animation-delay: .7s; }
.motion .ign.go .ign-cars li:nth-child(2) { animation-delay: .8s; }
.motion .ign.go .ign-cars li:nth-child(3) { animation-delay: .9s; }
.motion .ign.go .ign-cars li:nth-child(4) { animation-delay: 1s; }
.motion .ign.go .g-hint { animation: fade 1s ease 2.6s forwards; }
@keyframes rise { to { transform: none; opacity: 1; } }
@keyframes fade { to { opacity: 1; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* 계기 */
.gauge { position: relative; width: min(470px, 100%); aspect-ratio: 1; justify-self: center;
  cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.gauge svg { display: block; width: 100%; height: 100%; overflow: visible; }
.g-face { fill: color-mix(in srgb, var(--panel) 72%, transparent); stroke: var(--line); stroke-width: 1.5; }
.g-tick { stroke: var(--line); stroke-width: 2; transition: stroke .25s; }
.g-tick.maj { stroke-width: 3.2; }
.g-tick.on { stroke: var(--text); }
.g-tick.red { stroke: #8A3A2C; }
.g-tick.red.on { stroke: #E5533D; }
.g-num { fill: var(--dim); font-family: var(--f-mono); font-size: 13px; text-anchor: middle; dominant-baseline: middle; transition: fill .25s; }
.g-num.on { fill: var(--text); }
.g-track { fill: none; stroke: var(--line-soft); stroke-width: 7; stroke-linecap: round; }
.g-arc { fill: none; stroke: url(#gArc); stroke-width: 7; stroke-linecap: round; }
.g-arc-blur { stroke-width: 14; opacity: .55; }
.g-needle path { fill: var(--amber); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--amber) 70%, transparent)); }
.g-hub { fill: var(--ink); stroke: var(--amber); stroke-width: 3; }
.g-read { position: absolute; left: 0; right: 0; top: 60%; text-align: center; pointer-events: none; line-height: 1; }
.g-lab, .g-unit { display: block; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .24em; color: var(--dim); }
.g-val { display: block; margin: 8px 0 8px; font-family: var(--f-disp); font-weight: 700; font-size: clamp(44px, 6vw, 68px);
  font-variant-numeric: tabular-nums; color: var(--text); letter-spacing: .01em; }
.g-hint { position: absolute; left: 0; right: 0; bottom: -6px; text-align: center; font-family: var(--f-mono);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.gauge.redline .g-val { color: #E5533D; }
.gauge.redline { animation: shake .09s linear infinite; }
@keyframes shake { 0% { translate: 0 0; } 25% { translate: .8px -.6px; } 50% { translate: -.7px .5px; } 75% { translate: .5px .8px; } }

.ign-down { position: absolute; left: 50%; bottom: 22px; width: 22px; height: 36px; margin-left: -11px;
  border: 1.5px solid var(--line); border-radius: 12px; }
.ign-down span { position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--amber); }
.motion .ign-down span { animation: wheel 1.8s cubic-bezier(.6,0,.4,1) infinite; }
@keyframes wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(13px); opacity: 0; } 100% { opacity: 0; } }

.freshbar { margin-top: 18px; }

/* ── 묶음 머리 ─────────────────────────────────────────────────────── */
.blk { padding-top: 120px; }
.blk-h { display: grid; grid-template-columns: 96px 1fr; column-gap: 0; margin: 0 0 34px; }
.blk-h .idx { grid-row: span 2; font-family: var(--f-mono); font-size: 12px; letter-spacing: .2em; color: var(--amber);
  padding-top: 14px; position: relative; }
.blk-h .idx::after { content: ""; position: absolute; left: 28px; right: 18px; top: 22px; height: 1px; background: var(--line); }
.blk-h h2 { font-family: var(--f-disp); font-size: clamp(34px, 4.6vw, 58px); line-height: 1.04; margin: 0 0 14px; text-wrap: balance; }
.blk-h .sub { margin: 0; }
#themes .stage, #themes .chips, #themes .cap, .cars, #cars .launch, .manuals, .credits, #credits .note { margin-left: 96px; }


/* ── ② 테마 극장 ──────────────────────────────────────────────────── */
.stage { --acc: var(--amber); position: relative; display: grid; gap: 14px;
  grid-template-columns: 1.62fr 1fr; grid-template-areas: "dash clu" "dash ctl" "meta meta" "bar bar"; }
.stage::before { content: ""; position: absolute; inset: -60px -40px; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 55% at 35% 40%, color-mix(in srgb, var(--acc) 20%, transparent), transparent 70%);
  transition: background 1.2s ease; }
.scr { position: relative; margin: 0; border: 1px solid var(--line); background: #07080A; overflow: hidden;
  box-shadow: 0 30px 60px -40px #000, 0 0 0 1px color-mix(in srgb, var(--acc) 18%, transparent); transition: box-shadow 1s; }
.s-dash { grid-area: dash; } .s-clu { grid-area: clu; } .s-ctl { grid-area: ctl; }
.scr-box { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.s-dash .scr-box { height: 100%; aspect-ratio: auto; min-height: 100%; }
.s-clu .scr-box { aspect-ratio: 8 / 3; }
.scr-box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.s-dash .scr-box img { object-fit: contain; background: #07080A; }
.scr-lab { position: absolute; z-index: 3; left: 0; top: 0; padding: 4px 9px; font-family: var(--f-mono); font-size: 10px;
  letter-spacing: .18em; text-transform: uppercase; color: #CFC6BA; background: rgba(7,8,10,.72); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
/* 화면 유리 반사 */
.scr::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.06) 0%, transparent 35%, transparent 70%, rgba(255,255,255,.03) 100%); }
/* 갈아 끼우는 순간 — 새 그림이 왼쪽에서 닦여 들어오고, 그 가장자리에 빛줄 */
.motion .scr-box img.in { animation: wipe .95s cubic-bezier(.77,0,.18,1) both; animation-delay: var(--d, 0s); }
@keyframes wipe { from { clip-path: inset(0 100% 0 0); filter: brightness(1.8) saturate(1.3); } 60% { filter: brightness(1.15); } to { clip-path: inset(0 0 0 0); filter: none; } }
.scr-box .sweep { position: absolute; z-index: 1; top: 0; bottom: 0; width: 3px; left: 0; pointer-events: none;
  background: var(--acc); box-shadow: 0 0 18px 4px color-mix(in srgb, var(--acc) 70%, transparent); opacity: 0; }
.motion .scr-box .sweep.go { animation: sweep .95s cubic-bezier(.77,0,.18,1) both; animation-delay: var(--d, 0s); }
@keyframes sweep { 0% { left: 0; opacity: 1; } 92% { opacity: 1; } 100% { left: 100%; opacity: 0; } }

.stage-meta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; padding: 10px 0 0; }
.st-no { font-family: var(--f-mono); font-size: 13px; color: var(--acc); letter-spacing: .1em; transition: color 1s; }
.st-name { font-family: var(--f-disp); font-weight: 700; font-size: clamp(30px, 4vw, 46px); line-height: 1; perspective: 400px; }
.st-name .ch { display: inline-block; white-space: pre; transform-origin: 50% 100%; }
.motion .st-name .ch { animation: flipIn .55s cubic-bezier(.2,.9,.25,1.15) both; animation-delay: calc(var(--i) * 28ms); }
@keyframes flipIn { from { transform: rotateX(-95deg) translateY(.2em); opacity: 0; } to { transform: none; opacity: 1; } }
.st-kind { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .12em; color: var(--muted); }
.st-kind b { color: var(--acc); font-weight: 500; transition: color 1s; }
.st-ctl { margin-left: auto; display: flex; gap: 6px; }
.st-ctl button { font-family: var(--f-mono); font-size: 13px; width: 40px; height: 34px; cursor: pointer;
  color: var(--text); background: transparent; border: 1px solid var(--line); transition: border-color .2s, color .2s; }
.st-ctl button:hover { border-color: var(--acc); color: var(--acc); }
.stage-bar { grid-area: bar; height: 2px; background: var(--line-soft); overflow: hidden; }
.stage-bar i { display: block; height: 100%; background: var(--acc); transform-origin: 0 50%; transform: scaleX(0); transition: background 1s; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.chips button { position: relative; font: 500 12.5px/1 var(--f-body); padding: 9px 12px 9px 26px; cursor: pointer;
  color: var(--muted); background: var(--panel); border: 1px solid var(--line); transition: color .2s, border-color .2s, background .2s; }
.chips button::before { content: ""; position: absolute; left: 10px; top: 50%; width: 8px; height: 8px; margin-top: -4px;
  background: var(--c); box-shadow: 0 0 8px var(--c); }
.chips button:hover { color: var(--text); border-color: var(--c); }
.chips button[aria-selected="true"] { color: #16130F; background: var(--c); border-color: var(--c); }
.chips button[aria-selected="true"]::before { background: #16130F; box-shadow: none; }
#themes .cap { margin-top: 12px; }

/* ── ③ 테마 벽 ────────────────────────────────────────────────────── */
.wall { margin-top: 120px; height: clamp(520px, 64vw, 720px); overflow: hidden; display: grid; place-items: center;
  border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); background: #0B0A08; isolation: isolate; }
.wall-plane { position: absolute; left: 50%; top: 50%; width: 2200px; display: grid; gap: 16px; z-index: -2;
  transform: translate(-50%, -50%) perspective(1300px) rotateX(36deg) rotateZ(-11deg) scale(1.05); transform-style: preserve-3d; }
.wall-row { display: flex; gap: 16px; width: max-content; }
.motion .wall-row { animation: drift var(--t, 70s) linear infinite; }
.motion .wall-row.rev { animation-direction: reverse; }
@keyframes drift { to { transform: translateX(-50%); } }
.wall-row img { width: 320px; height: 180px; object-fit: cover; display: block; border: 1px solid #2A241D; background: #000;
  box-shadow: 0 20px 40px -20px #000; }
.wall::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 55% 50% at 50% 50%, rgba(11,10,8,.82), rgba(11,10,8,.35) 70%, transparent),
              linear-gradient(180deg, #0B0A08 0%, transparent 18%, transparent 82%, #0B0A08 100%),
              linear-gradient(90deg, #0B0A08 0%, transparent 14%, transparent 86%, #0B0A08 100%); }
.wall-over { display: flex; flex-direction: column; align-items: center; gap: 30px; padding: 24px; color: #EFE9E0; }
.stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px clamp(28px, 5vw, 72px); }
.stat { text-align: center; }
.stat b { display: block; font-family: var(--f-disp); font-weight: 700; font-size: clamp(72px, 11vw, 150px); line-height: .9;
  font-variant-numeric: tabular-nums; color: #F0A93B; text-shadow: 0 0 40px rgba(240,169,59,.35); }
.stat span { font-family: var(--f-mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #CFC6BA; }


/* ── ④ 차종 ───────────────────────────────────────────────────────── */
.cars { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.car { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 28px 28px 24px; min-height: 230px;
  color: var(--text); background: var(--panel); border: 1px solid var(--line); overflow: hidden; text-decoration: none;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .3s; }
.motion .car.rv.seen { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.car::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(380px circle at var(--px, 50%) var(--py, 50%), color-mix(in srgb, var(--amber) 16%, transparent), transparent 70%); }
.car:hover { border-color: var(--amber-dim); text-decoration: none; }
.car:hover::before { opacity: 1; }
.car-tag { font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.car-name { font-family: var(--f-disp); font-size: clamp(32px, 4vw, 46px); line-height: 1; }
.car-line { color: var(--muted); }
.car-ver { margin-top: auto; font-family: var(--f-mono); font-size: 12.5px; color: var(--muted); }
.car-ver em { font-style: normal; color: var(--amber); }
.car-go { position: absolute; right: 24px; bottom: 22px; color: var(--amber); font-weight: 600; transform: translateX(-8px); opacity: 0; transition: .3s; }
.car:hover .car-go, .car:focus-visible .car-go { transform: none; opacity: 1; }
#cars .launch { margin-top: 14px; }

.manuals { display: flex; flex-wrap: wrap; gap: 10px; }

/* ── 좁은 화면 ─────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .ign-in { grid-template-columns: 1fr; padding-top: 36px; }
  .gauge { width: min(360px, 88%); order: -1; }
  .blk { padding-top: 84px; }
  .blk-h { grid-template-columns: 1fr; }
  .blk-h .idx { grid-row: auto; padding: 0 0 10px; }
  .blk-h .idx::after { display: none; }
  #themes .stage, #themes .chips, #themes .cap, .cars, #cars .launch, .manuals, .credits, #credits .note { margin-left: 0; }
  .stage { grid-template-columns: 1fr; grid-template-areas: "dash" "clu" "ctl" "meta" "bar"; }
  .s-dash .scr-box { aspect-ratio: 16 / 9; height: auto; }
  .cars { grid-template-columns: 1fr; }
  .wall-row img { width: 220px; height: 124px; }
  .wall { margin-top: 84px; }
}

/* 동작 줄이기 — html.motion 이 안 붙으므로 대부분 저절로 멈춘다. 남은 것만 끈다. */
@media (prefers-reduced-motion: reduce) {
  .gauge, .car { transition: none; transform: none; }
  .ign-h .hi { animation: none; }
}