/* Schloss 11 Kosmetik: Bewegung (18.10.2026, Runde 3: live). Nach site.css geladen; Quelle und Prüfung: entwuerfe/bewegung/.
   Jede Wirkung hängt an html.fx-<name> (setzt js/bewegung.js). Bei „Bewegung reduzieren“ setzt das Skript keine Klasse: alles bleibt still. */

/* 1 Federn im Wind: Lage setzt das Skript über translate/rotate, die Grunddrehung aus site.css bleibt */
html.fx-wind .wm { will-change: translate, rotate; }

/* 2 Federn unten: Fläche ohne Bild, zwei Federn als eigene Ebene (Farbe = Feder im alten Bild unter dem Grünschleier) */
.fx-federn { display: none; }
html.fx-unten .unten { position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(rgba(44,62,47,.28), rgba(44,62,47,.28)), #5d755b; }
html.fx-unten .fx-federn { display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
html.fx-unten .fx-federn i { position: absolute; display: block; background: #596d55; will-change: translate, rotate;
  -webkit-mask: url("/img/feder-gross.png") 0 0 / 100% 100% no-repeat; mask: url("/img/feder-gross.png") 0 0 / 100% 100% no-repeat; }
html.fx-unten .unten > .kontakt, html.fx-unten .unten > .foot { position: relative; z-index: 1; }

/* 3 Federn wippen: dieselbe Glocke wie beim Antippen (site.css: .ring, Keyframes „klingel“, Drehpunkt oben).
   Das Skript setzt .ring beim Erscheinen nacheinander und danach ab und zu; hier dazu Darüberfahren. */
html.fx-wippen .foot .feather { transform-origin: 50% 0; }
@media (hover: hover) {
  html.fx-wippen .kboxes li:hover .feather, html.fx-wippen .kboxes a:focus-visible .feather,
  html.fx-wippen .foot:hover .feather { animation: klingel 1.1s cubic-bezier(.3,.6,.3,1) both; }
}

/* 4 Fotos mit Tiefe: Rahmen außen, Bild gleitet innen (Rundgang); Aqua-Glow-Foto über --y (Skript) */
.fx-rahmen, .fx-clip { display: contents; }
html.fx-tiefe .rahmen .fx-rahmen { display: block; aspect-ratio: 4 / 3; padding: 3px; background: var(--deep); border-radius: 10px; box-shadow: 0 14px 30px -22px rgba(40,50,30,.4); }
html.fx-tiefe .rahmen .fx-clip { display: block; height: 100%; overflow: hidden; border-radius: 7px; isolation: isolate; transform: translateZ(0); }
html.fx-tiefe .rahmen .fx-clip img { height: 100%; aspect-ratio: auto; padding: 0; background: none; border-radius: 0; box-shadow: none;
  scale: 1.14; translate: 0 var(--fx-py, 0%); transition: scale 1.1s cubic-bezier(.2,.7,.2,1); will-change: translate; }
@media (hover: hover) { html.fx-tiefe .rahmen:hover .fx-clip img { scale: 1.2; } }

/* 5 Goldener Faden: Linie durch die Schritt-Kreise (Kreismitte 17 px), Kreise füllen sich, wenn die Linie sie erreicht */
html.fx-faden .steps { position: relative; }
html.fx-faden .steps::before, html.fx-faden .steps::after { content: ""; position: absolute; left: 16px; top: 17px; width: 2px;
  height: var(--fx-len, 0px); border-radius: 2px; pointer-events: none; }
html.fx-faden .steps::before { background: rgba(234,215,147,.2); }
html.fx-faden .steps::after { background: var(--gold); transform-origin: 50% 0; scale: 1 var(--fx-p, 0); }
html.fx-faden .steps li::before { position: relative; z-index: 1; transition: background-color .45s ease, color .45s ease, box-shadow .45s ease; }
html.fx-faden .steps li:not(.fx-an)::before { background: var(--deep); color: var(--gold); box-shadow: inset 0 0 0 1.5px rgba(234,215,147,.6); }
html.fx-faden .steps li.fx-an::before { animation: fx-pop .55s cubic-bezier(.3,1.5,.5,1); }
html.fx-faden .steps li b, html.fx-faden .steps li span { transition: opacity .5s ease; }
html.fx-faden .steps li:not(.fx-an) b, html.fx-faden .steps li:not(.fx-an) span { opacity: .55; }
@keyframes fx-pop { 0% { scale: .82; } 60% { scale: 1.1; } 100% { scale: 1; } }

/* 6 Preise gleiten: Pfeil dreht schon beim Zuklappen */
html.fx-preise .acc details.fx-zu summary::after { transform: rotate(45deg) translateY(-3px); }
html.fx-preise .acc details > :not(summary) { transition: opacity .35s ease; }
html.fx-preise .acc details.fx-zu > :not(summary) { opacity: 0; }

/* 7 Titelbild atmet: Kopie des Titelbilds als Ebene, zoomt in 15 s auf 109 % und zurück (Runde 1: 24 s / 106 %, Runde 2: 20 s / 108 %).
   Handy: Drehpunkt unten, damit der Übergang ins Grün an der Unterkante bleibt. Aqua-Glow-Foto atmet versetzt und langsamer (17 s). */
html.fx-atmen .hero-img { overflow: hidden; }
html.fx-atmen .hero-img::before { content: ""; position: absolute; inset: 0; background: inherit; transform-origin: 50% 100%;
  animation: fx-atmen 15s ease-in-out infinite alternate; will-change: scale; }
@media (max-width: 759px) { html.fx-atmen .hero-img { position: relative; } }
@media (min-width: 760px) { html.fx-atmen .hero-img::before { transform-origin: 50% 36%; } }
@keyframes fx-atmen { from { scale: 1; } to { scale: 1.09; } }
html.fx-atmen .aqband .ph::before { transform-origin: 50% 45%; animation: fx-atmen 17s ease-in-out -6s infinite alternate; will-change: scale; }

/* 8 Karten heben sich: Behandlungs-Karten und Regal (nur mit Maus); beim Filtern gleiten die Produkte herein */
@media (hover: hover) {
  html.fx-hover .card { transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1), translate .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease; }
  html.fx-hover .card:hover { translate: 0 -4.5px; box-shadow: 0 18px 34px -22px rgba(40,60,40,.45); border-color: #dcc77f; }
  html.fx-hover .shelf .item img { transition: scale .9s cubic-bezier(.2,.7,.2,1); }
  html.fx-hover .shelf .item:hover img { scale: 1.05; }
}
/* backwards statt both (20.10.2026): nach dem Hereingleiten nicht mehr wirksam; eine wirksame Opacity-Animation macht in Chrome
   die 3D-Ebene der Produktkarten flach, dann zeigte das Umdrehen die gespiegelte Vorderseite. Endzustand ist derselbe. */
html.fx-hover .shelf .item.fx-rein { animation: fx-rein .55s cubic-bezier(.2,.7,.2,1) backwards; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes fx-rein { from { opacity: 0; translate: 0 18px; } }

/* 9 Überschriften steigen auf: Wort für Wort (Runde 2 langsamer: vorher .7/.9 s, 75 ms Abstand) */
/* 18.10.2026 abends: ohne filter: blur (wurde je Wort und Bild neu gemalt, bei 240 Hz zu teuer); Tempo der Runde 2 bleibt (1,1 / 1,4 s, 120 ms); schnelles Scrollen: sofort */
html.fx-zeilen .fx-w { display: inline-block; transition: opacity 1.1s ease, translate 1.4s cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--i, 0) * 120ms); }
html.fx-zeilen .fx-pre .fx-w { opacity: 0; translate: 0 .55em; transition: none; }
html.fx-zeilen .fx-sofort .fx-w { transition: none; }

/* 10 Logo-Feder schwebt: nach dem Hineinschweben (drift, 2,9 s) leicht weiter in Bewegung */
@keyframes fx-logo { 0%, 100% { rotate: 0deg; translate: 0 0; } 28% { rotate: -3.9deg; translate: 1px -2.2px; } 62% { rotate: 2.8deg; translate: -1px 1.7px; } }
html.fx-logo .tab .feather { animation: drift 2.9s cubic-bezier(.33,.1,.3,1) both, fx-logo 7s ease-in-out 2.9s infinite; }

/* 11 Einblenden mit Schwung: gestaffelt nach Lage (Skript setzt --fx-i) */
html.fx-schwung .fx-rv { transition: opacity .9s ease, translate 1.05s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--fx-i, 0) * 110ms); }
html.fx-schwung .fx-rv.fx-sofort, html.fx-schwung .rv.sofort { transition: none; }   /* schnelles Scrollen (18.10.2026 abends) */
html.fx-schwung .fx-rv.fx-vor { opacity: 0; translate: 0 29px; transition: none; }
html.fx-schwung .rv.fx-stf { transition-delay: calc(var(--fx-i, 0) * 120ms); }

