/* Homepage slider: each scene "switches on" from the lamp's position. */
.lslider{--dur:6000ms;position:relative;height:clamp(520px,80vh,800px);overflow:hidden;background:#0f1011;color:#f3f2f0;isolation:isolate;touch-action:pan-y;outline:none}
.ls-track{position:absolute;inset:0}
.ls-slide{position:absolute;inset:0;z-index:1;visibility:hidden}
.ls-slide.is-active,.ls-slide.is-leaving{visibility:visible}
.ls-slide.is-active{z-index:3}
.ls-slide.is-leaving{z-index:2}
.ls-media{position:absolute;inset:0;overflow:hidden}
.ls-media picture,.ls-media img{display:block;width:100%;height:100%}
.ls-img{object-fit:cover;transform-origin:var(--ox) var(--oy)}

/* switch-on transition: a circle of light opens from the lamp */
.ls-slide.is-entering{animation:ls-on 1.25s cubic-bezier(.7,0,.2,1) both}
@keyframes ls-on{from{clip-path:circle(0% at var(--ox) var(--oy))}to{clip-path:circle(150% at var(--ox) var(--oy))}}
.ls-slide.is-entering::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:radial-gradient(circle at var(--ox) var(--oy),rgba(255,214,160,.85),rgba(232,196,140,.25) 18%,transparent 42%);mix-blend-mode:screen;animation:ls-flash 1.25s ease-out both}
@keyframes ls-flash{0%{opacity:0}25%{opacity:1}100%{opacity:0}}
.ls-slide.is-leaving .ls-media{animation:ls-off 1.25s ease-in both}
@keyframes ls-off{to{filter:brightness(.25) saturate(.6);transform:scale(1.04)}}

/* slow camera push while a slide is showing */
.ls-slide.is-active .ls-img{animation:ls-zoom calc(var(--dur) + 2.5s) cubic-bezier(.2,.6,.3,1) both}
@keyframes ls-zoom{from{transform:scale(1.14)}to{transform:scale(1.02)}}

/* readable copy */
.ls-shade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(5,7,9,.82) 0%,rgba(5,7,9,.45) 38%,rgba(5,7,9,0) 68%),linear-gradient(0deg,rgba(5,7,9,.75) 0%,rgba(5,7,9,0) 38%)}
.ls-copy{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;gap:18px;padding-block:80px 150px}
.ls-copy .eyebrow{color:#d8c2a0}
.ls-title{font-size:clamp(2.4rem,6.4vw,5.6rem);line-height:1;letter-spacing:-.03em;max-width:13ch;color:#f5f4f2;font-weight:400}
.ls-title em{font-style:italic;color:#d8c2a0}
.ls-text{max-width:44ch;font-size:1.12rem;color:rgba(243,238,228,.78)}
.ls-btns .btn{background:#d8c2a0;border-color:#d8c2a0;color:#1c1a17}
.ls-btns .btn:hover{background:transparent;color:#d8c2a0}

/* copy rises in after the light comes on */
.ls-copy>*{opacity:0;transform:translateY(26px);transition:opacity .7s,transform .9s cubic-bezier(.16,1,.3,1)}
.ls-slide.is-active .ls-copy>*{opacity:1;transform:none}
.ls-slide.is-active .ls-copy>*:nth-child(1){transition-delay:.45s}
.ls-slide.is-active .ls-copy>*:nth-child(2){transition-delay:.55s}
.ls-slide.is-active .ls-copy>*:nth-child(3){transition-delay:.68s}
.ls-slide.is-active .ls-copy>*:nth-child(4){transition-delay:.8s}
.ls-slide.is-first .ls-copy>*:nth-child(1){transition-delay:.1s}
.ls-slide.is-first .ls-copy>*:nth-child(2){transition-delay:.2s}
.ls-slide.is-first .ls-copy>*:nth-child(3){transition-delay:.32s}
.ls-slide.is-first .ls-copy>*:nth-child(4){transition-delay:.44s}

/* pointer light */
.ls-glow{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;transition:opacity .5s;mix-blend-mode:soft-light;
  background:radial-gradient(420px circle at var(--gx,50%) var(--gy,40%),rgba(255,214,160,.55),transparent 70%)}
.lslider:hover .ls-glow{opacity:1}

/* controls */
.ls-ui{position:absolute;left:0;right:0;bottom:0;z-index:6;display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:28px;padding-block:0 30px}
.ls-count{font-size:.9rem;color:rgba(243,238,228,.6);display:flex;gap:6px;align-items:baseline}
.ls-count b{font-size:2.2rem;font-weight:400;color:#f5f4f2;line-height:1}
.ls-dots{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:14px}
.ls-dot{background:none;border:0;padding:10px 0 8px;min-height:44px;text-align:left;color:rgba(243,238,228,.55);cursor:pointer;font:inherit;display:grid;gap:10px}
.ls-dot-bar{display:block;height:2px;background:rgba(243,238,228,.22);overflow:hidden}
.ls-dot-bar i{display:block;height:100%;width:100%;background:#d8c2a0;transform:scaleX(0);transform-origin:0 50%}
.ls-dot[aria-selected="true"]{color:#f5f4f2}
.ls-dot[aria-selected="true"] .ls-dot-bar i{animation:ls-prog var(--dur) linear forwards}
.ls-dot.is-done .ls-dot-bar i{transform:scaleX(1)}
.is-paused .ls-dot[aria-selected="true"] .ls-dot-bar i{animation-play-state:paused}
@keyframes ls-prog{to{transform:scaleX(1)}}
.ls-dot-label{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ls-dot:hover{color:#f5f4f2}
.ls-nav{display:flex;gap:8px}
.ls-btn{width:46px;height:46px;border-radius:50%;border:1px solid rgba(243,238,228,.3);background:rgba(7,9,11,.35);backdrop-filter:blur(6px);color:#f5f4f2;display:grid;place-items:center;cursor:pointer;transition:border-color .25s,background .25s}
.ls-btn:hover{border-color:#d8c2a0;background:rgba(217,185,138,.15)}
.ls-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ls-pause .i-play{display:none}
.user-paused .ls-pause .i-play{display:block;fill:currentColor;stroke:none}
.user-paused .ls-pause .i-pause{display:none}
.lslider:focus-visible{box-shadow:inset 0 0 0 2px #d8c2a0}

@media (max-width:760px){
  .lslider{height:clamp(540px,82vh,760px)}
  .ls-shade{background:linear-gradient(0deg,rgba(5,7,9,.9) 0%,rgba(5,7,9,.55) 45%,rgba(5,7,9,.1) 80%)}
  .ls-copy{justify-content:flex-end;padding-block:80px 150px}
  .ls-ui{grid-template-columns:auto 1fr;gap:16px}
  .ls-dots{grid-column:1/-1;grid-row:1}
  .ls-dot-label{display:none}
  .ls-nav{justify-self:end}
}
@media (prefers-reduced-motion:reduce){
  .ls-slide.is-entering,.ls-slide.is-entering::after,.ls-slide.is-leaving .ls-media,.ls-slide.is-active .ls-img{animation:none}
  .ls-slide.is-entering{animation:ls-fade .4s both}
  @keyframes ls-fade{from{opacity:0}}
  .ls-copy>*{transition:none}
}

/* first slide: eyebrow and title share the page H1 */
.ls-h1{margin:0;font:inherit;display:flex;flex-direction:column;gap:16px}
.ls-h1>span{display:block}