/* =======================================================
   Animationen
======================================================= */

.particles,
.data-lines {
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;
}

.blink-a { animation-name: ledBlinkA; }
.blink-b { animation-name: ledBlinkB; }
.blink-c { animation-name: ledBlinkC; }
.pulse   { animation-name: ledPulse; animation-timing-function: ease-in-out; }

@keyframes ledBlinkA {
  0%, 7%, 11%, 53%, 59%, 100% { opacity: .95; transform: scale(1); }
  8%, 10%, 54%, 58% { opacity: .08; transform: scale(.72); }
}

@keyframes ledBlinkB {
  0%, 28%, 31%, 67%, 73%, 100% { opacity: .15; }
  29%, 30%, 68%, 72% { opacity: 1; }
}

@keyframes ledBlinkC {
  0%, 14%, 20%, 41%, 47%, 82%, 100% { opacity: .9; }
  15%, 19%, 42%, 46%, 83%, 90% { opacity: .06; }
}

@keyframes ledPulse {
  0%, 100% { opacity: .25; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1.25); }
}

.brand-logo {
  animation: logoBreath 5.8s ease-in-out infinite;
}

@keyframes logoBreath {
  0%, 100% {
    filter:
      drop-shadow(0 14px 30px rgba(0, 0, 0, .65))
      drop-shadow(0 0 18px rgba(0, 132, 255, .20));
  }
  50% {
    filter:
      drop-shadow(0 14px 30px rgba(0, 0, 0, .65))
      drop-shadow(0 0 32px rgba(0, 164, 255, .46));
  }
}

.status-check {
  animation: statusPulse 2.5s ease-in-out infinite;
}

@keyframes statusPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(57, 243, 74, 0); }
  50% { box-shadow: 0 0 17px rgba(57, 243, 74, .58); }
}

.feature-icon {
  animation: iconGlow 4.5s ease-in-out infinite;
}

.feature:nth-child(2) .feature-icon { animation-delay: -1.5s; }
.feature:nth-child(3) .feature-icon { animation-delay: -3s; }

@keyframes iconGlow {
  0%, 100% { transform: translateY(0); filter: drop-shadow(0 0 8px rgba(0, 161, 255, .32)); }
  50% { transform: translateY(-2px); filter: drop-shadow(0 0 17px rgba(0, 190, 255, .62)); }
}

.particles span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: #38cfff;
  box-shadow: 0 0 8px #159dff;
  opacity: 0;
  animation: particleFloat var(--d) var(--delay) linear infinite;
}

@keyframes particleFloat {
  0%   { opacity: 0; transform: translate3d(0, 25px, 0); }
  14%  { opacity: .65; }
  70%  { opacity: .3; }
  100% { opacity: 0; transform: translate3d(20px, -105px, 0); }
}

.data-lines .line {
  position: absolute;
  left: 50%;
  top: 15%;
  width: min(430px, 33vw);
  height: 1px;
  transform-origin: left center;
  opacity: .35;
  background: linear-gradient(90deg, transparent, rgba(0, 190, 255, .85), transparent);
}

.data-lines .line::after {
  content: "";
  position: absolute;
  top: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #58e7ff;
  box-shadow: 0 0 12px #00a8ff;
  animation: dataDot 4.3s linear infinite;
}

.line-1 { transform: translateX(-50%) rotate(15deg); }
.line-2 { transform: translateX(-50%) rotate(165deg); top: 20%; }
.line-3 { transform: translateX(-50%) rotate(-13deg); top: 25%; }
.line-4 { transform: translateX(-50%) rotate(193deg); top: 30%; }

.line-2::after { animation-delay: -1.2s !important; }
.line-3::after { animation-delay: -2.3s !important; }
.line-4::after { animation-delay: -3.1s !important; }

@keyframes dataDot {
  from { left: 0; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  to { left: 100%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  }






/* =======================================================
   Einzelne Server-LEDs mit unterschiedlichen Blinkmustern
======================================================= */

@keyframes ledBlinkFast {
  0%, 9%, 17%, 38%, 100% { opacity: .16; transform: scale(.9); }
  11%, 15%, 21%, 35% { opacity: var(--led-peak, 1); transform: scale(1.16); }
}

@keyframes ledBlinkSlow {
  0%, 54%, 67%, 100% { opacity: .22; transform: scale(.94); }
  57%, 64% { opacity: var(--led-peak, .95); transform: scale(1.1); }
}

@keyframes ledBlinkData {
  0%, 8%, 15%, 21%, 48%, 55%, 100% { opacity: .14; transform: scale(.88); }
  10%, 13%, 17%, 19%, 50%, 53% { opacity: var(--led-peak, 1); transform: scale(1.18); }
}

@keyframes ledBlinkRare {
  0%, 81%, 86%, 90%, 100% { opacity: .1; transform: scale(.88); }
  83%, 84%, 88%, 89% { opacity: var(--led-peak, 1); transform: scale(1.13); }
}

@media (prefers-reduced-motion: reduce) {
  .rack-leds .led {
    animation: none !important;
    opacity: .5;
  }
}


/* Vom Editor auswählbare Blinkmuster */
.led-anim-fast,
.led-anim-slow,
.led-anim-data,
.led-anim-rare,
.led-anim-steady {
  animation-duration: var(--led-duration, 2s);
  animation-delay: var(--led-delay, 0s);
  animation-iteration-count: infinite;
}

.led-anim-fast   { animation-name: ledBlinkFast; animation-timing-function: steps(1, end); }
.led-anim-slow   { animation-name: ledBlinkSlow; animation-timing-function: steps(1, end); }
.led-anim-data   { animation-name: ledBlinkData; animation-timing-function: steps(1, end); }
.led-anim-rare   { animation-name: ledBlinkRare; animation-timing-function: steps(1, end); }
.led-anim-steady { animation-name: ledSteady; animation-timing-function: ease-in-out; }

@keyframes ledSteady {
  0%,100% { opacity: .72; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}