/* Prefooter: the TV room standing on the footer's green, the footer links below.
   Only layout and the photo live here (loaded by prefooter-loader.js when the footer is near). 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(1300px,var(--max),calc(100cqw - 80px));
  --sv-room-ratio:.5;           /* --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}
/* --iw/--ih/--cw/--ch: the 1774×887 design plane every position is a percentage of; the image files themselves are 1300×650 WebP (same 2:1), the room's maximum width (--sv-room-w). */
.sv-room{--iw:1774;--ih:887;--cx:0;--cy:0;--cw:1774;--ch:887;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}

html[data-theme="dark"] .sv-room-photo{filter:brightness(.42) contrast(1.08)}

@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}}

/* Foreground pieces use the intact reference; the plate has these parts removed. */
.sv-diner-arm,.sv-sofa-foot{position:absolute;inset:0;pointer-events:none}
.sv-diner-arm{transform-origin:77.3% 51.8%}
.sv-diner-arm>img,.sv-sofa-foot>img{position:absolute;inset:0;width:100%;height:100%;max-width:none;transition:filter .35s ease}
.sv-arm-texture{clip-path:polygon(74.9718% 35.6257%,78.3540% 35.5130%,80.1015% 37.3168%,83.3145% 37.8805%,83.3709% 39.4589%,79.7632% 39.4589%,79.4814% 43.0665%,80.1578% 47.4634%,80.2142% 52.3112%,77.2266% 52.9876%,74.7463% 50.7328%,74.2954% 45.6595%)}
.sv-sofa-foot{transform-origin:35.9% 73.2%}
.sv-sofa-foot>img{clip-path:polygon(31.8489% 68.9966%,33.7091% 66.4036%,35.0056% 71.8151%,36.4713% 72.1533%,37.4295% 74.2954%,39.1770% 76.0992%,41.2627% 77.2266%,43.4047% 77.2266%,44.1375% 78.9177%,43.7993% 80.7215%,41.3191% 82.7508%,38.3315% 83.3145%,35.2875% 84.4419%,34.4983% 82.8636%,34.1601% 77.7903%,32.5817% 73.7317%)}
.sv-noodles{position:absolute;left:81.68%;top:38.9%;width:1.41%;height:8.9%;overflow:hidden}
.sv-noodles-texture{position:absolute;inset:0;background-image:none;background-size:7096% 1123%;background-position:82.847% 42.698%}
html[data-theme="dark"] .sv-arm-texture,html[data-theme="dark"] .sv-sofa-foot>img,html[data-theme="dark"] .sv-noodles{filter:brightness(.42) contrast(1.08)}
/* A local copy dims the actual filament independently from the room. */
.sv-bulb-off{position:absolute;inset:0;pointer-events:none;background:none 0 0/100% 100%;clip-path:ellipse(1.15% 3.2% at 14.55% 19%);filter:grayscale(1) brightness(.19);opacity:0;transition:opacity .18s}
.sv-bulb-bloom{position:absolute;left:9.5%;top:10%;width:10%;height:18%;pointer-events:none;background:radial-gradient(ellipse,rgba(255,249,224,.9) 0,rgba(255,216,137,.55) 12%,rgba(255,193,90,.2) 35%,transparent 68%);mix-blend-mode:screen;opacity:.9;transition:opacity .18s}
html[data-theme="dark"] .sv-bulb-off{opacity:1}
html[data-theme="dark"] .sv-bulb-bloom{opacity:0}

/* Two identical cropped strand tiles feed the mouth without an empty/reset phase. */
.sv-noodles{mask-image:linear-gradient(transparent,#000 7%,#000 94%,transparent)}
.sv-noodles-texture{background:none}
.sv-noodles-texture::before,.sv-noodles-texture::after{content:"";position:absolute;inset:0;background-image:none;background-size:7096% 1123%;background-position:82.847% 42.698%}
.sv-noodles-texture::after{transform:translateY(100%)}
/* Keep the glass bulb readable; light comes from its narrow filament, not a yellow disk. */
.sv-bulb-bloom{left:11.3%;top:12.5%;width:6.5%;height:13%;background:radial-gradient(ellipse,rgba(255,252,235,.65),rgba(255,218,150,.28) 25%,rgba(255,199,114,.09) 48%,transparent 72%)}
.sv-bulb-bloom::after{content:"";position:absolute;left:46%;top:32%;width:8%;height:32%;border-radius:50%;background:#fff3c9;box-shadow:0 0 7px 2px #ffd79a,0 0 20px 5px #ffc77788;opacity:.65}

/* The photographic filament supplies the detail; no artificial bar over the bulb. */
.sv-bulb-bloom::after{content:none}
.sv-bulb-bloom{left:11.55%;top:12.5%;width:6%;height:12%;background:radial-gradient(ellipse,rgba(255,235,190,.22),rgba(255,211,140,.12) 30%,transparent 70%)}
/* The room's background images are only requested once the footer is about to enter the screen:
   prefooter-loader.js adds .is-near then (a background image downloads as soon as its rule
   applies, even far below the fold; the <img> elements are loading="lazy"). WebP, ~200 KB each. */
.sv-prefooter.is-near .sv-noodles-texture::before,.sv-prefooter.is-near .sv-noodles-texture::after{background-image:url('prefooter/sala-source-v3.webp')} /* the element itself keeps background:none, as before */
.sv-prefooter.is-near .sv-bulb-off{background:url('prefooter/sala-plate-v5.webp') 0 0/100% 100%}