/* GottZentrale · Bewegung & Antwort (11.10.2026)
   Ergänzt style.css. Alles hier greift nur, wenn gz-motion.js läuft (Klasse .gz-js am <html>).
   Grundsatz: Bewegung antwortet auf das, was jemand tut, läuft endlich oft und bleibt bei
   „Bewegung reduzieren“ ganz aus (zusätzlich zur globalen Regel in style.css). */

/* ---------- Antipp-Welle und Funken ---------- */
.gz-wave{position:fixed;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;pointer-events:none;z-index:2147483000;
  border:1.5px solid var(--gz-wave,var(--accent));box-shadow:0 0 18px rgba(var(--accent-rgb),.35),inset 0 0 8px rgba(var(--accent-rgb),.25);
  animation:gz-wave .75s cubic-bezier(.16,1,.3,1) forwards}
@keyframes gz-wave{from{transform:scale(.35);opacity:.95}to{transform:scale(6.5);opacity:0}}
.gz-spark{position:fixed;left:0;top:0;width:6px;height:6px;border-radius:50%;pointer-events:none;z-index:2147483000;background:var(--gz-spark,var(--accent));
  box-shadow:0 0 10px var(--gz-spark,var(--accent))}
.gz-spark.is-star{width:auto;height:auto;background:none;box-shadow:none;color:var(--gz-spark,var(--accent));font:14px/1 var(--font-mono);text-shadow:0 0 10px currentColor}

/* ---------- Erscheinen beim Scrollen (individuelle Eigenschaften, damit vorhandene transforms bleiben) ---------- */
.gz-js [data-gz-reveal]{opacity:0;translate:0 24px}
.gz-js [data-gz-reveal=card]{translate:0 38px;scale:.97}
.gz-js [data-gz-reveal=side]{translate:-18px 0}
.gz-js [data-gz-reveal].is-in{opacity:1;translate:none;scale:none;
  transition:opacity .8s cubic-bezier(.16,1,.3,1) var(--gz-delay,0ms),translate .95s cubic-bezier(.16,1,.3,1) var(--gz-delay,0ms),scale .95s cubic-bezier(.16,1,.3,1) var(--gz-delay,0ms)}
/* Goldene Zeile leuchtet einmal auf, wenn sie erscheint */
.gz-js .gz-glow.is-lit{animation:gz-glow 2.2s ease-out .25s 1 both}
@keyframes gz-glow{0%{text-shadow:0 0 0 rgba(var(--accent-rgb),0)}35%{text-shadow:0 0 26px rgba(var(--accent-rgb),.6),0 0 2px rgba(255,240,205,.6)}100%{text-shadow:0 0 0 rgba(var(--accent-rgb),0)}}

/* ---------- Startbild: Wörter steigen auf, „Neugier.“ wird geschrieben ---------- */
.gz-hero-in .hero-copy .eyebrow,.gz-hero-in .gz-word,.gz-hero-in .hero-copy .intro,.gz-hero-in .hero-actions,.gz-hero-in .hero-note{animation:gz-rise .95s cubic-bezier(.16,1,.3,1) var(--d,0ms) both}
.gz-word{display:inline-block}
.gz-hero-in h1 em{display:inline-block;animation:gz-write 1.1s cubic-bezier(.65,0,.35,1) var(--d,450ms) both,gz-glow 2.2s ease-out calc(var(--d,450ms) + 900ms) 1 both}
@keyframes gz-rise{from{opacity:0;translate:0 26px}to{opacity:1;translate:none}}
/* Negative Ränder, damit kursive Schwünge am Ende nicht abgeschnitten sind; danach fällt clip-path ganz weg */
@keyframes gz-write{from{clip-path:inset(-25% 100% -35% -8%);opacity:.4}60%{opacity:1}to{clip-path:inset(-25% -12% -35% -8%);opacity:1}}

/* ---------- Leitspruch-Band ---------- */
.gz-js .manifest-strip span{transition:color .6s,text-shadow .6s}
.gz-js .manifest-strip span.is-lit{color:var(--ink);text-shadow:0 0 14px rgba(var(--accent-rgb),.45)}
.gz-js .manifest-strip b{display:inline-block;will-change:rotate}

