/* =========================
   SNOW EFFECT (CSS ONLY) – delayed start + fade-in
   ========================= */
.snow{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;          /* až otestuješ, můžeš dát třeba 6 */
  overflow: hidden;

  /* ✅ hezké objevení sněhu až po 4s */
  opacity: 0;
  animation: snowShow 0.8s ease forwards;
  animation-delay: 5s;
}

/* wrapper = padá */
.flake{
  position: absolute;
  top: -12vh;
  opacity: 0.85;

  /* jen pád (transform) */
  animation-name: fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;

  /* ⚠️ delaye řešíme níže přes nth-child + calc() */
}

/* vnitřek = kolíbání + obrázek */
.flake > i{
  display:block;
  width:100%;
  height:100%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;

  animation-name: sway;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;

  /* ⚠️ delaye řešíme níže přes nth-child + calc() */
}

/* ----- VARIANTY (velikosti + rychlosti) ----- */

.flake.f1{
  width: 26px;
  height: 26px;
  animation-duration: 18s;
}
.flake.f1 > i{
  background-image: url("vlocka1.png");
  animation-duration: 4.5s;
  animation-timing-function: ease-in-out; 
}

.flake.f2{
  width: 18px;
  height: 18px;
  animation-duration: 22s;
}
.flake.f2 > i{
  background-image: url("vlocka2.png");
  animation-duration: 6s;
  animation-timing-function: linear; 
}

.flake.f3{
  width: 34px;
  height: 34px;
  animation-duration: 26s;
}
.flake.f3 > i{
  background-image: url("vlocka3.png");
  animation-duration: 5s;
  animation-timing-function: ease; 
}

/* =========================
   ROZHOZENÍ "ÚROVNÍ" – bez JS
   ========================= */

/* 12 drah přes šířku */
.snow .flake:nth-child(12n + 1)  { left: 5%;  }
.snow .flake:nth-child(12n + 2)  { left: 12%; }
.snow .flake:nth-child(12n + 3)  { left: 20%; }
.snow .flake:nth-child(12n + 4)  { left: 28%; }
.snow .flake:nth-child(12n + 5)  { left: 36%; }
.snow .flake:nth-child(12n + 6)  { left: 44%; }
.snow .flake:nth-child(12n + 7)  { left: 52%; }
.snow .flake:nth-child(12n + 8)  { left: 60%; }
.snow .flake:nth-child(12n + 9)  { left: 68%; }
.snow .flake:nth-child(12n + 10) { left: 76%; }
.snow .flake:nth-child(12n + 11) { left: 84%; }
.snow .flake:nth-child(12n + 12) { left: 92%; }

/* ✅ start sněhu až po 4s, ale pořád "random" (calc přičte 6s) */
.snow .flake:nth-child(4n)   { animation-delay: calc(-6s  + 6s); }
.snow .flake:nth-child(4n+1) { animation-delay: calc(-12s + 6s); }
.snow .flake:nth-child(4n+2) { animation-delay: calc(-18s + 6s); }
.snow .flake:nth-child(4n+3) { animation-delay: calc(-24s + 6s); }

/* kolíbání taky rozházet + posunout o 4s */
.snow .flake:nth-child(3n)   > i { animation-delay: calc(-1.5s + 6s); }
.snow .flake:nth-child(3n+1) > i { animation-delay: calc(-3s   + 6s); }
.snow .flake:nth-child(3n+2) > i { animation-delay: calc(-4.5s + 6s); }

/* =========================
   ANIMACE
   ========================= */

/* fade-in sněhu */
@keyframes snowShow{
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* pád */
@keyframes fall{
  0%   { transform: translateY(-15vh); }
  100% { transform: translateY(130vh); }
}

/* kolíbání */
@keyframes sway{
  0% {
    transform: translateX(0) scale(1);
  }
  25% {
    transform: translateX(12px) scale(0.9);
  }
  50% {
    transform: translateX(24px) scale(0.85);
  }
  75% {
    transform: translateX(12px) scale(0.9);
  }
  100% {
    transform: translateX(0) scale(1);
  }
}