/* ==========================================================================
   Roofing Relief — scenes
   A scene is four baked material photographs stacked in a perspective plane,
   with clip-paths that move as you scroll. No canvas, no WebGL, no filters at
   runtime: the only thing that changes per frame is a clip-path, which the
   compositor handles on the GPU. Textures are shared across every page, so
   after the first one they are cache hits.
   ========================================================================== */

.scn{
  position:relative; width:100%; aspect-ratio:16/10;
  border-radius:var(--r-lg); overflow:hidden; isolation:isolate; margin:0;
  background:linear-gradient(#20344d 0%, #4a6079 34%, #93a0ab 62%, #c9b79f 88%);
}
@media (max-width:760px){ .scn{aspect-ratio:4/3} }

.scn__stage{
  position:absolute; left:50%; top:56%;
  width:150%; aspect-ratio:900/570;
  transform:translate(-50%,-50%) perspective(1150px) rotateX(54deg) rotateZ(-7deg);
  transform-origin:50% 50%;
}
.scn__lyr{position:absolute; inset:0; background-size:cover; background-position:center}

/* Backgrounds are only attached once the scene is near the viewport, so a page
   with a scene below the fold does not pay for the textures up front. */
.scn.is-ready .scn__lyr--deck  {background-image:var(--tex-deck)}
.scn.is-ready .scn__lyr--under {background-image:var(--tex-under)}
.scn.is-ready .scn__lyr--new   {background-image:var(--tex-new)}
.scn.is-ready .scn__lyr--old   {background-image:var(--tex-old)}

.scn__step{
  position:absolute; top:-2%; bottom:-2%; width:3px; z-index:5;
  background:linear-gradient(90deg, rgba(8,12,18,.55), rgba(8,12,18,0));
  filter:blur(1.2px);
}
.scn__ridge{
  position:absolute; left:-1%; right:-1%; top:-1.2%; height:3.4%;
  background:linear-gradient(#5d5d63, #3a3a40 55%, #2b2b30);
  border-radius:3px; z-index:6; box-shadow:0 3px 7px rgba(8,12,18,.45);
}

/* one sun, upper left; every shadow in the scene agrees with it */
.scn__sun{
  position:absolute; inset:0; pointer-events:none; z-index:6;
  background:radial-gradient(120% 90% at 14% 4%, rgba(255,226,180,.34), transparent 58%);
  mix-blend-mode:screen;
}
.scn__vig{
  position:absolute; inset:0; pointer-events:none; z-index:7;
  background:radial-gradient(130% 100% at 50% 40%, transparent 52%, rgba(10,18,30,.34));
}

.scn__cap{
  position:absolute; left:0; right:0; bottom:0; z-index:9;
  padding:clamp(40px,7vw,58px) clamp(16px,2.4vw,26px) 18px;
  background:linear-gradient(transparent, rgba(8,14,24,.84));
  color:#fff; font-family:var(--text); font-size:15px; line-height:1.5;
  display:flex; gap:10px; align-items:baseline; flex-wrap:wrap;
}
.scn__cap b{font-family:var(--display); font-weight:800; font-size:16px; flex:none}
.scn__cap span{color:#C6D0DC}
@media (max-width:560px){ .scn__cap{font-size:14px} .scn__cap b{font-size:15px} }

.scn__rail{position:absolute; left:0; right:0; bottom:0; height:3px; z-index:10;
           background:rgba(255,255,255,.16)}
.scn__rail i{position:absolute; inset:0 auto 0 0; width:0; background:var(--copper)}

/* Reduced motion: show the finished state and never move. The caption still
   describes the work, so no information is lost. */
@media (prefers-reduced-motion:reduce){
  .scn__rail{display:none}
  .scn__step{display:none}
}