/* Animasi fade kombinasi zoom */
.fade-zoom-in {
    animation: fade 12s infinite, zoomIn 12s ease-in-out infinite;
}

.fade-zoom-out {
    animation: fade 12s infinite, zoomOut 12s ease-in-out infinite;
}

@keyframes fade {
    0%   { opacity: 0; }
    8%   { opacity: 1; }
    30%  { opacity: 1; }
    38%  { opacity: 0; }
    100%  { opacity: 0; }
}

@keyframes zoomIn {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.1); }
    100% { transform: scale(1); }
}

@keyframes zoomOut {
    0%   { transform: scale(1.1); }
    50%  { transform: scale(1); }
    100% { transform: scale(1.1); }
}

/* Animasi rotate untuk audio */
@keyframes rotating {
    form{
        transform: rotate(0);
    }
    to{
        transform: rotate(1turn);
    }    
}

/* Animasi slide ke atas */
@keyframes slideUp {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
    visibility: hidden;
  }
}

.slide-up {
  animation: slideUp 2s ease-in-out forwards;
}

/* Animasi fade standard */
.fade-in {
  opacity: 0;
}

.fade-in.visible{
  animation: fadeIn 2s ease-in forwards;
}

@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

/* Animasi fade dari kiri ke kanan */
.fade-in-right {
  opacity: 0;
  transform: translateX(-50px)
}

.fade-in-right.visible{
  animation: fadeInRight 2s ease-in forwards;
}

@keyframes fadeInRight {
  0% {opacity: 0; transform: translateX(-50px);}
  100% {opacity: 1; transform: translateX(0);}
}

/* Animasi fade dari kanan ke kiri */
.fade-in-left {
  opacity: 0;
  transform: translateX(50px)
}

.fade-in-left.visible{
  animation: fadeInLeft 2s ease-in forwards;
}

@keyframes fadeInLeft {
  0% {opacity: 0; transform: translateX(50px);}
  100% {opacity: 1; transform: translateX(0);}
}

/* Animasi zoom in */
.zoom-in {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 1.5s ease, transform 1.5s ease;
}

.zoom-in.visible {
  opacity: 1;
  transform: scale(1);
}

/* Animasi zoom in dari bawah */
.zoom-in-bottom {
  transform: translateY(50px) scale(0.8);
  opacity: 0;
  transition: transform 1s ease-out, opacity 1s ease-out;
}

.zoom-in-bottom.visible {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Animasi zoom in dari bawah dengan tulisan miring */
.zoom-in-bottom-rotate {
  transform: translateY(50px) scale(0.8) rotate(-10deg);
  opacity: 0;
  transition: transform 1s ease-out, opacity 1s ease-out;
}

/* Saat muncul (visible) */
.zoom-in-bottom-rotate.visible {
  transform: translateY(0) scale(1) rotate(-10deg);
  opacity: 1;
}



.no-scroll {
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
  position: fixed;
  width: 100%;
}