/* Bewegungsschicht für den Entwurf index-motion.html.
   Alles hier ist zusätzlich — styles.css und fancy.css bleiben unberührt.
   Die Effekte starten erst, wenn body die Klasse mc-on trägt; die setzt
   mc-motion.js, sobald das Hero-Video durch ist.
   Intensität bewusst zurückgenommen (~60 % der Vorlage). */

/* ---------- Grundzustand: alles ruht, bis das Video durch ist ---------- */
.mc-fx{opacity:0;transition:opacity 1.6s cubic-bezier(.22,.61,.36,1)}
body.mc-on .mc-fx{opacity:1}

/* ---------- Warp-Feld hinter dem Hero ---------- */
.hero{isolation:isolate}
#mcSky{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;mix-blend-mode:screen}
.hero .container{position:relative;z-index:2}
.hero-bg-veil{z-index:1;pointer-events:none}

/* ---------- Hero rechts: Atom, Kennfelder, Footprint ---------- */
.hero-grid{perspective:1500px;align-items:start}
.hero-copy{align-self:start;margin-top:clamp(40px,7vh,110px)}
.mc-hero-visual{position:relative;display:block;min-height:530px;transform:rotateY(var(--mc-ty,0deg)) rotateX(var(--mc-tx,0deg));transform-style:preserve-3d;transition:transform .5s cubic-bezier(.22,.61,.36,1);will-change:transform}
body.mc-paused .mc-hero-visual{transform:none}
.hero.has-video.content-in .mc-hero-visual .hero-chart,.mc-hero-visual .hero-chart{transform:translateZ(30px);margin-top:48px}
.mc-chip{position:absolute;z-index:3;padding:10px 14px;background:linear-gradient(90deg,#111f37ef,#0d172688);backdrop-filter:blur(8px);border-left:2px solid #79efff;box-shadow:0 7px 25px #0005;font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;color:var(--ink-soft);white-space:nowrap}
.mc-chip b{display:block;font-size:14px;letter-spacing:0;color:#d8f9ff;margin-top:8px;font-weight:400}
.mc-chip.one{left:0;top:110px;transform:translateZ(65px)}
.mc-chip.two{right:-8px;top:265px;border-left-color:#bf96ff;transform:translateZ(100px)}
.mc-chip.two b{color:#d4b5ff}
@media(max-width:1000px){.mc-chip{display:none}}

/* ---------- Scroll-Story ---------- */
.mc-story{position:relative;height:280vh}
.mc-story-stage{position:sticky;top:0;min-height:100vh;display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,5vw,80px);align-items:center;padding:0 clamp(20px,5vw,64px);max-width:1360px;margin:0 auto}
.mc-story-copy{transform:translateY(var(--mc-copy,14px));transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.mc-count{font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft)}
.mc-story-copy h2{font-size:clamp(34px,4.2vw,62px);line-height:1.04;margin:20px 0 18px}
.mc-story-copy h2 em{font-style:normal;color:var(--champagne-bright)}
.mc-story-copy p{color:var(--ink-muted);font-size:16px;line-height:1.7;max-width:42ch;margin:0}
.mc-progress{margin-top:34px;height:1px;background:var(--line);position:relative;max-width:320px}
.mc-progress span{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--champagne-deep),var(--champagne-bright));width:0;transition:width .15s linear}
.mc-story-hint{margin-top:14px;font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
.mc-story-art{transform:rotateY(var(--mc-cam,-18deg)) scale(var(--mc-scale,.82));transform-origin:50% 50%;transition:transform .25s linear;will-change:transform}
.mc-story svg{width:100%;height:auto;display:block}
.mc-story .mc-line{fill:none;stroke:var(--champagne-bright);stroke-width:1.6;filter:drop-shadow(0 0 6px rgba(91,142,232,.35))}
.mc-story .mc-zone{fill:rgba(91,142,232,.06);stroke:var(--champagne-line);stroke-dasharray:4 5}
.mc-story .mc-grid{stroke:var(--noir-500)}
.mc-story text{font-family:var(--font-mono);font-size:9px;letter-spacing:.16em;fill:var(--ink-soft)}
.mc-story .mc-mark{opacity:0;transition:opacity .45s ease}
.mc-story .mc-mark text{fill:var(--champagne-bright)}
@media(max-width:900px){.mc-story{height:auto}.mc-story-stage{position:static;grid-template-columns:1fr;min-height:0;padding:80px clamp(20px,5vw,40px)}.mc-story-art{transform:none}}

/* ---------- Signal: Partikelfeld + Kompass ---------- */
.mc-signal{padding:clamp(72px,9vw,130px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mc-signal-grid{display:block}
.mc-signal h2{font-size:clamp(30px,3.4vw,50px);line-height:1.06;margin:18px 0 0}
.mc-signal h2 em{font-style:normal;color:var(--champagne-bright)}
.mc-canvas-frame{margin-top:34px;border:1px solid var(--line);background:rgba(255,255,255,.015);position:relative}
#mcField{display:block;width:100%;height:470px}
.mc-canvas-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:11px 16px;border-top:1px solid var(--line);font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.mc-pause{appearance:none;background:transparent;border:1px solid var(--line);color:var(--ink-muted);font:inherit;padding:6px 12px;border-radius:2px;cursor:pointer;transition:.2s}
.mc-pause:hover{border-color:var(--champagne-line);color:var(--champagne-bright)}

/* Hologramm — 1:1 aus dem Entwurf übernommen, nur Klassennamen angepasst.
   Die drei Bahnen dreht mc-motion.js mit wandernden Geschwindigkeiten. */
.mc-orb{position:relative;width:390px;height:390px;max-width:100%;margin:0 auto;border-radius:50%;background:radial-gradient(circle,#2b426142,transparent 58%);filter:drop-shadow(0 0 28px #69dfff25);transform-style:preserve-3d;will-change:translate}
.mc-orb::before{content:"";position:absolute;inset:15px;border:1px solid #71d5ff40;border-radius:50%;box-shadow:inset 0 0 45px #497eff15,0 0 55px #497eff10;background:repeating-conic-gradient(from 0deg,#79efff70 0deg .4deg,transparent .4deg 6deg);mask:radial-gradient(transparent 68%,#000 69%);-webkit-mask:radial-gradient(transparent 68%,#000 69%)}
.mc-orb::after{content:"";position:absolute;inset:68px;border:1px solid #97acff70;border-radius:50%;box-shadow:0 0 18px #6edbff18,inset 0 0 18px #6edbff18}
.mc-orbit{position:absolute;inset:25px;border:2px solid #729dff70;border-radius:50%;transform-style:preserve-3d;box-shadow:0 0 15px #729dff18;will-change:transform}
.mc-orbit::after{content:"";position:absolute;top:24px;left:65px;width:7px;height:7px;border-radius:50%;background:#a7faff;box-shadow:0 0 18px 4px #79efff90}
.mc-orbit.two{inset:0;border-color:#c497ff65}
.mc-orbit.three{inset:47px;border-style:dashed;border-color:#79efff50}
.mc-arrow{position:absolute;inset:90px;clip-path:polygon(50% 0,55% 18%,45% 18%);background:#a8fbff;animation:mcArrow 18s linear infinite}
@keyframes mcArrow{to{transform:rotate(360deg)}}
.mc-core{position:absolute;inset:110px;display:grid;place-content:center;text-align:center;border-radius:50%;background:radial-gradient(circle,#182847bb,#071020aa);box-shadow:0 0 50px #79efff20,inset 0 0 28px #79efff20;z-index:2}
.mc-core small{font-family:var(--font-mono);font-size:9px;letter-spacing:.3em;color:#8dbdd4}
.mc-core strong{font-family:var(--font-sans);font-size:58px;font-weight:500;letter-spacing:-.06em;line-height:1;color:#deffff;text-shadow:0 0 30px #79efff65;margin:6px 0 4px;display:block}
.mc-core em{font-family:var(--font-mono);font-size:9px;font-style:normal;letter-spacing:.2em;color:#ba9ef4}
.mc-olab{position:absolute;font-family:var(--font-mono);font-size:9px;letter-spacing:.2em;color:#8398bf}
.mc-olab.n{top:17px;left:47%}.mc-olab.s{bottom:16px;left:47%}
.mc-olab.e{right:0;top:49%}.mc-olab.w{left:0;top:49%}
.mc-caption{position:absolute;top:404px;left:50%;transform:translateX(-50%);white-space:nowrap;font-family:var(--font-mono);font-size:9px;letter-spacing:.3em;color:#6b83aa}
@media(max-width:560px){.mc-orb{width:300px;height:300px}.mc-orb::after{inset:52px}.mc-core{inset:84px}.mc-core strong{font-size:44px}.mc-arrow{inset:68px}.mc-caption{top:314px}}
@media(max-width:900px){#mcField{height:330px}}

/* ---------- Abschnitte sanft einblenden ---------- */
body.mc-on .mc-rise{opacity:0;transform:translateY(22px);transition:opacity .85s cubic-bezier(.22,.61,.36,1),transform .85s cubic-bezier(.22,.61,.36,1)}
body.mc-on .mc-rise.mc-vis{opacity:1;transform:none}

/* ---------- Pauseschalter unten rechts ---------- */
.mc-toggle{position:fixed;right:18px;bottom:calc(18px + var(--mc-banner,0px));z-index:60;appearance:none;background:rgba(11,18,32,.88);backdrop-filter:blur(10px);border:1px solid var(--line);color:var(--ink-muted);font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:9px 14px;border-radius:2px;cursor:pointer;opacity:0;transition:.25s}
body.mc-on .mc-toggle{opacity:1}
.mc-toggle:hover{border-color:var(--champagne-line);color:var(--champagne-bright)}

/* ---------- Wer weniger Bewegung will, bekommt weniger ---------- */
@media(prefers-reduced-motion:reduce){
  .mc-fx{animation:none}
  #mcSky{display:none}
  .mc-story{height:auto}
  .mc-story-stage{position:static;min-height:0;padding:80px 0}
  .mc-story-art{transform:none}
  body.mc-on .mc-rise{opacity:1;transform:none;transition:none}
}

/* Video auf Bildschirmhöhe — der Hero ist durch das Hologramm höher
   geworden, das Video soll trotzdem nicht darüber hinaus strecken. */
.hero-bg-video{bottom:auto;height:100vh;height:100svh;max-height:100%;-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}