/* =============================================================
   copyright-footer.css — Animierter Credits-Footer
   Owner-Wunsch 2026-05-07: bunt, animiert, motion effects.
   GPU-only (transform / opacity / filter / background-position),
   respektiert prefers-reduced-motion.
   ============================================================= */

.tm-credits-footer {
  position: relative;
  z-index: 1;
  margin-top: 18px;
  /* unten genug Luft fuer die fixed Bottom-Nav (64px) + Android-Inset */
  padding: 10px 12px calc(80px + var(--mobile-nav-lift, 0px));
  background: transparent;
  border: 0;
  text-align: center;
  overflow: hidden;
}

.tm-credits {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 5px;
  font-family: 'Orbitron', 'Bebas Neue', Impact, sans-serif;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

/* © Symbol — leichter Pulse + Glow */
.tm-credits__symbol {
  display: inline-block;
  font-size: .75rem;
  color: #00e676;
  text-shadow:
    0 0 6px rgba(0, 230, 118, .55),
    0 0 14px rgba(0, 230, 118, .25);
  animation: tmCreditPulse 2.4s ease-in-out infinite;
}

/* "CODE / DESIGN / LOGIC" Lead-Tokens — wandernder Multi-Color Gradient */
.tm-credits__lead {
  background: linear-gradient(90deg,
    #40c4ff 0%,
    #00e676 25%,
    #ffd740 50%,
    #ff4081 75%,
    #b388ff 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 6px rgba(64, 196, 255, .25));
  animation: tmCreditDrift 8s linear infinite;
}

.tm-credits__lead:nth-of-type(2) { animation-delay: -2.5s; filter: drop-shadow(0 0 6px rgba(0, 230, 118, .25)); }
.tm-credits__lead:nth-of-type(3) { animation-delay: -5s;   filter: drop-shadow(0 0 6px rgba(255, 215, 64, .25)); }

.tm-credits__dot {
  color: rgba(255, 255, 255, .35);
  font-size: 1rem;
  animation: tmCreditDotBlink 3.6s ease-in-out infinite;
}

.tm-credits__dot:nth-of-type(2) { animation-delay: -1.8s; }

/* "by" Subtle */
.tm-credits__by-text {
  color: rgba(240, 244, 248, .55);
  font-weight: 500;
  letter-spacing: .12em;
}

/* "MAURICE PUTINAS" — der Star: Gradient-Drift + Shimmer-Sweep */
.tm-credits__name {
  position: relative;
  display: inline-block;
  background: linear-gradient(90deg,
    #ff80ab 0%,
    #ff4081 16%,
    #b388ff 33%,
    #40c4ff 50%,
    #00e676 66%,
    #ffd740 83%,
    #ff80ab 100%);
  background-size: 280% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 800;
  letter-spacing: .16em;
  filter:
    drop-shadow(0 0 4px rgba(255, 71, 156, .35))
    drop-shadow(0 0 14px rgba(64, 196, 255, .15));
  animation: tmCreditDrift 6s linear infinite;
}

/* Shimmer-Sweep ueber den Namen — weisser Lichtstrich */
.tm-credits__name::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg,
    transparent 0%,
    transparent 38%,
    rgba(255, 255, 255, .9) 50%,
    transparent 62%,
    transparent 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: tmCreditShimmer 4.5s ease-in-out infinite;
  pointer-events: none;
}

/* ── Keyframes ──────────────────────────────────────────────── */

@keyframes tmCreditDrift {
  0%   { background-position:   0% 50%; }
  100% { background-position: 240% 50%; }
}

@keyframes tmCreditPulse {
  0%, 100% {
    transform: scale(1);
    text-shadow:
      0 0 8px rgba(0, 230, 118, .6),
      0 0 18px rgba(0, 230, 118, .3);
  }
  50% {
    transform: scale(1.12);
    text-shadow:
      0 0 14px rgba(0, 230, 118, .9),
      0 0 28px rgba(0, 230, 118, .55),
      0 0 44px rgba(0, 230, 118, .25);
  }
}

@keyframes tmCreditShimmer {
  0%   { background-position: 200% 50%; opacity: 0; }
  20%  { opacity: 1; }
  60%  { opacity: 1; }
  80%  { opacity: 0; }
  100% { background-position: -100% 50%; opacity: 0; }
}

@keyframes tmCreditDotBlink {
  0%, 100% { opacity: .35; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.18); color: #00e676; }
}

@media (prefers-reduced-motion: reduce) {
  .tm-credits__symbol,
  .tm-credits__lead,
  .tm-credits__name,
  .tm-credits__name::after,
  .tm-credits__dot { animation: none; }
}