/* 12 Glanz: Lichtstreif über die „Neu“-Etiketten (alle 5,9 s), einmal über „Termin buchen“ oben, beim Darüberfahren über goldene Knöpfe */
html.fx-glanz .tag, html.fx-glanz .acc .neu { overflow: hidden; isolation: isolate; }
html.fx-glanz .aqband .eyebrow .tag, html.fx-glanz .acc .neu { position: relative; top: auto; right: auto; }   /* .tag hat top/right für die Kartenecke */
html.fx-glanz .tag::after, html.fx-glanz .acc .neu::after, html.fx-glanz .btn-gold::after, html.fx-glanz .btn-deep::after {
  content: ""; position: absolute; top: -2px; bottom: -2px; left: 0; width: 55%; pointer-events: none;
  background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.6) 50%, rgba(255,255,255,0)); translate: -120% 0; }
html.fx-glanz .tag::after, html.fx-glanz .acc .neu::after { animation: fx-glanz 5.9s ease-in-out 1.5s infinite; }
@keyframes fx-glanz { 0%, 72% { translate: -120% 0; } 90%, 100% { translate: 300% 0; } }
html.fx-glanz .btn-gold, html.fx-glanz .btn-deep { position: relative; overflow: hidden; isolation: isolate; }
html.fx-glanz .btn-gold::after, html.fx-glanz .btn-deep::after { width: 40%; background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.5) 50%, rgba(255,255,255,0)); }
html.fx-glanz .claim .btn-gold::after { animation: fx-glanz-1 1.3s cubic-bezier(.3,.6,.3,1) 2.7s backwards; }
@keyframes fx-glanz-1 { from { translate: -120% 0; } to { translate: 360% 0; } }
@media (hover: hover) {
  html.fx-glanz .btn-gold:hover::after, html.fx-glanz .btn-deep:hover::after { animation: none; translate: 360% 0; transition: translate .9s cubic-bezier(.2,.7,.2,1); }
}

@media (prefers-reduced-motion: reduce) {
  html .wm, html .fx-federn i { translate: none !important; rotate: none !important; }
}