/* coming soon styles */
@import url("https://use.typekit.net/pfp0rfw.css");

/* Initial background setup - prevents flash/freeze on load */
body {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;
}

/* Desktop/Landscape - default */
body {
  background-image: url('../js/dist/assets/images/Pineapple_Desktop.webp');
}

/* Mobile/Portrait - when height > width */
@media (max-aspect-ratio: 1/1) {
  body {
    background-image: url('../js/dist/assets/images/Pineapple_Mobile.webp');
  }
}

body {
  overflow-x: hidden;
  font-family: "mr-eaves-xl-sans", serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "mr-eaves-xl-sans", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, Arial, "Noto Sans", "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

#homepage-heading {
  opacity: 0;
  animation: fadeIn 2s forwards;
}

#homepage-cta>div>h2 {
  opacity: 0;
  animation: fadeIn 2s forwards;
  animation-delay: 0.5s;
}

#homepage-cta>div>a {
  background: linear-gradient(0.25turn, #AF864A, #E8D28E, #D9BE8A, #F0DEA9, #FAF0B2, #D6BB8A, #B68F54);
  cursor: pointer;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

#hero {
  overflow-y: visible;
  background: transparent;
}


#hero::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Opera */
}

/* @media screen and (max-height: 600px) {
  #webgl-container {
    visibility: hidden;
  }
} */

#homepage-heading-desktop,
#homepage-heading-mobile {
  color: #FFF;
  text-align: center;
  font-family: "mr-eaves-xl-sans", "Mr Eaves San OT", sans-serif !important;
  font-style: normal;
  font-weight: 800;
  font-variant: all-small-caps;
  white-space: normal;
  opacity: 0;
  animation: fadeIn 2s forwards;
}

/* Desktop/Tablet - 3 lines */
#homepage-heading-desktop {
  font-size: clamp(55px, 7vw, 90px);
  line-height: 68%;
  letter-spacing: 1.02px;
}

/* Mobile - 6 lines */
#homepage-heading-mobile {
  font-size: clamp(55px, 15vw, 85px);
  line-height: 90%;
  letter-spacing: 0.64px;
}

#homepage-subhead {
  color: #FFF;
  text-align: center;
  font-family: "mr-eaves-xl-sans", sans-serif !important;
  font-style: normal;
  font-weight: 400 !important;
  font-size: 54px;
  line-height: 72%;
  font-variant: all-small-caps;
  letter-spacing: -2.56px;
}

@media (max-width: 768px) {
  #homepage-subhead {
    font-size: 32px;
    line-height: 72%;
    letter-spacing: -1.28px;
  }
}

#homepage-cta-btn {
  color: #000;
  font-family: "mr-eaves-xl-sans", sans-serif !important;
  font-style: normal;
  font-weight: 700 !important;
  font-size: 50px;
  line-height: 0.9;
  font-variant: all-small-caps;
  letter-spacing: -2.9px;

  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-2px);
  min-height: 60px;

}

/* Mobile scale */
@media (max-width: 768px) {
  #homepage-cta-btn {
    font-size: 36px;
    line-height: 1;
    letter-spacing: -1.5px;
    transform: translateY(-1px);
  }
}

@media (max-width: 640px) {
  .product-can-img {
    height: 420px !important;
    top: -100px !important;
  }
}

@media (max-width: 640px) {
  .product-can-img {
    top: -20px !important;
    height: 420px !important;
  }
}

@media (max-width: 768px) {
  #webgl-container {
    transform: scale(0.9);
  }
}