/*
 * inconnect — WebGL pozadie (bg.css)
 * Statické CSS pravidlá pre canvas vrstvu + fallback gradient.
 * JS logika je v /assets/js/bg-scene.js
 */

/* ------------------------------------------------------------------ */
/* FALLBACK — zobrazí sa kým JS nenačíta Three.js, alebo bez WebGL     */
/* ------------------------------------------------------------------ */
body {
  background: #0a0a0a;
  /* Jemný radial gradient s brand farbou ako fallback pred JS loadom  */
  background-image:
    radial-gradient(ellipse 80% 60% at 20% 30%, rgba(0,194,79,0.06) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 80% 70%, rgba(0,194,79,0.04) 0%, transparent 50%);
  position: relative;
  z-index: 0;
}

/* ------------------------------------------------------------------ */
/* WebGL CANVAS — fixne vzadu, pod všetkým obsahom                     */
/* ------------------------------------------------------------------ */
#bg-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  pointer-events: none;
  display: block;
  /* Skryté kým JS neinicializuje scénu (zabraňuje bliknutiu bieleho) */
  opacity: 0;
  transition: opacity 0.8s ease;
}

#bg-canvas.ready {
  opacity: 1;
}

/* ------------------------------------------------------------------ */
/* OVERLAY — tmavý gradient nad canvas, aby text ostal čitateľný       */
/* ------------------------------------------------------------------ */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Vignette — stred je transparentný, okraje tmavé                   */
  background:
    radial-gradient(ellipse 120% 80% at 50% 50%, transparent 20%, rgba(10,10,10,0.45) 100%);
}

/* ------------------------------------------------------------------ */
/* MOBILE FALLBACK — na slabých zariadeniach skryjeme canvas           */
/* a použijeme čistý CSS gradient namiesto WebGL                       */
/* ------------------------------------------------------------------ */
@media (max-width: 768px) {
  #bg-canvas {
    display: none !important;
  }

  /* Statický gradient + animovaný subtle shift */
  body {
    background: #0a0a0a;
    background-image:
      radial-gradient(ellipse 140% 60% at 10% 0%, rgba(0,194,79,0.10) 0%, transparent 50%),
      radial-gradient(ellipse 80% 60% at 85% 80%, rgba(0,194,79,0.05) 0%, transparent 45%),
      radial-gradient(ellipse 60% 40% at 50% 50%, rgba(0,194,79,0.03) 0%, transparent 40%);
    animation: mobileBgShift 12s ease-in-out infinite alternate;
  }

  @keyframes mobileBgShift {
    0% {
      background-image:
        radial-gradient(ellipse 140% 60% at 10% 0%, rgba(0,194,79,0.10) 0%, transparent 50%),
        radial-gradient(ellipse 80% 60% at 85% 80%, rgba(0,194,79,0.05) 0%, transparent 45%),
        radial-gradient(ellipse 60% 40% at 50% 50%, rgba(0,194,79,0.03) 0%, transparent 40%);
    }
    50% {
      background-image:
        radial-gradient(ellipse 120% 50% at 20% 5%, rgba(0,194,79,0.08) 0%, transparent 48%),
        radial-gradient(ellipse 90% 70% at 75% 85%, rgba(0,194,79,0.06) 0%, transparent 50%),
        radial-gradient(ellipse 70% 50% at 45% 45%, rgba(0,194,79,0.04) 0%, transparent 42%);
    }
    100% {
      background-image:
        radial-gradient(ellipse 160% 65% at 5% 2%, rgba(0,194,79,0.09) 0%, transparent 52%),
        radial-gradient(ellipse 75% 55% at 90% 75%, rgba(0,194,79,0.05) 0%, transparent 44%),
        radial-gradient(ellipse 55% 35% at 55% 55%, rgba(0,194,79,0.03) 0%, transparent 38%);
    }
  }

  body::before {
    display: none;
  }
}

/* ------------------------------------------------------------------ */
/* REDUCED MOTION — rešpektujeme preferencie používateľa               */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  #bg-canvas {
    display: none !important;
  }
}