/* ============================================================
   LotusFarma Storefront (v2 · dark cinematic)
   ============================================================ */

/* ---------------- 1 · HERO ---------------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center;
  background: radial-gradient(120% 90% at 80% 30%, #1d1611 0%, var(--black) 60%); overflow: hidden; }
.hero__glow { position: absolute; z-index: 0; top: -10%; right: 4%; width: 60vw; height: 80vh;
  background: radial-gradient(closest-side, rgba(183,125,81,0.22), transparent 72%); filter: blur(20px); pointer-events: none; }
.hero__product { position: absolute; z-index: 1; right: 0; top: 0; bottom: 0; width: min(56vw, 760px);
  display: flex; align-items: center; justify-content: flex-end; pointer-events: none; }
.hero__product img { height: 100%; width: 100%; object-fit: cover; object-position: center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%); mask-image: linear-gradient(90deg, transparent 0%, #000 34%); }
.hero__copy { position: relative; z-index: 2; max-width: 40rem; padding-block: 8rem; }
.hero__title { font-size: var(--hero); margin: 0.5em 0 0.5em; color: var(--fg-on-dark); }
.hero__title .serif-i { color: var(--copper-light); }
.hero__lede { max-width: 31rem; color: var(--fg-on-dark-mut); }
.hero__actions { display: flex; gap: 0.9rem; margin: 2rem 0 2.4rem; flex-wrap: wrap; }
.hero__scroll { position: absolute; z-index: 2; left: calc(var(--rail-w) + var(--pad-x)); bottom: 2rem;
  display: flex; align-items: center; gap: 0.8rem; font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--fg-on-dark-mut); }
.hero__scroll i { width: 60px; height: 1px; background: var(--copper-light); transform-origin: left; animation: sweep 2.4s var(--ease) infinite; }
@keyframes sweep { 0%,100% { transform: scaleX(0.3); opacity: 0.4; } 50% { transform: scaleX(1); opacity: 1; } }
@media (max-width: 900px) {
  .hero { align-items: flex-end; }
  .hero__product { width: 100%; opacity: 0.5; }
  .hero__product img { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%); }
  .hero__copy { padding-block: 7rem 6rem; }
}

/* ---------------- 2 · STAGE (pinned canvas turntable) ---------------- */
.stage { position: relative; background: var(--black); }
.stage__pin { position: relative; height: 100svh; overflow: hidden; }
.stage__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center;
  opacity: 0; transition: opacity .4s; }     /* shown only as reduced-motion / no-frames fallback */
.stage.no-frames .stage__poster { opacity: 1; }
.stage__beats { position: absolute; z-index: 3; left: calc(var(--rail-w) + var(--pad-x)); top: 50%; transform: translateY(-50%); width: min(30rem, 44vw); }
.stage__beat { position: absolute; inset: 0; opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); pointer-events: none; }
.stage__beat.is-active { opacity: 1; transform: none; }
.stage__beat h2 { font-size: var(--display); margin: 0.5rem 0 0.7rem; color: var(--fg-on-dark); }
.stage__beat .lede { max-width: 24rem; color: var(--fg-on-dark-mut); }
.stage__progress { position: absolute; z-index: 3; left: calc(var(--rail-w) + var(--pad-x)); bottom: 2.2rem; width: 160px; height: 2px; background: var(--hairline-d); border-radius: 2px; overflow: hidden; }
.stage__progress span { display: block; height: 100%; width: 0; background: var(--copper-light); }
@media (max-width: 900px) {
  .stage__beats { top: auto; bottom: 5rem; transform: none; left: var(--pad-x); right: var(--pad-x); width: auto; }
  .stage__beat { position: relative; }
  .stage__beat:not(.is-active) { display: none; }
}

