/* 53 GRAD – Effekt-Ebene (GSAP + ScrollTrigger + Lenis)
   Ersetzt die CSS-Scroll-Timelines, damit alle Effekte in Safari, Firefox und Chrome gleich laufen. */

/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* CSS-Scroll-Animationen abschalten – GSAP übernimmt */
html.fx .hero-img,html.fx .z-img,html.fx .z-intro,html.fx .z-target,html.fx .z-room,html.fx .room-copy,
html.fx .hs-track,html.fx .what-stage img,html.fx .what-1,html.fx .what-2,html.fx .what-3,
html.fx .rv,html.fx .reveal,html.fx .sub-hero .bg{animation:none!important}

/* Sticky-Szenen wiederherstellen (auch dort, wo der Browser keine Scroll-Timelines kann) */
html.fx .z{height:460vh}
html.fx .hs{height:340vh}
html.fx .hs.hs2{height:660vh}
html.fx .what{height:300vh}
html.fx .z-stage,html.fx .hs-stage,html.fx .what-stage{position:sticky;top:0;height:100vh;min-height:0}
/* Handy: kürzere Szenen (weniger Leer-Scrollen), stabile Höhe trotz Adressleiste, GPU-freundlich */
@media (max-width:900px),(hover:none){
  html.fx .z{height:280vh}
  html.fx .what{height:200vh}
  html.fx .hs{height:260vh}
  html.fx .hs.hs2{height:480vh}
  html.fx .z-stage,html.fx .hs-stage,html.fx .what-stage{height:100svh}
  html.fx .z-img,html.fx .what-stage img,html.fx .z-room{will-change:transform}
  html.fx-lite .fx-progress{display:none}
}
html.fx .z-img,html.fx .z-intro,html.fx .z-target{display:block}
html.fx .z-room{position:absolute;inset:0;min-height:0;opacity:0;clip-path:inset(47% 46% 47% 46%)}
html.fx .hs-track{overflow:visible;width:max-content;padding-bottom:0;will-change:transform}
html.fx .z-img{will-change:transform,filter}

/* Startzustände, bevor GSAP greift */
html.fx .what-2,html.fx .what-3{opacity:0}

/* Wort-Masken für Headlines */
.fx-w{display:inline-block;overflow:hidden;vertical-align:top;padding:.2em 0 .08em;margin:-.2em 0 -.08em}
/* Kursive Akzentwörter (Playfair) ragen rechts und unten über – Maske dort großzügiger, sonst werden l, r, g abgeschnitten */
em .fx-w,i .fx-w,.s .fx-w{padding:.2em .24em .32em .08em;margin:-.2em -.24em -.32em -.08em}
.fx-wi{display:inline-block;will-change:transform}
.fx-c{display:inline-block;font-style:normal;will-change:transform}

/* Bild-Reveal */
.fx-clip{will-change:clip-path}
.fx-par{will-change:transform}

/* Scroll-Fortschritt */
.fx-progress{position:fixed;left:0;top:0;height:3px;width:100%;background:#F6B696;transform-origin:0 50%;transform:scaleX(0);z-index:9999;pointer-events:none}

/* Cursor */
.fx-cursor,.fx-ring{position:fixed;left:0;top:0;pointer-events:none;z-index:10010;border-radius:50%;transform:translate(-50%,-50%)}
.fx-cursor{width:8px;height:8px;background:#F6B696;mix-blend-mode:difference}
.fx-ring{width:42px;height:42px;border:1.5px solid rgba(246,182,150,.7);display:grid;place-items:center;font:700 10px/1 Montserrat,system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#07141D;transition:width .35s cubic-bezier(.2,.8,.2,1),height .35s cubic-bezier(.2,.8,.2,1),background .35s,border-color .35s}
.fx-ring span{opacity:0;transition:opacity .2s}
.fx-ring.is-link{width:70px;height:70px;border-color:#F6B696;background:rgba(246,182,150,.12)}
.fx-ring.is-view{width:96px;height:96px;background:#F6B696;border-color:#F6B696}
.fx-ring.is-view span{opacity:1}
@media (hover:none),(pointer:coarse){.fx-cursor,.fx-ring{display:none}}

/* Hover-Feinschliff */
html.fx .btn{will-change:transform}

@media (prefers-reduced-motion:reduce){
  html.fx .rv,html.fx .reveal,html.fx .what-2,html.fx .what-3{opacity:1}
  .fx-cursor,.fx-ring,.fx-progress{display:none}
}