/* 잔상 AFTERIMAGE — 모션 레이어 스타일
 * afterimage.css 다음에 로드한다. 페라리 토큰(색·코너·굵기)은 건드리지 않는다.
 */

/* ── 1. 필름 그레인 ─────────────────────────────────────
 * feTurbulence 한 장. 화면 전체를 덮되 클릭을 가로채지 않는다.
 * ⚠ opacity 0.05를 넘기면 «지저분한 사이트»가 된다. 알아채면 실패다.
 */
.ai-grain{
  position:fixed; inset:-60px; z-index:9999; pointer-events:none;
  opacity:.042; mix-blend-mode:overlay;
  background-repeat:repeat; background-size:220px 220px;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='220' height='220' filter='url(%23n)'/></svg>");
  will-change:transform;
  animation:ai-grain-shift 900ms steps(1,end) infinite;
}
@keyframes ai-grain-shift{
  0%  {transform:translate3d(0,0,0)}
  12% {transform:translate3d(-12px,6px,0)}
  25% {transform:translate3d(8px,-10px,0)}
  37% {transform:translate3d(-6px,-14px,0)}
  50% {transform:translate3d(14px,4px,0)}
  62% {transform:translate3d(-10px,12px,0)}
  75% {transform:translate3d(6px,10px,0)}
  87% {transform:translate3d(-14px,-4px,0)}
}
/* 밝은 밴드 위에서는 오버레이가 너무 세게 먹는다 → 살짝 낮춘다 */
.band-light .ai-grain,.band-soft .ai-grain{opacity:.03}

/* ── 2. 커서 잔상 캔버스 ────────────────────────────── */
.ai-trail{
  position:fixed; inset:0; z-index:9998; pointer-events:none;
  mix-blend-mode:screen;
}

/* ── 3. 워드마크 수렴 ───────────────────────────────────
 * 유령 사본 두 장이 어긋나 있다가 제자리로 모인다.
 * 실제 텍스트는 그대로 두고 ::before/::after 로만 만든다 → 접근성·선택 유지.
 */
.ai-wm{position:relative; isolation:isolate}
.ai-wm::before,.ai-wm::after{
  content:attr(data-echo); position:absolute; inset:0; z-index:-1;
  pointer-events:none; white-space:pre-line;
  font:inherit; letter-spacing:inherit; line-height:inherit;
  opacity:0;
}
/* ⚠ 클래스 토글 + transition 은 합성 부하에서 «중간에 얼어붙는다»(실측).
   키프레임 + forwards 로 바꾸면 컴포지터가 끝까지 돌린다. */
.ai-wm::before{color:#da291c; animation:ai-echo-l 1.25s cubic-bezier(.16,1,.3,1) .12s both}
.ai-wm::after {color:#2f7fd0; animation:ai-echo-r 1.25s cubic-bezier(.16,1,.3,1) .12s both}
@keyframes ai-echo-l{
  0%  {opacity:.55; transform:translate3d(-14px,6px,0)}
  70% {opacity:.30}
  100%{opacity:0;   transform:translate3d(0,0,0)}
}
@keyframes ai-echo-r{
  0%  {opacity:.55; transform:translate3d(14px,-6px,0)}
  70% {opacity:.30}
  100%{opacity:0;   transform:translate3d(0,0,0)}
}

/* ── 4. 드문 글리치 ─────────────────────────────────────
 * 채널 분리 + 스캔 슬라이스. 70~90ms 만 켜진다.
 */
@keyframes ai-slice{
  0%  {clip-path:inset(0 0 0 0);      transform:translate3d(0,0,0)}
  22% {clip-path:inset(18% 0 62% 0);  transform:translate3d(-5px,0,0)}
  44% {clip-path:inset(64% 0 12% 0);  transform:translate3d(4px,0,0)}
  68% {clip-path:inset(38% 0 46% 0);  transform:translate3d(-3px,0,0)}
  100%{clip-path:inset(0 0 0 0);      transform:translate3d(0,0,0)}
}
.ai-glitch{
  animation:ai-slice 80ms steps(2,end) 1;
  text-shadow:2px 0 rgba(218,41,28,.85), -2px 0 rgba(47,127,208,.7);
}

/* ── 5. 스크롤 등장 — 유령이 따라붙었다 겹친다 ───────── */
.ai-rise{
  opacity:0; transform:translate3d(0,16px,0);
  filter:blur(3px);
  transition:opacity .62s ease, transform .62s cubic-bezier(.16,1,.3,1), filter .62s ease;
  will-change:opacity,transform,filter;
}
.ai-in{opacity:1; transform:none; filter:none}
/* 격자 안에서는 순서대로 아주 조금씩 늦게 */
.weeks .ai-rise:nth-child(4n+2){transition-delay:.05s}
.weeks .ai-rise:nth-child(4n+3){transition-delay:.10s}
.weeks .ai-rise:nth-child(4n+4){transition-delay:.15s}

/* ── 6. 접근성·인쇄 ─────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .ai-grain{opacity:.028; animation:none}
  .ai-trail{display:none}
  .ai-wm::before,.ai-wm::after{display:none; animation:none}
  .ai-glitch{animation:none; text-shadow:none}
  .ai-rise,.ai-in{opacity:1 !important; transform:none !important; filter:none !important; transition:none !important}
}
@media print{
  .ai-grain,.ai-trail{display:none !important}
  .ai-wm::before,.ai-wm::after{display:none !important}
  .ai-rise,.ai-in{opacity:1 !important; transform:none !important; filter:none !important}
}