/* ══════════════════════════════════════════════════════
   ONEROOM Motion Reel — 网页复刻
   原始动效 © @studio_oneroom  ·  本页为代码复刻练习
   ══════════════════════════════════════════════════════ */

@font-face{
  font-family:'Archivo Black';
  src:url('../assets/fonts/archivo-black-latin.woff2') format('woff2');
  font-weight:900;font-style:normal;font-display:swap;
}

:root{
  --paper:#e5e4dd;
  --paper-hi:#f0efe8;
  --ink:#161616;
  --ink-soft:#3a3a36;
  --orange:#e84a08;
  --orange-deep:#d63f03;
  --cream:#f1efe6;
  --wm-dark:rgba(228,226,215,.42);   /* 暗场水印描边 */
  --wm-light:rgba(22,22,22,.30);     /* 亮场水印描边 */
  --disp:'Archivo Black','Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans','Yu Gothic',sans-serif;
  --meta:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}
#stage[data-palette="dark"]{--wm:var(--wm-dark)}
#stage[data-palette="light"]{--wm:var(--wm-light)}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:#111}
body{font-family:var(--disp);-webkit-font-smoothing:antialiased;cursor:default}

#stage{
  position:fixed;inset:0;background:var(--ink);
  overflow:hidden;user-select:none;-webkit-user-select:none;
}

/* ─────────── 全局水印描边墙 ─────────── */
.watermark{
  position:absolute;inset:-12% 0;z-index:1;pointer-events:none;overflow:hidden;
}
.wm-row{
  position:absolute;left:-2%;width:104%;white-space:nowrap;
  font-family:var(--disp);font-weight:900;font-size:76vh;line-height:.74;
  color:transparent;-webkit-text-stroke:1.4px var(--wm);
  text-stroke:1.4px var(--wm);letter-spacing:.02em;
  will-change:transform;
}

/* ─────────── 条形码层（difference 反色） ─────────── */
.barcodes{position:absolute;inset:0;z-index:2;pointer-events:none;transition:opacity .18s linear}
.bc{
  position:absolute;height:calc(var(--h)*1vh);width:calc(var(--w)*1vw);
  color:#fff;mix-blend-mode:difference;opacity:var(--o,.9);
  transform-origin:center;will-change:transform;
}
.bc i{position:absolute;inset:0;display:block}

/* ─────────── 场景容器 ─────────── */
.scene{position:absolute;inset:0;visibility:hidden;overflow:hidden;will-change:visibility}
.scene.on{visibility:visible}
.s-light,.s-orange{background:var(--paper)}
.s-dark{background:var(--ink)}
.s-orange{background:var(--orange)}
.fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.fx.front{z-index:7}

/* ─────────── S1 黑场（内容全在 canvas/水印上） ─────────── */

/* ─────────── S2 橙盘漩涡 / S11 碎裂底盘 ─────────── */
.disc{
  position:absolute;left:50%;top:50%;
  width:230vmax;height:230vmax;margin-left:-115vmax;margin-top:-115vmax;
  border-radius:50%;background:radial-gradient(circle at 48% 44%, #ef5009 0%, var(--orange) 55%, var(--orange-deep) 100%);
  will-change:transform;
}
.shatter-disc{z-index:1}
.vortex-dot{
  position:absolute;left:50%;top:47.5%;width:2.6vmin;height:2.6vmin;border-radius:50%;
  background:var(--orange);transform:translate(-50%,-50%);opacity:0;z-index:3;will-change:transform,opacity;
}
.vortex-dot.sm{left:61.5%;top:49%;width:1.7vmin;height:1.7vmin}

/* ─────────── S3 MiniM 打字机 ─────────── */
.minim-wrap{position:absolute;inset:0;display:flex;align-items:center;padding-left:4vw}
.minim-type{
  font-size:15.5vw;line-height:.82;font-weight:400;letter-spacing:-.045em;
  color:var(--cream);white-space:nowrap;
  -webkit-text-stroke:0;transform:translateZ(0);
}
.minim-type .gl{display:inline-block;will-change:transform,opacity}

/* ─────────── S4 MiniMax H3 字标 ─────────── */
.big-ellipse{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:108vw;height:88vh;border-radius:50%;background:var(--paper-hi);
}
.lockup{
  position:absolute;left:50%;top:46%;white-space:nowrap;
  transform:translate(-52%,-50%);line-height:.8;will-change:transform;
}
.lk-minimax{color:var(--ink);font-size:13.5vw;letter-spacing:-.05em}
.lk-h3{color:var(--orange);font-size:17.4vw;letter-spacing:-.03em;vertical-align:baseline;position:relative;top:.035em;margin-left:-.008em}

/* ─────────── S5 竖条擦除 ─────────── */
.bars{position:absolute;inset:0}
.bar-col{position:absolute;top:0;height:100%;will-change:transform}

/* ─────────── S6 MOTION 双行 ─────────── */
.mo-row{position:absolute;left:0;width:100%;height:50.2vh;overflow:hidden;display:flex;align-items:center}
.mo-top{top:-1vh}.mo-bot{top:50vh}
.mo-track{white-space:nowrap;will-change:transform;line-height:.74}
.mo-track b{
  display:inline-block;font-weight:400;font-size:37vh;letter-spacing:-.05em;
  color:var(--ink);padding-right:14vh;
}
/* 底行反白变体只在黑区使用，这里均为黑字米白底 */

/* ─────────── S7 单行 MOTION ─────────── */
.motion-one{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-54%);
  font-weight:400;font-size:24.5vw;letter-spacing:-.045em;line-height:.8;
  color:var(--ink);white-space:nowrap;will-change:transform;
}

