.scroll-animate {
opacity: 0;
transform: translateY(60px);
transition: all 0.8s ease; } .scroll-animate.animate-in {
opacity: 1;
transform: translateY(0);
} .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; }
@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; }
@keyframes scaleUp {
to {
opacity: 1;
transform: translateY(0) scale(1);
}
} .slide-left {
opacity: 0;
transform: translateX(-60px);
transition: all 0.6s ease;
}
.slide-left.animate-in {
opacity: 1;
transform: translateX(0);
} .slide-right {
opacity: 0;
transform: translateX(60px);
transition: all 0.6s ease;
}
.slide-right.animate-in {
opacity: 1;
transform: translateX(0);
} .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-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-10 {
transition-delay: 1.4s !important; } .wooden-frame {
opacity: 0;
transform: scale(2);
animation: frameIn 0.8s ease forwards; }
@keyframes frameIn {
from {
opacity: 0;
transform: scale(2);
}
to {
opacity: 1;
transform: scale(1);
}
} .landscape-image {
position: relative; top: -100%;
animation: imageIn 0.8s ease forwards;
animation-delay: 0.8s; }
@keyframes imageIn {
from { top: -100%; }
to   { top: 0; }
}