/* =============================================================
   logo-mark.css v8 — REAL ASSET + OVERLOAD ANIMATION EDITION
   =============================================================
   Owner-Wunsch 2026-05-09 (3. Iteration):
   - Echte Soccer-Ball-Bilder (lokal, basiert auf Twemoji)
   - "Mehr Animation, mehr verrückt"
   - 6+ Animations-Layer parallel

   Layers (bottom-up):
   1. HUD-Frame Container (radial-pulse)
   2. Top + Bottom HUD-Linien (fade-pulse)
   3. Floating Particles (5 Sterne, parallax)
   4. Scan-Line (left→right sweep)
   5. Linker Ball + Schatten + Spotlight (3D-spin Y-axis + bounce)
   6. Rechter Ball + Schatten + Spotlight (mirrored, slight phase)
   7. KI-Text (multi-layer cyan-grün glow + per-letter glitch + pulse)
   8. TIPPS-Text (chrome + grüner glow + breath)
   ============================================================= */

/* Alte v5/v6/v7-Inhalte deaktivieren */
.nb-logo-wrap > .logo,
.nb-logo-wrap > .logo-ball,
.nb-logo-wrap::after { display: none !important; }

.nb-logo-wrap {
  flex-direction: row !important;
  gap: 0 !important;
  width: 100%;
  max-width: 100%;
  perspective: 1000px;
  justify-content: center !important;
}

.logo-mark.lm8 {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  cursor: pointer;
  user-select: none;
  padding: 4px 18px;
  text-decoration: none;
  overflow: visible;
  transform-style: preserve-3d;
  transition: transform 240ms ease;
}
.logo-mark.lm8:hover {
  transform: scale(1.02);
}
.logo-mark.lm8:hover .lm8__ball-img {
  animation-duration: 1.6s !important;
}

/* ─── HUD-Frame ─────────────────────────────────────────── */
.lm8__hud {
  position: absolute;
  inset: -2px;
  pointer-events: none;
  z-index: 0;
  border-radius: 14px;
  background: radial-gradient(ellipse 60% 50% at 50% 50%,
    rgba(0,230,118,.05) 0%,
    transparent 70%);
  animation: lm8HudGlow 5s ease-in-out infinite;
}
@keyframes lm8HudGlow {
  0%,100% { opacity: .55; }
  50%     { opacity: 1; }
}

.lm8__hud-line {
  position: absolute;
  left: 6%;
  right: 6%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0,230,118,.65) 30%,
    rgba(168,255,212,.85) 50%,
    rgba(0,230,118,.65) 70%,
    transparent 100%);
  opacity: .55;
  animation: lm8HudLinePulse 3.6s ease-in-out infinite;
}
.lm8__hud-line--top    { top: 2px; }
.lm8__hud-line--bottom { bottom: 2px; animation-delay: -1.8s; }
@keyframes lm8HudLinePulse {
  0%,100% { opacity: .25; transform: scaleX(.85); }
  50%     { opacity: .85; transform: scaleX(1); }
}

/* ─── Floating Particles ────────────────────────────────── */
.lm8__particle {
  position: absolute;
  left: var(--px, 50%);
  top: var(--py, 50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: radial-gradient(circle, #a8ffd4, rgba(0,230,118,.5) 60%, transparent);
  box-shadow: 0 0 6px rgba(168,255,212,.85), 0 0 12px rgba(0,230,118,.45);
  animation: lm8ParticleFloat 4.6s ease-in-out infinite;
  animation-delay: var(--d, 0s);
  pointer-events: none;
}
@keyframes lm8ParticleFloat {
  0%,100% { transform: translate(0, 0) scale(.8); opacity: .35; }
  25%     { transform: translate(-3px, -4px) scale(1); opacity: .9; }
  50%     { transform: translate(2px, -7px) scale(1.2); opacity: 1; }
  75%     { transform: translate(4px, -3px) scale(.9); opacity: .65; }
}

/* ─── Scan-Line ─────────────────────────────────────────── */
.lm8__scan {
  position: absolute;
  top: 4px; bottom: 4px;
  left: -12%;
  width: 16%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0,230,118,.18) 35%,
    rgba(168,255,212,.30) 50%,
    rgba(0,230,118,.18) 65%,
    transparent 100%);
  filter: blur(2px);
  animation: lm8Scan 6.5s linear infinite;
  pointer-events: none;
}
@keyframes lm8Scan {
  0%   { transform: translateX(0);   opacity: 0; }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateX(720%); opacity: 0; }
}

