/* ============================================================
   LebensEnergie KGS – Premium FX (geteilt, wiederverwendbar)
   Opt-in per Klasse/Attribut. Auf allen Seiten identisch.
   ============================================================ */
@property --fx-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

/* 1) 3D-KARTEN-EINFLUG (gestaffelt, wie Personal Training) --------------- */
.fx-card {
    opacity: 0; will-change: transform, opacity, filter;
    transform: perspective(1200px) translate3d(0, 42px, 0) scale(.965);
    filter: blur(6px);
    transition: opacity .8s cubic-bezier(.16,1,.3,1),
                transform 1.15s cubic-bezier(.16,1,.3,1),
                filter .9s ease;
}
@media (min-width: 900px) {
    .fx-card[data-fx-dir="left"]  { transform: perspective(1200px) translate3d(-72px, 34px, 0) rotateY(7deg)  scale(.955); }
    .fx-card[data-fx-dir="right"] { transform: perspective(1200px) translate3d( 72px, 34px, 0) rotateY(-7deg) scale(.955); }
}
.fx-card.fx-in { opacity: 1; transform: perspective(1200px) translate3d(0,0,0) rotateY(0) scale(1); filter: blur(0); }

/* 2) ROTIERENDER CONIC-GOLD-RAND ---------------------------------------- */
.fx-conic { position: relative; }
.fx-conic::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
    pointer-events: none; z-index: 3; opacity: 0; transition: opacity .5s ease;
    background: conic-gradient(from var(--fx-angle),
        transparent 0deg, rgba(202,138,4,0) 55deg,
        rgba(202,138,4,.55) 105deg, rgba(255,226,150,.95) 130deg, rgba(202,138,4,.55) 155deg,
        transparent 215deg, transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    animation: fxOrbit 6s linear infinite;
}
.fx-conic:hover::after { opacity: 1; }

/* Beim Reinsliden zeigt sich der Gold-Rand automatisch (Touch braucht
   kein Hover). Er blendete danach aber wieder auf 0 zurueck: die
   Grundregel steht auf opacity: 0, und fxConicIntro endete ebenfalls
   bei 0. Nach 2,8 Sekunden blieb auf Touchgeraeten also eine Karte
   ohne Kante uebrig - genau der Eindruck "die Raender sind nicht zu
   sehen". Die Kante bleibt jetzt dauerhaft halb sichtbar und wird bei
   :hover voll. */
.fx-conic.fx-in::after {
    opacity: .5;
    animation: fxOrbit 6s linear infinite, fxConicIntro 2.8s ease 0.25s;
}
/* Verschiedene Laufzeiten, damit nebeneinanderliegende Karten nicht im
   Gleichschritt drehen - drei synchrone Kanten wirken mechanisch. */
.fx-conic:nth-child(2n).fx-in::after { animation-duration: 8.5s, 2.8s; }
.fx-conic:nth-child(3n).fx-in::after { animation-duration: 11s, 2.8s; }
@keyframes fxOrbit { to { --fx-angle: 360deg; } }
@keyframes fxConicIntro { 0% { opacity: 0; } 16% { opacity: 1; } 72% { opacity: 1; } 100% { opacity: .5; } }

/* 3) MAUS-SPOTLIGHT (optionaler Kind-Glow .fx-spot-glow) ---------------- */
.fx-spot { position: relative; }
.fx-spot-glow {
    position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 0;
    transition: opacity .4s ease; border-radius: inherit;
    background: radial-gradient(300px circle at var(--fx-x,50%) var(--fx-y,50%), rgba(202,138,4,.14), transparent 60%);
}
.fx-spot:hover .fx-spot-glow { opacity: 1; }

/* 4) MAGNETISCHER BUTTON (Transform per JS) ----------------------------- */
.fx-magnetic { transition: transform .35s cubic-bezier(.16,1,.3,1) !important; }

/* 5) GOLD-PARTIKELFELD -------------------------------------------------- */
.fx-particles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
    .fx-card { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
    .fx-conic::after { animation: none !important; }
    .fx-particles { display: none !important; }
}