/* ============================================================
   React-Bits-Effekte als Vanilla, SOLARDESK-CI.
   Isoliert via fx-Präfix, nutzt vorhandene Theme-Variablen.
   Eingesetzt: Gradient-Text, Shiny-Text, Plasma-Background, Magic-Bento.
   Reversibel: CSS + js/fx-bits.js entfernen genügt.
   ============================================================ */

/* Gradient-Text: animierter Marken-Verlauf im Text */
.fx-gradient-text{
  background: var(--accent-gradient, linear-gradient(135deg,#DFF1A8 0%,#B2C68A 30%,#6E8E22 70%,#4F6E11 100%));
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: fxSweep 5s linear infinite;
}
/* Shiny-Text: heller Schein wandert über den Text */
.fx-shiny-text{
  background: linear-gradient(90deg, var(--text-secondary,#95A6B8) 38%, var(--gold-bright,#FBEEC6) 50%, var(--text-secondary,#95A6B8) 62%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: fxSweep 3.4s linear infinite;
}
@keyframes fxSweep{ to{ background-position: 220% center; } }

/* Plasma-Background: liegt hinter dem Inhalt.
   width/height:100% noetig, weil <canvas> ein replaced element ist und
   inset:0 allein es NICHT auf die Containergroesse streckt. */
#fx-plasma{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; opacity:.5; }

/* Magic-Bento: Kachel-Hover-Glow wird per JS gesetzt, hier nur der weiche Übergang */
[data-fx-bento] > *{ transition: box-shadow .3s ease, border-color .3s ease; }

@media (prefers-reduced-motion: reduce){
  .fx-gradient-text, .fx-shiny-text{ animation: none; }
}