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

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  touch-action: pan-y;
  overscroll-behavior: none;
}

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

.page {
  width: 100vw;
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
  background: transparent;
  overflow: visible;
}

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

img {
  display: block;
}

.layer {
  position: absolute;
  display: block;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

button,
img,
.clickable-product,
.product-hit-area,
.add-cart-btn,
.cart-toggle,
.music-toggle,
.back-to-top-logo {
  outline: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button:focus,
button:active,
.clickable-product:focus,
.clickable-product:active {
  outline: 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;
}

.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);
  }
}

/* =========================================================
   SHARED SCROLL-PROGRESS SETTINGS
========================================================= */

.products-section-one,
.products-section-two {
  --scroll-progress: 0;
}

.products-section-one .section-title-our-product,
.products-section-two .section-three-title,
.products-section-one .product-one-stone-top,
.products-section-one .product-one-stone-bottom,
.products-section-one .product-moisturizer-bottle,
.products-section-one .product-serum-bottle,
.products-section-two .product-two-stone-top,
.products-section-two .product-two-stone-bottom,
.products-section-two .product-treatment-tube,
.products-section-two .product-cream-jar {
  will-change: transform, opacity;
  transition: none;
}

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

.section-title-our-product {
  width: 42%;
  top: 4.5%;
  left: 50%;
  z-index: 5;
  opacity: var(--scroll-progress);
  transform:
    translateX(-50%)
    translateY(calc((1 - var(--scroll-progress)) * 22px))
    scale(calc(0.96 + (var(--scroll-progress) * 0.04)));
}

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

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

.product-moisturizer-bottle {
  width: 90%;
  top: 17%;
  right: -17%;
  z-index: 3;
  cursor: pointer;
  pointer-events: auto;
  opacity: var(--scroll-progress);
  filter: brightness(0.55);
  transform:
    translateX(calc((1 - var(--scroll-progress)) * 65%))
    rotate(0deg);
}

.product-serum-bottle {
  width: 70%;
  left: -4%;
  bottom: -2%;
  z-index: 3;
  cursor: pointer;
  pointer-events: auto;
  opacity: var(--scroll-progress);
  filter: brightness(0.55);
  transform:
    translateX(calc((1 - var(--scroll-progress)) * -65%))
    rotate(0deg);
}

.arrow-text-moisturizer {
  width: 70%;
  top: 25%;
  left: -2%;
  opacity: 0;
  transform: translateY(18px) scale(0.96);
  z-index: 4;
  transition: opacity 0.35s ease, transform 0.35s 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.35s ease, transform 0.35s ease;
}

.products-section-one.moisturizer-active .product-moisturizer-bottle {
  opacity: var(--scroll-progress);
  transform:
    translateX(calc((1 - var(--scroll-progress)) * 65%))
    rotate(calc(var(--scroll-progress) * 18deg));
  filter: brightness(1);
}

.products-section-one.moisturizer-active .arrow-text-moisturizer {
  opacity: var(--scroll-progress);
  transform:
    translateY(calc((1 - var(--scroll-progress)) * 18px))
    scale(calc(0.96 + (var(--scroll-progress) * 0.04)));
}

.products-section-one.serum-active .product-serum-bottle {
  opacity: var(--scroll-progress);
  transform:
    translateX(calc((1 - var(--scroll-progress)) * -65%))
    rotate(calc(var(--scroll-progress) * -20deg));
  filter: brightness(1);
}

.products-section-one.serum-active .arrow-text-serum {
  opacity: var(--scroll-progress);
  transform:
    translateY(calc((1 - var(--scroll-progress)) * 18px))
    scale(calc(0.96 + (var(--scroll-progress) * 0.04)));
}

.products-section-one.scroll-ready:not(.moisturizer-active) .product-moisturizer-bottle:hover,
.products-section-one.scroll-ready:not(.serum-active) .product-serum-bottle:hover {
  filter: brightness(0.75) drop-shadow(0 12px 18px rgba(0, 0, 0, 0.22));
}

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

.section-three-title {
  width: 42%;
  top: 4.5%;
  left: 50%;
  z-index: 5;
  opacity: var(--scroll-progress);
  transform:
    translateX(-50%)
    translateY(calc((1 - var(--scroll-progress)) * 22px))
    scale(calc(0.96 + (var(--scroll-progress) * 0.04)));
}

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

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

