/* ============================================================
   Infinero Motion — Scroll-, Hover- & 3D-Effekte
   Greift nur, wenn motion.js läuft (html.mo) und der Nutzer
   keine reduzierte Bewegung eingestellt hat. Ohne JS bleibt
   alles sichtbar und statisch.
   ============================================================ */

/* Lesefortschritt */
.mo-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;pointer-events:none;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--gold),var(--gold2))}

/* Inhalte gleiten beim Scrollen herein */
.mo .rv{opacity:0;transform:translate3d(0,28px,0);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .95s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.mo .rv.in{opacity:1;transform:none}

/* Überschriften Wort für Wort */
.mo .mo-split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.mo .mo-split .w>i{display:inline-block;font-style:normal;transform:translate3d(0,108%,0);transition:transform .95s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 42ms + var(--d,0s))}
.mo .mo-split.in .w>i{transform:none}
.mo .hero h1.mo-split .w>i{transition:none;animation:mo-wup 1s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.12s + var(--i,0) * 55ms)}
@keyframes mo-wup{from{transform:translate3d(0,108%,0)}to{transform:none}}

/* Editoriale Zeilen: Goldlinie zieht beim Erscheinen durch */
.row,.svc .it{position:relative}
.mo .row.rv::after,.mo .svc .it.rv::after{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,var(--gold),rgba(203,161,74,0));transform:scaleX(0);transform-origin:0 50%;opacity:0;pointer-events:none}
.mo .row.rv.in::after,.mo .svc .it.rv.in::after{animation:mo-sweep 1.6s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--d,0s) + .15s)}
@keyframes mo-sweep{0%{transform:scaleX(0);opacity:1}55%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}

/* Hover: Linie + leichter Versatz */
@media (hover:hover) and (pointer:fine){
  .row::before,.svc .it::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,var(--gold),rgba(203,161,74,.05));transform:scaleX(0);transform-origin:0 50%;transition:transform .6s cubic-bezier(.2,.7,.2,1);pointer-events:none}
  .row:hover::before,.svc .it:hover::before{transform:scaleX(1)}
  .row .k,.row h3,.svc .it b{transition:transform .4s cubic-bezier(.2,.7,.2,1),color .3s}
  .row:hover .k{transform:translateX(8px)}
  .row:hover h3{transform:translateX(4px)}
  .svc .it:hover b{transform:translateX(6px);color:var(--gold)}
  .wcard:hover .cap b{color:var(--gold)}
  .wcard .cap b{transition:color .3s}
}

/* 3D-Karten mit Lichtreflex */
.frame,.vs .col{position:relative}
.mo-glare{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;border-radius:inherit;z-index:2;
  background:radial-gradient(520px circle at var(--gx,50%) var(--gy,0%),rgba(255,248,230,.16),rgba(255,248,230,0) 42%)}
.mo-tilt:hover>.mo-glare,.mo-tilt.hov>.mo-glare{opacity:1}
.mo .mo-tilt{will-change:transform}
.frame img{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover) and (pointer:fine){ .wcard .frame:hover img,.mo-tilt.frame:hover img{transform:scale(1.035)} }

/* Hero-Bühne: per JS gesteuert, CSS-Hover abschalten */
.mo .stage.live .fw{transition:none}

/* "Sichtbar in" – Plattformen verbinden sich nacheinander */
.mo .strip .chip{transition:color .5s,border-color .5s,background .5s}
.mo .strip.pre .chip{color:var(--faint);border-color:var(--line)}
.mo .strip .chip.lit{color:var(--fg);border-color:var(--line2);animation:mo-chip 1.1s ease}
.strip .chip{position:relative}
.mo .strip .chip.lit::before{content:"";display:inline-block;width:6px;height:6px;border-radius:9px;background:var(--gold);margin-right:8px;vertical-align:1px;animation:mo-dot 1.1s ease}
@keyframes mo-chip{0%{border-color:var(--gold);background:rgba(203,161,74,.14)}100%{border-color:var(--line2);background:transparent}}
@keyframes mo-dot{0%{transform:scale(0)}50%{transform:scale(1.6)}100%{transform:scale(1)}}

