/* INNRACK 02-302 · MOTION LAB —— 克制、大字、中文为主英文为副 */
:root{
  --bg:#ecebe8; --bg2:#e2e1dd; --ink:#111111; --ink2:#3a3a3a; --muted:#8a8a8a; --line:rgba(17,17,17,.14);
  --dark:#0d0d0e; --page:clamp(20px,4.2vw,72px);
  --zh:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Source Han Sans SC","Microsoft YaHei",sans-serif;
  --en:"Helvetica Neue","SF Pro Display",-apple-system,Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
body{background:var(--bg);color:var(--ink);font-family:var(--zh);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.loading{opacity:0}
body{transition:opacity .8s}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
.kicker{font-family:var(--en);font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);margin-bottom:22px}
.kicker.center{text-align:center}
h2,h3{font-weight:600;letter-spacing:.01em;line-height:1.12}

/* 导航 */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--page);mix-blend-mode:difference;color:#fff}
.brand{display:flex;gap:12px;align-items:baseline;font-family:var(--en)}
.brand b{font-size:17px;letter-spacing:.32em;font-weight:700}
.brand span{font-size:12px;letter-spacing:.2em;opacity:.7}
.nav__links{display:flex;gap:34px;font-size:14px}
.nav__links i{font-style:normal;font-family:var(--en);font-size:10px;letter-spacing:.18em;text-transform:uppercase;opacity:.55;margin-left:6px}
.nav__tips{font-size:12px;letter-spacing:.1em;border:1px solid currentColor;border-radius:40px;padding:8px 16px}
@media(max-width:860px){.nav__links{display:none}}