.product-treatment-tube {
  width: 88%;
  top: 17%;
  right: -20%;
  z-index: 3;
  cursor: pointer;
  pointer-events: auto;
  opacity: var(--scroll-progress);
  filter: brightness(0.55);
  transform:
    translateX(calc((1 - var(--scroll-progress)) * 65%))
    rotate(0deg);
}

.product-cream-jar {
  width: 85%;
  left: -15%;
  bottom: 1%;
  z-index: 3;
  cursor: pointer;
  pointer-events: auto;
  opacity: var(--scroll-progress);
  filter: brightness(0.55);
  transform:
    translateX(calc((1 - var(--scroll-progress)) * -65%))
    rotate(0deg);
}

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

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

.products-section-two.tube-active .product-treatment-tube {
  opacity: var(--scroll-progress);
  transform:
    translateX(calc((1 - var(--scroll-progress)) * 65%))
    rotate(calc(var(--scroll-progress) * 25deg));
  filter: brightness(1);
}

.products-section-two.tube-active .arrow-text-tube {
  opacity: var(--scroll-progress);
  transform:
    translateY(calc((1 - var(--scroll-progress)) * 18px))
    scale(calc(0.96 + (var(--scroll-progress) * 0.04)));
}

.products-section-two.cream-active .product-cream-jar {
  opacity: var(--scroll-progress);
  transform:
    translateX(calc((1 - var(--scroll-progress)) * -65%))
    rotate(calc(var(--scroll-progress) * -20deg));
  filter: brightness(1);
}

.products-section-two.cream-active .arrow-text-cream {
  opacity: var(--scroll-progress);
  transform:
    translateY(calc((1 - var(--scroll-progress)) * 18px))
    scale(calc(0.96 + (var(--scroll-progress) * 0.04)));
}

.products-section-two.scroll-ready:not(.tube-active) .product-treatment-tube:hover,
.products-section-two.scroll-ready:not(.cream-active) .product-cream-jar:hover {
  filter: brightness(0.75) drop-shadow(0 12px 18px rgba(0, 0, 0, 0.22));
}

/* =========================================================
   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 {
  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);
  }
}

/* =========================================================
   CART ICON
========================================================= */

.cart-toggle {
  position: fixed;
  top: 16px;
  left: 16px;
  width: 48px;
  height: 48px;
  z-index: 99999;
  border: 1px solid rgba(75, 61, 62, 0.45);
  border-radius: 50%;
  background: rgba(245, 241, 232, 0.88);
  color: #4b3d3e;
  font-size: 22px;
  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);
}

.cart-count {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: #4b3d3e;
  color: #fff;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.cart-count.is-visible {
  opacity: 1;
  transform: scale(1);
}

.cart-toggle.cart-dance {
  animation: cartDance 0.55s ease;
}

@keyframes cartDance {
  0% {
    transform: rotate(0deg) scale(1);
  }
  25% {
    transform: rotate(-12deg) scale(1.08);
  }
  50% {
    transform: rotate(12deg) scale(1.08);
  }
  75% {
    transform: rotate(-8deg) scale(1.04);
  }
  100% {
    transform: rotate(0deg) scale(1);
  }
}

/* =========================================================
   ADD TO CART BUTTONS
========================================================= */

.add-cart-btn {
  position: absolute;
  z-index: 7;
  border: none;
  border-radius: 999px;
  padding: 9px 16px;
  background: rgba(75, 61, 62, 0.92);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px) scale(0.96);
  transition: opacity 0.35s ease, transform 0.35s ease, background 0.2s ease;
}

.add-cart-btn:active {
  transform: scale(0.94);
}

.add-moisturizer {
  top: 30% !important;
  left: 10% !important;
}

.add-serum {
  right: 9% !important;
  bottom: 30% !important;
}

.add-tube {
  top: 26% !important;
  left: 10% !important;
}

.add-cream {
  right: 9% !important;
  bottom: 29% !important;
}

