/* ===== Mx2 FX – Animationen der Startseite ===== */

html, body { overflow-x: clip; }

/* Canvas-Ebenen */
[data-fx] { position: relative; overflow: hidden; }
.fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.hero .fx-canvas { z-index: 1; }
.hero .hero-inner, .hero .scroll-hint { z-index: 2; }
.join-box > :not(.fx-canvas) { position: relative; z-index: 1; }

/* E: Map-Fahrt im Kopfbereich (Ken-Burns) */
.hero-bg { animation: mx2-kenburns 26s ease-in-out infinite alternate; }
@keyframes mx2-kenburns { from { transform: scale(1.05) translate(0, 0); } to { transform: scale(1.22) translate(-4%, 3%); } }

/* 2: Ladebildschirm mit Logo-Puls */
.preloader { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; align-content: center; gap: 22px; background: #08080c; transition: opacity .6s ease, visibility .6s; }
.preloader.done { opacity: 0; visibility: hidden; }
.pl-logo { font-family: var(--font-head); font-weight: 700; font-size: clamp(3.5rem, 12vw, 6rem); color: #fff; animation: mx2-breathe 1.5s ease-in-out infinite; }
.pl-logo span { color: var(--accent); }
.pl-bar { width: 140px; height: 3px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.pl-bar i { display: block; height: 100%; width: 40%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--accent2)); animation: mx2-slide 1.1s ease-in-out infinite; }
@keyframes mx2-breathe { 0%,100% { transform: scale(.95); opacity: .8; text-shadow: 0 0 0 rgba(var(--accent-rgb),0); } 50% { transform: scale(1.03); opacity: 1; text-shadow: 0 0 34px rgba(var(--accent-rgb),.7); } }
@keyframes mx2-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }

/* 3: Mini-Equalizer (TS3 laedt) */
.mini-eq { display: inline-flex; gap: 4px; align-items: flex-end; height: 34px; vertical-align: middle; }
.mini-eq i { width: 6px; height: 100%; border-radius: 3px; background: linear-gradient(0deg, var(--accent2), var(--accent)); transform-origin: bottom; animation: mx2-eq 1s ease-in-out infinite; }
.mini-eq i:nth-child(2) { animation-delay: -.2s; } .mini-eq i:nth-child(3) { animation-delay: -.45s; } .mini-eq i:nth-child(4) { animation-delay: -.1s; } .mini-eq i:nth-child(5) { animation-delay: -.6s; }
@keyframes mx2-eq { 0%,100% { transform: scaleY(.2); } 50% { transform: scaleY(1); } }

/* 9: Mini-Radar (Server laden) */
.mini-radar { display: inline-block; position: relative; width: 40px; height: 40px; border-radius: 50%; vertical-align: middle; border: 2px solid rgba(61,220,132,.5); overflow: hidden;
  background: repeating-radial-gradient(circle, transparent 0 7px, rgba(61,220,132,.2) 7px 8px); }
.mini-radar::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(61,220,132,.6), transparent 70deg); animation: mx2-spin 1.6s linear infinite; }

/* 1: Mini-Goldring (News laden) */
.news-card.skeleton { display: grid; place-items: center; }
.mini-ring { width: 34px; height: 34px; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 25%, var(--accent2), var(--accent)); animation: mx2-spin .9s linear infinite;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); }
@keyframes mx2-spin { to { transform: rotate(360deg); } }

/* B: Aurora hinter der Statistik */
.has-aurora { position: relative; isolation: isolate; }
.aurora { position: absolute; inset: 0 calc(50% - 50vw); max-width: 100vw; z-index: -1; overflow: hidden; pointer-events: none; opacity: .5;
  -webkit-mask: linear-gradient(transparent, #000 20%, #000 80%, transparent); mask: linear-gradient(transparent, #000 20%, #000 80%, transparent); }
.aurora i { position: absolute; width: 45vw; max-width: 700px; aspect-ratio: 1; border-radius: 50%; filter: blur(80px); }
.aurora i:nth-child(1) { background: rgba(var(--accent-rgb),.35); left: 5%; top: 5%; animation: mx2-d1 16s ease-in-out infinite alternate; }
.aurora i:nth-child(2) { background: rgba(255,106,0,.3); right: 5%; bottom: 0; animation: mx2-d2 19s ease-in-out infinite alternate; }
.aurora i:nth-child(3) { background: rgba(122,60,255,.16); left: 35%; top: 30%; width: 30vw; animation: mx2-d3 13s ease-in-out infinite alternate; }
@keyframes mx2-d1 { to { transform: translate(30%, 25%) scale(1.15); } }
@keyframes mx2-d2 { to { transform: translate(-35%, -20%) scale(.9); } }
@keyframes mx2-d3 { to { transform: translate(-25%, -25%) scale(1.25); } }

@media (prefers-reduced-motion: reduce) {
  .hero-bg, .aurora i { animation: none !important; }
  .preloader { display: none; }
}