/* ═══════════════════════════════════════════════════════════════════
   bee-doo State-of-the-Art Effects v1
   - Gradient-text shine on hero <em> elements
   - Pulse-glow on primary CTAs
   - Scroll-reveal for sections
   - Aurora subtle background gradient (Hero only, opt-in via class)
   - Magnetic button hover (cursor-following)
   ═══════════════════════════════════════════════════════════════════ */

/* 1) GRADIENT TEXT SHINE — for <em> in hero headlines */
@keyframes shine-sweep {
  0%   { background-position: 200% 50%; }
  100% { background-position: -200% 50%; }
}
.v3-h1 em,
.page-hero h1 em,
h1.fx-shine em,
em.fx-shine {
  background: linear-gradient(
    100deg,
    var(--gold, #F5C500) 0%,
    var(--gold, #F5C500) 35%,
    #fff 50%,
    var(--gold, #F5C500) 65%,
    var(--gold, #F5C500) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  animation: shine-sweep 8s linear infinite;
  font-style: normal !important;
}
@media (prefers-reduced-motion: reduce) {
  .v3-h1 em, .page-hero h1 em, em.fx-shine, h1.fx-shine em {
    animation: none;
    -webkit-text-fill-color: var(--gold, #F5C500);
  }
}

/* 2) PULSE-GLOW on primary CTAs */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 8px 24px rgba(245,197,0,.25), 0 0 0 0 rgba(245,197,0,.0); }
  50%      { box-shadow: 0 12px 36px rgba(245,197,0,.45), 0 0 0 8px rgba(245,197,0,.08); }
}
.v3-plz-btn,
.fx-glow {
  animation: pulse-glow 4s ease-in-out infinite;
  position: relative;
}
@media (max-width: 768px) {
  .v3-plz-btn { animation-duration: 5s; }
}
@media (prefers-reduced-motion: reduce) {
  .v3-plz-btn, .fx-glow { animation: none; }
}

/* 3) SCROLL-REVEAL — fade-up beim ersten Sichtbarwerden */
.fx-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s ease-out, transform .9s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
.fx-reveal.fx-revealed {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .fx-reveal { opacity:1; transform:none; transition:none; }
}

/* 5) MAGNETIC HOVER — primary CTAs follow cursor leicht */
.fx-magnetic { transition: transform .18s cubic-bezier(.16,1,.3,1); will-change: transform; }

/* 6) GLASSMORPHISM upgrade — already used backdrop-filter, add brand-fitting glass class */
.fx-glass {
  background: rgba(20, 20, 24, 0.55);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.08);
}