/* MZLuzifer – eigene Styles, ergänzend zu Tailwind (CDN) */

:root {
  --mz-bg: #0b0b0f;
  --mz-surface: #15151c;
  --mz-line: #2a2a35;
  --mz-text: #f4f4f6;
  --mz-muted: #a3a3b2;
  --mz-orange: #ff5a36;
  --mz-pink: #ff4fa3;
  --mz-yellow: #ffd45a;
  --mz-cyan: #2de2e6;
  --mz-grad: linear-gradient(90deg, var(--mz-orange), var(--mz-pink) 50%, var(--mz-yellow));
}

html { scroll-behavior: smooth; }
body { background: var(--mz-bg); color: var(--mz-text); }

.text-grad {
  background: var(--mz-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Skip-Link für Tastaturnutzer */
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  padding: .75rem 1rem; background: var(--mz-text); color: var(--mz-bg); font-weight: 700;
}
.skip-link:focus { top: 1rem; }

:focus-visible { outline: 2px solid var(--mz-yellow); outline-offset: 3px; }

/* Hero */
#speed-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.emblem {
  filter: drop-shadow(0 0 40px rgba(255, 90, 54, .35));
  animation: emblem-in 1s cubic-bezier(.2,.8,.2,1) both, float 6s ease-in-out 1s infinite;
}
.emblem:hover { animation: spin 1.2s cubic-bezier(.2,.8,.2,1); }

@keyframes emblem-in { from { opacity: 0; transform: scale(.6) rotate(-120deg); } to { opacity: 1; transform: none; } }
@keyframes float { 50% { transform: translateY(-10px); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* Rennstreifen aus dem Logo */
.stripes { display: flex; gap: .75rem; }
.stripes span {
  height: 14px; flex: 1; transform: skewX(-40deg);
  background: #2b2b33;
}
.stripes span:nth-child(odd) { background: var(--mz-grad); background-size: 200% 100%; animation: shimmer 3s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* Scroll-Reveal */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }

/* Leistungs-Karten */
.card {
  position: relative; background: var(--mz-surface); border: 1px solid var(--mz-line);
  transition: transform .3s ease, border-color .3s ease;
}
.card::before {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 0;
  background: var(--mz-grad); transition: width .4s ease;
}
.card:hover { transform: translateY(-4px); border-color: #3a3a48; }
.card:hover::before { width: 100%; }

/* ===== Stintplaner-Button im Diginauts-Stil =====
   Abgeschrägte Ecken, Neon-Verlaufsrahmen, Glow, Licht-Sweep, Mono-Label. */
.btn-digi {
  --cut: 14px;
  position: relative; display: inline-flex; align-items: center; gap: .9rem;
  padding: 1.05rem 1.9rem 1.05rem 1.6rem;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .95rem;
  color: var(--mz-text); text-decoration: none; isolation: isolate;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  background: var(--mz-grad); background-size: 200% 100%;
  transition: transform .2s ease, filter .3s ease, background-position .6s ease;
  filter: drop-shadow(0 0 14px rgba(255, 79, 163, .45));
}
/* Innenfläche, damit nur ein 2px-Rahmen sichtbar bleibt */
.btn-digi::before {
  content: ""; position: absolute; inset: 2px; z-index: -1;
  clip-path: inherit; background: #101016;
  transition: background .3s ease;
}
/* Licht-Sweep */
.btn-digi::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);
  transform: skewX(-20deg); animation: sweep 3.2s ease-in-out infinite;
}
.btn-digi .digi-dot {
  width: .55rem; height: .55rem; border-radius: 9999px; background: var(--mz-cyan);
  box-shadow: 0 0 10px var(--mz-cyan); animation: blink 1.6s steps(2, start) infinite;
}
.btn-digi .digi-arrow { transition: transform .25s ease; }
.btn-digi:hover { background-position: 100% 0; filter: drop-shadow(0 0 24px rgba(255, 90, 54, .7)); transform: translateY(-2px); }
.btn-digi:hover::before { background: #18121a; }
.btn-digi:hover .digi-arrow { transform: translateX(6px); }
.btn-digi:active { transform: translateY(0) scale(.98); }
.btn-digi:focus-visible { outline: none; filter: drop-shadow(0 0 0 2px var(--mz-yellow)) drop-shadow(0 0 22px rgba(255,212,90,.8)); }

@keyframes sweep { 0%, 55% { left: -60%; } 100% { left: 130%; } }
@keyframes blink { to { visibility: hidden; } }

/* Bewegung reduzieren, wenn gewünscht */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}