/* =============================================================================
   eÚčtáreň — fx.css · pozadia pre sekcie úvodnej stránky
   Použitie:  <section class="fx-band fx-dark" data-fx="net"> ...obsah... </section>
   Typy:      net · aurora · guilloche · dots
   Farby sa dajú prepísať cez custom properties priamo na .fx-band (viď nižšie).
   Vyžaduje fx.js. Bez JS ostane len podkladová farba — stránka je stále čitateľná.
   ========================================================================== */

.fx-band{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

/* vrstva s efektom — pod obsahom, nikdy nechytá klikanie */
.fx-band > .fx-layer{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}
.fx-band > .fx-layer > canvas{
  display:block;
  width:100%;
  height:100%;
}

/* obsah vždy nad efektom */
.fx-band > *:not(.fx-layer){
  position:relative;
  z-index:1;
}

/* --- tmavý pás ----------------------------------------------------------- */
.fx-band.fx-dark{
  background:#071012;
  color:#eef4f5;
  /* na tmavom NIKDY nepoužívaj --primary #127682 — je nečitateľný */
  --fx-line:74,168,181;     /* linky siete */
  --fx-dot:200,225,229;     /* body siete */
  --fx-pulse:217,201,163;   /* prebiehajúce svetlo */
}
/* DOZOR 6.9.: pribudol :not(.hero-badge) — odznak „Spustame coskoro" ma vlastnu teplu
   farbu a tato regula (0,4,1) by ju prebila (.hero-badge-soon je len (0,1,0)).
   DOZOR 4.9.: NEsmie chytat tlacidla — .fx-band.fx-dark a ma specificitu (0,2,1)
   a prebijalo .btn-lift (0,1,0), takze text tlacidla mal presne farbu jeho pozadia
   a bol neviditelny. Plati len na obycajne odkazy. */
.fx-band.fx-dark a:not(.btn):not(.site-cta):not(.hero-badge){color:#4aa8b5}

/* --- svetlý pás ---------------------------------------------------------- */
.fx-band.fx-light{
  background:#fbfcfc;
  color:#0f172a;
  --fx-line:18,118,130;
  --fx-dot:18,118,130;
}

/* =============================================================================
   aurora — jediný efekt bez JS (JS len doplní tri <b>)
   ========================================================================== */
.fx-band[data-fx="aurora"] > .fx-layer{
  filter:blur(64px);
  opacity:.85;
}
.fx-band[data-fx="aurora"] > .fx-layer > b{
  position:absolute;
  display:block;
  border-radius:50%;
}
.fx-band[data-fx="aurora"] > .fx-layer > b:nth-child(1){
  width:52%;height:150%;left:-6%;top:-32%;background:#0e5e6b;
  animation:fx-drift-1 19s ease-in-out infinite alternate;
}
.fx-band[data-fx="aurora"] > .fx-layer > b:nth-child(2){
  width:46%;height:135%;left:38%;top:-16%;background:#155c52;
  animation:fx-drift-2 23s ease-in-out infinite alternate;
}
.fx-band[data-fx="aurora"] > .fx-layer > b:nth-child(3){
  width:34%;height:120%;left:66%;top:-24%;background:#5c4f33;
  animation:fx-drift-3 27s ease-in-out infinite alternate;
}
@keyframes fx-drift-1{to{transform:translate( 16%, 10%) scale(1.15)}}
@keyframes fx-drift-2{to{transform:translate(-14%,-8%)  scale(1.20)}}
@keyframes fx-drift-3{to{transform:translate(-20%, 12%) scale(1.10)}}

/* =============================================================================
   prístupnosť — kto si vypol animácie, dostane pokojný snímok
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .fx-band[data-fx="aurora"] > .fx-layer > b{animation:none}
}