/* ============================================================
   Disky Fun — Visual Effects
   CRT 오버레이, 마우스 트레일, 픽셀 효과
   너의 베이스 디자인 그대로 이식
   ============================================================ */


/* ─── CRT 오버레이 (스캔라인 + 비넷팅) ─────────────── */

.crt-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-crt-overlay);
  background:
    /* 스캔라인 */
    repeating-linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.15) 0px,
      rgba(0, 0, 0, 0.15) 1px,
      transparent 1px,
      transparent 3px
    ),
    /* 비넷팅 */
    radial-gradient(
      ellipse at center,
      transparent 50%,
      rgba(0, 0, 0, 0.35) 100%
    );
  mix-blend-mode: multiply;
  
  /* 토글 가능 */
  opacity: 1;
  transition: opacity var(--duration-base);
}

.crt-overlay.is-off {
  opacity: 0;
}


/* ─── 마우스 트레일 ─────────────────────────────────── */

.mouse-trail-dot {
  position: fixed;
  width: 4px;
  height: 4px;
  background: var(--c-accent);
  pointer-events: none;
  z-index: var(--z-mouse-effects);
  animation: trail-fade 0.4s linear forwards;
  image-rendering: pixelated;
}

@keyframes trail-fade {
  0% { 
    opacity: 0.8; 
    transform: scale(1); 
  }
  100% { 
    opacity: 0; 
    transform: scale(0.3); 
  }
}


/* ─── 클릭 픽셀 버스트 ──────────────────────────────── */

.click-pixel {
  position: fixed;
  width: 3px;
  height: 3px;
  pointer-events: none;
  z-index: var(--z-mouse-effects);
  animation: click-burst 0.35s ease-out forwards;
  image-rendering: pixelated;
}

@keyframes click-burst {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--dx), var(--dy)) scale(0.2);
    opacity: 0;
  }
}


/* ─── 픽셀 빌드 부팅 (아이콘 등장) ──────────────────── */

body.fx-pixel-build .desktop-icon {
  animation: pixel-build 0.4s steps(4, end) backwards;
}

body.fx-pixel-build .desktop-icon:nth-child(1) { animation-delay: 0.00s; }
body.fx-pixel-build .desktop-icon:nth-child(2) { animation-delay: 0.08s; }
body.fx-pixel-build .desktop-icon:nth-child(3) { animation-delay: 0.16s; }
body.fx-pixel-build .desktop-icon:nth-child(4) { animation-delay: 0.24s; }
body.fx-pixel-build .desktop-icon:nth-child(5) { animation-delay: 0.32s; }
body.fx-pixel-build .desktop-icon:nth-child(6) { animation-delay: 0.40s; }
body.fx-pixel-build .desktop-icon:nth-child(7) { animation-delay: 0.48s; }
body.fx-pixel-build .desktop-icon:nth-child(n+8) { animation-delay: 0.56s; }

@keyframes pixel-build {
  0% { 
    opacity: 0; 
    transform: scale(0); 
  }
  50% { 
    opacity: 1; 
    transform: scale(1.2); 
  }
  100% { 
    opacity: 1; 
    transform: scale(1); 
  }
}


/* ─── 굵은 깜빡 캐럿 ────────────────────────────────── */

body.fx-blink-caret input,
body.fx-blink-caret textarea,
body.fx-blink-caret [contenteditable] {
  caret-color: var(--c-accent);
  caret-shape: block;
}


/* ─── 창 드래그 잔상 ────────────────────────────────── */

body.fx-drag-ghost .window.is-dragging {
  opacity: 0.4;
  outline: 2px dashed var(--c-accent);
}