/* ============================================================
   Interaktivitäts-Layer (beide Relaunch-Projekte, token-basiert)
   ============================================================ */

/* ---------- Scroll-Fortschritt ---------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  z-index: 110;
  background: linear-gradient(90deg, var(--accent), var(--accent-soft));
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

/* ---------- Cursor-Glow ---------- */
.cursor-glow {
  position: fixed;
  left: -180px;
  top: -180px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 200;
  background: radial-gradient(circle, var(--glow) 0%, transparent 65%);
  opacity: 0;
  transition: opacity 0.5s ease;
  mix-blend-mode: screen;
  will-change: transform;
}

/* ---------- Wort-Reveals in Headlines ---------- */
.wsplit .wword {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.6em);
  transition:
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--wi, 0) * 55ms),
    opacity 0.55s ease calc(var(--wi, 0) * 55ms);
}
.wsplit.in .wword { opacity: 1; transform: none; }

/* ---------- Karten: Glanzlicht folgt dem Cursor ---------- */
.tilt { position: relative; will-change: transform; }
.tilt::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, 0.07), transparent 60%);
}
.tilt:hover::after { opacity: 1; }

/* ---------- Marquee-Band ---------- */
.marquee {
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--bg-1);
  padding: clamp(18px, 3vh, 30px) 0;
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-run 46s linear infinite;
}
.marquee-track span {
  font-family: var(--display, var(--serif));
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.8rem);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px var(--line-strong);
  padding-right: 0.6em;
}
.marquee-track span b {
  font-weight: 800;
  color: var(--accent);
  -webkit-text-stroke: 0;
}
@keyframes marquee-run {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee:hover .marquee-track { animation-play-state: paused; }

/* ---------- IBK: LP-Balken füllen sich gestaffelt ---------- */
.lp-bar .seg {
  transition:
    background 0.35s ease calc(var(--si, 0) * 70ms),
    border-color 0.35s ease calc(var(--si, 0) * 70ms),
    box-shadow 0.35s ease calc(var(--si, 0) * 70ms);
}
.lp-bar:not(.play) .seg.on {
  background: var(--panel);
  border-color: var(--line);
  box-shadow: none;
}

/* ---------- HVAC: Ablauf-Linien zeichnen sich ---------- */
.ablauf-steps .step::after {
  width: 0;
  transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--sd, 0) * 0.16s);
}
.ablauf-steps .step:nth-child(2)::after { --sd: 1; }
.ablauf-steps .step:nth-child(3)::after { --sd: 2; }
.ablauf-steps .step:nth-child(4)::after { --sd: 3; }
.reveal-stagger.in .step::after { width: 34%; }

/* ---------- Typewriter-Intro (Unterseiten-Hero) ---------- */
.tw-char { visibility: hidden; }
.tw-char.on { visibility: visible; }
.tw-caret {
  display: inline-block;
  width: 3px;
  height: 0.95em;
  background: var(--accent);
  margin-left: 3px;
  vertical-align: -0.08em;
  animation: caret-blink 0.7s step-end infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }

/* ---------- FAQ: Antwort blendet weich ein ---------- */
.faq-list details[open] p { animation: faq-in 0.4s ease; }
@keyframes faq-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Gewerk-Icons: nachzeichnen beim Hover ---------- */
.gewerk svg path, .gewerk svg circle {
  stroke-dasharray: 130;
  stroke-dashoffset: 0;
}
.gewerk:hover svg path, .gewerk:hover svg circle {
  animation: icon-draw 0.9s ease forwards;
}
@keyframes icon-draw {
  from { stroke-dashoffset: 130; }
  to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .wsplit .wword { opacity: 1 !important; transform: none !important; transition: none !important; }
  .lp-bar:not(.play) .seg.on { background: var(--brand-700, var(--panel)); }
  .ablauf-steps .step::after { width: 34%; transition: none; }
  .tw-char { visibility: visible !important; }
  .tw-caret { display: none; }
}