/* Prefooter: the TV room standing on the footer's green, the footer links below.
   Only layout and the photo live here (always loaded, tiny). Screens, switches, lamp and
   their motion are in prefooter/tv.css + tv.js, requested when the footer is near.

   Crop: the photo (--iw × --ih) is placed in a stage and the room shows the rectangle
   --cx/--cy/--cw/--ch of it, so every hotspot keeps its photo coordinates at any crop.

   Green surface: the footer's own angled top edge (the site's original cut: low on the
   left, peak at 62%, mid on the right), now as the whole green body. It starts at the
   height of the TV stand (--sv-floor, share of the room's height), so furniture, legs
   and rug stand on the green while heads and lamp rise over the page. */

#footer.site-footer{
  --sv-footer-green:#f4f6ef;
  --sv-room-w:min(var(--max),calc(100cqw - 80px));
  --sv-room-ratio:.5395;           /* --ch / --cw */
  --sv-floor:.6;                   /* peak of the green edge, from the top of the room */
  --sv-cap:clamp(26px,3.4vw,48px); /* height of the angled edge */
  position:relative;isolation:isolate;container-type:inline-size;background:transparent;box-shadow:none;padding-top:22px}
/* Same pseudo-element as the old 26 px strip of home-editorial.css: reset and enlarged. */
#footer.site-footer::before{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:-2px;height:auto;pointer-events:none;
  top:calc(22px + var(--sv-room-w) * var(--sv-room-ratio) * var(--sv-floor));
  background:var(--sv-footer-green);transition:background-color .6s ease;
  clip-path:polygon(0 calc(var(--sv-cap) * .75),62% 0,100% calc(var(--sv-cap) * .4),100% 100%,0 100%)}

.sv-prefooter{width:var(--sv-room-w);margin:0 auto 30px;position:relative}
.sv-room{--iw:1774;--ih:957;--cx:0;--cy:0;--cw:1774;--ch:957;position:relative;aspect-ratio:var(--cw)/var(--ch);overflow:hidden}
.sv-room-stage{position:absolute;width:calc(100% * var(--iw) / var(--cw));aspect-ratio:var(--iw)/var(--ih);left:calc(-100% * var(--cx) / var(--cw));top:calc(-100% * var(--cy) / var(--ch))}
.sv-room-photo{display:block;width:100%;height:auto;transition:filter .9s ease}

/* Pieces that move (the man eating): full-stage layers turning around --ox/--oy, the image at
   its box. Static here, so the photo is whole before tv.css arrives or without it. */
.sv-piece{position:absolute;inset:0;pointer-events:none;transform-origin:var(--ox) var(--oy)}
.sv-piece>img{position:absolute;display:block;max-width:none;transition:filter .9s ease}
/* Noodle window: shows one period of a two-period strip (at rest, the photo's noodles). */
.sv-piece-window{position:absolute;overflow:hidden;pointer-events:none}
.sv-piece-window>img{position:absolute;left:0;top:0;width:100%;height:200%;display:block;max-width:none;transition:filter .9s ease}

/* Lights off: the room falls into shadow; only the screens keep shining (tv.css). */
html[data-theme="dark"] .sv-room-photo,html[data-theme="dark"] .sv-piece>img,html[data-theme="dark"] .sv-piece-window>img{filter:brightness(.52) contrast(1.06)}

@media(max-width:1000px){#footer.site-footer{--sv-room-w:calc(100cqw - 48px)}}

/* Phones: the lamp, the man on the sofa, the TV on its stand and the whole rug; soft side edges. */
@media(max-width:760px){
#footer.site-footer{--sv-room-ratio:.9;--sv-floor:.62;--sv-cap:clamp(18px,5vw,30px)}
.sv-room{--cx:165;--cy:50;--cw:1000;--ch:900;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.sv-prefooter{margin-bottom:24px}
}
@media(max-width:480px){#footer.site-footer{--sv-room-w:calc(100cqw - 36px)}}

@media(prefers-reduced-motion:reduce){.sv-room-photo,#footer.site-footer::before{transition:none}}