/* 잔상 AFTERIMAGE — 그레인 · 디더 · 호버 색
 * motion.css 다음에 로드한다. 여기서 그레인 관련은 motion.css의 것을 «덮어쓴다».
 *
 * 원칙 — 기본은 모노크롬, 색은 «호버할 때만» 배어 나온다.
 *        lo-fi 그레인 ↔ hi-fi 색의 대비가 이 사이트의 문법이다.
 */

/* ══ 1. 필름 그레인 — 굵게 ═══════════════════════════════
 * 이전 4%는 너무 얌전했다. 실제로 «보이는» 세기로 올린다.
 * soft-light는 밝은 쪽·어두운 쪽을 모두 살려서 흑백 인화에 가깝다.
 */
.ai-grain{
  position:fixed; inset:-140px; z-index:9990; pointer-events:none;
  opacity:.055; mix-blend-mode:soft-light;
  background-repeat:repeat;
  animation:none;                 /* JS가 keyframes를 심는다 */
  will-change:background-image;
}
/* 밝은 밴드에서는 더 낮춘다 — 밝은 바탕에서 그레인이 대비를 가장 많이 깎는다 */

/* 두 번째 겹 — 더 크고 느린 얼룩. 필름의 «구름» */
body::after{
  content:""; position:fixed; inset:0; z-index:9989; pointer-events:none;
  opacity:.16; mix-blend-mode:overlay;
  background:
    radial-gradient(60% 40% at 18% 12%, rgba(255,255,255,.06), transparent 70%),
    radial-gradient(50% 45% at 82% 78%, rgba(0,0,0,.35), transparent 72%);
}

/* ══ 2. 하프톤 스크린 — 「그 점」 ═════════════════════════ */
/* ⚠ 하프톤을 «글자 위»에 깔면 본문이 죽는다(실측).
   레퍼런스들도 타입은 깨끗하고 텍스처는 면·이미지에만 있다.
   → 전역 오버레이는 거의 지우고, 망점은 각 밴드의 «배경»으로 내린다. */
/* ⛔ 전역 망점 오버레이는 삭제했다. 글자 위에 점을 깔면 본문이 죽는다(실측).
   망점은 아래의 «밴드 배경»에만 남긴다. */
.ai-halftone{display:none}

/* 망점은 밴드 배경에만 — 콘텐츠는 그 위에 깨끗하게 올라탄다 */
.band{position:relative}
.band::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(circle at 50% 50%, currentColor 0 34%, transparent 35%);
  background-size:4px 4px;
  opacity:.05; color:#fff;
}
.band-light::before,.band-soft::before{color:#000; opacity:.045}
.band > .wrap{position:relative; z-index:1}
.cta-band{position:relative}
.cta-band > .wrap{position:relative; z-index:1}

/* ══ 3. 히어로 디더 캔버스 ══════════════════════════════ */
.hero{background:#0a0a0a}
.hero::before{                    /* motion.css의 매끄러운 그라디언트를 죽인다 */
  background:linear-gradient(180deg,#1a1a1a 0%,#000 78%) !important;
}
.ai-dither{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; pointer-events:none; z-index:0;
  opacity:.20; mix-blend-mode:screen;
  image-rendering:pixelated;       /* 망점이 뭉개지지 않게 */
  /* 글자가 앉는 왼쪽 아래는 비워 준다 — 망점이 타입을 먹지 않게 */
  /* 대각 마스크 + 하단 페이드를 «교집합»으로 — 글자가 앉는 왼쪽과 아래를 비운다 */
  -webkit-mask-image:linear-gradient(105deg, transparent 0 26%, #000 58%),
                     linear-gradient(180deg, #000 0 46%, transparent 82%);
          mask-image:linear-gradient(105deg, transparent 0 26%, #000 58%),
                     linear-gradient(180deg, #000 0 46%, transparent 82%);
  -webkit-mask-composite:source-in;
          mask-composite:intersect;
}
.hero-in{z-index:2}

/* ══ 4. 워드마크 — 그레인으로 번지는 글자 ════════════════ */
.ai-wm{
  filter:url(#ai-rough);
}
@supports not (filter: url(#ai-rough)) { .ai-wm{filter:none} }

/* ══ 5. 호버 — 색이 «살짝» 배어 나온다 ═══════════════════
 * 기본은 무채색. 손이 닿은 곳에서만 Rosso Corsa가 스며든다.
 */
.wk, .ex, .ref, .notice, .arch-card, .fcard{
  position:relative;
  transition:background-color .42s ease, color .42s ease;
}
.wk::after, .ex::after, .ref::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, rgba(218,41,28,.15), rgba(218,41,28,0) 62%);
  opacity:0; transition:opacity .42s ease;
}
.wk:hover::after, .ex:hover::after, .ref:hover::after{opacity:1}
.wk:hover{background:#1f1d1c}
.wk:hover .wk-n{color:var(--primary)}
.ref:hover .ref-t{color:var(--primary)}
.ex:hover .ex-t{color:var(--primary)}

/* 이미지·영상은 기본 흑백, 호버에서 색이 돌아온다 */
.arch-card .thumb img,.arch-card .thumb video{
  filter:grayscale(1) contrast(1.08) brightness(.94);
  transition:filter .5s ease;
}
.arch-card:hover .thumb img,.arch-card:hover .thumb video{filter:none}

/* 링크 — 밑줄 대신 «인쇄 번짐» */
.ex-link,.nav-links a,.foot-grid a{transition:color .3s ease, text-shadow .3s ease}
.ex-link:hover,.nav-links a:hover,.foot-grid a:hover{
  color:var(--primary); text-shadow:0 0 12px rgba(218,41,28,.45);
}
.btn-primary{transition:box-shadow .3s ease}
.btn-primary:hover{box-shadow:0 0 0 1px rgba(255,255,255,.22) inset}
.btn-outline:hover{background:rgba(255,255,255,.06)}

/* ══ 6. 밝은 밴드 — 신문 인쇄처럼 ═══════════════════════ */
.band-light,.band-soft{background:#f6f4f0}
.band-light,.band-light p,.band-soft,.band-soft p{color:#232323}
.band-light .dim,.band-soft .dim{color:#5a5a5a}
.ex-why{color:#232323}
.route-move{color:#4a4a4a}
.band-light .ex-m{background:#e8e5e0}

/* ══ 7. 접근성 · 인쇄 ═══════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .ai-grain{animation:none !important}
}
@media print{
  .ai-grain,.ai-halftone,.ai-dither{display:none !important}
  body::after{display:none !important}
  .band::before{display:none !important}
  .ai-wm{filter:none !important}
  .wk::after,.ex::after,.ref::after{display:none !important}
  .arch-card .thumb img{filter:none !important}
}