/* ==========================================================================
   TCB Speed Shop — Motion-Paket (tcb-motion.css)
   Produktionsfassung: nur transform/opacity werden animiert (Compositor),
   keine width/left/top-Animationen, kein Layout-Thrash.
   Voraussetzung: die Design-System-Tokens sind geladen
   (tokens/colors.css + tokens/motion.css) — dieses File referenziert
   var(--accent), var(--canvas), var(--hairline), var(--duration-*), var(--ease-*).
   ========================================================================== */

/* --------------------------------------------------------------
   0 · Reduced Motion — Pflicht. Alles Dekorative wird abgeschaltet,
   Zustandswechsel bleiben (ohne Übergang).
   -------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .tcb-reveal, .tcb-hero > *, .tcb-kenburns, .tcb-underline::after,
  .tcb-skeleton::after, .tcb-spinner, .tcb-loadbar::after,
  .tcb-wipe, .tcb-toast, .tcb-count {
    animation: none !important;
    transition: none !important;
  }
  .tcb-reveal, .tcb-hero.is-loaded > * { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------
   1 · Scroll-Reveal (Webseite)
   Markup:  <section class="tcb-reveal" data-tcb-reveal> … </section>
   JS setzt .is-inview genau EINMAL (IntersectionObserver).
   Stagger: style="--tcb-delay: .15s" auf dem Element.
   -------------------------------------------------------------- */
.tcb-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity var(--duration-slow) var(--ease-standard),
    transform var(--duration-slow) var(--ease-standard);
  transition-delay: var(--tcb-delay, 0s);
  will-change: opacity, transform;
}
.tcb-reveal.is-inview { opacity: 1; transform: translateY(0); will-change: auto; }

/* --------------------------------------------------------------
   2 · Hero-Einstieg (einmalig beim Laden)
   Markup:  <header class="tcb-hero"> <p class="tcb-hero__eyebrow">…
            <h1 class="tcb-hero__title-clip"><span class="tcb-hero__title">…
            <div class="tcb-hero__rule"></div> </header>
   JS (oder inline onload) setzt .is-loaded auf .tcb-hero.
   -------------------------------------------------------------- */
.tcb-hero__eyebrow {
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-standard) 0.1s;
}
.tcb-hero__title-clip { overflow: hidden; }
.tcb-hero__title {
  display: block;
  transform: translateY(112%);
  transition: transform 0.5s var(--ease-standard) 0.2s;
}
.tcb-hero__rule {
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s var(--ease-standard) 0.55s;
}
.tcb-hero.is-loaded .tcb-hero__eyebrow { opacity: 1; }
.tcb-hero.is-loaded .tcb-hero__title { transform: translateY(0); }
.tcb-hero.is-loaded .tcb-hero__rule { transform: scaleX(1); }

/* --------------------------------------------------------------
   3 · Garage Band · Bild-Drift (Ken Burns, fester Rahmen)
   Markup:  <div class="tcb-frame"><img class="tcb-kenburns" …></div>
   Kosten: GPU-Skalierung eines Bildes — bei sehr großen Hero-Bildern
   sparsam einsetzen (max. 1 pro Viewport).
   -------------------------------------------------------------- */
.tcb-frame { overflow: hidden; }
.tcb-kenburns { animation: tcb-kenburns 18s ease-in-out infinite; }
@keyframes tcb-kenburns {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* --------------------------------------------------------------
   4 · Sticky-Nav Verdichtung
   JS setzt .is-scrolled ab ~24px Scroll (rAF-gedrosselt).
   Ehrlicher Hinweis: backdrop-filter ist der teuerste Effekt im Paket.
   Auf die Nav-Höhe begrenzt ist er ok; bei Performance-Problemen
   die blur-Zeile streichen — die Canvas-Fläche reicht.
   -------------------------------------------------------------- */
.tcb-nav {
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard);
}
.tcb-nav.is-scrolled {
  background: rgba(20, 16, 11, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom-color: var(--hairline);
}

/* --------------------------------------------------------------
   5 · Ladeanimationen
   Spinner:  <div class="tcb-spinner"></div>  (Emblem optional zentriert)
   Leiste:   <div class="tcb-loadbar"></div>
   -------------------------------------------------------------- */
.tcb-spinner {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 2px solid var(--hairline);
  border-top-color: var(--accent);
  animation: tcb-spin 1.1s linear infinite;
}
@keyframes tcb-spin { to { transform: rotate(360deg); } }
.tcb-loadbar {
  position: relative;
  height: 3px;
  background: var(--hairline);
  overflow: hidden;
}
.tcb-loadbar::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 34%; height: 100%;
  background: var(--accent);
  animation: tcb-sweep 1.2s var(--ease-standard) infinite;
}
@keyframes tcb-sweep {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(340%); }
}