/* GEO: Verbindungs-Grafik */
.geo-head{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);align-items:center}
.geo-graph{width:100%;max-width:520px;justify-self:end}
.geo-graph svg{width:100%;height:auto;display:block;overflow:visible}
.geo-graph .ln{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1.2;transition:stroke .35s}
.geo-graph .nd rect{fill:#121214;stroke:rgba(255,255,255,.2);stroke-width:1;transition:stroke .35s,fill .35s}
.geo-graph .nd text{font-family:Archivo,sans-serif;font-weight:700;font-size:14px;fill:var(--fg);letter-spacing:.01em}
.geo-graph .core rect{fill:var(--gold);stroke:none}
.geo-graph .core text{fill:var(--ink);font-weight:800;font-size:15px}
.geo-graph .ring{fill:none;stroke:var(--gold);stroke-width:1.2;opacity:0;transform-box:fill-box;transform-origin:center}
.geo-graph .pl{fill:var(--gold2)}
.geo-graph .spoke:hover .ln,.geo-graph .spoke.act .ln{stroke:var(--gold)}
.geo-graph .spoke:hover .nd rect,.geo-graph .spoke.act .nd rect{stroke:var(--gold);fill:#1a170f}
.geo-graph .spoke{cursor:default}
.geo-cap{color:var(--faint);font-size:13px;margin:10px 0 0;text-align:center}
.mo .geo-graph.pre .ln{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.mo .geo-graph .ln{transition:stroke-dashoffset 1.1s cubic-bezier(.4,0,.2,1),stroke .35s;transition-delay:var(--d,0s),0s}
.mo .geo-graph.pre .ln{stroke-dashoffset:var(--len)}
.mo .geo-graph.in .ln{stroke-dashoffset:0}
.mo .geo-graph .nd{transition:opacity .6s,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--d,0s) + .75s);transform-box:fill-box;transform-origin:center}
.mo .geo-graph.pre .nd{opacity:0;transform:scale(.6)}
.mo .geo-graph.in .nd{opacity:1;transform:none}
.mo .geo-graph .core{transition:opacity .6s,transform .8s cubic-bezier(.2,.7,.2,1);transform-box:fill-box;transform-origin:center}
.mo .geo-graph.pre .core{opacity:0;transform:scale(.7)}
.mo .geo-graph.in .core{opacity:1;transform:none}
.mo .geo-graph.run .ring{animation:mo-ring 2.6s ease-out infinite}
@keyframes mo-ring{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.55)}}

/* Früher / Heute */
.mo .vs.rv-host .col{transition:opacity .9s ease .5s,filter .9s ease .5s,border-color .8s ease .6s,box-shadow .8s ease .6s}
.mo .vs.rv-host.in .col:not(.now){opacity:.55;filter:grayscale(1)}
.mo .vs.rv-host.in .col.now{box-shadow:0 0 0 1px rgba(203,161,74,.35),0 30px 80px -40px rgba(203,161,74,.35)}
@media (hover:hover){ .mo .vs.rv-host.in .col:not(.now):hover{opacity:1;filter:none} }

/* Score-Karte (Startseite) */
.gauge{position:relative;width:132px;height:132px;margin:0 auto}
.gauge svg{width:100%;height:100%;transform:rotate(-90deg)}
.gauge circle{fill:none;stroke-width:7}
.gauge .g-bg{stroke:rgba(255,255,255,.08)}
.gauge .g-fg{stroke:var(--gold);stroke-linecap:round;stroke-dasharray:326.7;stroke-dashoffset:calc(326.7 * (1 - var(--v,.72)));transition:stroke-dashoffset 1.8s cubic-bezier(.2,.7,.2,1)}
.mo .gauge.pre .g-fg{stroke-dashoffset:326.7}
.g-num{position:absolute;inset:0;display:grid;place-items:center;align-content:center}
.g-num b{font-family:Archivo,sans-serif;font-weight:900;font-size:44px;line-height:1;color:var(--fg)}
.g-num span{font-size:12px;color:var(--faint);letter-spacing:.06em}
.g-bars{display:flex;flex-direction:column;gap:9px;margin:20px 0 6px;text-align:left}
.gb{display:grid;grid-template-columns:1fr 34px;gap:4px 10px;align-items:center;font-size:12.5px;color:var(--muted)}
.gb em{font-style:normal;text-align:right;color:var(--fg);font-weight:700;font-size:12.5px}
.gb i{grid-column:1 / -1;height:4px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden;position:relative}
.gb i::after{content:"";position:absolute;inset:0;background:var(--gold);border-radius:4px;transform-origin:0 50%;transform:scaleX(var(--v,.5));transition:transform 1.4s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.mo .g-bars.pre .gb i::after{transform:scaleX(0)}
.g-cap{font-size:11.5px;color:var(--faint);letter-spacing:.12em;text-transform:uppercase;margin:12px 0 0}

/* Großes Footer-Logo: Aufdecken + Goldschimmer */
.foot-mega a{position:relative;display:block}
.mo .foot-mega.pre img{clip-path:inset(0 0 100% 0);transform:translateY(30px)}
.mo .foot-mega img{transition:clip-path 1.2s cubic-bezier(.7,0,.2,1),transform 1.2s cubic-bezier(.2,.7,.2,1)}
.mo-shine{position:absolute;inset:0;pointer-events:none;opacity:0;
  -webkit-mask:var(--logo) center/100% 100% no-repeat;mask:var(--logo) center/100% 100% no-repeat;
  background:linear-gradient(100deg,rgba(255,236,190,0) 38%,rgba(255,236,190,.95) 50%,rgba(255,236,190,0) 62%);background-size:260% 100%;background-position:120% 0}
.mo-shine.go{animation:mo-shine 1.9s cubic-bezier(.4,0,.2,1)}
@keyframes mo-shine{0%{opacity:1;background-position:120% 0}100%{opacity:1;background-position:-20% 0}}

/* Responsive */
@media (max-width:900px){
  .stage .mo-glare{display:none}
  .geo-head{grid-template-columns:1fr}
  .geo-graph{justify-self:center;max-width:440px}
}

/* Sicherheit: reduzierte Bewegung = alles statisch */
@media (prefers-reduced-motion:reduce){
  .mo .rv,.mo .mo-split .w>i,.mo .geo-graph *,.mo .foot-mega img{transition:none!important;animation:none!important;opacity:1!important;transform:none!important;clip-path:none!important;stroke-dashoffset:0!important}
  .mo-progress{display:none}
}