/* ============================================================
   CTA-Animationen, Runde 2 — deutlich sichtbar
   Vier Ansätze, je an eine eigene Klasse gebunden.
   Stärke global regelbar über --kraft (1 = Standard).

   Technische Regeln, die überall eingehalten sind:
   - .btn::after trägt den Pfeil "→", deshalb nutzt jede Variante
     ausschließlich ::before.
   - .btn-primary:hover setzt transform: translateY(-1px). Deshalb
     animiert keine Variante transform auf dem Button selbst,
     sondern die separate Eigenschaft scale oder ein ::before.
   - Animiert werden nur scale, transform, opacity, background-position.
   - Alles schaltet sich bei "Bewegung reduzieren" ab.
   ============================================================ */

/* Von Leon gewählt: Variante 4 (Puls-Ring) bei Stärke 1,4. */
:root { --kraft: 1.4; }

@property --cta-winkel {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* ============================================================
   1 — ATMEN: der Knopf pumpt sichtbar, mit Ruhepause
   ============================================================ */
@keyframes cta1-atem {
  0%   { scale: 1; }
  18%  { scale: calc(1 + 0.055 * var(--kraft)); }
  36%  { scale: calc(1 - 0.008 * var(--kraft)); }
  50%  { scale: 1; }
  100% { scale: 1; }
}
@keyframes cta1-schein {
  0%, 100% { opacity: 0; transform: scale(1); }
  18%      { opacity: calc(.55 * var(--kraft)); transform: scale(1.05); }
  50%      { opacity: 0; transform: scale(1.1); }
}
.cta-anim-1 { position: relative; }
.cta-anim-1::before {
  content: ""; position: absolute; inset: -3px; z-index: -1;
  border-radius: inherit; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,92,10,.85), transparent 75%);
  filter: blur(9px);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .cta-anim-1 { animation: cta1-atem 2.9s cubic-bezier(.4,0,.3,1) infinite; }
  .cta-anim-1::before { animation: cta1-schein 2.9s cubic-bezier(.4,0,.3,1) infinite; }
}

/* ============================================================
   2 — LICHTKANTE: heller Lichtpunkt kreist auf dem Rand

   Wichtig: ein conic-gradient füllt immer die ganze Fläche.
   Damit nur der Rand leuchtet und der Text lesbar bleibt, wird
   der Verlauf über eine Maske auf ein 2 px schmales Band
   beschnitten (äußere Fläche minus Innenfläche).
   ============================================================ */
@keyframes cta2-kreisen { to { --cta-winkel: 360deg; } }
.cta-anim-2 { position: relative; }
.cta-anim-2::before {
  content: ""; position: absolute; inset: -1px;
  border-radius: inherit; pointer-events: none;
  padding: 2.5px;
  background: conic-gradient(from var(--cta-winkel),
    rgba(255,255,255,0) 0deg,
    rgba(255,255,255,0) 300deg,
    rgba(255,206,158,calc(.85 * var(--kraft))) 336deg,
    #fff 350deg,
    rgba(255,206,158,calc(.85 * var(--kraft))) 356deg,
    rgba(255,255,255,0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  filter: drop-shadow(0 0 5px rgba(255,190,130,calc(.85 * var(--kraft))));
}
@media (prefers-reduced-motion: no-preference) {
  .cta-anim-2::before { animation: cta2-kreisen 2.6s linear infinite; }
}

/* ============================================================
   3 — GLANZ: heller Streifen wandert über den Knopf
   ============================================================ */
@keyframes cta3-glanz {
  0%   { transform: translateX(-160%) skewX(-18deg); }
  55%  { transform: translateX(260%)  skewX(-18deg); }
  100% { transform: translateX(260%)  skewX(-18deg); }
}
.cta-anim-3 { position: relative; overflow: hidden; }
.cta-anim-3::before {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: 0;
  width: 38%; pointer-events: none; z-index: 1;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,calc(.30 * var(--kraft))) 35%,
    rgba(255,255,255,calc(.70 * var(--kraft))) 50%,
    rgba(255,255,255,calc(.30 * var(--kraft))) 65%,
    transparent);
  transform: translateX(-160%) skewX(-18deg);
}
@media (prefers-reduced-motion: no-preference) {
  .cta-anim-3::before { animation: cta3-glanz 2.8s cubic-bezier(.3,0,.2,1) infinite; }
}

/* ============================================================
   4 — PULS-RING: Ring löst sich vom Rand und läuft nach außen
   ============================================================ */
/* Der Ring wächst über scale. Weil der Knopf breit und flach ist,
   wirkt jedes Prozent in der Breite stärker als in der Höhe.
   Deshalb bewusst kleine Werte: x wächst weniger als y. */
@keyframes cta4-ring {
  0%   { transform: scale(1, 1); opacity: calc(.95 * var(--kraft)); }
  75%  { transform: scale(calc(1 + .07 * var(--kraft)), calc(1 + .26 * var(--kraft))); opacity: 0; }
  100% { transform: scale(calc(1 + .07 * var(--kraft)), calc(1 + .26 * var(--kraft))); opacity: 0; }
}
.cta-anim-4 { position: relative; z-index: 0; }
.cta-anim-4::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; pointer-events: none;
  border: 2.5px solid var(--accent);
  box-shadow: 0 0 14px rgba(255,92,10,.55);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .cta-anim-4::before { animation: cta4-ring 2.1s cubic-bezier(.15,.6,.3,1) infinite; }
}
/* Der Ring wächst über den Knopfrand hinaus. Ohne Zutun stünde er der
   Zeile darunter mit 4–5 px auf den Füßen, solange er noch sichtbar ist.
   Deshalb bekommt genau diese Zeile etwas mehr Luft. */
.cta-anim-4 + .btn-note { margin-top: 1.5em; }

/* ============================================================
   Abschaltung
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  /* Der Knopf selbst bleibt sichtbar und normal groß.
     Nur die Effektschicht wird ausgeblendet — ein opacity:0 auf dem
     Knopf würde den wichtigsten Knopf der Seite unsichtbar machen. */
  .cta-anim-1, .cta-anim-2, .cta-anim-3, .cta-anim-4 {
    animation: none !important;
    scale: 1 !important;
  }
  .cta-anim-1::before, .cta-anim-2::before,
  .cta-anim-3::before, .cta-anim-4::before {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* Beim Überfahren tritt die Werbung zurück, der Hover-Zustand übernimmt.
   scale zurück auf 1, damit sich Animation und translateY(-1px) nicht beißen. */
.cta-anim-1:hover, .cta-anim-1:focus-visible { animation-play-state: paused; scale: 1; }
.cta-anim-1:hover::before, .cta-anim-1:focus-visible::before,
.cta-anim-2:hover::before, .cta-anim-2:focus-visible::before,
.cta-anim-3:hover::before, .cta-anim-3:focus-visible::before,
.cta-anim-4:hover::before, .cta-anim-4:focus-visible::before { animation-play-state: paused; }