@import url(./reset.css);

#plane-cursor {
  position: absolute;
  /* rotate: -30deg; */
  /* transform-origin: center; */
  /* outline: 1px solid red; */
  transition: transform 500ms ease-out, opacity 250ms ease-in-out;
}
.travel {
  padding: 3rem;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 3rem;
  width: 100%;
  background-color: #94d6db;
  z-index: 1;
}

.travel .elements {
  position: relative;
  /* outline: 2px dotted blue; */
  width: clamp(300px, 40vw, 400px);
  height: clamp(300px, 40vw, 400px);
}

.travel > .elements > img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
}

.travel > .elements > .plane {
  transform: translate(-110%, -65%);
  scale: 0.75;
  filter: drop-shadow(-20px 20px 4px #434d633a);
}

.travel > .elements > .sunglass {
  transform: translate(-100%, 0%);
  scale: 0.5;
}

.travel > .elements > .camera {
  transform: translate(-150%, -100%);
  scale: 0.37;
}

.travel > .elements > .luggage {
  /* width: 100%; */
  height: 100%;
  scale: 0.75;
  transform: translate(-5%, -70%);
}

.travel > .elements > .passport {
  transform: translate(40%, -40%);
  filter: drop-shadow(-20px 20px 4px #637f8f5b);
  height: clamp(180px, 70%, 300px);
  scale: 1;
  /* transition: transform 300ms ease-in, opacity 200ms ease-in-out; */
}

.travel .front-cloud,
.travel .back-cloud {
  position: absolute;
  left: calc(50% - 80px);
  top: calc(100% - 30px);
  transform: translate(-50%, -50%);
  max-width: none !important;
  width: clamp(800px, calc(100vw + 100px), 1600px);
}

#travel-body {
  position: relative;
}
#travel-body > .wave {
  position: absolute;
  z-index: 1;
  width: 100%;
  top: -60px;
  left: 50%;
  aspect-ratio: 18 / 1;
  transform: translateX(-50%);
}

#offer-hero {
  padding: 3rem;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5rem;
  /* height: 100vh; */
  width: 100%;
  z-index: 1;
  /* background-color: var(--primary-light); */
}

#offer-hero::before,
#offer-hero::after {
  position: absolute;
  border-radius: 50%;
  content: "";
  width: clamp(200px, 40vw, 500px);
  height: clamp(300px, 60vw, 700px);
  background-color: #ffa600;
  filter: blur(100px);
  opacity: 0.15;
  top: 0%;
  left: 0%;
  z-index: -1;
}
#offer-hero::after {
  background-color: #ff00d4;
  top: 50%;
  left: 70%;
}

#offer-cards {
  width: 400px;
  height: 400px;
  position: relative;
  /* outline: 1px solid red; */
}
#offer-hero .hero-title {
  color: rgb(44, 44, 44);
  opacity: 1;
}

#offer-cards > img {
  position: absolute;
  top: 50%;
  max-width: 300px;
  left: 50%;
  width: 100%;
  object-fit: contain;
  box-shadow: -5px 8px 5px rgba(0, 0, 0, 0.15);
  /* transform: translate(-50%, -50%); */
}

#voucher-black {
  z-index: 1;
  transform: translate(-70%, 5%) rotate(9deg);
}

#voucher-white {
  transform: translate(-60%, -105%) rotate(-10deg);
}

#bow-knot {
  position: absolute;
  height: 300px;
  right: -22px;
  top: -32%;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(-8px 5px 5px rgba(0, 0, 0, 0.8));
}

#gift-card {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 1rem;
  height: 180px;
  width: 300px;
  top: 30%;
  left: 48%;
  background: radial-gradient(white 50%, rgb(150, 150, 150));
}

#gift-card-cover {
  position: absolute;
  left: 0;
  height: 100%;
  width: 88%;
  background-image: url(../assets/gift-card/card-bg.webp);
  z-index: 1;
  transition: width 500ms ease;
}

