/* ============================================================
   JinJin 首頁開場動畫｜Riso 孔版印刷風格
   效果：時間感（timecode / 節奏）、動態字體（逐字套色錯位）、
        流動線條、剛體物理（色塊掉落碰撞）、網點著色（halftone）
   ============================================================ */
#intro{display:none;position:fixed;inset:0;z-index:95;background:var(--paper);overflow:hidden;touch-action:none;cursor:crosshair;transition:opacity .45s ease}
html.intro-on #intro{display:block}
html.intro-on body{overflow:hidden}
#intro.out{opacity:0;pointer-events:none}
#intro canvas,#intro svg{position:absolute;inset:0;width:100%;height:100%;display:block}
#intro .i-dots,#intro .i-flow,#intro .i-hud,#intro .i-crop{transition:opacity .6s ease}
#intro.exit .i-dots,#intro.exit .i-flow,#intro.exit .i-hud,#intro.exit .i-crop,#intro.exit .i-skip{opacity:0}
#intro .i-flow path{fill:none;stroke-linecap:round;mix-blend-mode:multiply}
#intro .i-shapes{pointer-events:none}

/* registration / crop marks */
.i-crop{position:absolute;width:26px;height:26px;opacity:.9}
.i-crop::before,.i-crop::after{content:"";position:absolute;background:var(--ink)}
.i-crop::before{left:50%;top:0;width:1.5px;height:100%}
.i-crop::after{top:50%;left:0;height:1.5px;width:100%}
.i-crop i{position:absolute;inset:6px;border:1.5px solid var(--ink);border-radius:50%}
.i-crop.tl{left:14px;top:14px}.i-crop.tr{right:14px;top:14px}.i-crop.bl{left:14px;bottom:14px}.i-crop.br{right:14px;bottom:14px}

/* HUD */
.i-hud{position:absolute;left:54px;right:54px;top:16px;display:flex;justify-content:space-between;gap:12px;font:600 11px/1.6 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);pointer-events:none;z-index:3}
.i-hud .i-now{text-transform:none;letter-spacing:.04em}
.i-hud .i-now b{font-weight:600;background:var(--yellow);padding:0 4px;margin-left:6px;font-family:var(--f-body)}
@media (max-width:640px){.i-hud .i-brand{display:none}}

.i-skip{position:absolute;right:54px;bottom:16px;z-index:4;border:1.5px solid var(--ink);background:var(--paper);color:var(--ink);border-radius:999px;padding:7px 16px;font:600 12px var(--f-mono);letter-spacing:.08em;cursor:pointer;box-shadow:3px 3px 0 var(--ink);transition:transform .15s,box-shadow .15s,opacity .4s}
.i-skip:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.i-tip{position:absolute;left:54px;bottom:20px;z-index:3;font:500 11px var(--f-mono);color:var(--ink-3);letter-spacing:.04em;pointer-events:none;transition:opacity .4s}
#intro.exit .i-tip{opacity:0}
@media (max-width:640px){.i-tip{display:none}.i-skip{right:16px}.i-hud{left:16px;right:16px;top:48px}}

/* kinetic type wall */
.i-wall{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;z-index:2}
.i-wall .col{display:flex;flex-direction:column;align-items:center}
.i-wall.two{flex-direction:row;gap:4vw}
.i-wall.two .col:first-child{align-items:flex-end}
.i-wall.two .col:last-child{align-items:flex-start}
.i-wall .ln{position:relative;display:inline-block;white-space:nowrap;font-family:var(--f-latin);font-weight:400;line-height:.98;letter-spacing:-.015em;color:var(--ink)}
.i-wall .ln.it{font-style:italic}
.i-wall .ln .no{font:600 .16em/1 var(--f-mono);letter-spacing:.04em;vertical-align:top;margin-right:.35em;position:relative;top:.55em;opacity:0;transition:opacity .4s .2s}
.i-wall .ln.on .no{opacity:1}
.i-wall .ch{position:relative;display:inline-block;opacity:0;mix-blend-mode:multiply}
.i-wall .sp{display:inline-block;width:.24em}
/* misregistration ghosts: start far apart, snap into (almost) register */
.i-wall .ch::before,.i-wall .ch::after{content:attr(data-t);position:absolute;left:0;top:0;mix-blend-mode:multiply;transition:transform 1s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0ms)}
.i-wall .ch::before{color:var(--c,var(--pink));transform:translate(var(--gx,10px),var(--gy,6px))}
.i-wall .ch::after{color:var(--c2,var(--blue));transform:translate(calc(var(--gx,10px)*-1),calc(var(--gy,6px)*-.7))}
.i-wall .ln.on .ch::before{transform:translate(.045em,.025em)}
.i-wall .ln.on .ch::after{transform:translate(-.04em,-.02em)}
.i-wall .ln.on .ch{animation:var(--anim,i-drop) .75s cubic-bezier(.2,.9,.25,1.15) both;animation-delay:var(--d,0ms)}
/* yellow highlighter sweep */
.i-wall .ln.hl::before{content:"";position:absolute;left:-.08em;right:-.08em;top:52%;bottom:6%;background:var(--yellow);mix-blend-mode:multiply;transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.7,0,.2,1) .25s}
.i-wall .ln.hl.on::before{transform:scaleX(1)}

@keyframes i-drop{from{opacity:0;transform:translateY(-110%) rotate(-14deg)}45%{opacity:1}to{opacity:1;transform:none}}
@keyframes i-rise{from{opacity:0;transform:translateY(70%) scaleY(1.7)}to{opacity:1;transform:none}}
@keyframes i-squash{from{opacity:0;transform:scale(1,0);transform-origin:50% 100%}55%{opacity:1;transform:scale(1.08,1.3);transform-origin:50% 100%}to{opacity:1;transform:none;transform-origin:50% 100%}}
@keyframes i-spin{from{opacity:0;transform:rotate(-200deg) scale(0)}to{opacity:1;transform:none}}
@keyframes i-scatter{from{opacity:0;transform:translate(var(--sx),var(--sy)) rotate(var(--sr))}to{opacity:1;transform:none}}
@keyframes i-stretch{from{opacity:0;transform:scaleX(4) translateX(30%);transform-origin:0 50%}to{opacity:1;transform:none;transform-origin:0 50%}}

/* replay button on the hero stage */
.replay{position:absolute;right:0;bottom:-10px;border:1.5px solid var(--ink);background:var(--paper);border-radius:999px;padding:3px 12px;font:600 11px var(--f-mono);letter-spacing:.06em;cursor:pointer;color:var(--ink);z-index:12}
.replay:hover{background:var(--yellow)}
@media (prefers-reduced-motion:reduce){.i-wall .ch{opacity:1}}