/* Knight Custom Homes — Built With Intention cinematic scroll
   Native scroll, live HTML copy, lazy media, and a complete reduced-motion fallback. */

.cinematic-scroll{
  position:relative;
  padding:0;
  background:#141311;
  color:#fff;
  overflow:clip;
}
.cinematic-scroll h2,.cinematic-scroll h3{color:#fff}
.cinematic-sticky{display:none}
.cinematic-fallback{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  padding:1px;
  background:rgba(168,137,90,.28);
}
.cinematic-fallback figure{
  position:relative;
  min-height:clamp(360px,48vw,620px);
  overflow:hidden;
  background:#1a1a1a;
}
.cinematic-fallback img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.92) contrast(1.03);
}
.cinematic-fallback figure::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(16,15,13,.05),rgba(16,15,13,.18) 45%,rgba(16,15,13,.9));
}
.cinematic-fallback figcaption{
  position:absolute;z-index:2;left:clamp(1.35rem,3vw,2.5rem);right:clamp(1.35rem,3vw,2.5rem);bottom:clamp(1.35rem,3vw,2.5rem);
  max-width:36rem;
}
.cinematic-fallback .cinematic-index,
.cinematic-beat .cinematic-index{
  display:block;margin-bottom:.7rem;
  font-family:var(--display);font-size:.7rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--stone);
}
.cinematic-fallback h3{font-family:var(--editorial);font-size:clamp(2rem,3.5vw,3.2rem);font-weight:400;line-height:.98;letter-spacing:-.035em;margin-bottom:.45rem}
.cinematic-fallback p{margin:0;color:#e9e3da;max-width:45ch}
.cinematic-sr{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
}

.cinematic-scroll.cinematic-ready{height:520svh}
.cinematic-ready .cinematic-fallback{display:none}
.cinematic-ready .cinematic-sticky{
  display:grid;position:sticky;top:0;height:100svh;min-height:600px;
  place-items:stretch;overflow:hidden;isolation:isolate;background:#141311;
}
.cinematic-media,.cinematic-poster,.cinematic-video,.cinematic-shade,.cinematic-vignette{
  position:absolute;inset:0;width:100%;height:100%;
}
.cinematic-poster,.cinematic-video{
  display:block;object-fit:cover;object-position:center;
  filter:saturate(.95) contrast(1.03);
}
.cinematic-video{z-index:1;opacity:0;transition:opacity .45s ease;background:#141311}
.cinematic-video.is-ready{opacity:1}
.cinematic-shade{
  z-index:2;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(13,12,11,.72),rgba(13,12,11,.24) 45%,rgba(13,12,11,.06) 72%),
    linear-gradient(180deg,rgba(13,12,11,.08),rgba(13,12,11,.06) 52%,rgba(13,12,11,.72));
}
.cinematic-vignette{z-index:3;pointer-events:none;box-shadow:inset 0 0 170px rgba(4,4,3,.35)}

.cinematic-drawing{position:absolute;z-index:4;inset:0;pointer-events:none;color:rgba(201,188,168,.54)}
.cinematic-drawing::before{
  content:"";position:absolute;left:7.5%;top:16%;width:min(36vw,620px);height:1px;
  background:linear-gradient(90deg,var(--brass),rgba(201,188,168,.36),transparent);
  transform-origin:left;transform:scaleX(calc(.18 + var(--cinematic-progress,0)*.82));
  box-shadow:0 0 18px rgba(168,137,90,.18);
}
.cinematic-drawing::after{
  content:"";position:absolute;right:7.5%;top:10%;width:54px;height:54px;
  border-top:1px solid rgba(168,137,90,.62);border-right:1px solid rgba(168,137,90,.62);
  opacity:calc(.35 + var(--cinematic-progress,0)*.5);
}

.cinematic-content{
  position:absolute;z-index:5;left:max(7.5%,calc((100vw - var(--maxw))/2 + 28px));right:7.5%;bottom:clamp(4.8rem,10vh,8rem);
  max-width:min(760px,66vw);
}
.cinematic-kicker{
  display:flex;align-items:center;gap:.9rem;margin-bottom:1.1rem;
  font-family:var(--display);font-size:.72rem;font-weight:700;letter-spacing:.25em;text-transform:uppercase;color:var(--stone);
}
.cinematic-kicker::before{content:"";width:44px;height:1px;background:var(--brass)}
.cinematic-beats{position:relative;min-height:255px}
.cinematic-beat{
  position:absolute;inset:0 auto auto 0;width:min(720px,100%);
  opacity:0;visibility:hidden;transform:translate3d(0,24px,0);pointer-events:none;
  transition:none;will-change:opacity,transform;
}
.cinematic-beat.is-active{
  opacity:1;visibility:visible;transform:translate3d(0,0,0);pointer-events:auto;
  transition:opacity .24s ease,transform .38s var(--premium-ease);
}
.cinematic-beat h2{
  max-width:13ch;margin:0 0 .85rem;
  font-family:var(--editorial);font-size:clamp(3.1rem,5.8vw,6rem);line-height:.94;font-weight:400;letter-spacing:-.045em;
  text-shadow:0 3px 28px rgba(0,0,0,.42);
}
.cinematic-beat p{max-width:48ch;margin:0;color:#eee8df;font-size:clamp(1rem,1.5vw,1.22rem);line-height:1.55;text-shadow:0 2px 18px rgba(0,0,0,.5)}
.cinematic-beat .btn{margin-top:1.4rem}

.cinematic-progress{
  position:absolute;z-index:6;left:7.5%;right:7.5%;bottom:3.2rem;height:1px;background:rgba(255,255,255,.2);
}
.cinematic-progress span{
  display:block;width:100%;height:1px;transform-origin:left;transform:scaleX(var(--cinematic-progress,0));
  background:linear-gradient(90deg,var(--brass),var(--stone));box-shadow:0 0 18px rgba(168,137,90,.25);
}
.cinematic-progress span::after{
  content:"";position:absolute;right:0;top:-4px;width:1px;height:9px;background:var(--stone);
}

@media(max-width:900px){
  .cinematic-fallback{grid-template-columns:1fr}
  .cinematic-scroll.cinematic-ready{height:460svh}
  .cinematic-ready .cinematic-sticky{min-height:520px}
  .cinematic-shade{
    background:linear-gradient(180deg,rgba(13,12,11,.12),rgba(13,12,11,.1) 34%,rgba(13,12,11,.86) 77%,rgba(13,12,11,.96));
  }
  .cinematic-vignette{box-shadow:inset 0 0 90px rgba(4,4,3,.28)}
  .cinematic-content{left:22px;right:22px;bottom:clamp(6rem,13vh,8rem);max-width:none}
  .cinematic-beats{min-height:230px}
  .cinematic-beat h2{font-size:clamp(2.15rem,10vw,3.6rem);max-width:12ch}
  .cinematic-beat p{font-size:.98rem;max-width:34ch}
  .cinematic-drawing::before{left:22px;top:14%;width:58vw}
  .cinematic-drawing::after{right:22px;top:9%;width:42px;height:42px}
  .cinematic-progress{left:22px;right:22px;bottom:5.3rem}
}

@media(max-width:560px){
  .cinematic-fallback figure{min-height:440px}
  .cinematic-fallback figcaption{left:1.25rem;right:1.25rem;bottom:1.4rem}
  .cinematic-kicker{font-size:.64rem;letter-spacing:.19em}
  .cinematic-kicker::before{width:28px}
  .cinematic-beat h2{font-size:clamp(2rem,10.5vw,3rem)}
  .cinematic-beat p{line-height:1.45}
  .cinematic-beat .btn{padding:.82rem 1.15rem;font-size:.74rem}
}

@media(prefers-reduced-motion:reduce){
  .cinematic-scroll,.cinematic-scroll.cinematic-ready{height:auto;overflow:visible}
  .cinematic-sticky,.cinematic-ready .cinematic-sticky{display:none!important}
  .cinematic-fallback,.cinematic-ready .cinematic-fallback{display:grid!important}
  .cinematic-fallback img{filter:none}
}

@supports not (height:100svh){
  .cinematic-scroll.cinematic-ready{height:520vh}
  .cinematic-ready .cinematic-sticky{height:100vh}
  @media(max-width:900px){.cinematic-scroll.cinematic-ready{height:460vh}}
}