/* =====================================================================
   Scan-Hero — Adaption (Canvas2D) der WebGPU-Scan-Vorlage in Marken-Blau
   Nur auf der Leistungen-Seite. Gekapselt unter .scan-hero.
   ===================================================================== */
.scan-hero {
  position: relative;
  min-height: 90svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 130px 0 80px;
}
.scan-hero::before { display: none; } /* eigener Canvas-Hintergrund */

.scan-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.scan-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 85% at 50% 28%, transparent 0%, rgba(4,7,15,.35) 62%, var(--night) 100%),
    linear-gradient(to bottom, rgba(4,7,15,.45), transparent 26%, transparent 64%, var(--night));
}
.scan-hero .scan-inner { position: relative; z-index: 2; max-width: 1000px; }

.scan-title {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.0;
  font-size: clamp(2.5rem, 6.6vw, 5.6rem);
  margin: 8px 0 0;
  text-wrap: balance;
}
.scan-title .w {
  display: inline-block;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(16px);
}
.scan-title .w.in { animation: scanWordIn .55s var(--ease-out) forwards; }
@keyframes scanWordIn { to { opacity: 1; filter: blur(0); transform: none; } }

.scan-sub {
  margin-top: 22px;
  opacity: 0; transform: translateY(12px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.scan-sub.in { opacity: 1; transform: none; }

.scan-cue {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 42px;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted); opacity: 0; transition: opacity .7s var(--ease-out) .15s, color .25s;
}
.scan-cue.in { opacity: 1; }
.scan-cue:hover { color: var(--ice); }
.scan-arrow {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--line-d-strong); color: var(--blue-2);
  background: rgba(140, 185, 245, .05);
}
.scan-arrow svg { width: 16px; height: 16px; animation: scanBounce 1.9s var(--ease) infinite; }
@keyframes scanBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

@media (prefers-reduced-motion: reduce) {
  .scan-title .w, .scan-sub, .scan-cue { opacity: 1 !important; filter: none !important; transform: none !important; animation: none !important; }
  .scan-arrow svg { animation: none; }
}