/* ============================
   CSS ANIMATIONS
============================ */
/* ============================
   Scroll to link smooth
============================ */
html {
  scroll-behavior: smooth;
}


/* ============================
   ANIMASI FADE IN
============================ */
@keyframes fadeIn {
    0% {
      opacity: 0;
      transform: translateY(-20px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .fade-in {
    animation: fadeIn 2s ease-in-out;
  }
  
  /* ============================
     ANIMASI FADE
  ============================ */
  .fade {
    opacity: 0;
    transition: opacity 1s ease;
  }
  
  .fade.visible {
    opacity: 1;
  }
  
  /* ============================
     ANIMASI POP
  ============================ */
  .pop {
    transform: scale(0);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
  }
  
  .pop.visible {
    transform: scale(1);
    opacity: 1;
  }
  
  /* ============================
     ANIMASI SLIDE
  ============================ */
  .slide {
    transform: translateX(-100%);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
  }
  
  .slide.visible {
    transform: translateX(0);
    opacity: 1;
  }
  
  /* ============================
     ANIMASI TYPING (TEXT KETIK)
  ============================ */
  .typing-animation {
    font-size: 2rem;
    border-right: 2px solid black;
    white-space: nowrap;
    overflow: hidden;
    width: 0;
    transition: width 0.5s ease;
  }
  
  @keyframes blink-caret {
    from, to {
      border-color: transparent;
    }
    50% {
      border-color: black;
    }
  }
  
  /* ============================
     FONT STYLES
  ============================ */
  
  /* Special Gothic Expanded One */
  .special-gothic-expanded-one-regular {
    font-family: "Special Gothic Expanded One", sans-serif;
    font-weight: 200;
    font-style: normal;
  }
  
  /* Poppins Thin */
  .poppins-thin {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
  /* Bebas Neue */
  .bebas-neue-regular {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
  }