/* evvoli.it shared: smooth scrolling, horizontal header logo + scroll animation (vars set by site.js) */
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:0}

/* transform-only animation: no layout or repaint of the header while scrolling */
.lg{display:block;width:auto;height:26px;overflow:visible;transform-origin:0 50%;transform:scale(calc(1 - .18 * var(--lg-s, 0)));will-change:transform}
@media (max-width:440px){.lg{height:22px}}

/* the brush-stroke emblem, used on its own above page titles (Gemma, 23 Oct); reveals with its text block */
.emb{display:block;width:auto;height:34px;margin:0 0 22px;align-self:flex-start}
[aria-label="evolve for life"] .emb{align-self:center}
@media (max-width:700px){.emb{height:28px;margin-bottom:18px}}

/* Full-bleed photo sections (.mband): the photo sits in its own frame (.mband-ph).
   Desktop: the frame covers the section exactly, so nothing changes there. */
.mband-ph{position:absolute;inset:0;overflow:hidden}

/* Phones: stop cropping the photo behind the text. The frame becomes a 4:3 band that melts into the page,
   the text sits below it on dark, and some photos zoom in on the product (--z, around the focal point). */
@media (max-width:700px){
  section.mband{display:block!important;min-height:0!important;aspect-ratio:auto!important;padding:0!important;background:#090909}
  section.mband > .mband-ph{position:relative;aspect-ratio:4/3;
    -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 100%);mask-image:linear-gradient(180deg,#000 62%,transparent 100%)}
  section.mband > .mband-ph img{position:absolute!important;inset:0!important;left:0!important;width:100%!important;height:100%!important;object-fit:cover}
  section.mband > div:not(.rv):not(.mband-ph){display:none!important}
  section.mband > .rv{max-width:none!important;margin-top:-28px;padding:0 20px 72px!important}
  section.mband.lbx::after{display:none}
  section.mband[aria-label="evolve for life"] > .rv{padding-top:8px!important}

  /* focal point (--fx --fy) + zoom (--z). `scale` composes with the scroll zoom/focus-pull transforms. */
  img[src$="hero-home-warm.jpg"]{--fx:52%;--fy:62%;--z:1.22}
  img[src$="fan-heating.jpg"]{--fx:42%;--fy:58%;--z:1.12}
  img[src$="ac-living.jpg"]{--fx:42%;--fy:36%;--z:1.15}
  img[src$="about-fabric.jpg"]{--fx:55%;--fy:50%}
  img[src$="ach2.jpg"]{--fx:80%;--fy:22%;--z:1.2}
  img[src$="ac-eu-main.jpg"]{--fx:38%;--fy:40%;--z:1.12}
  img[src$="ac-closeup.jpg"]{--fx:62%;--fy:50%}
  img[src$="ac-window.jpg"]{--fx:45%;--fy:45%;--z:1.1}
  img[src$="hero-home-warm.jpg"],img[src$="fan-heating.jpg"],img[src$="ac-living.jpg"],img[src$="about-fabric.jpg"],
  img[src$="ach2.jpg"],img[src$="ac-eu-main.jpg"],img[src$="ac-closeup.jpg"],img[src$="ac-window.jpg"]{
    object-position:var(--fx,50%) var(--fy,50%)!important;scale:var(--z,1);transform-origin:var(--fx,50%) var(--fy,50%)}
  /* Home and AC heroes have their own 4:5 portrait photo on phones (extended from the real photos): show it whole */
  section.mband > .mband-portrait{aspect-ratio:4/5}
  section.mband > .mband-portrait img{--fx:50%;--fy:50%;--z:1}
}

/* keep the fixed grain on its own GPU layer so it never repaints the page */
.grain{will-change:transform}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.lg{transform:none}}