/* =========================================================
   GLOBAL SETTINGS
========================================================= */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background-image: url("assets/bg-beige-texture.webp");
  background-size: cover;
  background-position: center;
  background-repeat: repeat-y;
  overflow-x: hidden;
  font-family: Arial, sans-serif;
}

/* Main mobile invitation/catalogue canvas */
.page {
  width: 100vw;
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
  background: transparent;
  overflow: visible;
}

/* Each vertical screen/page */
.screen {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: transparent;
  display: block;
  margin: 0;
  border: 0;
}

img {
  display: block;
}

/* Every image layer inside a section */
.layer {
  position: absolute;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* =========================================================
   SECTION 01: HERO / COVER
========================================================= */

.hero-logo {
  width: 27%;
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
}

.hero-title-description {
  width: 84%;
  top: 22%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
}

.hero-product-group {
  width: 88%;
  left: 45%;
  bottom: 5.5%;
  transform: translateX(-50%);
  z-index: 3;
}

/* =========================================================
   SECTION 02: PRODUCTS PAGE 1
========================================================= */

.section-title-our-product {
  width: 42%;
  top: 4.5%;
  left: 50%;
  transform: translateX(-50%) scale(0.96);
  opacity: 0;
  z-index: 5;
}

.product-one-stone-top {
  width: 125%;
  top: 5%;
  right: -60%;
  transform: translateX(70%);
  opacity: 0;
  z-index: 1;
}

.product-one-stone-bottom {
  width: 170%;
  left: -90%;
  bottom: -25%;
  transform: translateX(-70%);
  opacity: 0;
  z-index: 1;
}

.product-moisturizer-bottle {
  width: 90%;
  top: 17%;
  right: -17%;
  transform: translateX(65%) rotate(0deg);
  opacity: 0;
  filter: brightness(0.55);
  z-index: 3;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.12s ease-out, filter 0.12s ease-out;
}

.product-serum-bottle {
  width: 70%;
  left: -4%;
  bottom: -2%;
  transform: translateX(-65%) rotate(0deg);
  opacity: 0;
  filter: brightness(0.55);
  z-index: 3;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.12s ease-out, filter 0.12s ease-out;
}

.arrow-text-moisturizer {
  width: 70%;
  top: 25%;
  left: -2%;
  opacity: 0;
  transform: translateY(18px) scale(0.96);
  z-index: 4;
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.arrow-text-serum {
  width: 80%;
  right: -2.9%;
  bottom: 7%;
  opacity: 0;
  transform: translateY(18px) scale(0.96);
  z-index: 4;
  transition: opacity 0.45s ease, transform 0.45s ease;
}

/* SECTION 02: SCROLL-IN */

.products-section-one.is-visible .section-title-our-product {
  opacity: 1;
  transform: translateX(-50%) scale(1);
  transition: opacity 1.2s ease, transform 1.2s ease;
}

.products-section-one.is-visible .product-one-stone-top {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 1s ease 0.2s, transform 1s ease 0.2s;
}

.products-section-one.is-visible .product-one-stone-bottom {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 1s ease 0.35s, transform 1s ease 0.35s;
}

.products-section-one.is-visible .product-moisturizer-bottle {
  opacity: 1;
  transform: translateX(0) rotate(0deg);
  filter: brightness(0.55);
  transition: opacity 1s ease 0.75s, transform 1s ease 0.75s, filter 0.25s ease;
}

.products-section-one.is-visible .product-serum-bottle {
  opacity: 1;
  transform: translateX(0) rotate(0deg);
  filter: brightness(0.55);
  transition: opacity 1s ease 0.9s, transform 1s ease 0.9s, filter 0.25s ease;
}

/* SECTION 02: HOVER */

.products-section-one.is-visible:not(.moisturizer-active) .product-moisturizer-bottle:hover {
  transform: translateX(0) scale(1.035) rotate(0deg);
  filter: brightness(0.75) drop-shadow(0 12px 18px rgba(0, 0, 0, 0.22));
  transition: transform 0.12s ease-out, filter 0.12s ease-out;
}

.products-section-one.is-visible:not(.serum-active) .product-serum-bottle:hover {
  transform: translateX(0) scale(1.035) rotate(0deg);
  filter: brightness(0.75) drop-shadow(0 12px 18px rgba(0, 0, 0, 0.22));
  transition: transform 0.12s ease-out, filter 0.12s ease-out;
}

/* SECTION 02: CLICK ACTIVE */

.products-section-one.moisturizer-active .product-moisturizer-bottle {
  transform: translateX(0) rotate(18deg);
  filter: brightness(1);
  transition: transform 0.3s ease, filter 0.3s ease;
}

.products-section-one.moisturizer-active .arrow-text-moisturizer {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.products-section-one.serum-active .product-serum-bottle {
  transform: translateX(0) rotate(-20deg);
  filter: brightness(1);
  transition: transform 0.3s ease, filter 0.3s ease;
}

.products-section-one.serum-active .arrow-text-serum {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

/* =========================================================
   SECTION 03: PRODUCTS PAGE 2
========================================================= */

.section-three-title {
  width: 42%;
  top: 4.5%;
  left: 50%;
  transform: translateX(-50%) scale(0.96);
  opacity: 0;
  z-index: 5;
}

.product-two-stone-top {
  width: 125%;
  top: 4%;
  right: -60%;
  transform: translateX(70%);
  opacity: 0;
  z-index: 1;
}

.product-two-stone-bottom {
  width: 170%;
  left: -90%;
  bottom: -25%;
  transform: translateX(-70%);
  opacity: 0;
  z-index: 1;
}

.product-treatment-tube {
  width: 88%;
  top: 17%;
  right: -20%;
  transform: translateX(65%) rotate(0deg);
  opacity: 0;
  filter: brightness(0.55);
  z-index: 3;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.12s ease-out, filter 0.12s ease-out;
}

.product-cream-jar {
  width: 85%;
  left: -15%;
  bottom: 1%;
  transform: translateX(-65%) rotate(0deg);
  opacity: 0;
  filter: brightness(0.55);
  z-index: 3;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.12s ease-out, filter 0.12s ease-out;
}

.arrow-text-tube {
  width: 70%;
  top: 24%;
  left: -2%;
  opacity: 0;
  transform: translateY(18px) scale(0.96);
  z-index: 4;
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.arrow-text-cream {
  width: 80%;
  right: -3%;
  bottom: 8%;
  opacity: 0;
  transform: translateY(18px) scale(0.96);
  z-index: 4;
  transition: opacity 0.45s ease, transform 0.45s ease;
}

/* SECTION 03: SCROLL-IN */

.products-section-two.is-visible .section-three-title {
  opacity: 1;
  transform: translateX(-50%) scale(1);
  transition: opacity 1.2s ease, transform 1.2s ease;
}

.products-section-two.is-visible .product-two-stone-top {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 1s ease 0.2s, transform 1s ease 0.2s;
}

.products-section-two.is-visible .product-two-stone-bottom {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 1s ease 0.35s, transform 1s ease 0.35s;
}

.products-section-two.is-visible .product-treatment-tube {
  opacity: 1;
  transform: translateX(0) rotate(0deg);
  filter: brightness(0.55);
  transition: opacity 1s ease 0.75s, transform 1s ease 0.75s, filter 0.25s ease;
}

.products-section-two.is-visible .product-cream-jar {
  opacity: 1;
  transform: translateX(0) rotate(0deg);
  filter: brightness(0.55);
  transition: opacity 1s ease 0.9s, transform 1s ease 0.9s, filter 0.25s ease;
}

/* SECTION 03: HOVER */

.products-section-two.is-visible:not(.tube-active) .product-treatment-tube:hover {
  transform: translateX(0) scale(1.035) rotate(0deg);
  filter: brightness(0.75) drop-shadow(0 12px 18px rgba(0, 0, 0, 0.22));
  transition: transform 0.12s ease-out, filter 0.12s ease-out;
}

.products-section-two.is-visible:not(.cream-active) .product-cream-jar:hover {
  transform: translateX(0) scale(1.035) rotate(0deg);
  filter: brightness(0.75) drop-shadow(0 12px 18px rgba(0, 0, 0, 0.22));
  transition: transform 0.12s ease-out, filter 0.12s ease-out;
}

/* SECTION 03: CLICK ACTIVE */

.products-section-two.tube-active .product-treatment-tube {
  transform: translateX(0) rotate(25deg);
  filter: brightness(1);
  transition: transform 0.3s ease, filter 0.3s ease;
}

.products-section-two.tube-active .arrow-text-tube {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.products-section-two.cream-active .product-cream-jar {
  transform: translateX(0) rotate(-20deg);
  filter: brightness(1);
  transition: transform 0.3s ease, filter 0.3s ease;
}

.products-section-two.cream-active .arrow-text-cream {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

/* =========================================================
   SECTION 04: ABOUT US
========================================================= */

.about-us-image {
  width: 90%;
  height: 100%;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(35px) scale(0.96);
  opacity: 0;
  object-fit: contain;
  z-index: 2;
  transition: opacity 1.1s ease, transform 1.1s ease;
}

.about-section.is-visible .about-us-image {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* Back-to-top logo button */
.back-to-top-logo {
  position: absolute;
  width: 16%;
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%);
  z-index: 6;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  pointer-events: auto;
}

.back-to-top-logo img {
  width: 100%;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.about-section.is-visible .back-to-top-logo {
  opacity: 1;
  animation: logoBeat 1.4s ease-in-out infinite;
  transition: opacity 0.8s ease 0.5s;
}

@keyframes logoBeat {
  0% {
    transform: translateX(-50%) scale(1);
  }

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

  100% {
    transform: translateX(-50%) scale(1);
  }
}

.back-to-top-logo:active {
  transform: translateX(-50%) scale(0.94);
}

/* =========================================================
   BACKGROUND MUSIC BUTTON
========================================================= */

.music-toggle {
  position: fixed;
  width: 44px;
  height: 44px;
  right: 16px;
  bottom: 16px;
  z-index: 99999;
  border: 1px solid rgba(75, 61, 62, 0.45);
  border-radius: 50%;
  background: rgba(245, 241, 232, 0.82);
  color: #4b3d3e;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(4px);
}

.music-toggle.is-playing {
  animation: musicPulse 1.4s ease-in-out infinite;
}

@keyframes musicPulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.08);
  }

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

/* =========================================================
   SECTION 01 ANIMATIONS
========================================================= */

.anim-logo {
  opacity: 0;
  animation: logoFadeDown 1.1s ease forwards;
  animation-delay: 0.2s;
}

.anim-title {
  opacity: 0;
  animation: titleFadeIn 1.4s ease forwards;
  animation-delay: 0.7s;
}

.anim-products {
  opacity: 0;
  animation:
    productSlideUp 1.4s ease forwards 1.2s,
    productFloat 4s ease-in-out infinite 2.8s;
}

@keyframes logoFadeDown {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-18px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes titleFadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}

@keyframes productSlideUp {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(45px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

@keyframes productFloat {
  0% {
    transform: translateX(-50%) translateY(0);
  }

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

  100% {
    transform: translateX(-50%) translateY(0);
  }
}

/* =========================================================
   CLICKABLE PRODUCT FLOATING HINT
   Products float before click, then stop after click
========================================================= */

.products-section-one.is-visible:not(.moisturizer-active) .product-moisturizer-bottle {
  animation: productClickHint 2.4s ease-in-out infinite 1.7s;
}

.products-section-one.is-visible:not(.serum-active) .product-serum-bottle {
  animation: productClickHint 2.4s ease-in-out infinite 1.9s;
}

.products-section-two.is-visible:not(.tube-active) .product-treatment-tube {
  animation: productClickHint 2.4s ease-in-out infinite 1.7s;
}

.products-section-two.is-visible:not(.cream-active) .product-cream-jar {
  animation: productClickHint 2.4s ease-in-out infinite 1.9s;
}

.products-section-one.moisturizer-active .product-moisturizer-bottle,
.products-section-one.serum-active .product-serum-bottle,
.products-section-two.tube-active .product-treatment-tube,
.products-section-two.cream-active .product-cream-jar {
  animation: none;
}

@keyframes productClickHint {
  0% {
    transform: translateX(0) translateY(0) scale(1) rotate(0deg);
  }

  50% {
    transform: translateX(0) translateY(-10px) scale(1.015) rotate(0deg);
  }

  100% {
    transform: translateX(0) translateY(0) scale(1) rotate(0deg);
  }
}

/* =========================================================
   DESKTOP PREVIEW
========================================================= */

@media (min-width: 768px) {
  .page {
    width: 430px;
    max-width: 430px;
    margin: 0 auto;
    transform: none;
  }
}