/* ============================================
   HERO PARALLAX ANIMATION - Kompletně přepsáno
   Jiskry pokrývají celou obrazovku
   ============================================ */

/* Parallax container - POUZE V HERO SEKCI */
.hero-parallax-container {
  position: absolute; /* Pouze v hero sekci */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

/* Společné vlastnosti pro všechny parallax vrstvy */
.parallax-layer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120vw; /* Větší než viewport pro zajištění pokrytí */
  height: 120vh;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  will-change: transform, opacity;
}

/* ============================================
   LAYER 1: Second Sparks Overlay (overlay-2.png)
   ============================================ */
.parallax-layer.sparks-overlay-2 {
  z-index: 3;
  mix-blend-mode: screen;
  opacity: 0.8;
  animation: overlay2-float 8s ease-in-out infinite;
}

@keyframes overlay2-float {
  0%, 100% {
    transform: translate(-50%, -50%) translateY(0px) scale(1);
    opacity: 0.8;
  }
  50% {
    transform: translate(-50%, -50%) translateY(-20px) scale(1.03);
    opacity: 1;
  }
}

/* ============================================
   LAYER 2: First Sparks Overlay (overlay-1.png)
   ============================================ */
.parallax-layer.sparks-overlay-1 {
  z-index: 4;
  mix-blend-mode: screen;
  opacity: 0.9;
  animation: overlay1-float 12s ease-in-out infinite;
  animation-delay: -2s;
}

@keyframes overlay1-float {
  0%, 100% {
    transform: translate(-50%, -50%) translateX(0px) translateY(0px) scale(1);
    opacity: 0.9;
  }
  33% {
    transform: translate(-50%, -50%) translateX(15px) translateY(-15px) scale(1.02);
    opacity: 1;
  }
  66% {
    transform: translate(-50%, -50%) translateX(-10px) translateY(-25px) scale(1.04);
    opacity: 0.95;
  }
}

/* ============================================
   RESPONSIVE - Tablet (max 1024px)
   Zmenšení jisker při zachování centrování
   ============================================ */
@media only screen and (max-width: 1024px) {
  .parallax-layer {
    width: 120vw;
    height: 120vh;
  }

  /* Upravené animace s menším scale */
  @keyframes overlay2-float {
    0%, 100% {
      transform: translate(-50%, -50%) translateY(0px) scale(0.85);
      opacity: 0.75;
    }
    50% {
      transform: translate(-50%, -50%) translateY(-15px) scale(0.87);
      opacity: 0.9;
    }
  }

  @keyframes overlay1-float {
    0%, 100% {
      transform: translate(-50%, -50%) translateX(0px) translateY(0px) scale(0.85);
      opacity: 0.85;
    }
    33% {
      transform: translate(-50%, -50%) translateX(12px) translateY(-12px) scale(0.87);
      opacity: 0.95;
    }
    66% {
      transform: translate(-50%, -50%) translateX(-8px) translateY(-20px) scale(0.89);
      opacity: 0.9;
    }
  }
}

/* ============================================
   RESPONSIVE - Mobile (max 768px)
   Další zmenšení jisker
   ============================================ */
@media only screen and (max-width: 768px) {
  .parallax-layer {
    width: 120vw;
    height: 120vh;
  }

  .parallax-layer.sparks-overlay-1,
  .parallax-layer.sparks-overlay-2 {
    opacity: 0.7;
  }

  /* Upravené animace s menším scale */
  @keyframes overlay2-float {
    0%, 100% {
      transform: translate(-50%, -50%) translateY(0px) scale(0.7);
      opacity: 0.7;
    }
    50% {
      transform: translate(-50%, -50%) translateY(-12px) scale(0.72);
      opacity: 0.85;
    }
  }

  @keyframes overlay1-float {
    0%, 100% {
      transform: translate(-50%, -50%) translateX(0px) translateY(0px) scale(0.7);
      opacity: 0.7;
    }
    33% {
      transform: translate(-50%, -50%) translateX(10px) translateY(-10px) scale(0.72);
      opacity: 0.8;
    }
    66% {
      transform: translate(-50%, -50%) translateX(-6px) translateY(-15px) scale(0.74);
      opacity: 0.75;
    }
  }
}

/* ============================================
   RESPONSIVE - Phone (max 393px)
   Maximální zmenšení jisker
   ============================================ */
@media only screen and (max-width: 393px) {
  .parallax-layer {
    width: 120vw;
    height: 120vh;
  }

  .parallax-layer.sparks-overlay-1,
  .parallax-layer.sparks-overlay-2 {
    opacity: 0.6;
  }

  /* Upravené animace s nejmenším scale */
  @keyframes overlay2-float {
    0%, 100% {
      transform: translate(-50%, -50%) translateY(0px) scale(0.55);
      opacity: 0.6;
    }
    50% {
      transform: translate(-50%, -50%) translateY(-10px) scale(0.57);
      opacity: 0.75;
    }
  }

  @keyframes overlay1-float {
    0%, 100% {
      transform: translate(-50%, -50%) translateX(0px) translateY(0px) scale(0.55);
      opacity: 0.6;
    }
    33% {
      transform: translate(-50%, -50%) translateX(8px) translateY(-8px) scale(0.57);
      opacity: 0.7;
    }
    66% {
      transform: translate(-50%, -50%) translateX(-5px) translateY(-12px) scale(0.59);
      opacity: 0.65;
    }
  }
}