/* ─────────── S8 GRAPHICS 透视海 ─────────── */
.gfx-room{
  position:absolute;inset:0;perspective:46vw;perspective-origin:50% 50%;
}
.gfx-plane{
  position:absolute;left:-60%;width:220%;height:150vh;
  transform-origin:50% 0;will-change:transform;
}
.gfx-floor{top:49.4%;transform:rotateX(76deg)}
.gfx-ceiling{bottom:49.4%;top:auto;transform-origin:50% 100%;transform:rotateX(-76deg)}
.gfx-stack{position:relative;display:flex;flex-direction:column;will-change:transform}
.gfx-cell{
  flex:none;display:flex;align-items:center;justify-content:space-between;
  height:13vh;color:var(--cream);filter:blur(.4px);
}
.gfx-cell span{
  font-size:11.5vh;letter-spacing:.01em;line-height:.8;white-space:nowrap;opacity:.94;
}
.gfx-horizon{
  position:absolute;left:0;top:41.5%;width:100%;height:16vh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;
}
.hz-scroll{
  white-space:nowrap;color:var(--cream);line-height:1;will-change:transform;
  filter:blur(1px);font-size:7vh;letter-spacing:.06em;opacity:.85;
}
.gfx-dim{ /* 远处压暗渐晕 */
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    radial-gradient(120% 58% at 50% 50%, transparent 26%, rgba(10,10,10,.72) 62%, rgba(8,8,8,.92) 100%),
    linear-gradient(#00000033,#0000 12%,#0000 86%,#00000055);
}

/* ─────────── S9 标签卡 ─────────── */
.tag-card{
  position:absolute;background:var(--ink);padding:3.2vh 2vw 3vh;aspect-ratio:16/8.4;
  color:var(--cream);display:flex;flex-direction:column;justify-content:flex-end;
  box-shadow:0 1.2vh 3vh rgba(0,0,0,.18);opacity:0;will-change:transform,opacity;
}
.tag-card i{
  position:absolute;top:1.4vh;left:1.2vw;font-size:max(8px,.65vw);
  font-family:var(--meta);font-style:normal;color:rgba(240,238,229,.66);
  letter-spacing:.08em;text-decoration:underline;text-underline-offset:2px;
}
.tag-card u{
  position:absolute;bottom:1.3vh;right:1.2vw;font-size:max(7px,.6vw);
  font-family:var(--meta);text-decoration:none;color:rgba(240,238,229,.5);letter-spacing:.06em;
}
.tag-card b{font-weight:400;font-size:8.2cqw;line-height:.84;letter-spacing:-.04em}
.tag-card{container-type:inline-size}
.paper-card{background:var(--paper-hi);box-shadow:.2vh .5vh 2.4vh rgba(20,20,20,.14)}
.pair{position:absolute;inset:0}
.pair-black{width:38vw!important;height:24vh!important;left:57%!important;top:30%!important}
.pair-paper{width:40vw!important;height:25vh!important;left:11%!important;top:29%!important}

/* ─────────── S10 日文卡 ─────────── */
.jp-card{
  position:absolute;top:32.5%;width:39.5vw;height:29vh;background:var(--paper-hi);
  display:flex;align-items:center;justify-content:center;
  box-shadow:.25vh .8vh 2.8vh rgba(20,20,20,.13), 0 .2vh .6vh rgba(20,20,20,.08);
  opacity:0;will-change:transform,opacity;
}
.jp-card p{color:var(--ink);font-size:6.4vw;line-height:1;letter-spacing:-.01em;font-weight:800}
.jp-card .jp-small{font-size:3.3vw;vertical-align:baseline;margin-left:.2vw}
.jp-card .bang{margin-left:-.08em}
.jp-card i{
  position:absolute;top:1.5vh;left:1.3vw;font-family:var(--meta);font-style:normal;
  font-size:max(7px,.62vw);color:#55554f;letter-spacing:.09em;text-decoration:underline;text-underline-offset:2px;
}
.jp-card u{position:absolute;bottom:1.4vh;right:1.3vw;font-family:var(--meta);text-decoration:none;font-size:max(7px,.58vw);color:#77776f}
.jp-left{left:7.5vw}
.jp-right{right:7.5vw}

/* ─────────── S11 碎裂 ─────────── */
#sc-shatter{z-index:6}   /* 与黑场主字场景交叠 0.16s，碎片飞散压在其上 */
.rings{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
#cvShards{z-index:4}
.shatter-word{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-56%);
  font-size:14.2vw;font-weight:400;letter-spacing:-.035em;line-height:.8;
  color:var(--ink);white-space:nowrap;z-index:5;opacity:0;will-change:transform,opacity;
}
.crack-flash{position:absolute;inset:0;background:var(--cream);opacity:0;z-index:6;pointer-events:none}

/* ─────────── S12 暗场主字 ─────────── */
.hero-word{
  position:absolute;left:50%;top:53%;transform:translate(-50%,-52%);
  font-size:14.4vw;font-weight:400;letter-spacing:-.04em;line-height:.8;color:var(--cream);
  white-space:nowrap;will-change:transform,text-shadow;
}
.hero-word.ghost{text-shadow:0.45vw 0 rgba(232,74,8,.5),-0.45vw 0 rgba(228,227,216,.28)}

/* ─────────── S13 片尾 ─────────── */
.end-wrap{position:absolute;inset:0;will-change:transform}
.meta-row{
  position:absolute;left:4vw;right:4vw;display:flex;justify-content:space-between;
  font-family:var(--meta);font-size:max(8px,.72vw);letter-spacing:.12em;color:#75756c;
}
.end-top{top:4.5vh}.end-bot{bottom:6.5vh}
.end-label{
  position:absolute;left:50%;top:45%;transform:translateX(-50%);
  color:var(--ink);font-size:4.4vw;letter-spacing:.005em;line-height:1;white-space:nowrap;
}
.end-label i{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:-1.5vh;width:130%;height:1.55vh;background:var(--orange);display:block;
}
.end-word{
  position:absolute;left:50%;top:66%;transform:translate(-50%,-50%) scaleX(.985);
  font-size:14.6vw;line-height:.74;letter-spacing:-.045em;color:var(--ink);
  white-space:nowrap;
}

/* ─────────── 全局：刮痕画布 / 颗粒 / 闪白 ─────────── */
.grain{
  position:absolute;inset:-70px;z-index:9;pointer-events:none;opacity:.075;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift .9s steps(6) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)}   17%{transform:translate(-38px,22px)}
  33%{transform:translate(24px,-30px)} 50%{transform:translate(-30px,-14px)}
  67%{transform:translate(34px,30px)} 83%{transform:translate(-20px,36px)}
  100%{transform:translate(0,0)}
}
.flash{position:absolute;inset:0;z-index:10;background:var(--cream);opacity:0;pointer-events:none}

