/* DOX – Logo Rotation (CCW) + bunter Shimmer
   -------------------------------------------------------------- */
:root {
  --logo-spin-duration: 12s;
  --logo-spin-iterations: infinite;
  --logo-spin-ease: linear;   /* wird in der Phasen-Variante überschrieben */
  --logo-spin-delay: 0s;
}

/* Basisklasse: CCW-Rotation */
.rotating-logo {
  display: inline-block;
  transform-origin: center center;
  animation-name: dox-spin-ccw; /* CCW */
  animation-duration: var(--logo-spin-duration);
  animation-iteration-count: var(--logo-spin-iterations);
  animation-timing-function: var(--logo-spin-ease);
  animation-delay: var(--logo-spin-delay);
  animation-fill-mode: both;
  will-change: transform;
}

/* Phasen-Variante: Start langsam -> schneller -> langsam auslaufen (CCW) */
.rotating-logo--phased {
  animation-name: dox-spin-phased-ccw;
  animation-timing-function: linear; /* Timing pro Keyframe */
}

/* 360° Rotation – CCW */
@keyframes dox-spin-ccw {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

/* Beschleunigen, cruisen, abbremsen – CCW */
@keyframes dox-spin-phased-ccw {
  0%   { transform: rotate(0deg);     animation-timing-function: cubic-bezier(.55,.06,.68,.19); }
  50%  { transform: rotate(-300deg);  animation-timing-function: cubic-bezier(.17,.84,.44,1);   }
  100% { transform: rotate(-360deg); }
}

/* --------------------------------------------------------------
   Bunter Shimmer für den Rotations-Text
   -------------------------------------------------------------- */
.shimmer-text {
  display: inline-block;
  position: relative;

  /* Rainbow-Gradient, der über den Text läuft */
  background-image: linear-gradient(
  90deg,
  #6aa9ff 0%,
  #49d6ff 25%,
  #2ce6c9 50%,
  #49d6ff 75%,
  #6aa9ff 100%
  );
  background-size: 300% 100%;
  background-position: 200% 0;

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  /* leichte Klarheit für Safari/WebKit */
  text-shadow: 0 0 0.01px rgba(0,0,0,0.01);

  animation: dox-rainbow-shimmer 20.40s linear infinite;
}

/* Bewegung des Verlaufs (Shimmer) */
@keyframes dox-rainbow-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Hover etwas schneller, wirkt "lebendiger" */
.start-link.shimmer-text:hover {
  animation-duration: 10.60s;
}

/* Barrierefreiheit: Bewegungen reduzieren */
@media (prefers-reduced-motion: reduce) {
  .rotating-logo,
  .rotating-logo--phased,
  .shimmer-text {
    animation: none !important;
    background-position: 50% 0 !important;
  }
}