/* ---------- Werkzeug-Liste: Lichtspur unter der Zeile ---------- */
.gz-js .tool::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,var(--accent),rgba(var(--accent-rgb),.35) 55%,rgba(var(--accent-rgb),0));
  transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.16,1,.3,1);pointer-events:none}
.gz-js .tool:hover::before,.gz-js .tool:focus-visible::before{transform:scaleX(1)}
.gz-js .tool:active{scale:.992}
.gz-js .tool:hover::after,.gz-js .tool:focus-visible::after{text-shadow:0 0 12px rgba(var(--accent-rgb),.8)}

/* ---------- Projektkarten: Lichtkegel folgt dem Zeiger, Motive mit Tiefe ---------- */
.gz-js .world-card,.gz-js .log-project{position:relative}
.gz-js .world-card::after,.gz-js .log-project::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;opacity:0;transition:opacity .4s;
  background:radial-gradient(460px circle at var(--mx,50%) var(--my,30%),rgba(var(--accent-rgb),.09),transparent 62%)}
.gz-js .world-card:hover::after,.gz-js .log-project:hover::after{opacity:1}
.gz-js .world-art>*{translate:calc(var(--px,0) * var(--depth,8px)) calc(var(--py,0) * var(--depth,8px));transition:translate .6s cubic-bezier(.16,1,.3,1)}
.gz-js .profile-object{--depth:9px}
.gz-js .nfc-object{--depth:22px}
.gz-js .record{--depth:10px}
.gz-js .timeline-preview{--depth:9px}
.gz-js .code-object{--depth:16px}
.gz-js .lab-grid{--depth:-12px}
.gz-js .sound-caption{--depth:4px}
.gz-js .gz-tonearm,.gz-js .gz-record-sheen{--depth:10px}

