/* MR.LANDSHUT: Effekte (Scrollen, Klicken, Startseite). Alles abschaltbar über "Bewegung reduzieren". */

/* Scroll-Fortschritt */
.fx-progress{position:fixed;left:0;top:0;right:0;height:3px;background:#fff;transform:scaleX(0);transform-origin:left;z-index:90;pointer-events:none;mix-blend-mode:difference}

/* Seitenübergang */
body{animation:fxPage .7s var(--ease,ease) both}
@keyframes fxPage{from{opacity:0}to{opacity:1}}
html.fx-leave body{opacity:0;transition:opacity .28s ease}

/* Einblenden beim Scrollen (nur wenn JavaScript läuft) */
html.fx-ready .fx-in{opacity:0;translate:0 34px;transition:opacity 1s var(--ease,ease),translate 1s var(--ease,ease);transition-delay:var(--d,0s)}
html.fx-ready .fx-in.fx-on{opacity:1;translate:0 0}

/* Überschriften: Zeichen steigen nacheinander auf */
.fx-word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.fx-ch{display:inline-block;translate:0 115%;animation:fxCh 1s var(--ease,ease) forwards;animation-delay:calc(var(--i) * 45ms + .15s)}
@keyframes fxCh{to{translate:0 0}}

/* Klick-Welle */
.fx-rip{position:relative;overflow:hidden}
.fx-wave{position:absolute;border-radius:50%!important;background:currentColor;opacity:.35;pointer-events:none;transform:scale(0);animation:fxWave .7s ease-out forwards}
@keyframes fxWave{to{transform:scale(1);opacity:0}}

/* Magnet-Buttons */
.btn,.cart-btn{translate:var(--mx,0) var(--my,0);transition:translate .25s ease-out}

/* Kacheln: leichte 3D-Neigung */
.logos li,.event-card,.product{transform-style:preserve-3d}
.fx-tilt{transition:transform .25s ease-out,background .4s}
.fx-tilt.fx-tilting{transition:transform .08s linear}

/* Seitenkopf: Hintergrundbild bewegt sich beim Scrollen und atmet leicht */
.page-head .ph-bg{animation:fxBreath 22s ease-in-out infinite alternate;will-change:transform}
@keyframes fxBreath{from{scale:1.04}to{scale:1.14}}

/* Startseite: Hintergrundbild mit langsamer Kamerafahrt */
.hero .bg img{animation:fxKen 30s ease-in-out infinite alternate;transform-origin:62% 42%;will-change:transform}
@keyframes fxKen{0%{transform:scale(1.06) translate3d(0,0,0)}50%{transform:scale(1.16) translate3d(-1.6%,-1.2%,0)}100%{transform:scale(1.24) translate3d(1.4%,1%,0)}}
.hero .btn{box-shadow:0 0 0 0 rgba(255,255,255,.55);animation:fxPulse 3.2s ease-out 1.5s infinite}
@keyframes fxPulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.5)}70%,100%{box-shadow:0 0 0 22px rgba(255,255,255,0)}}

/* Marquee-Logos beim Überfahren leicht anheben (ohne Anhalten) */
.mq-group li{transition:transform .4s var(--ease,ease)}
.mq-group li:hover{transform:translateY(-3px) scale(1.06)}

@media (prefers-reduced-motion:reduce){
  body,.fx-ch,.page-head .ph-bg,.hero .bg img,.hero .btn{animation:none!important}
  html.fx-ready .fx-in{opacity:1;translate:none;transition:none}
  .fx-ch{translate:none}
}