/*
 * ENITA homepage Hero third chapter, remix 02.
 *
 * The desktop and phone plates now contain the photographed product in the
 * same light as the paper/table surface. The live copy remains deterministic;
 * the LESS / IS MORE lockup uses the approved outline as a mask so the mobile
 * treatment reads as a quiet transparent gradient instead of a pasted solid
 * wordmark.
 */

.hero-home-concept-carousel .home-hero-slide[data-slide-id="less-is-more"] {
  background: #d3d5d1;
  isolation: isolate;
}

.hero-home-concept-carousel .home-hero-slide[data-slide-id="less-is-more"] picture {
  position: relative;
  z-index: 0;
}

.hero-home-concept-carousel .home-hero-slide[data-slide-id="less-is-more"] > picture > img {
  object-position: center center;
}

.hero-home-concept-carousel .home-hero-fixed-copy--less-is-more {
  z-index: 3;
  color: #181918;
}

.home-hero-less-is-more-copy__lockup {
  position: absolute;
  top: 30.2%;
  left: clamp(52px, 5.05vw, 80px);
  width: clamp(420px, 31vw, 520px);
  pointer-events: none;
}

/* The SVG is the exact approved geometry; the visible ink is a CSS gradient
   painted through that geometry. This keeps the scene visible at the fade
   while preserving the fixed two-line relationship. */
.home-hero-less-is-more-copy__wordmark-frame {
  display: block;
  width: 100%;
  aspect-ratio: 5503 / 2668;
  position: relative;
  isolation: isolate;
}

.hero-home-concept-carousel .home-hero-slide .home-hero-less-is-more-copy__wordmark {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  background: linear-gradient(
    158deg,
    rgba(24, 25, 24, 0.74) 0%,
    rgba(85, 87, 84, 0.52) 48%,
    rgba(24, 25, 24, 0.11) 100%
  );
  -webkit-mask: url("../images/brand/fixed-hero-copy-v20260904/少即是多_LESS_IS_MORE固定字样.svg") center / contain no-repeat;
  mask: url("../images/brand/fixed-hero-copy-v20260904/少即是多_LESS_IS_MORE固定字样.svg") center / contain no-repeat;
  opacity: 0.96;
}

.home-hero-less-is-more-copy__rule {
  display: block;
  width: clamp(96px, 7.1vw, 116px);
  height: 1px;
  margin-top: clamp(20px, 1.65vw, 26px);
  background: rgba(24, 25, 24, 0.36);
}

.hero-home-concept-carousel .home-hero-slide .home-hero-less-is-more-copy__concept {
  display: block;
  width: clamp(112px, 8.7vw, 138px) !important;
  height: auto !important;
  margin-top: clamp(14px, 1.3vw, 20px);
  opacity: 0.72;
}

.hero-home-concept-carousel .home-hero-slide .home-hero-less-is-more-copy__statement {
  display: block;
  width: clamp(264px, 20.2vw, 320px) !important;
  height: auto !important;
  margin-top: clamp(14px, 1.25vw, 19px);
  opacity: 0.76;
}

/* Both responsive plates now carry the product in the photographed scene. The
   former live cutout is intentionally disabled so a second bottle can never
   sit on top of the integrated product. */
.hero-home-concept-carousel .home-hero-slide .home-hero-less-is-more-copy__product {
  display: none !important;
}

/* This slide carries its own compact lockup; keep the global invitation out. */
.hero-home-concept-carousel:has(.home-hero-slide[data-slide-id="less-is-more"].is-active) .hero-home-message {
  display: none;
}

@media (max-width: 760px) {
  .hero-home-concept-carousel .home-hero-slide[data-slide-id="less-is-more"] > picture > img {
    object-position: center center;
  }

  .home-hero-less-is-more-copy__lockup {
    top: clamp(106px, 14.5svh, 132px);
    left: 24px;
    width: min(66vw, 258px);
  }

  .hero-home-concept-carousel .home-hero-slide .home-hero-less-is-more-copy__wordmark {
    background: linear-gradient(
      164deg,
      rgba(24, 25, 24, 0.68) 0%,
      rgba(85, 87, 84, 0.4) 53%,
      rgba(24, 25, 24, 0.2) 100%
    );
    opacity: 0.98;
  }

  .home-hero-less-is-more-copy__rule {
    width: 72px;
    margin-top: 14px;
    background: rgba(24, 25, 24, 0.32);
  }

  .hero-home-concept-carousel .home-hero-slide .home-hero-less-is-more-copy__concept {
    width: 112px !important;
    margin-top: 14px;
    opacity: 0.72;
  }

  .hero-home-concept-carousel .home-hero-slide .home-hero-less-is-more-copy__statement {
    width: min(84vw, 248px) !important;
    margin-top: 13px;
    opacity: 0.78;
  }

  /* A quiet contact-shadow veil keeps the integrated product grounded on the
     older plate without introducing a second object layer. */
  .hero-home-concept-carousel .home-hero-slide[data-slide-id="less-is-more"]::after {
    position: absolute;
    right: 7%;
    bottom: 8.2%;
    left: 54%;
    z-index: 1;
    height: 5.5%;
    border-radius: 50%;
    background: radial-gradient(
      ellipse at center,
      rgba(85, 87, 84, 0.22) 0%,
      rgba(85, 87, 84, 0.1) 38%,
      transparent 76%
    );
    content: "";
    filter: blur(10px);
    opacity: 0.72;
    pointer-events: none;
  }
}

@media (max-width: 760px) and (max-height: 720px) {
  .home-hero-less-is-more-copy__lockup {
    top: 12.5%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-home-concept-carousel .home-hero-slide[data-slide-id="less-is-more"] .home-hero-fixed-copy {
    transition: none;
  }
}