/* ══════════════════════════════════════════════════════════════
   POZADIE — „liquid glass"

   Cieľ: pozadie musí byť moderné a živé, ale NESMIE súťažiť
   s prácou. Preto: hlboká tma ako základ, farebné svetlo iba
   z festivalovej palety, pomalý pohyb a jemné zrno.

   Celá vrstva je `position: fixed` MIMO `.page`, takže:
     • neposúva sa pri scrollovaní (obsah pláva ponad svetlo)
     • nedotýka sa mriežky ani `zoom` škálovania
     • `pointer-events: none` → nezachytáva myš

   Ladí sa tokenmi v `tokens.css` (--glow-*, --sheen, --grain).
   Vypnúť: .bg { display: none }
   ══════════════════════════════════════════════════════════════ */

.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ── 1. Základ — hĺbka ────────────────────────────────────── */
.bg__base {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(140% 90% at 50% -20%,
      #2b2f38 0%, #1c1e23 45%, #141519 100%),
    linear-gradient(180deg, #191b1f 0%, #101114 100%);
}

/* ── 2. Farebné svetlá ─────────────────────────────────────────
   Štyri obrovské mäkké kruhy z festivalovej palety.
   Zámerne BEZ `filter: blur()` — radiálny gradient je mäkký sám
   a je rádovo lacnejší na vykreslenie.

   A zámerne BEZ `mix-blend-mode`.
   Screen na tmavom podklade vyzerá takmer rovnako ako obyčajné
   alfa miešanie, ale núti prehliadač prekresľovať zlúčenie pri
   každom snímku animácie. Odmerané: so screen + overlay 24 fps,
   bez nich 46 fps. Nižší jas sa dorovnal vyššími alfa hodnotami
   tokenov --glow-*.                                            */
.bg__glow span {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}
.bg__glow .g1 {
  width: 90vw; height: 90vw; left: -30vw; top: -35vw;
  background: radial-gradient(circle closest-side,
    rgba(202,255,77,var(--glow-lime)), rgba(202,255,77,0) 70%);
  animation: drift-a 46s ease-in-out infinite;
}
.bg__glow .g2 {
  width: 80vw; height: 80vw; right: -28vw; top: 8vh;
  background: radial-gradient(circle closest-side,
    rgba(228,2,101,var(--glow-magenta)), rgba(228,2,101,0) 70%);
  animation: drift-b 58s ease-in-out infinite;
}
.bg__glow .g3 {
  width: 70vw; height: 70vw; left: 5vw; bottom: -32vw;
  background: radial-gradient(circle closest-side,
    rgba(254,111,31,var(--glow-orange)), rgba(254,111,31,0) 70%);
  animation: drift-c 52s ease-in-out infinite;
}
.bg__glow .g4 {
  width: 100vw; height: 100vw; left: 25vw; top: 25vh;
  background: radial-gradient(circle closest-side,
    rgba(120,165,255,var(--glow-cold)), rgba(120,165,255,0) 70%);
  animation: drift-d 64s ease-in-out infinite;
}

@keyframes drift-a {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50%     { transform: translate3d(9vw,7vh,0) scale(1.12); }
}
@keyframes drift-b {
  0%,100% { transform: translate3d(0,0,0) scale(1.06); }
  50%     { transform: translate3d(-11vw,10vh,0) scale(1); }
}
@keyframes drift-c {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50%     { transform: translate3d(13vw,-8vh,0) scale(1.15); }
}
@keyframes drift-d {
  0%,100% { transform: translate3d(0,0,0) scale(1.1); }
  50%     { transform: translate3d(-9vw,-11vh,0) scale(1); }
}

/* ── 3. Sheen — odlesk kĺžuci sa po skle ───────────────────────
   Široký, veľmi slabý svetelný pruh prechádzajúci naprieč
   obrazovkou. Toto dáva dojem skla.                          */
.bg__sheen {
  position: absolute;
  inset: -40%;
  background: linear-gradient(104deg,
    transparent 34%,
    rgba(255,255,255, calc(var(--sheen) * .5)) 46%,
    rgba(255,255,255, var(--sheen))            50%,
    rgba(255,255,255, calc(var(--sheen) * .5)) 54%,
    transparent 66%);
  animation: sheen 21s linear infinite;
  will-change: transform;
}
@keyframes sheen {
  from { transform: translate3d(-32%,0,0); }
  to   { transform: translate3d( 32%,0,0); }
}

/* ── 4. Zrno + vinieta ─────────────────────────────────────────
   Zrno zabíja pruhovanie (banding) vo veľkých gradientoch
   a dodá povrchu hmatateľnosť. Vinieta stmaví okraje, aby
   dlaždice v strede vystúpili dopredu.                        */
.bg__grain {
  position: absolute;
  inset: 0;
  opacity: var(--grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}
.bg__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 50% 45%,
    transparent 45%, rgba(0,0,0,.45) 100%);
}

/* ── 5. Sklenená hrana dlaždíc ─────────────────────────────────
   Vlások svetla na hornej hrane + mäkký tieň pod dlaždicou.
   Box-shadow nemení layout, takže mriežka ostáva nedotknutá. */
.tile, .frame {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255, var(--glass-edge)),
    0 24px 60px -22px rgba(0,0,0, var(--glass-shadow));
}
.frame .tile { box-shadow: none; }   /* vnútro rámu bez tieňa */

/* ── 6. Ohľad na používateľa ───────────────────────────────────
   Kto má v systéme vypnuté animácie, dostane rovnaké pozadie,
   len zastavené — kompozícia ostane, pohyb zmizne.            */
@media (prefers-reduced-motion: reduce) {
  .bg__glow span,
  .bg__sheen { animation: none; }
}