/* Základné štýly pre animované sekcie */
.scroll-animate {
    opacity: 0;
    transform: translateY(60px);
    transition: all 0.8s ease;
    /* margin-bottom: 80px; */
}

/* Keď sa pridá .animate-in, element sa zanimuje */
.scroll-animate.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Rôzne typy animácií */
.fade-up {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.6s ease;
}

.fade-up.animate-in {
    opacity: 1;
    transform: translateY(0);
}
 
.fade-up {
    opacity: 0;
    transform: translateY(50px);
    animation: fadeUp 0.6s ease forwards;
    animation-delay: 0.4s; /* oneskorenie, môžeš meniť */
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.slide-up-slow {
    opacity: 0;
    transform: translateY(80px);
    transition: all 1s ease;
}

.slide-up-slow.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.bounce-up {
    opacity: 0;
    transform: translateY(60px);
    transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.bounce-up.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.scale-up {
    opacity: 0;
    transform: translateY(40px) scale(0.9);
    transition: all 0.7s ease;
}

.scale-up.animate-in {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.scale-up {
    opacity: 0;
    transform: translateY(40px) scale(0.9);
    animation: scaleUp 0.7s ease forwards;
    animation-delay: 0.3s; /* posun spustenia */
}

@keyframes scaleUp {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}



/* Animácia z ľava */
.slide-left {
    opacity: 0;
    transform: translateX(-60px);
    transition: all 0.6s ease;
}

.slide-left.animate-in {
    opacity: 1;
    transform: translateX(0);
}

/* Animácia sprava */
.slide-right {
    opacity: 0;
    transform: translateX(60px);
    transition: all 0.6s ease;
}

.slide-right.animate-in {
    opacity: 1;
    transform: translateX(0);
}

/* Kombinácia s fade efektom */
.fade-slide-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.8s ease;
}

.fade-slide-left.animate-in {
    opacity: 1;
    transform: translateX(0);
}

.fade-slide-right {
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.8s ease;
}

.fade-slide-right.animate-in {
    opacity: 1;
    transform: translateX(0);
}

/* DELAY */
.delay-0 { transition-delay: 0s !important; }
.delay-1 { transition-delay: 0.2s !important; }
.delay-2 { transition-delay: 0.4s !important; }
.delay-3 { transition-delay: 0.6s !important; }
.delay-4 { transition-delay: 0.8s !important; }
.delay-5 { transition-delay: 1.0s !important; }

.delay-9 {
    transition-delay: .7s !important; /* Delay 0.3 sekundy */
}
.delay-10 {
    transition-delay: 1.4s !important; /* Delay 0.3 sekundy */
}


/* Rám */
.wooden-frame {
  opacity: 0;
  transform: scale(2);
  animation: frameIn 0.8s ease forwards; /* spustí hneď */
}

@keyframes frameIn {
  from {
    opacity: 0;
    transform: scale(2);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Obrázok */
.landscape-image {
  position: relative;   /* aby fungovalo top */
  top: -100%;
  animation: imageIn 0.8s ease forwards;
  animation-delay: 0.8s; /* počká, kým skončí frameIn */
}

@keyframes imageIn {
  from { top: -100%; }
  to   { top: 0; }
}