/* ─── Soccer-Bälle ──────────────────────────────────────── */
.lm8__ball {
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  z-index: 2;
  perspective: 600px;
  transform-style: preserve-3d;
}

.lm8__ball-img {
  width: 100%;
  height: 100%;
  display: block;
  filter:
    drop-shadow(0 0 5px rgba(0,230,118,.65))
    drop-shadow(0 0 14px rgba(0,230,118,.40))
    drop-shadow(0 2px 4px rgba(0,0,0,.55));
  /* Owner-Wunsch 2026-05-09 (4. Iteration): Bälle sind 2D, Y-Spin macht
     keinen Sinn (visuell identische Frames). Stattdessen: schweben +
     gleichzeitig nach vorne pulsieren (groesser werden, kommt auf dich zu).
     Beide Effekte in einem Keyframe damit transform-Konflikt vermieden ist. */
  animation:
    lm8BallFloatPulse 2.6s ease-in-out infinite,
    lm8BallGlow 3s ease-in-out infinite;
  will-change: transform, filter;
}

.lm8__ball--right .lm8__ball-img {
  animation:
    lm8BallFloatPulse 2.6s ease-in-out infinite,
    lm8BallGlow 3s ease-in-out infinite;
  /* Phase-Versatz: rechter Ball ist genau gegenphasig zum linken
     (einer oben/groß waehrend der andere unten/klein). */
  animation-delay: -1.3s, -1.5s;
}

@keyframes lm8BallFloatPulse {
  0%, 100% { transform: translateY(0)    scale(1); }
  50%      { transform: translateY(-8px) scale(1.20); }
}
@keyframes lm8BallGlow {
  0%,100% {
    filter:
      drop-shadow(0 0 5px rgba(0,230,118,.65))
      drop-shadow(0 0 14px rgba(0,230,118,.40))
      drop-shadow(0 2px 4px rgba(0,0,0,.55));
  }
  50% {
    filter:
      drop-shadow(0 0 9px rgba(168,255,212,.95))
      drop-shadow(0 0 22px rgba(0,230,118,.65))
      drop-shadow(0 3px 6px rgba(0,0,0,.65));
  }
}

/* Bodenschatten unter dem Ball (gibt Tiefen-Gefühl) */
.lm8__ball-shadow {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -4px;
  height: 6px;
  background: radial-gradient(ellipse,
    rgba(0,0,0,.55) 0%,
    rgba(0,0,0,.25) 60%,
    transparent 100%);
  filter: blur(2px);
  animation: lm8ShadowPulse 1.8s ease-in-out infinite;
  z-index: -1;
  pointer-events: none;
}
@keyframes lm8ShadowPulse {
  0%,100% { transform: scaleX(1);   opacity: .85; }
  50%     { transform: scaleX(.7);  opacity: .5; }
}

/* Spotlight oben am Ball — gibt das "neon-poliert"-Gefühl */
.lm8__ball-spotlight {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%,
    rgba(255,255,255,.55) 0%,
    rgba(168,255,212,.20) 25%,
    transparent 55%);
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .85;
}

/* ─── Text ──────────────────────────────────────────────── */
.lm8__text {
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 3;
  flex: 0 0 auto;
  font-family: 'Orbitron', 'Bebas Neue', Impact, sans-serif;
  font-weight: 800;
  letter-spacing: .14em;
  white-space: nowrap;
  line-height: 1;
}