.products-section-one.scroll-ready.moisturizer-active .add-moisturizer,
.products-section-one.scroll-ready.serum-active .add-serum,
.products-section-two.scroll-ready.tube-active .add-tube,
.products-section-two.scroll-ready.cream-active .add-cream {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

/* =========================================================
   CART MODAL / POPUP
========================================================= */

.cart-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
}

.cart-modal.is-open {
  display: block;
}

.cart-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(4px);
}

.cart-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(92%, 430px);
  max-height: 82vh;
  overflow-y: auto;
  transform: translate(-50%, -50%) scale(0.92);
  background: #f4efe4;
  border-radius: 24px;
  padding: 22px 18px 20px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
  opacity: 0;
  transition: transform 0.35s ease, opacity 0.35s ease;
}

.cart-modal.is-open .cart-panel {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.cart-panel h2 {
  font-size: 22px;
  color: #4b3d3e;
  margin-bottom: 14px;
}

.cart-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(75, 61, 62, 0.12);
  color: #4b3d3e;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.cart-item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(75, 61, 62, 0.16);
}

.cart-item img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.cart-item-title {
  font-size: 14px;
  font-weight: 700;
  color: #4b3d3e;
}

.cart-item-price {
  font-size: 13px;
  color: rgba(75, 61, 62, 0.72);
  margin-top: 3px;
}

.cart-qty {
  display: flex;
  align-items: center;
  gap: 7px;
}

.cart-qty button {
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: #4b3d3e;
  color: #fff;
  cursor: pointer;
}

.cart-qty span {
  min-width: 18px;
  text-align: center;
  color: #4b3d3e;
  font-weight: 700;
}

.cart-empty {
  display: none;
  padding: 18px 0;
  color: rgba(75, 61, 62, 0.72);
  font-size: 14px;
}

.cart-empty.is-visible {
  display: block;
}

.cart-form {
  margin-top: 16px;
}

.cart-error {
  display: none;
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(180, 40, 40, 0.12);
  color: #8a1f1f;
  font-size: 13px;
  line-height: 1.4;
}

.cart-error.is-visible {
  display: block;
}

.cart-form input,
.cart-form textarea {
  width: 100%;
  margin-bottom: 9px;
  padding: 12px 13px;
  border: 1px solid rgba(75, 61, 62, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.7);
  color: #4b3d3e;
  font-size: 14px;
  outline: none;
}

.cart-form textarea {
  min-height: 72px;
  resize: vertical;
}

.send-whatsapp-order {
  width: 100%;
  margin-top: 4px;
  padding: 14px;
  border: none;
  border-radius: 999px;
  background: #4b3d3e;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

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

/* =========================================================
   TABLET / DESKTOP PREVIEW
   Keep the catalogue as a clean mobile frame.
========================================================= */

/* =========================================================
   TABLET / IPAD PORTRAIT
   Bigger catalogue frame without stretching the design.
========================================================= */

@media (min-width: 768px) and (max-width: 1180px) and (orientation: portrait) {
  .page {
    width: min(78vw, 680px, calc(100svh * 9 / 16));
    max-width: 680px;
    margin: 0 auto;
    transform: none;
  }

  .screen {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 9 / 16;
  }

  .hero-section {
    width: 100%;
    max-width: 100%;
  }

  .hero-stage {
    width: 100%;
    max-width: 100%;
  }
}

/* =========================================================
   TABLET / IPAD LANDSCAPE + DESKTOP
   Keep it controlled because height is shorter.
========================================================= */

@media (min-width: 768px) and (orientation: landscape) {
  .page {
    width: min(52vw, 520px, calc(100svh * 9 / 16));
    max-width: 520px;
    margin: 0 auto;
    transform: none;
  }

  .screen {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 9 / 16;
  }

  .hero-section {
    width: 100%;
    max-width: 100%;
  }

  .hero-stage {
    width: 100%;
    max-width: 100%;
  }
}

/* =========================================================
   LARGE DESKTOP
   Clean centered preview.
========================================================= */

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

  .screen,
  .hero-section,
  .hero-stage {
    width: 430px;
    max-width: 430px;
  }
}

/* =========================================================
   DESKTOP PREVIEW
   Keep phone-style preview only on large desktop screens.
========================================================= */