/* MacherZentrale: die NFC-Karte tippt ans Profil – Ringe gehen vom Berührungspunkt aus */
.is-tapping .nfc-object{animation:gz-tap 1.15s cubic-bezier(.45,0,.2,1)}
@keyframes gz-tap{32%{translate:-54px -16px}44%{translate:-47px -13px}}
.is-tapping .profile-object{animation:gz-portrait 1.15s ease-out}
@keyframes gz-portrait{38%,55%{box-shadow:12px 20px 45px #0008,0 0 0 2px rgba(var(--accent-rgb),.85),0 0 34px rgba(var(--accent-rgb),.45)}}
.gz-tap-ring{position:absolute;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;border:1.5px solid var(--accent);pointer-events:none;z-index:4;animation:gz-ring 1s cubic-bezier(.16,1,.3,1) var(--d,0ms) both}
@keyframes gz-ring{from{transform:scale(.3);opacity:1}to{transform:scale(4.2);opacity:0}}

/* IAMGodMedia: Platte dreht sich an, der Tonarm schwenkt auf */
.gz-js .sound-art{isolation:isolate}
.gz-tonearm{position:absolute;left:calc(50% + 116px);top:calc(50% - 116px);width:4px;height:122px;margin-left:-2px;border-radius:3px;z-index:2;pointer-events:none;
  background:linear-gradient(#d9d2e3,#8c8299);box-shadow:3px 4px 10px #0008;transform-origin:2px 4px;rotate:-6deg;transition:rotate .9s cubic-bezier(.34,1.3,.5,1)}
.gz-tonearm::before{content:"";position:absolute;left:-7px;top:-7px;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#f2edf7,#7c718a);box-shadow:0 2px 6px #0009}
.gz-tonearm::after{content:"";position:absolute;left:-4px;bottom:-6px;width:12px;height:16px;border-radius:2px;background:#c8b4e1;rotate:18deg}
.is-playing-art .gz-tonearm{rotate:21deg}
.gz-record-sheen{position:absolute;left:50%;top:50%;width:220px;height:220px;margin:-110px 0 0 -110px;border-radius:50%;pointer-events:none;z-index:1;opacity:0;transition:opacity .6s;
  background:conic-gradient(from 210deg,transparent 0 8%,rgba(255,255,255,.13) 13%,transparent 19% 58%,rgba(200,180,225,.12) 63%,transparent 69%)}
.is-playing-art .gz-record-sheen{opacity:1}

/* Projekte & Updates: die neuesten Updates laufen voll */
.gz-js .timeline-preview .tl-bar::before{transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.16,1,.3,1) var(--d,0ms)}
.gz-js .timeline-preview.is-filled .tl-bar::before{transform:none}
.gz-js .timeline-preview .tl-bar span{overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 10px)}
.gz-js .timeline-preview .tl-bar{opacity:.35;transition:opacity .5s var(--d,0ms)}
.gz-js .timeline-preview.is-filled .tl-bar{opacity:1}

/* Labor: der Code tippt sich neu */
.gz-type-caret{display:inline-block;width:3px;height:.9em;margin-left:3px;margin-right:-6px;vertical-align:-.08em;background:var(--accent);box-shadow:0 0 10px rgba(var(--accent-rgb),.7);animation:gz-caret .9s steps(1) 4 both}
@keyframes gz-caret{0%,49%{opacity:1}50%,100%{opacity:0}}

/* ---------- Schluss: Fragezeichen hüpft, Knopf sprüht Funken ---------- */
.gz-q{display:inline-block;transform-origin:50% 85%}
.gz-q.is-lit{animation:gz-q 1.3s cubic-bezier(.3,1.6,.5,1) .35s 1 both}
@keyframes gz-q{0%{rotate:0deg;translate:0 0}25%{rotate:-14deg;translate:0 -18px}50%{rotate:9deg;translate:0 0}70%{rotate:-4deg}100%{rotate:0deg;color:var(--accent)}}

/* ---------- Live-Punkt im Laufband: endlich statt dauerhaft (WCAG 2.2.2) ---------- */
.gz-js .gz-ticker-title span{animation-iteration-count:6}

/* ---------- Projekte-Seite: Phasen-Punkte springen auf, Linie wächst ---------- */
.gz-js .log-project[data-gz-reveal] .log-phase-dot{scale:0;transition:scale .5s cubic-bezier(.34,1.56,.64,1) var(--pd,0ms)}
.gz-js .log-project[data-gz-reveal].is-in .log-phase-dot{scale:1}
.gz-js .log-project[data-gz-reveal] .log-phases li:not(:last-child)::after{transform:scaleY(0);transform-origin:top;transition:transform .6s ease-out var(--pd,0ms)}
.gz-js .log-project[data-gz-reveal].is-in .log-phases li:not(:last-child)::after{transform:none}
.gz-js .log-project.is-in .log-phases li.is-now .log-phase-dot{animation:gz-now 1.8s ease-out 1.4s 3}
@keyframes gz-now{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c) 70%,transparent)}100%{box-shadow:0 0 0 12px transparent}}

/* ---------- Musik: Cover atmet mit dem Bass, kippt mit dem Zeiger ---------- */
.gz-js .gz-music-cover{scale:calc(1 + var(--beat,0) * .055);box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 calc(var(--beat,0) * 70px) rgba(var(--accent-rgb),calc(var(--beat,0) * .55))}
.gz-js .gz-music-art{transform:perspective(800px) rotateX(calc(var(--py,0) * -7deg)) rotateY(calc(var(--px,0) * 9deg));transition:transform .6s cubic-bezier(.16,1,.3,1)}

@media (prefers-reduced-motion:reduce){
  .gz-js [data-gz-reveal]{opacity:1!important;translate:none!important;scale:none!important}
  .gz-wave,.gz-spark,.gz-tap-ring{display:none}
  .gz-js .world-art>*{translate:none!important}
  .gz-js .gz-music-art{transform:none!important}
  .gz-js .gz-music-cover{scale:none!important}
}
@media print{.gz-js [data-gz-reveal]{opacity:1!important;translate:none!important;scale:none!important}}