@import url("mzf-theme.css");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


body {
  font-family: 'LTWave', system-ui, sans-serif;
  background-color: var(--color-third);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-image: var(--gambar-bg-portrait);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.background-overlay { 
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  background-image: var(--gambar-bg-landscape);
  background-size: cover;
  background-position: center;
  background-attachment: scroll;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}

@media (orientation: landscape) {
  body {
    background-attachment: scroll;
  }
  .background-overlay {
    opacity: 1;
  }
}


#mzf-loading {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-third);
  z-index: 9999;
}

span.mzf-loading-wave {
  height: 30px;
  width: 7px;
  margin: 5px;
  background-color: var(--color-second);
  animation: loading 1s linear infinite;
  z-index: 999;
}

span.mzf-loading-wave:nth-child(1) {
  animation-delay: 0.1s;
}

span.mzf-loading-wave:nth-child(2) {
  animation-delay: 0.2s;
}

span.mzf-loading-wave:nth-child(3) {
  animation-delay: 0.3s;
}

span.mzf-loading-wave:nth-child(4) {
  animation-delay: 0.4s;
}

@keyframes loading {
  0% {
    height: 0;
  }

  25% {
    height: 25px;
  }

  50% {
    height: 50px;
  }

  100% {
    height: 0;
  }
}

/* =========================
   TOP DESIGN
========================= */

#mzf-top-design {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
  opacity: 0;
  animation: fadeInDown_Style 2s forwards;
  animation-delay: 1800ms;
  pointer-events: none;
}

#mzf-top-design-warp {
  width: 100%;
  display: flex;
}

.mzf-header-kiri {
  background-image: var(--gambar-header-kiri);
  background-position: left top;
/*    animation: pulse-2 4s ease-in-out infinite; */
}

.mzf-header-kanan {
  background-image: var(--gambar-header-kanan);
  background-position: right top;
/*   animation: pulse-1 6s ease-in-out infinite; */
}

/* =========================
   BOTTOM DESIGN
========================= */

#mzf-bottom-design {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  
}

#mzf-bottom-design-warp {
  width: 100%;
  display: flex;
  opacity: 0;
  animation: fadeInUp_Style 2s forwards;
  animation-delay: 1800ms;
  position: relative;
  z-index: 2;
}

.mzf-footer-kiri {
  /* background-image: var(--gambar-footer-kiri);
  background-position: left bottom;
  animation: pulse-1 5s ease-in-out infinite; */
}

.mzf-footer-kanan  {
  /* background-image: var(--gambar-footer-kanan);
  background-position: right bottom;
  animation: pulse-2 4s ease-in-out infinite; */
}



.mzf-header-kiri,
.mzf-header-kanan {
  flex: 1;
  height: clamp(5rem, 20vmin, 30rem);
  background-size: contain;
  background-repeat: no-repeat;
}

.mzf-footer-kiri,
.mzf-footer-kanan
{
  flex: 1;
  height: clamp(5rem, 50vmin, 70rem);
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 1;
  margin-bottom: 1.2rem;
}


#mzf-top-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
  opacity: 0;
  animation: fadeInDown_Style 2s forwards;
  animation-delay: 1800ms;
  pointer-events: none;
}

#mzf-top-header-warp {
  width: 100%;
  display: flex;
}

.mzf-header-top {
  background-image: var(--gambar-header);
  background-position: center top;
    width:clamp(180px, 70vmin, 700px);
  height: auto;
  aspect-ratio: 1920/181;
    flex: 1;
  height: clamp(5rem, 20vmin, 30rem);
  background-size: contain;
  background-repeat: no-repeat;
  /*    animation: pulse-2 4s ease-in-out infinite; */
}

#mzf-background-color{
  background-color:var(--color-primary);
  position: fixed;
  top:0;
  left:0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
}

/* =========================
   LAYOUT UTAMA
========================= */
.mzf-container-content {
  width: 100%;
  height:100svh;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 3;
  padding: 2vh 0vh;
}
@media screen and (max-width: 950px) and (orientation: landscape) {
.mzf-container-content {
  height:auto;
  }
}
 
#mzf-logo-header {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
/*   gap: 1rem; */
}

.mzf-logo-top {
  width:clamp(180px, 70vmin, 700px);
  height: auto;
  aspect-ratio: 620/181;
  background-image: var(--gambar-top-logo);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
  pointer-events: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  user-select: none;
  -webkit-user-drag: none;
  opacity: 0;
  animation: fadeInUp_Style 2s forwards;
  animation-delay: 800ms;
}

.mzf-logo-bottom {
  width:clamp(180px, 70vmin, 900px);
  height: auto;
  aspect-ratio: 550/450;
  background-image: var(--gambar-bottom-logo);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top;
  pointer-events: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  user-select: none;
  -webkit-user-drag: none;
  opacity: 0;
  animation: fadeInUp_Style 2s forwards;
  animation-delay: 1000ms;
}

.mzf-title {
  width: clamp(10vw, 90vw, 600px);
  height: auto;
  text-align: center;
  font-weight: 300;
  color: var(--color-text1);
  letter-spacing: 0.2rem;
  line-height: 1.3;
  font-size: var(--text-xl); 
  opacity: 0;
  animation: fadeInUp_Style 2s forwards;
  animation-delay: 1200ms;
}

#mzf-main {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 10px 0;
  opacity: 0;
  animation: fadeInUp_Style 2s forwards;
  animation-delay: 1200ms;
  z-index: 5;
}

#mzf-footer {
  width: 100%;
  height: auto;
  position: fixed;
  bottom: 0;
  z-index: 5;
  pointer-events: none;
}

#mzf-top-in {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  pointer-events: none;

}

.mzf-footer-top-in {
  width:  max(960px, 100%);
/*   left: -10%; */
  max-width: 1400px;
  position: relative;
  margin: auto;
  bottom: 0;
  margin-bottom: -.5rem;
  height: auto;
  aspect-ratio: 1421/751;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: var(--gambar-footer-tengah-in);
  background-position: center bottom;
  z-index: 0;
  opacity: 0;
  animation: fadeInUp_Style 2s forwards;
  animation-delay: 1200ms;
}

.mzf-footer-top {
  width:  max(960px, 120%);
  left: -10%;
  position: fixed;
  bottom: 0;
  height: auto;
  aspect-ratio: 1920/300;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: var(--gambar-footer-tengah);
  background-position: center bottom;
  z-index: 0;
  opacity: 0;
  animation: fadeInUp_Style 2s forwards;
  animation-delay: 200ms;
}

.mzf-footer-bottom {
  width: 100%;
  height: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 0;
  background-color: var(--color-third);
  text-align: center;
}

.mzf-footer-text {
  font-weight: 300;
  color: var(--color-text2);
  letter-spacing: .15rem;
  font-size: var(--text-footer); 
  opacity: 0;
  animation: fadein 2s forwards;
  animation-delay: 600ms;
}


#mzf-checkin-waktu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  margin: auto;
  background: var(--color-third);
  color: var(--color-text2);
  padding: 15px 20px;
  border-radius: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  width: 70vw;
  max-width: 400px;
  text-align: center;
  font-size: var(--text-lg);
  font-weight: 500;
}

.mzf-space {
  width: 100%;
  height: 30vmin;
}


@keyframes fadeInUp_Style {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }

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

@keyframes fadeInDown_Style {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }

  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
@keyframes fadein {
  0% {
    opacity: 0;
  }

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

  100% {
    opacity: 0;
  }
}

@keyframes pulse-1 {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.04);
  }
}
@keyframes pulse-2 {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.02);
  }
}