/* ─────────── HUD ─────────── */
.hud{
  position:absolute;left:0;right:0;bottom:0;z-index:11;
  display:flex;align-items:center;gap:12px;padding:12px 16px;
  pointer-events:none;
}
.hud a.credit{
  margin-inline:auto;pointer-events:auto;
  font-family:var(--meta);font-size:10px;letter-spacing:.06em;
  color:rgba(148,147,138,.85);text-decoration:none;
}
.hud a.credit:hover{color:#cfcdc2;text-decoration:underline}
#soundBtn,#replayBtn{
  pointer-events:auto;display:flex;align-items:center;gap:6px;
  background:rgba(20,20,20,.55);border:1px solid rgba(255,255,255,.16);
  color:#efece2;border-radius:999px;padding:7px 12px;cursor:pointer;
  font-family:var(--meta);font-size:11px;letter-spacing:.08em;
  backdrop-filter:blur(4px);transition:opacity .2s;
}
#soundBtn:hover,#replayBtn:hover{border-color:rgba(255,255,255,.42)}
#soundBtn.muted .waves{opacity:0}
#soundBtn.muted::after{
  content:"";position:absolute;width:2px;height:17px;background:#ff6a2b;
  transform:rotate(45deg);border-radius:2px;margin-left:-11.5px;
}
#soundBtn{position:relative}
#replayBtn{opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
#replayBtn.show{opacity:1;visibility:visible}
.progress{position:absolute;left:0;right:0;bottom:0;height:2.5px;z-index:11;background:rgba(127,126,118,.25)}
.progress i{display:block;height:100%;background:var(--orange);transform-origin:0 50%;transform:scaleX(0)}

/* ─────────── 播放闸门 ─────────── */
.gate{
  position:absolute;inset:0;z-index:30;display:none;place-items:center;
  background:rgba(12,12,12,.55);backdrop-filter:blur(3px);cursor:pointer;
}
.gate.show{display:grid}
.gate-card{
  background:var(--paper);color:var(--ink);padding:26px 42px;text-align:center;
  border-radius:6px;box-shadow:0 24px 80px rgba(0,0,0,.45);
}
.gate-card b{display:block;font-weight:400;font-size:26px;letter-spacing:-.02em}
.gate-card span{display:block;margin-top:8px;font-family:var(--meta);font-size:12px;color:#77776e}

@media (max-width:720px){
  .lk-minimax{font-size:12.6vw}.lk-h3{font-size:16.2vw}
  .motion-one{font-size:23vw}.hero-word{font-size:22vw}.end-word{font-size:24vw}
  .hud{padding:10px}
}