/* Urban Forest Hero: Licht-Aufbau + leichte Maus-Tiefe.
   Portierbar 1:1 ins Live-Paket (liegt neben styles.css, Bilder unter img/).
   Ohne JS bzw. bei prefers-reduced-motion bleibt alles unsichtbar (.ufm = display:none), es steht nur .uf-bg. */

.ufm{display:none;position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none;
  --s:1;--ox:0px;--oy:0px;--soft:120px;
  --r1:-400px;--r2:-400px;--dk:.92;
  --l1x:calc(var(--ox) + var(--s) * 1775px);--l1y:calc(var(--oy) + var(--s) * 132.6px);
  --l2x:calc(var(--ox) + var(--s) * 1949.5px);--l2y:calc(var(--oy) + var(--s) * 251.7px)}
.uf-hero.ufm-on .ufm{display:block}

/* Ebenen: identische Geometrie wie .uf-bg (cover, 68 % / Mitte), damit sie deckungsgleich liegen */
.ufm-far,.ufm-near{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:68% center;
  transform-origin:50% 50%}
.uf-hero.ufm-ready:not(.ufm-lite) .uf-bg{visibility:hidden} /* Lite-Modus: das Ruhebild bleibt sichtbar, der Aufbau liegt darueber */

/* Dunkel-Overlay: Loch waechst von den Lampen aus (zwei Loecher = Schnittmenge der Masken) */
.ufm-dark{position:absolute;inset:0;display:none;background:rgb(9,6,3);opacity:var(--dk);
  -webkit-mask-image:
    radial-gradient(circle at var(--l1x) var(--l1y),transparent var(--r1),rgba(0,0,0,.22) calc(var(--r1) + var(--soft) * .3),rgba(0,0,0,.68) calc(var(--r1) + var(--soft) * .65),#000 calc(var(--r1) + var(--soft))),
    radial-gradient(circle at var(--l2x) var(--l2y),transparent var(--r2),rgba(0,0,0,.22) calc(var(--r2) + var(--soft) * .3),rgba(0,0,0,.68) calc(var(--r2) + var(--soft) * .65),#000 calc(var(--r2) + var(--soft)));
  mask-image:
    radial-gradient(circle at var(--l1x) var(--l1y),transparent var(--r1),rgba(0,0,0,.22) calc(var(--r1) + var(--soft) * .3),rgba(0,0,0,.68) calc(var(--r1) + var(--soft) * .65),#000 calc(var(--r1) + var(--soft))),
    radial-gradient(circle at var(--l2x) var(--l2y),transparent var(--r2),rgba(0,0,0,.22) calc(var(--r2) + var(--soft) * .3),rgba(0,0,0,.68) calc(var(--r2) + var(--soft) * .65),#000 calc(var(--r2) + var(--soft)));
  -webkit-mask-composite:source-in;mask-composite:intersect}
.uf-hero.ufm-pre .ufm-dark{display:block}

/* Lampen: Ausschnitt desselben Fernbilds ueber dem Overlay (Flackern + spaeter Aufhellen per Maus) */
.ufm-lamps{position:absolute;inset:0;transform-origin:50% 50%}
.ufm-lamp{position:absolute;display:block;opacity:0;
  left:calc(var(--ox) + var(--s) * (var(--cx) - 130px));top:calc(var(--oy) + var(--s) * (var(--cy) - 130px));
  width:calc(var(--s) * 260px);height:calc(var(--s) * 260px);
  background-repeat:no-repeat;
  background-size:calc(var(--s) * 2000px) calc(var(--s) * 1116px);
  background-position:calc(var(--s) * (130px - var(--cx))) calc(var(--s) * (130px - var(--cy)));
  -webkit-mask-image:radial-gradient(circle closest-side,#000 60%,transparent 100%);
  mask-image:radial-gradient(circle closest-side,#000 60%,transparent 100%)}
.uf-hero.ufm-s2000 .ufm-lamp{background-image:url("img/uf-far-2000.webp")}
.uf-hero.ufm-s3500 .ufm-lamp{background-image:url("img/uf-far-3500.webp")}
.uf-hero.ufm-lite .ufm-lamp{background-image:var(--ufm-lamp)} /* Lite: Ausschnitt aus dem Ruhebild (URL setzt das JS) */
.ufm-lamp.boost{filter:brightness(1.42) saturate(1.12)}

/* Warmer Schein um die Birnen (nur waehrend des Aufbaus und bei Maus-Naehe, sonst 0) */
.ufm-glow{position:absolute;inset:0;transform-origin:50% 50%}
.ufm-glow i{position:absolute;display:block;opacity:0;mix-blend-mode:screen;
  left:calc(var(--ox) + var(--s) * (var(--cx) - 300px));top:calc(var(--oy) + var(--s) * (var(--cy) - 300px));
  width:calc(var(--s) * 600px);height:calc(var(--s) * 600px);
  background:radial-gradient(circle closest-side,rgba(255,196,110,.62) 0,rgba(255,158,64,.30) 26%,rgba(255,126,36,.10) 58%,rgba(255,120,30,0) 100%)}

/* Lichtstreif: nur innerhalb der Produktmaske, laeuft einmal ueber die Etiketten */
.ufm-streak{position:absolute;inset:0;opacity:0;mix-blend-mode:plus-lighter;overflow:hidden;transform-origin:50% 50%;
  -webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:68% 50%;mask-position:68% 50%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.uf-hero.ufm-s2000 .ufm-streak{-webkit-mask-image:url("img/uf-prodmask-2000.png");mask-image:url("img/uf-prodmask-2000.png")}
.uf-hero.ufm-s3500 .ufm-streak{-webkit-mask-image:url("img/uf-prodmask-3500.png");mask-image:url("img/uf-prodmask-3500.png")}
.uf-hero.ufm-lite .ufm-streak{-webkit-mask-image:url("img/uf-prodmask-2000.png");mask-image:url("img/uf-prodmask-2000.png")}
.ufm-streak i{position:absolute;top:-8%;bottom:-8%;display:block;
  left:calc(var(--ox) + var(--s) * 1060px);width:calc(var(--s) * 110px);
  background:linear-gradient(90deg,rgba(255,196,120,0) 0,rgba(255,190,110,.12) 30%,rgba(255,206,140,.30) 50%,rgba(255,190,110,.12) 70%,rgba(255,196,120,0) 100%);
  transform:translate3d(0,0,0) skewX(-12deg)}

/* Text im Startzustand unsichtbar (gleicher Verborgen-Zustand wie .js .reveal), danach greift die bestehende .reveal-Staffel */
.js .ufm-hold{opacity:0;transform:translateY(28px)}

@media (prefers-reduced-motion:reduce){
  .ufm{display:none!important}
  .uf-hero.ufm-ready:not(.ufm-lite) .uf-bg{visibility:visible}
  .js .ufm-hold{opacity:1;transform:none}
}