/* 动效讲解标签 */
.tip{display:none;position:absolute;z-index:40;left:var(--page);top:90px;max-width:340px;font-size:12px;line-height:1.7;color:#fff;background:rgba(17,17,17,.88);padding:12px 16px;border-radius:10px;font-family:var(--zh)}
body.show-tips .tip{display:block}
.tip--one{position:fixed;top:auto;bottom:24px}

/* ── 01 首屏 ── */
.hero{position:relative;height:100vh;height:100svh;overflow:hidden}
.hero__media{position:absolute;inset:0;z-index:1;will-change:transform,clip-path;transform-origin:50% 50%;visibility:hidden}
.hero__media-inner{position:absolute;inset:0;background-size:cover;background-position:50% 62%;will-change:transform}
.hero__shade{position:absolute;inset:0;opacity:0;background:linear-gradient(180deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,0) 26%,rgba(0,0,0,0) 52%,rgba(0,0,0,.62) 100%)}
.hero__stage{position:absolute;inset:0;z-index:2;padding:68px var(--page) 9vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(22px,4.2vh,48px);text-align:center}
.hero__meta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 28px;font-size:13px;color:var(--ink2)}
.hero__meta span:last-child{font-family:var(--en);letter-spacing:.14em;text-transform:uppercase;font-size:11px;color:var(--muted)}
.type{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.14em .2em;font-size:clamp(44px,7.4vw,150px);font-weight:700;line-height:1.08;letter-spacing:-.01em;width:100%}
.anim{display:block;white-space:nowrap;overflow:hidden;padding:.06em 0;will-change:transform,opacity}
.anim>span{display:block;will-change:transform}
.type__slot{display:block;flex:none;width:1.9em;height:.82em;border-radius:1em}
.hero__en{font-family:var(--en);font-size:clamp(16px,1.6vw,24px);letter-spacing:.06em;color:var(--ink2);font-weight:300}
.hero__cap{position:absolute;z-index:3;left:var(--page);right:var(--page);bottom:max(7vh,68px);display:flex;justify-content:space-between;align-items:flex-end;gap:32px;color:#fff;pointer-events:none}
.hero__cap-l p{font-family:var(--en);font-size:12px;letter-spacing:.28em;color:rgba(255,255,255,.8);margin-bottom:14px}
.hero__cap-l h2{font-size:clamp(28px,3.6vw,60px);font-weight:600;line-height:1.15}
.hero__cap-r{list-style:none;display:flex;gap:clamp(22px,3.4vw,56px)}
.hero__cap-r li{display:flex;flex-direction:column;gap:10px;padding-left:16px;border-left:1px solid rgba(255,255,255,.34);text-align:left}
.hero__cap-r b{font-family:var(--en);font-size:clamp(28px,3vw,48px);font-weight:600;line-height:1;letter-spacing:-.02em}
.hero__cap-r em{font-style:normal;font-size:.42em;font-weight:500;margin-left:4px;letter-spacing:0}
.hero__cap-r span{font-size:13px;color:rgba(255,255,255,.9)}
.hero__cap-r i{font-style:normal;font-family:var(--en);font-size:10px;letter-spacing:.18em;text-transform:uppercase;opacity:.7;margin-left:8px}
.hero__cap-l>*,.hero__cap-r li{opacity:0}
.hero__scroll{position:absolute;z-index:3;left:0;right:0;bottom:4vh;display:flex;justify-content:center;align-items:center;gap:14px;font-size:11px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase}
.hero__scroll i{width:50px;height:1px;background:var(--ink);transform-origin:left;animation:line 2.4s ease-in-out infinite}
@media(max-width:720px){
  .hero__cap{flex-direction:column;align-items:flex-start;gap:22px;bottom:max(6vh,68px)}
  .hero__cap-r{gap:18px}.hero__cap-r li{padding-left:12px}
}
@keyframes line{0%{transform:scaleX(0)}50%{transform:scaleX(1)}100%{transform:scaleX(0);transform-origin:right}}

.statement{padding:22vh var(--page);text-align:center}
.statement p{font-size:clamp(30px,4.4vw,76px);font-weight:600;line-height:1.3}
.statement .en{font-family:var(--en);font-weight:300;font-size:clamp(15px,1.4vw,22px);color:var(--muted);margin-top:28px;letter-spacing:.04em}
.split-line{overflow:hidden}

/* ── 02 一个元素 ── */
.one-wrap{position:relative;height:70vh;display:grid;place-items:center}
.one{position:relative;width:min(82vw,1300px);aspect-ratio:1600/1135;z-index:5;will-change:transform}
.one__img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 40px 60px rgba(0,0,0,.18));transition:opacity .5s}
.sec{position:relative;min-height:100vh;padding:12vh var(--page);display:grid;place-items:center}
.step{aspect-ratio:1600/1135}
.step--center{width:min(70vw,1100px)}
.mega-num{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--en);font-weight:800;font-size:clamp(200px,36vw,640px);color:transparent;-webkit-text-stroke:1.5px rgba(17,17,17,.16);letter-spacing:-.04em;line-height:1;pointer-events:none}
.sec__cap{position:absolute;left:var(--page);bottom:10vh;display:flex;flex-direction:column;gap:6px}
.sec__cap b{font-size:clamp(22px,2.2vw,34px);font-weight:600}
.sec__cap span{font-family:var(--en);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.sec--numbers{grid-template-columns:1fr 1fr;gap:4vw;align-items:center}
.nums{display:grid;gap:5vh}
.num{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:end;border-top:1px solid var(--line);padding-top:3vh}
.num b{font-family:var(--en);font-size:clamp(84px,11vw,200px);font-weight:700;line-height:.85;letter-spacing:-.04em}
.num i{font-style:normal;font-family:var(--en);font-size:clamp(22px,2.4vw,40px);font-weight:500;padding-bottom:.4em}
.num p{grid-column:1/-1;margin-top:14px;font-size:18px;color:var(--ink2);display:flex;gap:14px;align-items:baseline}
.num p span{font-family:var(--en);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.step--side{width:100%}
.sec--color{grid-template-columns:1.2fr 1fr;gap:4vw}
.step--left{width:100%}
.color-copy h2{font-size:clamp(40px,5vw,92px)}
.swatches{display:flex;gap:14px;margin-top:6vh;flex-wrap:wrap}
.sw{display:flex;align-items:center;gap:12px;padding:12px 22px 12px 12px;border:1px solid var(--line);border-radius:60px;font-size:16px;transition:border-color .3s,background .3s}
.sw i{width:34px;height:34px;border-radius:50%;border:1px solid var(--line)}
.sw span{font-family:var(--en);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.sw.is-on{border-color:var(--ink);background:#fff}
@media(max-width:860px){.sec--numbers,.sec--color{grid-template-columns:1fr}}

/* ── 03 三个麻烦 ── */
.problems{position:relative;background:var(--dark);color:#f2f1ee;padding:26vh var(--page);text-align:center}
.problems .kicker{color:rgba(255,255,255,.45)}
.problems h2{font-size:clamp(48px,8vw,150px);font-weight:700;line-height:1.25;letter-spacing:.02em}
.problems h2:nth-of-type(2){color:rgba(242,241,238,.55)}
.problems h2:nth-of-type(3){color:rgba(242,241,238,.3)}
.answer{margin-top:16vh;font-size:clamp(26px,3vw,48px);font-weight:600}
.answer span{display:block;margin-top:14px;font-family:var(--en);font-weight:300;font-size:clamp(14px,1.2vw,18px);letter-spacing:.08em;color:rgba(255,255,255,.5)}

/* ── 04 卖点 ── */
.features{position:relative;background:var(--dark)}
.feat{position:relative;height:100vh;overflow:hidden;color:#fff}
.feat__media{position:absolute;inset:0;clip-path:inset(18% 22% 18% 22% round 24px)}
.feat__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.25)}
.feat__media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.6),rgba(0,0,0,.05) 55%)}
.feat__copy{position:absolute;left:var(--page);bottom:12vh;max-width:620px}
.feat__copy .kicker{color:rgba(255,255,255,.6)}
.feat h3{font-size:clamp(48px,6.4vw,120px);font-weight:700}
.feat__copy p:last-child{margin-top:26px;font-size:clamp(16px,1.3vw,21px);color:rgba(255,255,255,.85);line-height:1.7}
.feat__copy p:last-child span{display:block;font-family:var(--en);font-size:13px;letter-spacing:.06em;color:rgba(255,255,255,.55)}

/* ── 05 场景 3D 木马 ── */
.scenes{position:relative;background:var(--bg);padding:18vh 0 10vh;overflow:hidden}
.scenes__head{padding:0 var(--page);margin-bottom:6vh}
.scenes__head h2{font-size:clamp(44px,6vw,110px)}
.scene{position:relative;height:95vh;perspective:1600px;display:grid;place-items:center}
.carousel{position:relative;width:340px;height:460px;transform-style:preserve-3d}
.carousel__cell{position:absolute;inset:0;transform-style:preserve-3d;backface-visibility:hidden}
.card{width:100%;height:100%;border-radius:14px;overflow:hidden;position:relative;box-shadow:0 30px 60px rgba(0,0,0,.25)}
.card img{width:100%;height:100%;object-fit:cover}
.card figcaption{position:absolute;left:18px;right:18px;bottom:16px;color:#fff;font-size:18px;font-weight:600;text-shadow:0 2px 20px rgba(0,0,0,.6)}
.card figcaption span{display:block;font-family:var(--en);font-weight:400;font-size:10px;letter-spacing:.2em;text-transform:uppercase;opacity:.8;margin-top:4px}

/* ── 06 收纳 ── */
.store{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;align-items:center;gap:5vw;padding:10vh var(--page)}
.store__img{height:84vh;border-radius:22px;overflow:hidden}
.store__img img{width:100%;height:100%;object-fit:cover}
.store h2{font-size:clamp(44px,5.4vw,100px)}
.store__copy p:last-child{margin-top:28px;font-size:19px;color:var(--ink2);line-height:1.8}
.store__copy p:last-child span{display:block;font-family:var(--en);font-size:13px;color:var(--muted)}
@media(max-width:860px){.store{grid-template-columns:1fr}}

/* ── 07 参数 ── */
.specs{padding:18vh var(--page);background:var(--bg2)}
.specs__head h2{font-size:clamp(40px,5vw,92px);margin-bottom:8vh}
.spec-list{display:grid;grid-template-columns:repeat(2,1fr);column-gap:6vw}
.spec-list div{display:flex;justify-content:space-between;align-items:baseline;padding:26px 0;border-top:1px solid var(--line)}
.spec-list dt{font-size:16px;color:var(--ink2)}
.spec-list dt span{font-family:var(--en);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-left:12px}
.spec-list dd{font-size:clamp(20px,1.9vw,30px);font-weight:600}
@media(max-width:860px){.spec-list{grid-template-columns:1fr}}

/* ── 08 赛事 ── */
.race{position:relative;height:90vh;overflow:hidden;color:#fff}
.race img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05) brightness(.6)}
.race__copy{position:absolute;left:var(--page);bottom:10vh}
.race__copy .kicker{color:rgba(255,255,255,.6)}
.race h2{font-size:clamp(44px,5.6vw,104px)}
.race__copy p:last-child{margin-top:20px;font-size:18px;color:rgba(255,255,255,.8)}

.foot{background:var(--dark);color:#f2f1ee;padding:18vh var(--page) 10vh;text-align:center}
.foot__brand{font-family:var(--en);font-size:clamp(40px,8vw,150px);font-weight:700;letter-spacing:.2em}
.foot__brand span{font-size:.3em;letter-spacing:.2em;opacity:.5}
.foot__en{margin-top:20px;font-family:var(--en);font-weight:300;letter-spacing:.1em;color:rgba(255,255,255,.6)}
.foot__note{margin-top:14vh;font-size:12px;line-height:2;color:rgba(255,255,255,.4)}

.back{position:fixed;left:20px;bottom:20px;z-index:60;font-size:13px;color:#fff;background:rgba(17,17,17,.75);border-radius:40px;padding:11px 18px;opacity:0;pointer-events:none;transition:opacity .4s;backdrop-filter:blur(8px)}
body.scrolled .back{opacity:1;pointer-events:auto}
body.embed .back,body.embed .nav__tips{display:none}
.back{display:none!important}
.nav__tips,.tip{display:none!important}