/* Magic Pages – Effekt-Bibliothek V1.0 (Warp-Speed: nur transform/opacity, Animation nur wenn sichtbar)
   Farben je Page über --fx1 (Hauptakzent) und --fx2 (Zweitakzent) setzen. */
:root{--fx1:#e9b97a;--fx2:#c8834a;--fxe:cubic-bezier(.2,.75,.2,1)}

/* Reinscrollen – Varianten (data-fx). Ohne Angabe mischt fx.js automatisch. */
[data-fx]{opacity:0;transition:opacity .9s var(--fxe),transform 1s var(--fxe),clip-path 1.1s var(--fxe);transition-delay:var(--fxd,0s)}
[data-fx=up]{transform:translateY(40px)}
[data-fx=down]{transform:translateY(-40px)}
[data-fx=left]{transform:translateX(-60px)}
[data-fx=right]{transform:translateX(60px)}
[data-fx=zoom]{transform:scale(.88)}
[data-fx=tilt]{transform:perspective(900px) rotateX(18deg) translateY(30px);transform-origin:50% 100%}
[data-fx=wipe]{opacity:1;clip-path:inset(0 100% 0 0)}
[data-fx=rise]{opacity:1;clip-path:inset(100% 0 0 0)}
[data-fx].fx-in{opacity:1;transform:none;clip-path:inset(0 0 0 0)}

/* LED-Glow-Rahmen: läuft nur bei Hover */
@property --fxa{syntax:'<angle>';inherits:false;initial-value:0deg}
.fx-led{position:relative;isolation:isolate}
.fx-led::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--fxa),transparent 0 55%,var(--fx1) 75%,var(--fx2) 85%,transparent 97%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s;z-index:2;pointer-events:none;animation:fxspin 3.2s linear infinite;animation-play-state:paused}
.fx-led:hover::before,.fx-led.on::before,.fx-led[aria-pressed=true]::before{opacity:1;animation-play-state:running}
@keyframes fxspin{to{--fxa:360deg}}

/* Maus-Spotlight */
.fx-spot{position:relative;isolation:isolate;--mx:50%;--my:50%}
.fx-spot::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(280px circle at var(--mx) var(--my),color-mix(in srgb,var(--fx1) 28%,transparent),transparent 65%);opacity:0;transition:opacity .4s;z-index:-1;pointer-events:none}
.fx-spot:hover::after{opacity:1}

/* 3D-Kippen (fx.js setzt --rx/--ry) */
.fx-tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0));transition:transform .5s var(--fxe);will-change:transform}
.fx-tilt:hover{--ty:-6px}
.fx-tilt.fx-in,.fx-tilt[data-fx].fx-in{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0));transition:opacity .9s var(--fxe),transform .5s var(--fxe)}

/* Glanz-Button mit Schimmer */
.fx-shine{position:relative;overflow:hidden;isolation:isolate}
.fx-shine::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .75s var(--fxe);pointer-events:none}
.fx-shine:hover::after{left:130%}
.fx-pulse{animation:fxpulse 2.4s ease-out infinite;animation-play-state:paused}
.fx-run .fx-pulse,.fx-pulse.fx-run{animation-play-state:running}
@keyframes fxpulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--fx1) 55%,transparent)}75%,100%{box-shadow:0 0 0 16px transparent}}

/* Morphing-Blob */
.fx-morph{border-radius:46% 54% 60% 40%/50% 42% 58% 50%;animation:fxmorph 10s ease-in-out infinite alternate;animation-play-state:paused}
.fx-run .fx-morph,.fx-morph.fx-run{animation-play-state:running}
@keyframes fxmorph{33%{border-radius:58% 42% 40% 60%/42% 58% 42% 58%}66%{border-radius:40% 60% 56% 44%/58% 40% 60% 42%}100%{border-radius:52% 48% 44% 56%/46% 54% 46% 54%;transform:rotate(10deg)}}

/* Schimmer-Text */
.fx-gtext{background:linear-gradient(100deg,var(--fx2),var(--fx1) 35%,#fff3dc 50%,var(--fx1) 65%,var(--fx2));background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:fxgt 6s ease-in-out infinite}
@keyframes fxgt{0%,100%{background-position:0 0}50%{background-position:100% 0}}

/* Wort-für-Wort (fx.js zerlegt [data-words]) */
.fx-w{display:inline-block;opacity:0;transform:translateY(60%) rotate(4deg);filter:blur(6px);animation:fxw .9s var(--fxe) forwards}
@keyframes fxw{to{opacity:1;transform:none;filter:none}}

/* Unterstreichen, das sich zeichnet */
.fx-line{background:linear-gradient(var(--fx1),var(--fx1)) 0 100%/0 3px no-repeat;transition:background-size .8s var(--fxe)}
.fx-in .fx-line,.fx-line.fx-in{background-size:100% 3px}

@media(prefers-reduced-motion:reduce){[data-fx]{opacity:1!important;transform:none!important;clip-path:none!important}.fx-w{opacity:1;transform:none;filter:none;animation:none}.fx-led::before,.fx-morph,.fx-pulse,.fx-gtext{animation:none}}