/* ═══════════════════════════════════════════════
   VISUAL FILTERS  — whole-app display effects (just for fun)

   Applied as a class on <body> (vf-pixel | vf-crt | vf-bw). The effect targets
   the two persistent panes (.sb + .main) so transient popovers stay crisp and
   correctly positioned, while the CRT scanlines ride on their own fixed overlay.
═══════════════════════════════════════════════ */

/* ── Black & White ───────────────────────────── */
body.vf-bw .sb,
body.vf-bw .main{ filter:grayscale(1) contrast(1.04); }

/* ── Pixel art ──────────────────────────────────
   Bitmap font, hard square edges, pixelated + posterized imagery. (True
   pixelation of live text isn't possible in CSS, so this leans on a pixel font
   + crisp edges + image treatment to sell the look.) */
body.vf-pixel .sb *,
body.vf-pixel .main *{ font-family:'Pixelify Sans',ui-monospace,monospace !important; letter-spacing:0 !important; }
body.vf-pixel .sb *,
body.vf-pixel .main *{ border-radius:0 !important; }
body.vf-pixel .sb,
body.vf-pixel .main{ image-rendering:pixelated; }
body.vf-pixel .sb *,
body.vf-pixel .main *{ image-rendering:pixelated; }
body.vf-pixel img,
body.vf-pixel .home-card-cover,
body.vf-pixel .cover-img-el,
body.vf-pixel .dc-cover-thumb,
body.vf-pixel .bk-page-card-cover{ filter:url(#vf-posterize) contrast(1.1) saturate(1.15); }
/* Crisp text rendering for the retro feel */
body.vf-pixel .sb,
body.vf-pixel .main{ -webkit-font-smoothing:none; font-smooth:never; }

/* ── CRT ────────────────────────────────────────
   Scanlines + vignette + gentle flicker on a fixed overlay, plus a faint
   phosphor glow / saturation bump on the content. */
#crt-overlay{ display:none; }
body.vf-crt #crt-overlay{
  display:block; position:fixed; inset:0; z-index:10000; pointer-events:none;
  background:repeating-linear-gradient(to bottom,
    rgba(0,0,0,.16) 0, rgba(0,0,0,.16) 1px, transparent 1px, transparent 3px);
  mix-blend-mode:multiply;
}
body.vf-crt #crt-overlay::before{   /* vignette */
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at center, transparent 58%, rgba(0,0,0,.4) 100%);
}
body.vf-crt #crt-overlay::after{    /* faint rolling glow + flicker */
  content:''; position:absolute; left:0; right:0; height:38%;
  background:linear-gradient(rgba(255,255,255,.05), rgba(255,255,255,0));
  animation:crt-roll 7s linear infinite, crt-flicker .9s steps(3) infinite;
}
@keyframes crt-roll{ 0%{top:-40%} 100%{top:100%} }
@keyframes crt-flicker{ 0%{opacity:.55} 50%{opacity:.85} 100%{opacity:.65} }
body.vf-crt .sb,
body.vf-crt .main{ filter:saturate(1.3) contrast(1.06) brightness(1.03); text-shadow:0 0 1px rgba(255,255,255,.22); }

/* ═══ Shared full-screen overlay for the filters below ═══
   One fixed, click-through layer that each filter paints its texture onto. */
#vf-overlay{ display:none; position:fixed; inset:0; z-index:9500; pointer-events:none; overflow:hidden; }

/* ── Frosted glass ──────────────────────────────
   A glassy sheen painted into the BACKGROUND (behind text / cards / images) so the
   foreground stays perfectly crisp — no blur. The opaque cards + sidebar sit on top;
   the sheen shows through the transparent writing area + page margins. */
body.vf-frost{
  background-color:var(--bg);
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,0) 44%),
    radial-gradient(120% 85% at 12% -5%, rgba(190,215,255,.07), transparent 55%),
    radial-gradient(110% 80% at 92% 105%, rgba(255,255,255,.06), transparent 55%);
}
body.vf-frost .sb,
body.vf-frost .main{ filter:brightness(1.03) saturate(.97); }

/* ── Frosted glass + ────────────────────────────
   Same background sheen, but the glass now extends to the cards, card blocks, and
   cover/header imagery: surfaces get a translucent white film + backdrop blur +
   a top sheen, and covers are softly blurred like real frosted panels. */
