/* ==========================================
   THEME OF THE YEAR
========================================== */

.theme-section {
  position: relative;
  overflow: hidden;

  min-height: 110vh;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 120px 80px 220px;

  background: linear-gradient(180deg, #faf8f4 0%, #f7f2e8 100%);
}

/* ==========================================
   BACKGROUND
========================================== */

.theme-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.theme-bg::before {
  content: "";

  position: absolute;
  inset: 0;

  background: radial-gradient(
    circle at top,
    rgba(212, 166, 74, 0.12),
    transparent 60%
  );
}

/* ==========================================
   CONTENT
========================================== */

.theme-content {
  position: relative;

  z-index: 10;

  max-width: 760px;

  text-align: center;
}

.theme-subtitle {
  display: inline-block;

  padding: 8px 18px;

  border-radius: 50px;

  background: rgba(166, 90, 46, 0.08);

  color: var(--primary);

  font-weight: 700;

  letter-spacing: 2px;

  font-size: 13px;

  margin-bottom: 24px;
}

.theme-content h2 {
  font-size: clamp(48px, 7vw, 88px);

  line-height: 1;

  color: var(--dark);

  font-weight: 900;

  margin-bottom: 24px;
}

.theme-content p{

    color:#2a201b;

    font-weight:500;

    line-height:2;

    text-shadow:

        0 0 12px rgba(255,255,255,.6);

}

/* ==========================================
   BUTTON
========================================== */

.theme-btn {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  margin-top: 45px;

  padding: 16px 34px;

  border-radius: 50px;

  text-decoration: none;

  font-weight: 700;

  color: #fff;

  background: var(--primary);

  transition: 0.35s;
}

.theme-btn:hover {
  transform: translateY(-5px);

  box-shadow: 0 20px 35px rgba(166, 90, 46, 0.25);
}

/* ===========================
   CLOUDS
=========================== */

.cloud-layer {
  position: absolute;
  z-index: 5;
  pointer-events: none;

  transform: translateY(var(--moveY, 0px));
}

/* Gambar awan */
.theme-cloud {
  display: block;
  width: 100%;
}

/* ==========================
   Layer Belakang
========================== */

.cloud-back {
  top: 260px;
  left: -220px;
}

.cloud-back .theme-cloud {
  width: 180px;
  opacity: 0.35;

  animation: cloudBack 90s linear infinite;
}

/* ==========================
   Layer Tengah
========================== */

.cloud-middle {
  top: 220px;
  right: -280px;
}

.cloud-middle .theme-cloud {
  width: 260px;
  opacity: 0.65;

  animation: cloudMiddle 65s linear infinite;
}

/* ==========================
   Layer Depan
========================== */

.cloud-front {
  top: 180px;
  left: -350px;
}

.cloud-front .theme-cloud {
  width: 320px;
  opacity: 0.9;

  animation: cloudFront 45s linear infinite;
}

@keyframes cloudFront {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(100vw + 700px));
  }
}

@keyframes cloudMiddle {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-100vw - 700px));
  }
}

@keyframes cloudBack {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(100vw + 500px));
  }
}

/* ==========================================
   MOUNTAIN
========================================== */

.theme-mountain {
  position: absolute;

  left: 50%;
  bottom: -60px;

  width: 130%;
  max-width: none;

  transform: translateX(-50%) translateY(var(--moveY, 0px));

  z-index: 2;

  pointer-events: none;
  user-select: none;
}

.theme-bottom-fade {
  position: absolute;

  left: 0;
  right: 0;
  bottom: -2px;

  width: 100%;
  height: 420px;

  background: linear-gradient(
    to bottom,
    rgba(18, 34, 34, 0) 0%,
    rgba(18, 34, 34, 0.01) 10%,
    rgba(18, 34, 34, 0.03) 20%,
    rgba(18, 34, 34, 0.07) 30%,
    rgba(18, 34, 34, 0.14) 42%,
    rgba(18, 34, 34, 0.25) 54%,
    rgba(18, 34, 34, 0.4) 65%,
    rgba(18, 34, 34, 0.58) 75%,
    rgba(18, 34, 34, 0.76) 84%,
    rgba(18, 34, 34, 0.9) 92%,
    #122222 100%
  );

  z-index: 8;
  pointer-events: none;
}

/* ==========================================
   RESPONSIVE
========================================== */

/* ==========================================
   TABLET
========================================== */

@media (max-width: 992px) {
  .theme-section {
    padding: 100px 40px;
  }

  .theme-content h2 {
    font-size: 60px;
  }

  .theme-content p {
    font-size: 17px;
  }

  .theme-mountain {
    width: 150%;
    bottom: -80px;
  }

  /* Cloud */
  .cloud-front .theme-cloud {
    width: 240px;
  }

  .cloud-middle .theme-cloud {
    width: 180px;
  }

  .cloud-back .theme-cloud {
    width: 130px;
  }

  .cloud-front {
    left: -250px;
    top: 180px;
  }

  .cloud-middle {
    top: 280px;
    right: -200px;
  }

  .cloud-back {
    left: -150px;
  }
}

/* ==========================================
   MOBILE
========================================== */

@media (max-width: 768px) {
  .theme-section {
    min-height: 700px;
    overflow: hidden;
  }
  .theme-mountain {
    width: 180%;
    bottom: -20px;
  }

  .theme-content h2 {
    font-size: 42px;
  }

  .theme-content p {
    font-size: 16px;
  }

  /* Cloud Depan */
  .cloud-front {
    position: absolute;
    top: 260px;
    left: -25vw;

    animation:
      cloudFront 28s linear infinite,
      floatCloud 6s ease-in-out infinite;

    will-change: transform;
  }

  /* Cloud Tengah */
  .cloud-middle {
    position: absolute;
    top: 320px;
    right: -20vw;

    animation:
      cloudMiddle 38s linear infinite,
      floatCloud 8s ease-in-out infinite;
    will-change: transform;
  }

  .cloud-middle .theme-cloud {
    width: 140px;
  }

  /* Cloud Belakang */
  .cloud-back {
    position: absolute;
    top: 320px;
    left: -15vw;

    animation: cloudBack 55s linear infinite;

    will-change: transform;
  }

  .cloud-back .theme-cloud {
    width: 100px;
  }

  .cloud-front {
    animation: cloudFrontMobile 45s linear infinite;
  }

  @keyframes cloudFront {
    from {
      transform: translateX(0);
    }

    to {
      transform: translateX(150vw);
    }
  }

  @keyframes cloudMiddle {
    from {
      transform: translateX(0);
    }

    to {
      transform: translateX(-150vw);
    }
  }

  @keyframes cloudBack {
    from {
      transform: translateX(0);
    }

    to {
      transform: translateX(140vw);
    }
  }

  @keyframes floatCloud {
    0%,
    100% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(-10px);
    }
  }
}

.theme-cloud {
  transform: translateY(var(--moveY, 0px));
}

.theme-content {
  transform: translateY(var(--moveY, 0px));
}