/* ============================================================
   FX-BITS  ·  React-Bits-Effekte als reines Vanilla (CSS + JS)
   ------------------------------------------------------------
   Dezente Premium-Aufwertung im Sonnenexpert-Gold (#FEDA03 /
   #E0A800 / #C9A458). Komplett isoliert über das Präfix "fx-".
   Nutzt die vorhandenen Portal-Tokens (--accent-gradient, --gold,
   --gold-sheen aus se-gold.css), mit Gold-Fallback wenn nicht da.

   Reversibel = diese Datei + js/fx-bits.js löschen und die
   gesetzten Klassen (fx-gradient-text / fx-shiny-text),
   das Attribut data-fx-bento sowie <canvas id="fx-plasma"> in
   den Zielseiten entfernen.
   ============================================================ */

/* --- Gradient-Text: wandernder Verlauf über eine Akzent-Headline.
   --accent-gradient ist auf Login/Onboarding via se-gold.css ein
   Gold-Verlauf; Fallback ist ein symmetrischer SE-Gold-Sweep.
   !important, weil bestehende Headlines teils -webkit-text-fill-color
   hart setzen und der Effekt sonst nicht greift. */
.fx-gradient-text{
  background: var(--accent-gradient,
    linear-gradient(95deg,#C99700 0%,#E0A800 30%,#FFE96B 50%,#E0A800 72%,#C99700 100%)) !important;
  background-size: 220% auto !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
  animation: fxSweep 6s linear infinite;
}

/* --- Shiny-Text: heller Schein, der über eine Wortmarke wandert.
   Gold-Basis -> heller Sheen -> Gold-Basis. */
.fx-shiny-text{
  background: linear-gradient(90deg,
    var(--gold,#C9A458) 38%, var(--gold-sheen,#FFF3C4) 50%, var(--gold,#C9A458) 62%) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
  animation: fxSweep 3.4s linear infinite;
}

@keyframes fxSweep{ to{ background-position: 220% center; } }

/* --- Plasma-Background: liegt hinter dem Inhalt.
   Voraussetzung: der Container ist position:relative, die Inhaltskarte
   bekommt z-index:1. */
#fx-plasma{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;          /* Canvas ist ein ersetztes Element: inset:0 allein streckt es nicht */
  pointer-events:none; opacity:.30;
  /* Vignette: Mitte (hinter der Karte) ausblenden, Schimmer nur zum Rand. */
  -webkit-mask-image: radial-gradient(ellipse 72% 68% at 50% 50%, transparent 0%, rgba(0,0,0,.35) 46%, #000 82%);
          mask-image: radial-gradient(ellipse 72% 68% at 50% 50%, transparent 0%, rgba(0,0,0,.35) 46%, #000 82%);
}

/* --- Magic-Bento (Hover-Glow per JS): weiche Übergänge für den
   box-shadow/border, den js/fx-bits.js auf die Grid-Zellen setzt.
   Aktuell bewusst nirgends platziert (Portal hat bereits einen
   Maus-Glow auf Karten); bleibt als Bibliothek vorhanden. */
[data-fx-bento] > *{ transition: box-shadow .3s ease, border-color .3s ease; }

/* --- Zugänglichkeit: keine Bewegung bei prefers-reduced-motion.
   Das Plasma rendert dann nur einen statischen Frame (Logik in JS). */
@media (prefers-reduced-motion: reduce){
  .fx-gradient-text, .fx-shiny-text{ animation: none !important; }
}