/*ALL HTML */
html {
  scroll-behavior: smooth;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 70px;
  /* tinggi navbar */
}

section::before {
  content: "";
  display: block;
  height: 70px;
  /* tinggi navbar */
  margin-top: -70px;
  visibility: hidden;
}

/* HEADER */
/* CONTENT 1 */
/* ( ANIMASI THE DARK PINO MENU ) */
@keyframes slideDownFade {
  0% {
    opacity: 0;
    transform: translateY(-60px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slideDown {
  animation: slideDownFade 1s ease-out forwards;
}

/* ( ANIMASI LUXURY DINING X MEME COIN ) */
@keyframes slideLeftFade {
  0% {
    opacity: 0;
    transform: translateX(-80px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-slideLeft {
  animation: slideLeftFade 1s ease-out forwards;
}

/* ( ANIMASI BUTTON ) */
@keyframes slideUpFade {
  0% {
    opacity: 0;
    transform: translateY(60px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slideUp {
  opacity: 0;
  animation: slideUpFade 0.8s ease-out forwards;
}

/* SECTION */
/* ANIMASI SCAN ( ALL TITLE CONTENT ) */
.scan-text::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(231, 201, 138, 0.9) 50%,
    transparent 100%
  );
  animation: scan 3s infinite;
}

@keyframes scan {
  0% {
    left: -100%;
  }
  100% {
    left: 120%;
  }
}

/* CONTENT 2 ( TIDAK ADA CSS HANYA ADA SCRIPT ) */

/* CONTENT 3 */
/* ANIMASI ( DARK PINO MENU ) */
.fade-down {
  opacity: 0;
  transform: translateY(-40px);
  transition: all 0.8s ease-out;
}

.fade-down.show {
  opacity: 1;
  transform: translateY(0);
}

/* ANIMASI CARD */
.menu-card {
  opacity: 0;
  transform: translateY(30px);
  transition: all 1s ease-out;
}

.menu-card.show {
  opacity: 1;
  transform: translateY(0);
}

/* CONTENT 4 */
/* ANIMASI TITLE ( RESTAURANT BENEFITS ) */
.fade-down-benefits {
  opacity: 0;
  transform: translateY(-40px);
  transition: all 0.9s ease-out;
}

.fade-down-benefits.show {
  opacity: 1;
  transform: translateY(0);
}

/* ANIMASI CARD */
.benefit-card {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.9s ease-out;
}

.benefit-card.show {
  opacity: 1;
  transform: translateY(0);
}

/* CONTENT 5 */
/* ANIMASI TITLE ( FIND DARK PINO LOCATIONS ) */
.fade-down-locations {
  opacity: 0;
  transform: translateY(-40px);
  transition: all 0.9s ease-out;
}

.fade-down-locations.show {
  opacity: 1;
  transform: translateY(0);
}

/* LOCATION */
/* KOSONG */

/* CONTENT 6 */
/* ANIMASI TITLE ( $DPINO ) */
.fade-down-swap {
  opacity: 0;
  transform: translateY(-40px);
  transition: all 0.9s ease-out;
}

.fade-down-swap.show {
  opacity: 1;
  transform: translateY(0);
}

/* ANIMASI CARD */
.pricing-card {
  opacity: 0;
  transform: translateX(-50px);
  transition: all 0.9s ease-out;
}

.pricing-card.show {
  opacity: 1;
  transform: translateX(0);
}

/* CONTENT 7 */
/* ANIMASI TITLE ( LET'S BUILD TOGETHER ) */
.build-section {
  opacity: 0;
  transform: translateY(-20px);
  transition:
    opacity 1s ease-out,
    transform 1s ease-out;
}

.build-section.visible {
  opacity: 1;
  transform: translateY(0);
}