/* ============================================================
   SonSunny OS — FX overlay layers (fx-overlays.css)
   The texture/atmosphere tier of the FX Combo System. Stackable,
   transform/opacity/filter/blend only, all reduced-motion-safe.
   Opt-in: link this file + drop a <div class="fx-overlays"> and a
   <canvas id="fx-canvas"> on the page, then call FXCombo.apply().
   fx-combos.js builds the layers; each reads --fx-* knobs it binds.
   ============================================================ */

.fx-overlays{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.fx-l{position:absolute;inset:0}

@media (prefers-reduced-motion:reduce){
  .fx-l{animation:none !important}
}

/* — vignette: darken the edges, focus the center — */
.fx-l-vignette{background:radial-gradient(120% 120% at 50% 45%,transparent 55%,rgba(0,0,0,.55) 100%)}

/* — grain: fine film noise via an SVG turbulence data-uri — */
.fx-l-grain{
  opacity:var(--fx-grain-opacity,.07);mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* — scanlines: CRT horizontal lines — */
.fx-l-scanlines{
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);
  mix-blend-mode:multiply;opacity:.5;
}

/* — glow: a soft accent bloom from top-center — */
.fx-l-glow{
  background:radial-gradient(60% 50% at 50% 0%,color-mix(in srgb,var(--fx-accent,#6D6AFE) 32%,transparent),transparent 70%);
  mix-blend-mode:screen;
}

/* — lightsweep: a diagonal sheen that drifts across — */
.fx-l-lightsweep{
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.16) 48%,transparent 66%);
  mix-blend-mode:screen;transform:translateX(-30%);
  animation:fx-sweep 7s var(--fx-ease,ease-in-out) infinite;
}
@keyframes fx-sweep{0%{transform:translateX(-40%)}100%{transform:translateX(40%)}}

/* — chroma: RGB-split fringe at the edges — */
.fx-l-chroma{
  box-shadow:inset 3px 0 0 rgba(255,0,80,.10),inset -3px 0 0 rgba(0,200,255,.10);
  mix-blend-mode:screen;animation:fx-chroma 3.2s steps(2,end) infinite;
}
@keyframes fx-chroma{0%,100%{opacity:.6}50%{opacity:1}}

/* — haze: soft luminous fog wash — */
.fx-l-haze{
  background:radial-gradient(80% 60% at 50% 30%,color-mix(in srgb,var(--fx-accent,#FF9FB8) 18%,transparent),transparent 75%);
  mix-blend-mode:screen;filter:blur(8px);
}

/* — mesh-gradient: drifting color blobs (the CSS twin of the mesh preset) — */
.fx-l-mesh-gradient{
  background:
    radial-gradient(40% 40% at 25% 30%,color-mix(in srgb,var(--fx-accent,#6D6AFE) 40%,transparent),transparent 70%),
    radial-gradient(45% 45% at 75% 35%,color-mix(in srgb,var(--fx-c2,#A78BFA) 38%,transparent),transparent 70%),
    radial-gradient(50% 50% at 55% 80%,color-mix(in srgb,var(--fx-c3,#34D8C4) 36%,transparent),transparent 70%);
  filter:blur(var(--mesh-blur,24px));mix-blend-mode:screen;opacity:.8;
  animation:fx-mesh 18s var(--fx-ease,ease-in-out) infinite alternate;
}
@keyframes fx-mesh{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-3%,2%) scale(1.08)}}

/* — light-leak: warm diagonal film streak that breathes — */
.fx-l-light-leak{
  background:linear-gradient(var(--leak-angle,125deg),transparent 35%,color-mix(in srgb,var(--fx-accent,#E0A458) 40%,transparent) 50%,transparent 65%);
  mix-blend-mode:screen;animation:fx-leak 9s ease-in-out infinite;
}
@keyframes fx-leak{0%,100%{opacity:.25}50%{opacity:.6}}

/* — grid-lines: retro perspective floor grid — */
.fx-l-grid-lines{
  background-image:
    linear-gradient(color-mix(in srgb,var(--fx-accent,#C7F23D) 35%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--fx-accent,#C7F23D) 35%,transparent) 1px,transparent 1px);
  background-size:var(--grid-gap,48px) var(--grid-gap,48px);
  opacity:.18;mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(transparent 40%,#000);mask-image:linear-gradient(transparent 40%,#000);
}

/* — frost: glassmorphism wash (subtle) — */
.fx-l-frost{
  backdrop-filter:blur(2px) saturate(1.05);background:color-mix(in srgb,var(--fx-ink,#fff) 4%,transparent);
}

/* — spotlight: pointer-driven cone (static if reduced-motion) — */
.fx-l-spotlight{
  background:radial-gradient(var(--spot-radius,420px) circle at var(--mx,50%) var(--my,40%),
    color-mix(in srgb,var(--fx-accent,#6D6AFE) 16%,transparent),transparent 70%);
  mix-blend-mode:screen;
}

/* — duotone: map the page toward two accent hues — */
.fx-l-duotone{
  background:linear-gradient(135deg,color-mix(in srgb,var(--fx-accent,#9B6CFF) 45%,transparent),
    color-mix(in srgb,var(--fx-c2,#4FD6FF) 45%,transparent));
  mix-blend-mode:color;opacity:.5;
}

/* — vintage: warm sepia wash that slowly drifts temperature (the "vintage shift") — */
.fx-l-vintage{
  background:rgba(112,66,20,.22);mix-blend-mode:multiply;
  animation:fx-vintage 13s ease-in-out infinite;
}
@keyframes fx-vintage{0%,100%{background:rgba(112,66,20,.22)}50%{background:rgba(64,46,28,.30)}}

/* — sepia-bloom companion: soft cream highlight bloom for vintage looks — */
.fx-l-bloom-soft{
  background:radial-gradient(70% 55% at 50% 30%,rgba(255,236,200,.18),transparent 72%);
  mix-blend-mode:screen;
}

/* — film-burn: a hot light-leak burn that flares from the edge (pairs with vintage) — */
.fx-l-film-burn{
  background:radial-gradient(60% 80% at 92% 50%,color-mix(in srgb,#ff7a18 55%,transparent),transparent 60%);
  mix-blend-mode:screen;animation:fx-burn 6s ease-in-out infinite;
}
@keyframes fx-burn{0%,100%{opacity:.14;transform:scale(1)}50%{opacity:.5;transform:scale(1.15)}}