/* =========================================================
   PRODUCT SOUL / FLOATING OVERRIDE
   Adds life back while keeping scroll-driven movement.
========================================================= */

.products-section-one,
.products-section-two {
  --float-y: 0px;
  --float-scale: 1;
}

/* Section 2 title and stones: stronger travel, more visible scroll movement */

.products-section-one .section-title-our-product {
  transform:
    translateX(-50%)
    translateY(calc((1 - var(--scroll-progress)) * 32px))
    scale(calc(0.94 + (var(--scroll-progress) * 0.06))) !important;
}

.products-section-one .product-one-stone-top {
  transform:
    translateX(calc((1 - var(--scroll-progress)) * 95%))
    translateY(calc((1 - var(--scroll-progress)) * -18px)) !important;
}

.products-section-one .product-one-stone-bottom {
  transform:
    translateX(calc((1 - var(--scroll-progress)) * -95%))
    translateY(calc((1 - var(--scroll-progress)) * 18px)) !important;
}

/* Section 2 products: scroll movement + breathing motion */

.products-section-one .product-moisturizer-bottle {
  transform:
    translateX(calc((1 - var(--scroll-progress)) * 82%))
    translateY(var(--float-y))
    scale(var(--float-scale))
    rotate(0deg) !important;
}

.products-section-one .product-serum-bottle {
  transform:
    translateX(calc((1 - var(--scroll-progress)) * -82%))
    translateY(var(--float-y))
    scale(var(--float-scale))
    rotate(0deg) !important;
}

/* Section 2 active products */

.products-section-one.moisturizer-active .product-moisturizer-bottle {
  transform:
    translateX(calc((1 - var(--scroll-progress)) * 82%))
    translateY(var(--float-y))
    scale(var(--float-scale))
    rotate(calc(var(--scroll-progress) * 18deg)) !important;
}

.products-section-one.serum-active .product-serum-bottle {
  transform:
    translateX(calc((1 - var(--scroll-progress)) * -82%))
    translateY(var(--float-y))
    scale(var(--float-scale))
    rotate(calc(var(--scroll-progress) * -20deg)) !important;
}

/* Section 3 title and stones */

.products-section-two .section-three-title {
  transform:
    translateX(-50%)
    translateY(calc((1 - var(--scroll-progress)) * 32px))
    scale(calc(0.94 + (var(--scroll-progress) * 0.06))) !important;
}

.products-section-two .product-two-stone-top {
  transform:
    translateX(calc((1 - var(--scroll-progress)) * 95%))
    translateY(calc((1 - var(--scroll-progress)) * -18px)) !important;
}

.products-section-two .product-two-stone-bottom {
  transform:
    translateX(calc((1 - var(--scroll-progress)) * -95%))
    translateY(calc((1 - var(--scroll-progress)) * 18px)) !important;
}

/* Section 3 products: scroll movement + breathing motion */

.products-section-two .product-treatment-tube {
  transform:
    translateX(calc((1 - var(--scroll-progress)) * 82%))
    translateY(var(--float-y))
    scale(var(--float-scale))
    rotate(0deg) !important;
}

.products-section-two .product-cream-jar {
  transform:
    translateX(calc((1 - var(--scroll-progress)) * -82%))
    translateY(var(--float-y))
    scale(var(--float-scale))
    rotate(0deg) !important;
}

/* Section 3 active products */

.products-section-two.tube-active .product-treatment-tube {
  transform:
    translateX(calc((1 - var(--scroll-progress)) * 82%))
    translateY(var(--float-y))
    scale(var(--float-scale))
    rotate(calc(var(--scroll-progress) * 25deg)) !important;
}

.products-section-two.cream-active .product-cream-jar {
  transform:
    translateX(calc((1 - var(--scroll-progress)) * -82%))
    translateY(var(--float-y))
    scale(var(--float-scale))
    rotate(calc(var(--scroll-progress) * -20deg)) !important;
}

/* =========================================================
   PINNED HERO INTRO ASSEMBLY
   Logo first, then cosmetic + big products together.
========================================================= */

.hero-section {
  --hero-raw: 0;
  --hero-logo-progress: 0;
  --hero-title-magic: 0;
  --hero-product-progress: 0;
  --hero-float-y: 0px;
  --hero-float-scale: 1;

  position: relative;
  width: 100%;
  height: 180svh;
  background: transparent;
}

