/* ============================================================
   React-Bits-Effekte als Vanilla, JM-Energy-Consulting-CI (Gold/Bronze).
   Eingesetzt: Gradient-Text (Hero-Akzent), Shiny-Text (SOLARDESK-Name),
   Magic-Bento (Gold-Glow auf Segment-Karten, per assets/fx-bits.js).
   !important schlaegt die spezifischen Headline-em-Styles der Seite.
   Reversibel: diese Datei + js/fx-bits.js + die fx-Klassen/data-fx-bento entfernen.
   ============================================================ */

/* Gradient-Text: changierender Gold-Bronze-Verlauf im Akzentwort */
.fx-gradient-text{
  background: linear-gradient(95deg,#B9822C 0%,#F4D9A0 28%,#FBEEC6 50%,#E5B868 72%,#B9822C 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 wandert ueber den Markennamen */
.fx-shiny-text{
  background: linear-gradient(90deg, var(--bronze,#9A6B2F) 36%, #FFF7DE 50%, var(--bronze,#9A6B2F) 64%) !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.6s linear infinite;
}
@keyframes fxSweep{ to{ background-position: 220% center; } }

/* Magic-Bento: weicher Uebergang fuer den per JS gesetzten Glow */
[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 !important; }
}