/* ===================================================================
   🎾 TENNISBALL BUTTON – Menü-Trigger
   Neon-Glow • Ripple-Effekt • Morph Λ→X • Idle-Breathe Animation
   =================================================================== */

/* Harte Resets für Browser-Defaults */
.tennisball-btn {
  -webkit-appearance: none;
  appearance: none;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0;
  box-shadow: none !important;
  outline: none;

  /* runde Form */
  border-radius: 50% !important;

  /* Größe des Buttons – voll über Theme-Studio steuerbar */
  --btn: var(--hamburger-size, 52px);
  width: var(--btn);
  height: var(--btn);

  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  position: relative;
  cursor: pointer;
  isolation: isolate;
  z-index: 201;

  /* keine Verfälschung durch Filter */
  filter: none !important;
  backdrop-filter: none !important;

  transition: transform .2s ease, box-shadow .2s ease;
}

/* Hover-Effekt */
.tennisball-btn:hover {
  transform: translateY(-1px) scale(1.05);
}

/* ===================================================================
   HALO — konstanter Schein außen
   =================================================================== */
.tennisball-btn::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  /* leicht an Akzentfarbe gekoppelt */
  background: radial-gradient(
    closest-side,
    rgba(232, 255, 58, .55),
    rgba(232, 255, 58, 0) 70%
  );
  pointer-events: none;
  opacity: .85;
  transition: opacity .25s ease;
}

.tennisball-btn:hover::after {
  opacity: 1;
}

/* ===================================================================
   RIPPLE — beim Öffnen (Klasse .opening wird per JS gesetzt)
   =================================================================== */
.tennisball-btn::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(232, 255, 58, .9),
    rgba(232, 255, 58, 0) 70%
  );
  opacity: 0;
  transform: scale(.5);
  pointer-events: none;
}

.tennisball-btn.opening::before {
  animation: ballRipple .6s ease-out both;
}

/* Ripple Keyframe */
@keyframes ballRipple {
  0% {
    opacity: .9;
    transform: scale(.55);
  }
  100% {
    opacity: 0;
    transform: scale(1.8);
  }
}

/* ===================================================================
   TENNISBALL – eigentliche Kreisfläche
   =================================================================== */
.tennisball {
  display: block;

  /* Größe – proportional zur Button-Größe aus dem Theme-Studio */
  --size: calc(var(--hamburger-size, 52px) * 0.62);
  width: var(--size);
  height: var(--size);

  /* weiße Linien */
  --line-w: 54%;
  --line-y: -58%;
  --rot-a: 35deg;
  --rot-b: -35deg;
  --th: 4px;

  position: relative;
  border-radius: 50%;
  overflow: hidden;

  /* Basisfarbe kommt aus dem Theme-Studio (hamburger_color) */
  background-color: var(--hamburger-color, #e8ff3a);

  /* optionaler verlauf, der sich an hamburger_color orientiert (mit Fallback) */
  background-image:
    radial-gradient(
      circle at 35% 35%,
      color-mix(in srgb, var(--hamburger-color, #e8ff3a) 70%, #ffffff 30%) 0 22%,
      color-mix(in srgb, var(--hamburger-color, #e8ff3a) 90%, #ffffb8 10%) 45%,
      var(--hamburger-color, #e8ff3a) 62%,
      color-mix(in srgb, var(--hamburger-color, #e8ff3a) 80%, #cfe900 20%) 100%
    );

  box-shadow:
    0 0 0 1px rgba(255,255,255,.35),
    0 0 22px rgba(232,255,58,.85),
    0 2px 10px rgba(0,0,0,.25),
    inset 0 -6px 12px rgba(0,0,0,.18),
    inset 0 3px 7px rgba(255,255,255,.28) !important;

  transition:
    transform .35s var(--ease-spring),
    box-shadow .35s ease;
}

/* Falls color-mix noch nicht unterstützt wird, bleibt zumindest die Basisfarbe via background-color. */

/* ===================================================================
   LINIEN DES TENNISBALLS (Λ)
   =================================================================== */

.tennisball::before,
.tennisball::after {
  content: "";
  position: absolute;

  left: 50%;
  top: 50%;
  width: var(--line-w);
  height: var(--th);

  background: #fff;
  border-radius: 4px;
  transform-origin: center;

  transform: translate(-50%, var(--line-y));
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, .6));
  transition:
    transform .35s var(--ease-spring),
    width .35s ease;
}

.tennisball::before {
  transform: translate(-50%, var(--line-y)) rotate(var(--rot-a));
}
.tennisball::after {
  transform: translate(-50%, var(--line-y)) rotate(var(--rot-b));
}

/* ===================================================================
   MENÜ OFFEN → Ball wird zum "X" & invertiert auf dunkel
   =================================================================== */

body.menu-open .tennisball-btn,
.tennisball-btn.active {
  transform: scale(.98);
}

body.menu-open .tennisball,
.tennisball-btn.active .tennisball {
  /* dunkler Ball */
  background-image: radial-gradient(
    circle at 35% 35%,
    #000 0 22%,
    #333 45%,
    #555 62%,
    #777 100%
  ) !important;

  /* breitere Linien = X */
  --line-w: 72%;
  --line-y: -50%;
  --rot-a: 45deg;
  --rot-b: -45deg;

  /* zusätzlicher Glow */
  box-shadow:
    0 0 0 1px rgba(255,255,255,.45),
    0 0 28px rgba(232,255,58,.98),
    0 4px 14px rgba(0,0,0,.35),
    inset 0 -8px 14px rgba(0,0,0,.2),
    inset 0 4px 8px rgba(255,255,255,.32) !important;
}

/* Linien werden schwarz, wenn Menü offen */
body.menu-open .tennisball-btn.active .tennisball::before,
body.menu-open .tennisball-btn.active .tennisball::after {
  background: #000;
}

/* ===================================================================
   IDLE “BREATHING” ANIMATION (nur wenn Animationen erlaubt sind)
   =================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .tennisball-btn:not(.active) .tennisball {
    /* Dauer kommt aus Theme-Studio (bounce_speed) */
    animation: ballBreathe var(--hamburger-bounce-speed, 2.6s) ease-in-out infinite both;
  }
}

@keyframes ballBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

/* ===================================================================
   SAFETY-FIXES – Überschreiben fremder Frameworks
   =================================================================== */

header .tennisball-btn,
.glass-nav .tennisball-btn {
  background: transparent !important;
}

header .tennisball,
.glass-nav .tennisball {
  /* Basisfarbe ebenfalls ans Theme gehängt */
  background-color: var(--hamburger-color, #e8ff3a);
}