#gift-card > span {
  pointer-events: none;
  font-size: 3rem;
  font-weight: 800;
  text-transform: uppercase;
  transform: translateX(40px);
  width: 100px;
  line-height: 1em;
  background: -webkit-linear-gradient(
    30deg,
    #dbaf55,
    #fddb6a,
    #fabe3d,
    #cfbb77,
    #db9823
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#gold-hero {
  display: flex;
  overflow: hidden;
  justify-content: center;
  scroll-snap-align: center;
  gap: 5rem;
  align-items: center;
  min-height: min(calc(100vh - 80px), 600px);
  background: linear-gradient(to top, rgb(47, 72, 124), rgb(93, 111, 168));
}

#gold-elements {
  position: relative;
  max-width: 500px;
  min-width: 400px;
  min-height: 400px;
  max-height: 500px;
}

#gold-elements > img {
  position: absolute;
  width: 70%;
  top: 0;
  left: 0;
  transition: transform 200ms ease;
}

#gold-elements > #mobile-receipt {
  width: 100%;
  top: 25%;
  left: 10%;
}

#gold-elements > #gold-notification {
  width: 15%;
  left: 60%;
}

#gold-elements > #gold-coins {
  width: 40%;
  top: 70%;
  left: 60%;
}

#gold-hero .hero-title {
  opacity: 1;
  font-size: 4rem;
  line-height: 4rem;
  /* background: -webkit-linear-gradient(
    30deg,
    #ffcb63,
    #fddb6a,
    #ffcc5e,
    #ffe693,
    #ffc45d
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; */
}
#bill-hero {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5rem;
  min-height: min(calc(100vh - 80px), 700px);
}
#bill-hero::before,
#bill-hero::after {
  position: absolute;
  border-radius: 50%;
  content: "";
  width: clamp(200px, 40vw, 500px);
  height: clamp(300px, 60vw, 700px);
  background-color: #0095ff;
  filter: blur(100px);
  opacity: 0.15;
  top: 0%;
  left: -10%;
  z-index: -1;
}
#bill-hero::after {
  background-color: #6200ff;
  top: 50%;
  left: 70%;
}

#bill-hero-elements {
  position: relative;
  height: clamp(300px, 80vh, 400px);
  width: clamp(300px, 50vw, 400px);
}

#bill-hero-elements > img {
  position: absolute;
}

#bill-hero-elements > #id-card {
  right: 10%;
  width: 80%;
  top: 30%;
}
#bill-hero-elements > #leaf {
  right: 0;
  top: 0%;
}
#bill-hero-elements > #bill-card {
  top: 25%;
  left: 0;
}
#bill-hero-elements > #input-fields {
  left: 5%;
  top: 0%;
}

#bill-hero-elements > #lock-icon {
  left: -5%;
  bottom: 20%;
  width: 15%;
}
#bill-hero-elements > #coins {
  left: 5%;
  width: 40%;
  bottom: 0%;
}

#bill-hero .hero-title {
  color: var(--primary);
  opacity: 1;
  z-index: 1;
}

.hero-content {
  max-width: 600px;
  width: 50%;
  line-height: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: center;
}

.travel > .content > p {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--primary);
}

.hero-title {
  text-transform: uppercase;
  font-size: 2.75rem;
  font-weight: 800;
  color: white;
  text-shadow: -4px 4px 4px rgba(0, 0, 0, 0.15);
  z-index: -1;
}

/* mobile */
@media (max-width: 480px) {
  #travel-hero {
    gap: 0;
  }
  .travel > .elements > .plane {
    transform: translate(-70%, -90%);
  }
  .travel > .elements > .luggage {
    transform: translate(-70%, -20%);
  }
  .travel > .elements > .passport {
    transform: translate(-5%, 5%);
  }
  .travel > .elements > .sunglass {
    transform: translate(-150%, 100%);
  }
  .travel > .elements > .camera {
    transform: translate(-200%, 0%);
  }
  .travel {
    flex-direction: column;
  }
  .travel .content {
    width: 100%;
  }
  .travel .front-cloud,
  .travel .back-cloud {
    transform: translate(-50%, -49%);
  }
  #travel-body > .wave {
    scale: 4;
    transform: translate(-50%, 50%);
  }
  .hero-content {
    width: 100%;
  }
  .hero-title {
    font-size: 2.5rem !important;
    line-height: 3rem;
  }

  #offer-hero,
  #gold-hero,
  #bill-hero {
    flex-direction: column;
  }
  #gift-card {
    left: 25%;
    transform: rotate(20deg);
  }
  #offer-cards > img {
    left: 54%;
  }
}