.hero-stage {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Logo:
   Starts big in center, then moves to original top position.
*/
.hero-logo {
  width: calc(78% - (var(--hero-logo-progress) * 51%));
  top: calc(40% - (var(--hero-logo-progress) * 35%));
  left: 50%;
  z-index: 30;
  opacity: 1;

  transform:
    translateX(-50%)
    scale(calc(1.1 - (var(--hero-logo-progress) * 0.1)));

  filter:
    drop-shadow(0 14px 24px rgba(0, 0, 0, calc(0.22 * (1 - var(--hero-logo-progress)))));
}

/* Cosmetic title:
   Appears with the products and stays visible.
*/
.hero-title-description {
  width: 88%;
  top: 22%;
  left: 50%;
  z-index: 26;

  opacity: var(--hero-title-magic);

  transform:
    translateX(-50%)
    translateY(calc((1 - var(--hero-title-magic)) * 24px))
    scale(calc(0.86 + (var(--hero-title-magic) * 0.14)));

  filter: none !important;
}

/* Shared hero product settings */
.hero-product {
  position: absolute;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform, opacity;

  opacity: var(--hero-product-progress);

  filter:
    brightness(calc(0.7 + (var(--hero-product-progress) * 0.3)))
    drop-shadow(0 18px 24px rgba(0, 0, 0, calc(var(--hero-product-progress) * 0.25)));
}

/* Serum - bigger left bottle */
.hero-serum {
  width: 70%;
  left: -3%;
  bottom: 7%;
  z-index: 21;

  transform:
    translateX(calc((1 - var(--hero-product-progress)) * -180%))
    translateY(calc((1 - var(--hero-product-progress)) * 70% + var(--hero-float-y)))
    rotate(calc((1 - var(--hero-product-progress)) * -24deg))
    scale(calc((0.72 + (var(--hero-product-progress) * 0.28)) * var(--hero-float-scale)));
}

/* Moisturizer - bigger main center product */
.hero-moisturizer {
  width: 100%;
  left: 47%;
  bottom: 10%;
  z-index: 22;

  transform:
    translateX(calc(-50% + ((1 - var(--hero-product-progress)) * 125%)))
    translateY(calc((1 - var(--hero-product-progress)) * -70% + var(--hero-float-y)))
    rotate(calc((1 - var(--hero-product-progress)) * 16deg))
    scale(calc((0.72 + (var(--hero-product-progress) * 0.28)) * var(--hero-float-scale)));
}

/* Cream - bigger front jar */
.hero-cream {
  width: 82%;
  left: 49%;
  bottom: -2%;
  z-index: 24;

  transform:
    translateX(calc(-50% + ((1 - var(--hero-product-progress)) * -45%)))
    translateY(calc((1 - var(--hero-product-progress)) * 105% + var(--hero-float-y)))
    rotate(calc((1 - var(--hero-product-progress)) * 14deg))
    scale(calc((0.7 + (var(--hero-product-progress) * 0.3)) * var(--hero-float-scale)));
}

/* Tube - bigger right product */
.hero-tube {
  width: 78%;
  right: -12%;
  bottom: 9%;
  z-index: 23;

  transform:
    translateX(calc((1 - var(--hero-product-progress)) * 190%))
    translateY(calc((1 - var(--hero-product-progress)) * 70% + var(--hero-float-y)))
    rotate(calc((1 - var(--hero-product-progress)) * 26deg))
    scale(calc((0.72 + (var(--hero-product-progress) * 0.28)) * var(--hero-float-scale)));
}

/* Remove old combined group if it still exists */
.hero-product-group {
  display: none !important;
}
/* =========================================================
   REAL IPAD / TABLET PORTRAIT LAYOUT
   Full-width tablet layout, not stretched phone layout.
========================================================= */

@media (min-width: 768px) and (max-width: 1180px) and (orientation: portrait) {

  body {
    background-size: cover;
    background-position: center center;
  }

  .page {
    width: 100vw;
    max-width: none;
    margin: 0;
    transform: none;
  }

  .screen {
    width: 100vw;
    height: 100svh;
    min-height: 100svh;
    aspect-ratio: auto;
  }

  .hero-section {
    width: 100vw;
    height: 210svh;
  }

  .hero-stage {
    width: 100vw;
    height: 100svh;
  }

  /* =========================
     IPAD HERO
  ========================== */

  .hero-logo {
    width: calc(54% - (var(--hero-logo-progress) * 33%));
    top: calc(37% - (var(--hero-logo-progress) * 30%));
  }

  .hero-title-description {
    width: 62%;
    top: 24%;
    z-index: 26;
      filter: none !important;

  }

  .hero-serum {
    width: 44%;
    left: 14%;
    bottom: 11%;
    z-index: 21;
  }

  .hero-moisturizer {
    width: 58%;
    left: 49%;
    bottom: 19%;
    z-index: 22;
  }

  .hero-cream {
    width: 58%;
    left: 50%;
    bottom: 15%;
    z-index: 24;
  }

  .hero-tube {
    width: 48%;
    right: 9%;
    bottom: 13%;
    z-index: 23;
  }

  /* =========================
     IPAD SECTION 2
     Moisturizer + Serum
  ========================== */

  .section-title-our-product,
  .section-three-title {
    width: 26%;
    top: 4%;
  }

  .product-one-stone-top {
    width: 70%;
    top: 12%;
    right: -18%;
  }

  .product-one-stone-bottom {
    width: 82%;
    left: -24%;
    bottom: -10%;
  }

  .product-moisturizer-bottle {
    width: 60%;
    top: 20%;
    right: 6%;
  }

  .product-serum-bottle {
    width: 50%;
    left: 10%;
    bottom: -3%;
  }

  .arrow-text-moisturizer {
    width: 38%;
    top: 27%;
    left: 8%;
  }

  .arrow-text-serum {
    width: 42%;
    right: 9%;
    bottom: 11%;
  }

  .add-moisturizer {
    top: 30% !important;
    left: 14% !important;
  }

  .add-serum {
    right: 17% !important;
    bottom: 30% !important;
  }

  /* =========================
     IPAD SECTION 3
     Tube + Cream
  ========================== */

  .product-two-stone-top {
    width: 70%;
    top: 12%;
    right: -18%;
  }

  .product-two-stone-bottom {
    width: 82%;
    left: -24%;
    bottom: -10%;
  }

  .product-treatment-tube {
    width: 60%;
    top: 17%;
    right: 3%;
  }

  .product-cream-jar {
    width: 60%;
    left: 5%;
    bottom: 2%;
  }

  .arrow-text-tube {
    width: 38%;
    top: 27%;
    left: 8%;
  }

  .arrow-text-cream {
    width: 42%;
    right: 9%;
    bottom: 12%;
  }

  .add-tube {
    top: 28% !important;
    left: 14% !important;
  }

  .add-cream {
    right: 17% !important;
    bottom: 30% !important;
  }

  /* =========================
     IPAD ABOUT
  ========================== */

  .about-us-image {
    width: 68%;
    height: 92%;
    top: 4%;
  }

  .back-to-top-logo {
    width: 9%;
    bottom: 4%;
  }

  /* =========================
     IPAD BUTTONS
  ========================== */

  .cart-toggle {
    width: 54px;
    height: 54px;
    top: 24px;
    left: 24px;
  }

  .music-toggle {
    width: 54px;
    height: 54px;
    right: 24px;
    bottom: 24px;
  }
}
/* =========================================================
   IPHONE / MOBILE HERO FINAL FIX
   Keep text readable and move products lower.
========================================================= */

@media (max-width: 767px) {
  .hero-stage {
    isolation: isolate;
  }

  .hero-title-description {
    z-index: 80 !important;
    filter: none !important;
  }

  .hero-logo {
    z-index: 100 !important;
  }

  .hero-serum {
    bottom: 2% !important;
    z-index: 21 !important;
    left: -7% !important;

  }

  .hero-moisturizer {
    bottom: 5% !important;
    z-index: 22 !important;
  }

  .hero-tube {
    bottom: 5% !important;
    z-index: 23 !important;
  }

  .hero-cream {
    bottom: -6% !important;
    z-index: 24 !important;
  }
}