/* Cockpit-Effekte, übernommen von der EpicDetail-Website: Cursor-Licht und Ring,
   Spotlight-Karten, Magnet-Buttons, Scroll-Parallax, drehendes Logo, Einblend-Animationen. Alles dezent, abschaltbar. */
.aop{min-height:100vh;min-height:100dvh}
/* Muster, Mauslicht und Parallax kommen zentral aus aop.css und aop.js (Release 1.3.0) */
:root{--fx-ease:cubic-bezier(.22,.8,.2,1)}
.fx-glow{position:fixed;left:0;top:0;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;background:radial-gradient(closest-side,rgba(205,98,168,.13),rgba(205,98,168,.04) 55%,transparent);pointer-events:none;z-index:-1;opacity:0;transition:opacity .6s;mix-blend-mode:screen}
.fx-ring{position:fixed;left:0;top:0;width:28px;height:28px;margin:-14px 0 0 -14px;border:1px solid rgba(219,116,183,.7);border-radius:50%;pointer-events:none;z-index:300;opacity:0;transition:width .3s var(--fx-ease),height .3s var(--fx-ease),margin .3s var(--fx-ease),background .3s,opacity .3s,border-color .3s}
.fx-ring.big{width:60px;height:60px;margin:-30px 0 0 -30px;background:rgba(205,98,168,.12);border-color:var(--pink-t)}
body.cur .fx-glow,body.cur .fx-ring{opacity:1}
.fx-sp{position:fixed;left:0;top:0;right:0;height:3px;z-index:310;background:linear-gradient(90deg,var(--pink),var(--pink-t));transform-origin:0 50%;transform:scaleX(0);pointer-events:none}
/* Spotlight-Karten */
body.cur .glass.panel:hover,body.cur .glass.kpi:hover,body.cur .glass.pc:hover{background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(205,98,168,.16),transparent 60%),linear-gradient(180deg,var(--g-a),var(--g-b));border-color:rgba(205,98,168,.5)}
/* Magnet-Buttons */
.btn-pink{transition:transform .3s var(--fx-ease),filter .2s,box-shadow .2s}
/* Logo dreht sich um die eigene Achse */
.fx-logo{perspective:700px;display:inline-flex}
.fx-logo img{animation:fxspin 8s cubic-bezier(.65,0,.35,1) infinite;transform-style:preserve-3d}
@keyframes fxspin{0%,14%{transform:rotateY(0)}64%,100%{transform:rotateY(360deg)}}
/* Einblenden: Ansichten, Kennzahlen, Kundenbereich */
@keyframes fxup{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.view.act>*,.kwrap>*,.kpis>*{animation:fxup .7s var(--fx-ease) both}
.view.act>*:nth-child(2),.kwrap>*:nth-child(2),.kpis>*:nth-child(2){animation-delay:70ms}
.view.act>*:nth-child(3),.kwrap>*:nth-child(3),.kpis>*:nth-child(3){animation-delay:140ms}
.view.act>*:nth-child(4),.kwrap>*:nth-child(4),.kpis>*:nth-child(4){animation-delay:210ms}
.view.act>*:nth-child(5),.kwrap>*:nth-child(5),.kpis>*:nth-child(5){animation-delay:280ms}
.view.act>*:nth-child(n+6),.kwrap>*:nth-child(n+6){animation-delay:350ms}
.login{animation:fxup .9s var(--fx-ease) both}
#v-login::before{transform:translate3d(calc(var(--fx-px,0)*-40px),calc(var(--fx-py,0)*-40px),0);transition:transform .8s var(--fx-ease)}
#v-login::after{transform:translate3d(calc(var(--fx-px,0)*34px),calc(var(--fx-py,0)*34px),0);transition:transform .8s var(--fx-ease)}
@media(prefers-reduced-motion:reduce){
  .fx-glow,.fx-ring,.fx-sp{display:none}
  .fx-logo img{animation:none}
  .view.act>*,.kwrap>*,.kpis>*,.login{animation:none}
  #v-login::before,#v-login::after{transform:none}
}