/* ─── "KI" — Mint-Plasma-Tube + periodischer Glitch ─────── */
.lm8__ki {
  position: relative;
  display: inline-block;
  font-size: 1.65rem;
  color: #d8ffe8;
  text-shadow:
    0 0 1px rgba(255,255,255,1),
    0 0 5px #a8ffd4,
    0 0 12px #00ff88,
    0 0 22px rgba(0,230,118,.85),
    0 0 40px rgba(0,200,100,.55);
  animation:
    lm8KiPulse 2.6s ease-in-out infinite,
    lm8KiGlitch 7s steps(1, end) infinite;
}
.lm8__ki::before,
.lm8__ki::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  pointer-events: none;
  opacity: 0;
}
.lm8__ki::before {
  color: #00ffff;
  text-shadow: 1px 0 #00ffff, -1px 0 transparent;
  animation: lm8KiGlitchBefore 7s steps(1, end) infinite;
}
.lm8__ki::after {
  color: #ff5c93;
  text-shadow: -1px 0 #ff5c93, 1px 0 transparent;
  animation: lm8KiGlitchAfter 7s steps(1, end) infinite;
}
@keyframes lm8KiPulse {
  0%,100% {
    text-shadow:
      0 0 1px rgba(255,255,255,1),
      0 0 5px #a8ffd4,
      0 0 12px #00ff88,
      0 0 22px rgba(0,230,118,.85),
      0 0 40px rgba(0,200,100,.55);
    transform: scale(1);
  }
  50% {
    text-shadow:
      0 0 2px rgba(255,255,255,1),
      0 0 10px #c8ffe0,
      0 0 20px #00ff88,
      0 0 36px rgba(0,230,118,1),
      0 0 60px rgba(0,200,100,.85);
    transform: scale(1.05);
  }
}
@keyframes lm8KiGlitch {
  0%, 90%, 100% { transform: scale(1) translate(0,0); }
  92% { transform: translate(-1px, 1px) skewX(-2deg); }
  94% { transform: translate(2px, -1px) skewX(2deg); }
  96% { transform: translate(-1px, 0) skewX(0); }
}
@keyframes lm8KiGlitchBefore {
  0%, 91%, 100% { opacity: 0; }
  92%, 95% { opacity: .85; transform: translate(-2px, 1px); }
}
@keyframes lm8KiGlitchAfter {
  0%, 91%, 100% { opacity: 0; }
  93%, 96% { opacity: .85; transform: translate(2px, -1px); }
}

/* ─── "TIPPS" — Chrome mit grünem Glow + diagonale Shimmer ─ */
.lm8__tipps {
  position: relative;
  display: inline-block;
  font-size: 1.65rem;
  background: linear-gradient(180deg,
    #ffffff 0%,
    #e0e8f0 18%,
    #b0bcc8 38%,
    #5e6878 58%,
    #b0bcc8 78%,
    #ffffff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter:
    drop-shadow(0 0 1px rgba(255,255,255,.95))
    drop-shadow(0 0 6px rgba(168,255,212,.55))
    drop-shadow(0 0 14px rgba(0,230,118,.40));
  animation: lm8TippsBreath 4s ease-in-out infinite;
}
.lm8__tipps::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg,
    transparent 0%,
    transparent 42%,
    rgba(255,255,255,.95) 50%,
    transparent 58%,
    transparent 100%);
  background-size: 220% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  pointer-events: none;
  animation: lm8TippsShimmer 5s ease-in-out infinite;
}
@keyframes lm8TippsBreath {
  0%,100% {
    filter:
      drop-shadow(0 0 1px rgba(255,255,255,.85))
      drop-shadow(0 0 5px rgba(168,255,212,.45))
      drop-shadow(0 0 12px rgba(0,230,118,.30));
  }
  50% {
    filter:
      drop-shadow(0 0 2px rgba(255,255,255,1))
      drop-shadow(0 0 10px rgba(168,255,212,.85))
      drop-shadow(0 0 22px rgba(0,230,118,.65));
  }
}
@keyframes lm8TippsShimmer {
  0%, 30% { background-position: -120% 0; }
  60%     { background-position:  220% 0; }
  100%    { background-position:  220% 0; }
}

/* ─── Live-Dot ──────────────────────────────────────────── */
.logo-live-dot {
  margin-left: 6px;
  z-index: 4;
}

/* ─── Mobile-Anpassungen ────────────────────────────────── */
@media (max-width: 600px) {
  .logo-mark.lm8 { gap: 10px; padding: 2px 10px; }
  .lm8__ball     { width: 36px; height: 36px; }
  .lm8__ki, .lm8__tipps { font-size: 1.32rem; letter-spacing: .10em; }
  .lm8__text     { gap: 8px; }
}
@media (max-width: 360px) {
  .lm8__ball     { width: 30px; height: 30px; }
  .lm8__ki, .lm8__tipps { font-size: 1.12rem; }
}

/* ─── Reduced-Motion ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .lm8__hud, .lm8__hud-line, .lm8__particle, .lm8__scan,
  .lm8__ball-img, .lm8__ball-shadow,
  .lm8__ki, .lm8__ki::before, .lm8__ki::after,
  .lm8__tipps, .lm8__tipps::after {
    animation: none !important;
  }
}