/* ============================================================
EFFECTS — dusty/scratched SC refinery terminal ambience
Depends on: tokens.css, base.css (existing body bg)
============================================================
Architektura:
- body background-image: grain + scratches (tam kde nejsou panely)
- body::before overlay: scanlines + vignette (pres cele viewport, subtle)
- body::after overlay: top-right glare (slabe svetlo dopadajici z rohu)
Duvod rozdeleni: panely (s vlastnim bg-panel) prekryvaji body bg,
takze scratches/grain vidis jen v GAPS mezi panely — prirozeny
"prachovy kanal" feeling, neprekryva se to s textem.
Scanlines + vignette jdou pres vse (chceme je videt i na panelech),
ale maji velmi nizkou alphu aby nerusily.
Opt-out:
[data-fx="off"] na — vsechny layers pryc
[data-fx-strong="1"] — pro screenshot/marketing zaber (stronger)
============================================================ */
/* ------------------------------------------------------------
Body background — grain only (subtle dust)
Scratches NENI na main UI — v reference 04/05/06 je UI content
ciste, zadne red lines. Scratches patri jen na transition views
(login/connecting/welcome) jako monitor artefakt.
------------------------------------------------------------ */
body {
background-image:
/* Grain — feTurbulence jemny noise (svetle dust specky) */
url("data:image/svg+xml;utf8,"),
/* Original base body bg (preserved) */
radial-gradient(ellipse at top, rgba(255, 106, 0, 0.025) 0%, transparent 55%),
linear-gradient(180deg, #0f0f0f 0%, #070707 100%);
background-size: 240px 240px, auto, auto;
background-repeat: repeat, no-repeat, no-repeat;
background-attachment: fixed;
}
/* ------------------------------------------------------------
::before overlay — jen subtle vignette (pres vse)
Scanlines BYVALY tady, ale byly intrusive na main UI (per Dave feedback).
Scanlines teď patri JEN na transition views (login/connecting/welcome)
pres background-image na tech elementech samotnych.
------------------------------------------------------------ */
body::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9999;
background-image:
/* Vignette — okrajove ztmaveni */
radial-gradient(
ellipse at center,
transparent 50%,
rgba(0, 0, 0, 0.22) 82%,
rgba(0, 0, 0, 0.45) 100%
);
background-repeat: no-repeat;
}
/* ------------------------------------------------------------
Scratches — paralelni red stripe bundles
------------------------------------------------------------
Inspirace: ChatGPT imitace reference 02-connecting.png. Kluc:
- Scratches jsou SVAZKY 5 paralelnich cer (ne jednotlive), 2px tenke
- 2 svazky per strana: MAIN (plna opacita) + COPY (0.35 + blur)
- Rotace -20° (temer vertikalni, mirne doleva)
- Vertical gradient opacity (0 -> 0.9 -> 0) = cary "mizi" nahore/dole
- Box-shadow red glow pro soft halo
- Umisteni: left 12% + 20% (offset copy), right 12% + 20%
Usage: kontejner musi mit position:relative, uvnitr:
... 5x i ...
... 5x i ...
... 5x i ...
------------------------------------------------------------ */
.fx-stripes {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0; /* POZOR: za obsahem. Obsah .login-grid/.connecting-inner/
.welcome-inner musi mit vyssi z-index (napr. 2). */
overflow: hidden;
}
.fx-stripe-group {
position: absolute;
top: -20%;
width: 200px;
height: 140%;
transform: rotate(-20deg);
}
.fx-stripe-group.fx-copy {
opacity: 0.35;
filter: blur(0.4px);
}
/* Main + copy side-by-side s par pixelu vizualni mezerou.
Main stripes zabiraji prvnich ~17px, copy zacina na +26px -> ~9px gap. */
.fx-stripe-group.fx-left.fx-main { left: 12%; }
.fx-stripe-group.fx-left.fx-copy { left: calc(12% + 26px); }
.fx-stripe-group.fx-right.fx-main { right: 12%; }
.fx-stripe-group.fx-right.fx-copy { right: calc(12% + 26px); }
.fx-stripe-group > i {
position: absolute;
display: block;
width: 2px;
height: 100%;
/* Zadny box-shadow: halo by zustalo i v transparentnich castech gradient,
cimz by fade-out "nikdy neskoncil". Pokud chceme glow, je treba pouzit
filter: drop-shadow, ale jde to i bez nej — cista barva ma glow feel. */
}
/* LEVE scratches — sharp nahore, fade probiha v prvnich 2/3.
Od 66% dolu je PLNE NIC (poslední třetina invisible). */
.fx-stripe-group.fx-left > i {
background: linear-gradient(
to bottom,
rgba(255, 40, 40, 0.90) 0%,
rgba(255, 40, 40, 0.90) 15%,
rgba(255, 40, 40, 0.60) 35%,
rgba(255, 40, 40, 0.25) 55%,
rgba(255, 40, 40, 0) 66%,
rgba(255, 40, 40, 0) 100%
);
}
/* PRAVE scratches — mirror: prvni 1/3 invisible, pak fade-in na sharp peak dole. */
.fx-stripe-group.fx-right > i {
background: linear-gradient(
to bottom,
rgba(255, 40, 40, 0) 0%,
rgba(255, 40, 40, 0) 34%,
rgba(255, 40, 40, 0.25) 45%,
rgba(255, 40, 40, 0.60) 65%,
rgba(255, 40, 40, 0.90) 85%,
rgba(255, 40, 40, 0.90) 100%
);
}
.fx-stripe-group > i:nth-child(1) { left: 0; }
.fx-stripe-group > i:nth-child(2) { left: 3px; opacity: 0.6; }
.fx-stripe-group > i:nth-child(3) { left: 7px; opacity: 0.85; }
.fx-stripe-group > i:nth-child(4) { left: 11px; opacity: 0.6; }
.fx-stripe-group > i:nth-child(5) { left: 15px; }
/* Opt-out — vypne cely effekt pokud je [data-fx="off"] na htmlu */
html[data-fx="off"] .fx-stripes { display: none; }
/* ------------------------------------------------------------
::after overlay — top-right glare (svetlo dopadajici z rohu)
------------------------------------------------------------ */
body::after {
content: '';
position: fixed;
top: 0; right: 0;
width: 50vw; height: 40vh;
pointer-events: none;
z-index: 9998;
background: radial-gradient(
ellipse at top right,
rgba(255, 245, 220, 0.035) 0%,
transparent 60%
);
}
/* ------------------------------------------------------------
Opt-out
------------------------------------------------------------ */
html[data-fx="off"] body::before,
html[data-fx="off"] body::after {
display: none;
}
html[data-fx="off"] body {
background-image:
radial-gradient(ellipse at top, rgba(255, 106, 0, 0.025) 0%, transparent 55%),
linear-gradient(180deg, #0f0f0f 0%, #070707 100%);
}
/* ------------------------------------------------------------
Stronger mode (pro marketing/screenshoty)
------------------------------------------------------------ */
html[data-fx-strong="1"] body::before {
background-image:
repeating-linear-gradient(180deg, transparent 0 2px, rgba(0, 0, 0, 0.25) 2px 3px),
radial-gradient(ellipse at center, transparent 30%, rgba(0, 0, 0, 0.45) 80%, rgba(0, 0, 0, 0.75) 100%);
}