/*
  Home page only: the roof scene beside the services heading (partial roof-scene.html).

  Scroll-scrubbed with CSS scroll-driven animations (the animation-timeline technique from Voltpunkten El's hero
  fade-and-drift). The roof's state is a direct function of scroll position: fully assembled while the house is
  in view near the top, then the ridge cap and the five tile rows lift off one after another as the house scrolls
  up and away. Scrolling back up reassembles it, frame for frame.

  Timing: driven by a view() timeline on .roof-track, an invisible box over the roof only. The sequence starts when
  the roof's top edge enters at the bottom of the viewport (cover 0%) and is complete when it reaches the top
  (contain 100%), so it always plays over one viewport height of scroll, on phones and desktops alike. The top of
  the viewport is taken as the bottom of the sticky header (view-timeline-inset), so the end is never hidden under
  it. All pieces share that range; the order (ridge cap, then rows from the top) is set by each piece's keyframes.

  Start cap: on tall screens the roof is already on screen at load. --roof-start (set once by the inline script in
  roof-scene.html: how far the roof is into its cover range at scroll 0, else 0) moves the start to the top of the
  page there, so the roof is fully assembled until the visitor scrolls. Elsewhere it is 0, the plain view() range.
  The animation is only attached once that script has run ([data-roof-ready]), so even the first painted frame is
  assembled; without JS the roof stays assembled and static.

  Cost: every moving piece is its own layer animated with transform and opacity only. Nothing is redrawn while
  scrolling; the browser only re-composites the layers (measured, see README "Roof scene").

  Without support for animation-timeline, or with reduced motion: the roof is simply shown assembled, no motion.
*/
/* The scene is 1.5x the first version (440px -> 660px wide). The heading column keeps at least 300px. */
.services-head{display:grid;grid-template-columns:minmax(300px,1fr) minmax(0,660px);gap:56px;align-items:center;margin-bottom:56px}
.services-head .section-head{margin-bottom:0}
/* Flying roof pieces must never widen the page (Voltpunkten El lesson): clip sideways, keep vertical overflow. */
.section-services{overflow-x:clip}

.roof-scene{position:relative;width:100%;aspect-ratio:480/340}
/* Roof bounds in the 480x340 viewBox: x 52-428, y 72 (ridge cap top) - 178 (eaves). */
.roof-track{position:absolute;left:10.8%;width:78.4%;top:21.2%;height:31.2%;pointer-events:none}
.roof-scene svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}

@media (max-width:900px){
  .services-head{grid-template-columns:1fr;gap:32px}
  .roof-scene{max-width:600px;justify-self:center}
}

@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    /* Timeline subject and scope: the track is a sibling of the pieces, so the scene shares its timeline. */
    .roof-scene{timeline-scope:--roof}
    .roof-track{view-timeline:--roof block;view-timeline-inset:var(--header-h) 0px}
    .roof-scene[data-roof-ready] .roof-piece{
      will-change:transform,opacity;
      animation:linear both;
      animation-timeline:--roof;
      animation-range:cover var(--roof-start,0px) contain 100%;
    }
    /* One keyframes per piece: [start%, end%] of the shared range, overlapping so it reads as one motion. */
    @keyframes roof-ridge{0%{transform:none;opacity:1;animation-timing-function:cubic-bezier(.45,0,.7,.4)}40%{transform:translate(0%,-34%) rotate(-4deg);opacity:0}100%{transform:translate(0%,-34%) rotate(-4deg);opacity:0}}
    .roof-scene[data-roof-ready] .roof-ridge{animation-name:roof-ridge;transform-origin:50% 22.6%}
    @keyframes roof-row-1{0%{transform:none;opacity:1}10%{transform:none;opacity:1;animation-timing-function:cubic-bezier(.45,0,.7,.4)}52%{transform:translate(14%,-44%) rotate(9deg);opacity:0}100%{transform:translate(14%,-44%) rotate(9deg);opacity:0}}
    .roof-scene[data-roof-ready] .roof-row-1{animation-name:roof-row-1;transform-origin:50% 26.4%}
    @keyframes roof-row-2{0%{transform:none;opacity:1}20%{transform:none;opacity:1;animation-timing-function:cubic-bezier(.45,0,.7,.4)}64%{transform:translate(-16%,-42%) rotate(-8deg);opacity:0}100%{transform:translate(-16%,-42%) rotate(-8deg);opacity:0}}
    .roof-scene[data-roof-ready] .roof-row-2{animation-name:roof-row-2;transform-origin:50% 32%}
    @keyframes roof-row-3{0%{transform:none;opacity:1}30%{transform:none;opacity:1;animation-timing-function:cubic-bezier(.45,0,.7,.4)}76%{transform:translate(17%,-40%) rotate(7deg);opacity:0}100%{transform:translate(17%,-40%) rotate(7deg);opacity:0}}
    .roof-scene[data-roof-ready] .roof-row-3{animation-name:roof-row-3;transform-origin:50% 37.6%}
    @keyframes roof-row-4{0%{transform:none;opacity:1}40%{transform:none;opacity:1;animation-timing-function:cubic-bezier(.45,0,.7,.4)}88%{transform:translate(-14%,-38%) rotate(-9deg);opacity:0}100%{transform:translate(-14%,-38%) rotate(-9deg);opacity:0}}
    .roof-scene[data-roof-ready] .roof-row-4{animation-name:roof-row-4;transform-origin:50% 43.3%}
    @keyframes roof-row-5{0%{transform:none;opacity:1}50%{transform:none;opacity:1;animation-timing-function:cubic-bezier(.45,0,.7,.4)}100%{transform:translate(15%,-36%) rotate(6deg);opacity:0}}
    .roof-scene[data-roof-ready] .roof-row-5{animation-name:roof-row-5;transform-origin:50% 49%}
  }
}