/* --------------------------------------------------------------
   6 · Skeleton-Schimmer (Admin) — Schimmer als transform-Overlay,
   kein background-position-Repaint.
   Markup:  <div class="tcb-skeleton" style="width:…; height:…"></div>
   -------------------------------------------------------------- */
.tcb-skeleton {
  position: relative;
  overflow: hidden;
  background: #1C1610;
}
.tcb-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(44,36,26,0) 0%, rgba(44,36,26,0.9) 50%, rgba(44,36,26,0) 100%);
  transform: translateX(-100%);
  animation: tcb-shimmer 1.6s linear infinite;
}
@keyframes tcb-shimmer { to { transform: translateX(100%); } }

/* --------------------------------------------------------------
   7 · Nav-Unterstrich & Link-Hover
   Markup:  <a class="tcb-underline" href="…">Leistungen</a>
   -------------------------------------------------------------- */
.tcb-underline { position: relative; text-decoration: none; }
.tcb-underline::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%; height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--duration-fast) var(--ease-standard);
}
.tcb-underline:hover::after, .tcb-underline:focus-visible::after { transform: scaleX(1); }

/* --------------------------------------------------------------
   8 · Karten-Hover (tonale Stufe, kein Schatten)
   -------------------------------------------------------------- */
.tcb-card-hover {
  transition:
    background var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard);
}
.tcb-card-hover:hover { background: var(--surface-elevated); transform: translateY(-3px); }

/* --------------------------------------------------------------
   9 · Seiten-Wischer (Übergang) — JS: TCBMotion.wipe(callback)
   -------------------------------------------------------------- */
.tcb-wipe {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--canvas);
  border-left: 6px solid var(--accent);
  border-right: 6px solid var(--accent);
  transform: translateX(-104%);
  pointer-events: none;
}
.tcb-wipe.is-in { transition: transform 0.36s var(--ease-standard); transform: translateX(0); }
.tcb-wipe.is-out { transition: transform 0.36s var(--ease-standard); transform: translateX(104%); }

/* --------------------------------------------------------------
   10 · Toast (Admin) — JS: TCBMotion.toast('Anfrage gespeichert')
   -------------------------------------------------------------- */
.tcb-toast {
  position: fixed;
  right: 24px; bottom: 24px;
  z-index: 9998;
  display: flex; align-items: center; gap: 14px;
  max-width: 340px;
  padding: 16px 20px;
  background: var(--surface-elevated);
  border: 1px solid var(--hairline);
  color: var(--text);
  transform: translateX(calc(100% + 24px));
  transition: transform 0.32s var(--ease-standard);
}
.tcb-toast.is-in { transform: translateX(0); }

/* --------------------------------------------------------------
   11 · Status-Chips (Admin) — nur Klassen tauschen, CSS blendet über
   -------------------------------------------------------------- */
.tcb-chip {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  color: var(--text-muted);
  background: transparent;
  transition:
    color var(--duration-base) var(--ease-standard),
    background var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard);
}
.tcb-chip--arbeit { color: var(--accent); border-color: var(--accent); }
.tcb-chip--fertig { color: var(--on-accent); border-color: var(--text); background: var(--text); }

/* --------------------------------------------------------------
   12 · Fortschritt (Upload) — Breite über scaleX, JS setzt --p (0..1)
   Markup:  <div class="tcb-progress" style="--p:0"><div class="tcb-progress__bar"></div></div>
   -------------------------------------------------------------- */