/* ---------------- 3 · RANGE (light) ---------------- */
.range { position: relative; background: linear-gradient(180deg, var(--warm-white), var(--cream)); color: var(--ink); overflow: hidden; }
.range__band { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background-size: cover; background-position: center 35%;
  opacity: 0.06; filter: saturate(0.7); pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 60%); mask-image: linear-gradient(180deg, transparent 0, #000 60%); }
.range .wrap { position: relative; z-index: 1; }
.range__head { max-width: 46rem; margin-bottom: clamp(2.5rem,6vh,4rem); }
.range__head h2 { font-size: var(--display); margin-top: 0.5rem; }
.range__cats { list-style: none; display: grid; grid-template-columns: repeat(4,1fr); gap: 0; border-top: 1px solid var(--hairline-l); }
.range__cats li { padding: 1.8rem 1.4rem 1.8rem 0; border-bottom: 1px solid var(--hairline-l); border-right: 1px solid var(--hairline-l); transition: padding-left .5s var(--ease); }
.range__cats li:last-child { border-right: 0; }
.range__cats li:hover { padding-left: 0.8rem; }
.range__n { font-size: 0.72rem; color: var(--copper); letter-spacing: 0.1em; }
.range__cats a { display: inline-block; }
.range__cats h3 { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; color: var(--ink); margin: 0.4rem 0 0.2rem; transition: color .4s var(--ease); }
.range__cats a:hover h3 { color: var(--copper-shadow); }
.range__cats p { font-size: 0.85rem; color: var(--fg-muted); }
@media (max-width: 760px) { .range__cats { grid-template-columns: 1fr 1fr; } }

/* cursor-reactive product stage — asymmetric offset layout */
.range__stage { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem,2.2vw,2rem); align-items: end; margin-top: clamp(3rem,7vh,5rem); }
.pcard { perspective: 1000px; }
.pcard--a { transform: translateY(2.4rem); }
.pcard--b { transform: translateY(-1.2rem); }
.pcard--c { transform: translateY(3.2rem); }
.pcard--d { transform: translateY(0); }
.pcard__inner { position: relative; display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.2rem,2vw,1.8rem);
  background: linear-gradient(165deg, #fff 0%, var(--warm-white) 100%); border: 1px solid var(--hairline-l); border-radius: 14px;
  box-shadow: 0 30px 50px -38px rgba(35,29,24,0.45); overflow: hidden; color: inherit; text-decoration: none; cursor: pointer; }
.pcard__inner:focus-visible { outline: 2px solid var(--copper); outline-offset: 4px; }
.pcard__tag { align-self: flex-start; font-family: var(--sans); font-weight: 500; font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--copper-shadow); border: 1px solid var(--hairline-l); border-radius: 999px; padding: 0.4em 0.9em; }
.pcard__shot { display: flex; align-items: center; justify-content: center; height: clamp(150px, 16vw, 230px); }
.pcard__shot img { max-height: 100%; width: auto; object-fit: contain; filter: drop-shadow(0 24px 28px rgba(35,29,24,0.22)); transition: transform .5s var(--ease); }
.pcard__inner:hover .pcard__shot img { transform: translateY(-6px) scale(1.03); }
.pcard__n { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--copper); }
.pcard__meta h3 { font-family: var(--serif); font-weight: 400; font-size: 1.18rem; color: var(--ink); margin: 0.35rem 0 0.4rem; }
.pcard__meta p { font-size: 0.82rem; color: var(--fg-muted); line-height: 1.5; }
@media (max-width: 980px) { .range__stage { grid-template-columns: 1fr 1fr; gap: 1.4rem; } .pcard { transform: none !important; } }
@media (max-width: 520px) { .range__stage { grid-template-columns: 1fr; } }

.range__note { color: var(--fg-muted); font-size: 0.82rem; margin-top: clamp(2rem,5vh,3rem); }