body.vf-frostfull{
  background-color:var(--bg);
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,0) 44%),
    radial-gradient(120% 85% at 12% -5%, rgba(190,215,255,.07), transparent 55%),
    radial-gradient(110% 80% at 92% 105%, rgba(255,255,255,.06), transparent 55%);
}
body.vf-frostfull .sb,
body.vf-frostfull .main{ filter:brightness(1.02) saturate(.97); }
body.vf-frostfull .home-card,
body.vf-frostfull .rec-card,
body.vf-frostfull .dc,
body.vf-frostfull .home-empty-cta,
body.vf-frostfull .idb-card,
body.vf-frostfull .tk-card,
body.vf-frostfull .idb-bcol,
body.vf-frostfull .bk-callout,
body.vf-frostfull .bk-page-card,
body.vf-frostfull .bk-grid-wrap,
body.vf-frostfull .bk-yt-card,
body.vf-frostfull .cfg-panel{
  background-image:linear-gradient(rgba(255,255,255,.085), rgba(255,255,255,.03)) !important;
  -webkit-backdrop-filter:blur(7px) saturate(1.15); backdrop-filter:blur(7px) saturate(1.15);
  border-color:rgba(255,255,255,.16) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.10) inset, 0 10px 30px -16px rgba(0,0,0,.55) !important;
}
/* frost the cover / header imagery */
body.vf-frostfull .cover-img-el,
body.vf-frostfull .home-card-cover,
body.vf-frostfull .dc-cover-thumb,
body.vf-frostfull .bk-page-card-cover,
body.vf-frostfull .bk-yt-thumb img,
body.vf-frostfull .idb-card-cover img{
  filter:blur(1.6px) brightness(1.06) saturate(.9);
}

/* ── Hologram (Stark HUD) ───────────────────────
   Cyan/blue tint + phosphor glow, fine scanlines and a slow interference sweep. */
body.vf-holo .sb,
body.vf-holo .main{ filter:brightness(1.12) sepia(.55) hue-rotate(160deg) saturate(2.3) contrast(1.03);
  text-shadow:0 0 6px rgba(90,200,255,.45); }
body.vf-holo #vf-overlay{
  display:block; mix-blend-mode:screen;
  background:
    repeating-linear-gradient(to bottom, rgba(120,220,255,.05) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 60%, rgba(0,28,56,.42) 100%);
}
body.vf-holo #vf-overlay::after{
  content:''; position:absolute; left:0; right:0; top:-30%; height:30%;
  background:linear-gradient(rgba(120,220,255,.10), transparent);
  animation:vf-sweep 5s linear infinite;
}
@keyframes vf-sweep{ 0%{top:-30%} 100%{top:100%} }

/* ── Fallout / Matrix terminal ──────────────────
   Phosphor-green monochrome on black, mono type, scanlines + a fast flicker. */
body.vf-matrix .sb,
body.vf-matrix .main{ filter:grayscale(1) sepia(1) hue-rotate(62deg) saturate(6) brightness(.94) contrast(1.18);
  text-shadow:0 0 5px rgba(0,255,120,.45); }
body.vf-matrix .sb *,
body.vf-matrix .main *{ font-family:'DM Mono',ui-monospace,monospace !important; }
body.vf-matrix #vf-overlay{
  display:block; mix-blend-mode:multiply;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,.22) 0 1px, transparent 1px 3px);
}
body.vf-matrix #vf-overlay::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(rgba(0,255,120,.05), rgba(0,0,0,0));
  animation:vf-flicker .11s steps(2) infinite;
}
@keyframes vf-flicker{ 0%{opacity:.72} 100%{opacity:1} }

/* ── Grid (graph paper) ─────────────────────────
   Neutral engineering grid in the BACKGROUND, behind content — opaque cards and the
   sidebar cover it; it shows through the writing area + margins. Bolder major lines
   every 5 cells. */
body.vf-grid{
  background-color:var(--bg);
  background-image:
    linear-gradient(rgba(255,255,255,.065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.065) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size:120px 120px, 120px 120px, 24px 24px, 24px 24px;
}

/* ── Synthwave (vf-retro) ────────────────────────
   80s neon: a magenta/violet tint with a dusk-sunset wash (indigo → hot pink →
   sunset orange), faint scanlines and a hot-pink glow on text. */
body.vf-retro .sb,
body.vf-retro .main{ filter:saturate(1.6) brightness(1.04) contrast(1.06) hue-rotate(-16deg);
  text-shadow:0 0 7px rgba(255,70,190,.4); }
body.vf-retro #vf-overlay{
  display:block; mix-blend-mode:soft-light; opacity:.55;
  background:
    repeating-linear-gradient(to bottom, rgba(0,0,0,.07) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgba(48,16,86,.7) 0%, rgba(196,40,150,.5) 52%, rgba(255,140,60,.5) 100%);
}

/* ── Paper (grain / pulp) ───────────────────────
   Warm paper tone under a FINE, subtle fractal grain — visible but soft, not
   blocky. One fine soft-light layer at low opacity. */
body.vf-paper .sb,
body.vf-paper .main{ filter:sepia(.32) brightness(1.04) contrast(.97) saturate(.92); }
body.vf-paper #vf-overlay{
  display:block; opacity:.28; mix-blend-mode:soft-light;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:150px 150px;
}

@media (prefers-reduced-motion: reduce){
  body.vf-crt #crt-overlay::after{ animation:none; opacity:.6; }
  body.vf-holo #vf-overlay::after,
  body.vf-matrix #vf-overlay::after{ animation:none; }
}