.tcb-progress { height: 4px; background: var(--hairline); overflow: hidden; }
.tcb-progress__bar {
  height: 100%;
  background: var(--accent);
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
  transition: transform var(--duration-base) linear;
}

/* --------------------------------------------------------------
   13 · Warenkorb-Button (Shop) — Klassen .is-loading / .is-done,
   Badge-Bump über Keyframe (einmalig, JS re-triggert per Klasse)
   -------------------------------------------------------------- */
.tcb-cart-btn .tcb-cart-btn__spinner,
.tcb-cart-btn .tcb-cart-btn__check { display: none; }
.tcb-cart-btn.is-loading .tcb-cart-btn__spinner { display: inline-block; }
.tcb-cart-btn.is-done .tcb-cart-btn__check { display: inline-block; }
.tcb-cart-btn { transition: background var(--duration-fast) var(--ease-standard); }
.tcb-badge.is-bump { animation: tcb-bump 0.3s var(--ease-standard); }
@keyframes tcb-bump { 0% { transform: scale(1.3); } 100% { transform: scale(1); } }

/* --------------------------------------------------------------
   14 · Produktkarte (Shop) — Hover: Tonstufe + Bild 1.03 + Schnellansicht
   Markup:  <a class="tcb-prodcard"><div class="tcb-frame">
            <img class="tcb-prodcard__img" …>
            <div class="tcb-prodcard__quick">Schnellansicht</div></div> … </a>
   -------------------------------------------------------------- */
.tcb-prodcard { display: block; background: #1C1610; transition: background var(--duration-base) var(--ease-standard); }
.tcb-prodcard__img { transition: transform var(--duration-base) var(--ease-standard); }
.tcb-prodcard__quick {
  transform: translateY(100%);
  opacity: 0;
  transition:
    transform var(--duration-base) var(--ease-standard),
    opacity var(--duration-base) var(--ease-standard);
}
.tcb-prodcard:hover { background: var(--surface-elevated); }
.tcb-prodcard:hover .tcb-prodcard__img { transform: scale(1.03); }
.tcb-prodcard:hover .tcb-prodcard__quick,
.tcb-prodcard:focus-visible .tcb-prodcard__quick { transform: translateY(0); opacity: 1; }

/* --------------------------------------------------------------
   15 · Checkout-Schritte (Shop) — Goldlinie über scaleX, JS setzt --step (0..1)
   -------------------------------------------------------------- */
.tcb-steps__line { height: 2px; background: var(--hairline); }
.tcb-steps__line-fill {
  height: 100%;
  background: var(--accent);
  transform: scaleX(var(--step, 0));
  transform-origin: left center;
  transition: transform var(--duration-slow) var(--ease-standard);
}
.tcb-steps__dot {
  border: 1px solid var(--hairline);
  color: var(--text-muted);
  background: transparent;
  transition:
    color var(--duration-base) var(--ease-standard),
    background var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard);
}
.tcb-steps__dot.is-active { border-color: var(--accent); color: var(--accent); }
.tcb-steps__dot.is-done { border-color: var(--text); background: var(--text); color: var(--on-accent); }

/* --------------------------------------------------------------
   16 · Zahlen-Zähler — reines JS (TCBMotion), tnum gegen Zittern
   -------------------------------------------------------------- */
.tcb-count { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------
   17 · Nav-Leiste — gleitende Goldlinie (Desktop-Nav)
   Markup:  <nav class="tcb-navline" data-tcb-navline>
              <a href="/service" class="is-active">Service</a> …
            </nav>
   JS hängt den Indikator ein und bewegt ihn per transform;
   der per-Link-Unterstrich (.tcb-underline) entfällt in dieser Leiste.
   -------------------------------------------------------------- */
.tcb-navline { position: relative; }
.tcb-navline > a { transition: color var(--duration-fast) var(--ease-standard); }
.tcb-navline__ind {
  position: absolute;
  left: 0; bottom: 0;
  width: 100px; height: 2px;
  background: var(--accent);
  transform-origin: left center;
  pointer-events: none;
  transition:
    transform var(--duration-base) var(--ease-standard),
    opacity var(--duration-fast) var(--ease-standard);
}
@media (prefers-reduced-motion: reduce) {
  .tcb-navline__ind { transition: none !important; }
}