/* ---------------- 4 · MATERIAL (dark) ---------------- */
.material { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; min-height: 100svh; background: var(--black); overflow: hidden; }
.material__img { position: relative; overflow: hidden; }
.material__img img { width: 100%; height: 124%; position: relative; top: -12%; object-fit: cover; object-position: 50% 35%; will-change: transform; }
.material__copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(3rem,8vw,7rem) var(--pad-x); }
.material__copy h2 { font-size: var(--display); margin: 0.5rem 0 2rem; color: var(--fg-on-dark); }
/* animated copper leader lines over the macro image */
.material__leaders { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.material__leaders path { fill: none; stroke: var(--copper-light); stroke-width: 0.4; vector-effect: non-scaling-stroke;
  stroke-dasharray: 60; stroke-dashoffset: 60; transition: stroke-dashoffset 1s var(--ease); }
.material__leaders circle { fill: var(--copper-light); opacity: 0; transform: scale(0); transform-box: fill-box; transform-origin: center; transition: opacity .5s var(--ease) .6s, transform .5s var(--ease) .6s; }
.material__leaders .ldr[data-drawn] path { stroke-dashoffset: 0; }
.material__leaders .ldr[data-drawn] circle { opacity: 0.9; transform: scale(1); }
.material__leaders .ldr[data-ldr="1"] path { transition-delay: .18s; }
.material__leaders .ldr[data-ldr="1"] circle { transition-delay: .78s; }
.material__leaders .ldr[data-ldr="2"] path { transition-delay: .36s; }
.material__leaders .ldr[data-ldr="2"] circle { transition-delay: .96s; }
@media (max-width: 900px) { .material__leaders { display: none; } }
.material__list { list-style: none; display: flex; flex-direction: column; gap: 1.6rem; }
.material__list li { font-size: 1rem; color: var(--fg-on-dark-mut); padding-left: 1.5rem; border-left: 1px solid var(--copper); }
.material__list b { display: block; font-weight: 500; color: var(--fg-on-dark); margin-bottom: 0.2rem; }
@media (max-width: 900px) { .material { grid-template-columns: 1fr; } .material__img { height: 56svh; } }

/* ---------------- 5 · TRUST (light) ---------------- */
.trust { background: var(--soft-cream); color: var(--ink); }
.trust__head { max-width: 44rem; margin-bottom: clamp(2.5rem,6vh,4rem); }
.trust__head h2 { font-size: var(--display); margin-top: 0.6rem; }

/* count-up stat row */
.trust__stats { list-style: none; display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(1rem,2.5vw,2.4rem);
  margin-bottom: clamp(3rem,7vh,5rem); padding-bottom: clamp(2.5rem,5vh,3.5rem); border-bottom: 1px solid var(--hairline-l); }
.trust__stats li { display: flex; flex-direction: column; gap: 0.5rem; }
.trust__fig { font-family: var(--serif); font-weight: 300; font-size: clamp(2.4rem,5vw,3.6rem); line-height: 1; color: var(--copper-shadow); letter-spacing: -0.02em; }
.trust__lab { font-size: 0.82rem; letter-spacing: 0.04em; color: var(--fg-muted); max-width: 12rem; }
@media (max-width: 720px) { .trust__stats { grid-template-columns: 1fr 1fr; } }

.trust__rows { list-style: none; border-top: 1px solid var(--hairline-l); }
.trust__rows li { display: grid; grid-template-columns: 4rem 1fr 1.4fr; gap: 1.5rem; align-items: baseline; padding: 1.8rem 0; border-bottom: 1px solid var(--hairline-l); }
.trust__n { font-size: 0.78rem; color: var(--copper); letter-spacing: 0.1em; }
.trust__t { position: relative; font-family: var(--serif); font-size: 1.3rem; color: var(--ink); display: inline-block; }
.trust__t::after { content: ''; position: absolute; left: 0; bottom: -0.28em; height: 1px; width: 0; background: var(--copper); transition: width .9s var(--ease); }
.trust__rows li.is-in .trust__t::after { width: 2.6rem; }
@media (prefers-reduced-motion: reduce) { .trust__t::after { width: 2.6rem !important; transition: none; } }
.trust__t em { font-style: italic; color: var(--copper-shadow); font-size: 0.9rem; }
.trust__d { font-size: 0.92rem; color: var(--fg-muted); }
.trust__legal { margin-top: 2rem; font-size: 0.8rem; color: var(--fg-muted); max-width: 44rem; font-style: italic; }
@media (max-width: 720px) { .trust__rows li { grid-template-columns: 2.5rem 1fr; } .trust__d { grid-column: 2; } }

/* ---------------- 6 · CTA ---------------- */
section.cta { position: relative; background: var(--black); padding-block: clamp(5rem,13vh,9rem); overflow: hidden; }
.cta__glow { position: absolute; inset: 0; background: radial-gradient(80% 60% at 50% 120%, rgba(183,125,81,0.22), transparent 70%); pointer-events: none; }
/* ambient floating motes */
.cta__motes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.cta__mote { position: absolute; bottom: -10%; border-radius: 50%;
  background: radial-gradient(circle, rgba(217,160,122,0.55), rgba(183,125,81,0) 70%);
  filter: blur(2px); opacity: 0; animation: moteDrift var(--dur,18s) linear var(--delay,0s) infinite; }
@keyframes moteDrift {
  0% { transform: translateY(0) translateX(0) scale(0.6); opacity: 0; }
  12% { opacity: var(--peak, 0.7); }
  88% { opacity: var(--peak, 0.7); }
  100% { transform: translateY(-115vh) translateX(var(--drift, 20px)) scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .cta__mote { animation: none; opacity: 0.18; } }
.cta__wrap { position: relative; z-index: 1; max-width: 52rem; text-align: center; margin-inline: auto; }
.cta__title { font-size: var(--hero); color: var(--fg-on-dark); margin: 0.6em 0 1.1em; }
.cta__title .serif-i { color: var(--copper-light); }
.cta__form { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; }
.cta__form input { flex: 1 1 22rem; max-width: 26rem; background: transparent; border: 1px solid var(--hairline-d); color: var(--fg-on-dark); padding: 1.05em 1.4em; border-radius: 999px; font-family: var(--sans); font-size: 0.95rem; transition: border-color .4s var(--ease); }
.cta__form input::placeholder { color: rgba(237,224,210,0.4); }
.cta__form input:focus { outline: none; border-color: var(--copper-light); }
.cta__msg { min-height: 1.4em; margin-top: 1.2rem; color: var(--copper-light); font-size: 0.9rem; }
.cta__note { margin-top: 1.6rem; font-size: 0.76rem; color: rgba(237,224,210,0.5); }

/* ---------------- reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
  .hero__scroll i { animation: none; }
  .stage__pin { height: auto; min-height: 80svh; }
  .stage { padding-block: 4rem; }
  .stage__beat { position: relative; opacity: 1; transform: none; margin-bottom: 2rem; }
  .material__img img { top: 0; height: 100%; }
}

/* ============================================================
   LIGHT STUDIO override for product sections (cream correct-logo)
   ============================================================ */
.hero { background: #F2E0CF !important; }
.hero__glow { background: radial-gradient(closest-side, rgba(183,125,81,0.14), transparent 72%) !important; opacity:0.7; }
.hero__title { color: var(--ink) !important; }
.hero__lede  { color: var(--cocoa) !important; }
.hero__scroll{ color: var(--copper-shadow) !important; }
.hero .eyebrow { color: var(--copper-shadow) !important; }
.hero .chip { color: var(--cocoa) !important; }
.hero .chip svg { stroke: var(--copper) !important; }
.hero .btn--ghost-d { color: var(--ink) !important; border-color: var(--hairline-l) !important; }
.hero .btn--ghost-d:hover { border-color: var(--copper) !important; color: var(--copper-shadow) !important; }
.hero__product img { object-fit: contain !important; height: 90% !important; filter: none !important; }
.stage { background: #F2E0CF !important; }
.stage__beat h2 { color: var(--ink) !important; }
.stage__beat .lede { color: var(--cocoa) !important; }
.stage__beat .eyebrow { color: var(--copper-shadow) !important; }
.stage__progress { background: var(--hairline-l) !important; }
.material { background: linear-gradient(180deg, #F7E8DA, #F2E0CF) !important; }
.material__copy h2 { color: var(--ink) !important; }
.material__copy .eyebrow { color: var(--copper-shadow) !important; }
.material__list li { color: var(--cocoa) !important; }
.material__list b { color: var(--ink) !important; }
.material__img img { object-fit: contain !important; height: 100% !important; top: 0 !important; filter: none !important; }

@media (max-width: 900px) {
  .hero__product {
    top: 4.2rem !important;
    bottom: auto !important;
    height: 36svh !important;
    justify-content: center !important;
    opacity: 0.72 !important;
  }
  .hero__product img {
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  .hero__copy { padding-block: calc(36svh + 5.5rem) 4rem !important; }
}

@media (max-width: 520px) {
  .hero__title { font-size: clamp(2.45rem, 12vw, 3.2rem) !important; }
  .hero__lede { max-width: 21rem; }
}