/* =====================================================================
   Startseite – Hero "Mitzieher" (kellermanns.de, Okt. 2026)
   Das Startfoto ist ein Mitzieher: lange Belichtung, die Kamera schwenkt
   mit dem Auto, der Fahrer bleibt scharf. Die Animation zeigt genau das:
   1) Einstieg: alles verwischt, die Kamera holt auf, der Fahrer rastet
      scharf ein (kurzes AF-Feld), dann steht das Originalfoto.
   2) Danach ziehen feine Lichtschlieren durch die verwischten Bereiche,
      die Maus gibt etwas Tiefe.
   3) Beim Runterscrollen faehrt das Auto in Fahrtrichtung aus dem Bild.
   Das Foto selbst wird nicht veraendert (keine KI, kein Film).
   Bewegung reduzieren / Datensparmodus: Foto steht wie bisher.
   ===================================================================== */

/* Brennpunkt (Fahrer) -- wird per Skript in Pixel gesetzt */
.hero.mz{
  --mz-x:70%; --mz-y:38%;
  --mz-rx:0px; --mz-ry:0px;
}

/* Beide Bild-Ebenen bewegen sich gemeinsam (Kamera-Schwenk, Maus, Scroll) */
.hero.mz .hero-foto{overflow:hidden; background:#0E0D0C;}
.hero.mz.mz-js .hero-foto img,
.hero.mz.mz-js .mz-schlieren{
  transform:translate3d(var(--mz-tx,0px),0,0) scale(var(--mz-s,1.05));
  will-change:transform;
}

/* Verwischte Fassung: Loch um den Fahrer, damit er scharf bleibt */
.hero.mz .mz-wisch{
  display:block;
  position:absolute; inset:0;
  opacity:var(--mz-w,1);
  -webkit-mask-image:radial-gradient(ellipse var(--mz-rx) var(--mz-ry) at var(--mz-x) var(--mz-y), transparent 0%, transparent 42%, rgba(0,0,0,.65) 72%, #000 100%);
          mask-image:radial-gradient(ellipse var(--mz-rx) var(--mz-ry) at var(--mz-x) var(--mz-y), transparent 0%, transparent 42%, rgba(0,0,0,.65) 72%, #000 100%);
  /* Notbremse: laeuft das Skript nicht, verschwindet die Unschaerfe von selbst */
  animation:mz-notaus .8s ease 3.2s forwards;
}
.hero.mz.mz-js .mz-wisch{animation:none;}
@keyframes mz-notaus{to{opacity:0;}}

/* Lichtschlieren (Canvas), nie ueber dem Fahrer */
.hero.mz .mz-schlieren{
  display:block;
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none;
  mix-blend-mode:screen;
  opacity:0; transition:opacity 1.2s ease;
  -webkit-mask-image:radial-gradient(ellipse calc(var(--mz-hx,200px)) calc(var(--mz-hy,200px)) at var(--mz-x) var(--mz-y), transparent 0%, transparent 55%, #000 100%);
          mask-image:radial-gradient(ellipse calc(var(--mz-hx,200px)) calc(var(--mz-hy,200px)) at var(--mz-x) var(--mz-y), transparent 0%, transparent 55%, #000 100%);
}
.hero.mz.mz-laeuft .mz-schlieren{opacity:1;}

/* Kurzes AF-Feld, wenn der Fahrer scharf einrastet */
.hero.mz .mz-af{
  display:block;
  position:absolute; z-index:2; pointer-events:none;
  left:var(--mz-fx,70%); top:var(--mz-fy,30%);
  width:var(--mz-fg,120px); height:var(--mz-fg,120px);
  transform:translate(-50%,-50%) scale(1.35);
  opacity:0;
}
.hero.mz .mz-af i{position:absolute; width:26%; height:26%; border:0 solid #FFBB03; filter:drop-shadow(0 0 6px rgba(255,187,3,.55));}
.hero.mz .mz-af i:nth-child(1){top:0; left:0; border-top-width:2px; border-left-width:2px;}
.hero.mz .mz-af i:nth-child(2){top:0; right:0; border-top-width:2px; border-right-width:2px;}
.hero.mz .mz-af i:nth-child(3){bottom:0; left:0; border-bottom-width:2px; border-left-width:2px;}
.hero.mz .mz-af i:nth-child(4){bottom:0; right:0; border-bottom-width:2px; border-right-width:2px;}
.hero.mz.mz-af-an .mz-af{animation:mz-af 1.5s cubic-bezier(.2,.7,.2,1) forwards;}
@keyframes mz-af{
  0%{opacity:0; transform:translate(-50%,-50%) scale(1.35);}
  18%{opacity:1; transform:translate(-50%,-50%) scale(1);}
  30%{opacity:.35;} 40%{opacity:1;}
  75%{opacity:1; transform:translate(-50%,-50%) scale(1);}
  100%{opacity:0; transform:translate(-50%,-50%) scale(.96);}
}
@media (max-width:760px){ .hero.mz .mz-af{display:none;} }

/* Kamera-Anzeige unten rechts, innerhalb der Goldecken */
.hero.mz .mz-anzeige{
  display:flex; align-items:center; gap:.75rem;
  position:absolute; z-index:3; pointer-events:none;
  right:calc(clamp(1.4rem,3.5vw,2.6rem) + clamp(1rem,2vw,1.6rem));
  bottom:calc(clamp(1.4rem,3.5vw,2.6rem) + clamp(.8rem,1.6vw,1.1rem));
  font-family:'Inter',sans-serif; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:#F3EFE6; text-shadow:0 1px 3px rgba(0,0,0,.7);
  padding:.36rem .7rem .34rem .6rem; border-radius:4px;
  background:rgba(14,13,12,.42); border:1px solid rgba(243,239,230,.16);
  opacity:0; transform:translateY(6px);
  transition:opacity .6s ease, transform .6s ease, border-color .4s ease;
}
.hero.mz.mz-js .mz-anzeige{opacity:1; transform:none;}
.hero.mz.mz-scharf .mz-anzeige{border-color:rgba(255,187,3,.42);}
.mz-punkt{width:8px; height:8px; border-radius:50%; background:#6E665B; flex:none; transition:background .3s ease, box-shadow .3s ease;}
.hero.mz.mz-scharf .mz-punkt{background:#FFBB03; box-shadow:0 0 9px rgba(255,187,3,.75);}
.mz-status{font-weight:600; white-space:nowrap; transition:opacity .25s ease, color .3s ease;}
.mz-status.weg{opacity:0;}
.hero.mz.mz-scharf .mz-status{color:#FFBB03;}
/* kleine Schwenk-Leiste: der Strich laeuft mit */
.mz-schwenk{position:relative; width:46px; height:1px; background:rgba(243,239,230,.28); flex:none;}
.mz-schwenk i{position:absolute; top:-3px; left:0; width:2px; height:7px; background:#FFBB03; border-radius:1px;
  animation:mz-schwenk 2.4s cubic-bezier(.45,0,.55,1) infinite alternate;}
@keyframes mz-schwenk{from{left:0;} to{left:calc(100% - 2px);}}
.mz-ort{opacity:.82; white-space:nowrap;}
@media (max-width:760px){
  .hero.mz .mz-anzeige{font-size:.64rem; gap:.55rem;}
  .mz-ort, .mz-schwenk{display:none;}
}

/* Ueberschrift: Zeile fuer Zeile, "Echte Fotografie." zieht scharf */
.hero.mz .mz-z{
  display:inline-block;
  opacity:0;
  animation:mz-notzeigen .5s ease 3s forwards;
}
.hero.mz.mz-js .mz-z{
  animation:none;
  transform:translateX(-22px); filter:blur(5px);
  transition:opacity .8s ease, transform 1s cubic-bezier(.16,.8,.24,1), filter .9s ease;
}
.hero.mz.mz-js .mz-z3{transform:translateX(-56px) scaleX(1.06); transform-origin:left center; filter:blur(12px);}
.hero.mz .mz-z.da{opacity:1; transform:none; filter:none;}
@keyframes mz-notzeigen{to{opacity:1;}}

/* Text tritt beim Wegscrollen zurueck */
.hero.mz.mz-js .hero-inhalt{opacity:var(--mz-t,1);}

/* Bewegung reduzieren: alles wie bisher, nur das Foto */
@media (prefers-reduced-motion: reduce){
  .hero.mz .mz-wisch, .hero.mz .mz-schlieren, .hero.mz .mz-af{display:none !important;}
  .hero.mz .mz-z{opacity:1 !important; transform:none !important; filter:none !important; animation:none !important; transition:none !important;}
  .hero.mz .hero-foto img{transform:none !important;}
  .hero.mz .hero-inhalt{opacity:1 !important;}
  .mz-schwenk i{animation:none;}
}