/* ========== CRT: clean-but-dirty (no assets) ========== */
:root{
  /* شدت‌ها را هر جا خواستی تغییر بده */
  --crt-scanline-opacity: .12;       /* تیرگی خطوط افقی */
  --crt-scanline-thick: 2px;         /* ضخامت خط تیره */
  --crt-scanline-gap: 3px;           /* فاصله شفاف */

  --crt-flicker-opacity: .08;        /* 👈 کمی قوی‌تر از قبل */
  --crt-flicker-speed: 120ms;        /* سرعت فلیکر */

  --crt-vignette-opacity: .16;       /* وینیت گوشه‌ها */

  --crt-noise-opacity: .045;         /* گرین کلی */
  --crt-noise-fps: 12;               /* نرخ به‌روزرسانی گرین */

  --crt-aberration: 0.6px;           /* RGB split بسیار ظریف روی متن/لبه‌ها */

  --crt-roll-opacity: .06;           /* نوار رول عمودی ملایم */
  --crt-roll-speed: 7s;              /* سرعت حرکت نوار */

  --crt-warp-scale: 1.001;           /* وارپ خیلی خفیف روی محتوا */
}

/* حالت راحت برای چشم: کنتراست و حرکت کمتر */
body.crt-comfort{
  --crt-scanline-opacity: .07;
  --crt-scanline-thick: 2px;
  --crt-scanline-gap: 5px;
  --crt-flicker-opacity: .02;
  --crt-vignette-opacity: .10;
  --crt-noise-opacity: .02;
  --crt-noise-fps: 8;
  --crt-aberration: 0.3px;
  --crt-roll-opacity: .03;
  --crt-roll-speed: 9s;
  --crt-warp-scale: 1.0;
}

/* وقتی روشن است */
body.crt-on #app{
  transform-origin:center;
  animation: crt-warp 5s ease-in-out infinite;
}
@keyframes crt-warp{
  0%,100% { transform: scale(var(--crt-warp-scale)) skewX(0.03deg) skewY(0deg); }
  50%     { transform: scale(var(--crt-warp-scale)) skewX(-0.03deg) skewY(.02deg); }
}

/* لایه‌ها (بالای همه) */
.crt-layer{ position: fixed; inset: 0; pointer-events: none; z-index: 10000; }

/* اسکن‌لاین افقی + کمی blur برای نرمی */
.crt-scanlines{
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,var(--crt-scanline-opacity)) 0,
    rgba(0,0,0,var(--crt-scanline-opacity)) var(--crt-scanline-thick),
    transparent calc(var(--crt-scanline-thick) + var(--crt-scanline-gap))
  );
  mix-blend-mode: multiply;
  filter: blur(.2px);
}

/* فلیکر */
.crt-flicker{
  background: #fff;
  opacity: var(--crt-flicker-opacity);
  mix-blend-mode: overlay;
  animation: crt-flick var(--crt-flicker-speed) steps(2,end) infinite;
}
@keyframes crt-flick{
  0% { opacity: var(--crt-flicker-opacity); }
  50%{ opacity: calc(var(--crt-flicker-opacity) * .35); }
  100%{ opacity: var(--crt-flicker-opacity); }
}

/* وینیت */
.crt-vignette{
  background: radial-gradient(ellipse at center,
    rgba(0,0,0,0) 60%,
    rgba(0,0,0,var(--crt-vignette-opacity)) 100%);
  mix-blend-mode: multiply;
}

/* نوار رول عمودی خیلی ملایم (VHS vibe) */
.crt-roll{
  background:
    linear-gradient( to bottom,
      transparent 0%,
      rgba(255,255,255,var(--crt-roll-opacity)) 50%,
      transparent 100%
    );
  mix-blend-mode: screen;
  background-size: 100% 24%;
  background-repeat: no-repeat;
  animation: crt-roll-move var(--crt-roll-speed) linear infinite;
  opacity: .6;
}
@keyframes crt-roll-move{
  0%   { background-position: 0% -30%; }
  100% { background-position: 0% 130%; }
}

/* گرین/نویز با CSS (بدون تصویر): نویز کانتوری با لایه‌های conic/radial */
.crt-noise{
  opacity: var(--crt-noise-opacity);
  mix-blend-mode: overlay;
  background:
    radial-gradient(100% 100% at 0% 0%, rgba(0,0,0,.30), transparent 60%) 0 0/25% 25%,
    radial-gradient(100% 100% at 100% 100%, rgba(0,0,0,.30), transparent 60%) 0 0/25% 25%,
    repeating-conic-gradient(from 0deg,
      rgba(255,255,255,.08) 0 2deg,
      rgba(0,0,0,.08) 2deg 4deg
    );
  filter: contrast(130%) saturate(110%);
  animation: crt-noise-shift calc(1s/var(--crt-noise-fps)) steps(2,end) infinite;
}
@keyframes crt-noise-shift{
  0%   { transform: translate3d(0,0,0); }
  25%  { transform: translate3d(.3px,.2px,0); }
  50%  { transform: translate3d(-.4px,.1px,0); }
  75%  { transform: translate3d(.2px,-.3px,0); }
  100% { transform: translate3d(0,0,0); }
}

/* RGB split بسیار ظریف فقط روی متن‌ها و لبه‌های پرکنتراست */
.crt-chroma *{
  text-shadow:
     var(--crt-aberration) 0 0 rgba(255,0,0,.35),
    calc(-1 * var(--crt-aberration)) 0 0 rgba(0,180,255,.35);
}
/* اگر زیاد بود روی بعضی المان‌ها خاموش کن: .no-chroma { text-shadow: none !important; } */

/* احترام به reduce-motion */
@media (prefers-reduced-motion: reduce){
  .crt-flicker,.crt-noise,.crt-roll{ animation: none !important; }
  .crt-flicker{ opacity: 0; }
  body.crt-on #app{ animation: none; }
}