/* CryptoX – Effekte: Punktfeld im Kopfbereich, Lichtkegel auf Karten, Glanz auf Buttons,
   Laufband und Lesefortschritt. Nur transform/opacity animiert, "Bewegung reduzieren" wird respektiert. */

/* Bewegtes Punktfeld in Hero und Seitenköpfen (Canvas wird von fx.js eingesetzt) */
.fx-field { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
.fx-field.is-on { opacity: 1; }
.hero > .container, .page-head > .container { position: relative; z-index: 1; }
.fx-has-field .grid-bg { opacity: .3; }

/* Leuchtende Lime-Wolke im Hero */
.hero::before { content: ""; position: absolute; z-index: 0; pointer-events: none; width: 760px; height: 760px; left: 50%; top: -260px; margin-left: -380px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(220,247,99,.16), rgba(220,247,99,.05) 40%, transparent 68%); filter: blur(30px); animation: fx-glow 16s ease-in-out infinite alternate; }
@keyframes fx-glow { 0% { transform: translate(-120px,0) scale(1); } 50% { transform: translate(60px,50px) scale(1.12); } 100% { transform: translate(140px,-20px) scale(.95); } }
@media (max-width: 680px) { .hero::before { width: 440px; height: 440px; margin-left: -220px; top: -140px; } }

/* Glanz, der über die Hervorhebung in der Hero-Überschrift wandert */
.hero h1 em {
  background: linear-gradient(100deg, #dcf763 0%, #f6ffc9 18%, #dcf763 36%, #b9d94a 60%, #f3ffb5 80%, #dcf763 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: fx-sheen 7s linear infinite;
}
h2 .lime, h3 .lime { background: linear-gradient(100deg, #dcf763 0%, #ecff9e 55%, #c4e04f 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes fx-sheen { from { background-position: 100% 0; } to { background-position: -150% 0; } }

/* Lichtkegel, der dem Zeiger über Karten folgt */
.fx-spot { position: relative; }
.fx-spot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(220,247,99,.09), transparent 60%);
  opacity: 0; transition: opacity .35s ease;
}
.fx-spot:hover::after { opacity: 1; }
.step:not(.reveal-in) { transition: border-color .3s ease, transform .3s ease; }
.step:hover { border-color: rgba(220,247,99,.45); transform: translateY(-3px); }

/* Dashboard-Screenshot neigt sich leicht zum Zeiger */
.hero__shot { perspective: 1400px; }
.hero__shot .window { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.2,.7,.2,1); transform-origin: 50% 100%; }

/* Primär-Buttons mit Glanz */
.btn:not(.btn--line) { position: relative; overflow: hidden; }
.btn:not(.btn--line)::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.7), transparent);
  transform: skewX(-20deg); transition: left .6s ease; pointer-events: none;
}
.btn:not(.btn--line):hover::after { left: 120%; }
.btn:not(.btn--line):hover { box-shadow: 0 12px 34px rgba(220,247,99,.28); }
.btn--line:hover { border-color: var(--lime); }

/* Laufband mit den wichtigsten Funktionen */
.fx-marquee { overflow: hidden; border-bottom: 1px solid var(--line); padding: 18px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.fx-marquee__track { display: flex; width: max-content; animation: fx-marquee 40s linear infinite; }
.fx-marquee span { font-family: var(--display); font-weight: 500; font-size: clamp(1rem, 2.2vw, 1.4rem); color: #cfcfcf; white-space: nowrap; padding: 0 28px; display: inline-flex; align-items: center; gap: 56px; letter-spacing: -.01em; }
.fx-marquee span::after { content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--lime); box-shadow: 0 0 12px rgba(220,247,99,.7); transform: rotate(45deg); display: inline-block; }
@keyframes fx-marquee { to { transform: translateX(-50%); } }

/* Lesefortschritt oben */
.fx-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 100; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, #b9d94a, #dcf763 60%, #f3ffb5); box-shadow: 0 0 12px rgba(220,247,99,.55); pointer-events: none; }

::selection { background: var(--lime); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero h1 em, .fx-marquee__track { animation: none; }
  .btn:not(.btn--line)::after { display: none; }
  .step:hover { transform: none; }
  .hero__shot .window { transform: none; }
}