/* LTS V49 — native scroll, deeper night and local warm illumination. */
#pergola-light-scroll.lts-pergola-section {
  --lts-pergola-level: 0;
  position: relative;
  min-height: 0;
  height: auto;
  padding: clamp(56px, 7vw, 104px) clamp(20px, 5.5vw, 88px);
  background: #060708;
  color: #f5f0e6;
  border-block: 1px solid rgba(184, 138, 68, .3);
  scroll-margin-top: 90px;
}
.lts-pergola-layout {
  display: grid;
  grid-template-columns: minmax(250px, .75fr) minmax(0, 1.45fr);
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  max-width: 1500px;
  margin-inline: auto;
}
.lts-pergola-copy { min-width: 0; }
.lts-pergola-kicker {
  margin: 0 0 20px;
  color: #d8b56c;
  font: 500 12px/1.5 var(--font-tech, monospace);
  letter-spacing: .12em;
}
.lts-pergola-copy h2 {
  margin: 0 0 24px;
  font: 700 clamp(46px, 5.9vw, 88px)/.92 var(--font-display, sans-serif);
  letter-spacing: -.055em;
}
.lts-pergola-copy h2 span { color: #ef4035; }
.lts-pergola-copy > p:last-child {
  max-width: 480px;
  margin: 0;
  color: #b6b1a8;
  font: clamp(16px, 1.4vw, 20px)/1.55 var(--font-editorial, Georgia, serif);
}
.lts-pergola-scene { min-width: 0; margin: 0; }
.lts-pergola-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  background: #10151a;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
}
.lts-pergola-frame img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  transform: none;
  filter: none;
}
.lts-pergola-frame .lts-pergola-off {
  position: relative;
  z-index: 0;
  /* Constant exposure: scrolling animates only the lit layer's opacity. */
  filter: brightness(.46) saturate(.78);
}
.lts-pergola-frame .lts-pergola-on {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none;
  visibility: hidden;
  opacity: 0;
  will-change: opacity;
}
/* At 100%, show the full original lit scene, including its warm floor wash. */
.lts-pergola-ready .lts-pergola-on { visibility: visible; }
.lts-pergola-off-error .lts-pergola-off { visibility: hidden; }
.lts-pergola-off-error .lts-pergola-on {
  visibility: visible;
  opacity: 0 !important;
  -webkit-mask-image: none;
  mask-image: none;
}
.lts-pergola-state {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  color: #e1ddd5;
  font: 500 12px/1.4 var(--font-tech, monospace);
  letter-spacing: .12em;
}
.lts-pergola-state-off { opacity: calc(.95 - var(--lts-pergola-level) * .55); }
.lts-pergola-state-on { color: #f2ca79; opacity: calc(.4 + var(--lts-pergola-level) * .6); }
.lts-pergola-meter { flex: 1; height: 2px; background: #38352e; }
.lts-pergola-meter i {
  display: block;
  height: 100%;
  background: #ecc274;
  transform-origin: left center;
  transform: scaleX(var(--lts-pergola-level));
}
@media (max-width: 900px) {
  .lts-pergola-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .lts-pergola-copy h2 { max-width: 12ch; font-size: clamp(46px, 9vw, 70px); }
  .lts-pergola-copy > p:last-child { max-width: 600px; }
}