/* ==========================================================================
   BRANDNW — motion layer
   Wird ÜBER das bestehende Seiten-CSS gelegt. Ändert keine Farben, keine
   Typo, kein Layout — nur Bewegung. Alles im mo- Namespace.
   ========================================================================== */

/* das native smooth-scroll der Seite muss weg, sonst kämpft es mit dem
   interpolierten Scrollen aus motion.js */
html.mo-smooth{scroll-behavior:auto !important}

:root{
  --mo-ease:cubic-bezier(.19,1,.22,1);
  --mo-dark:#0f0f0e;
  --mo-light:#f4f4f4;
}

/* ---------- Zeilen-Reveal ---------- */
.mo-line{display:block;overflow:hidden}
.mo-line > span{display:block;transform:translate3d(0,105%,0);transition:transform 1.05s var(--mo-ease)}
.mo-in .mo-line > span,.mo-in.mo-line > span{transform:translate3d(0,0,0)}

/* ---------- Block-Fade (Bilder, Karten, Kleinteile) ---------- */
.mo-fade{opacity:0;transform:translate3d(0,26px,0);transition:opacity 1s var(--mo-ease),transform 1s var(--mo-ease)}
.mo-fade.mo-in{opacity:1;transform:none}

/* ---------- Intro: das rote Feld zieht sich auf seine Ruhehöhe zurück ------
   Kein eigener Ladebildschirm: die Seite steht komplett rot und das Rot
   fährt auf die 66 % des Heros — dieselbe Bewegung wie beim Scrollen.
   Rot ab dem allerersten Frame — noch bevor das Script läuft, sonst blitzt
   die Seite kurz auf. Der Notausgang blendet es nach 6s weg, falls das
   Script gar nicht startet. */
html.mo-intro::before{
  content:"";position:fixed;inset:0;background:#ff3b1d;z-index:100006;pointer-events:none;
  animation:moIntroFail 0s linear 6s forwards;
}
@keyframes moIntroFail{to{opacity:0;visibility:hidden}}
/* Der Einstieg trägt die Farbe der jeweiligen Fassung */
html.v-dark.mo-intro::before{background:#151616}
html.v-red-light.mo-intro::before{background:#ff3b1d}
html.v-light.mo-intro::before{background:#f4f4f2}

.mo-boot{position:fixed;inset:0;z-index:100005;pointer-events:none}
/* Achtung: kein inset:0 — top und bottom zusammen würden die Höhe festnageln
   und die Animation der Unterkante wirkungslos machen */
.mo-boot__red{
  position:absolute;top:0;left:0;right:0;height:100%;
  background:#ff3b1d;will-change:height;
}
html.v-dark .mo-boot__red{background:#151616}
html.v-red-light .mo-boot__red{background:#ff3b1d}
html.v-light .mo-boot__red{background:#f4f4f2}

/* ---------- Seitenübergang ---------- */
.mo-veil{
  position:fixed;inset:0;z-index:100004;background:var(--mo-dark);pointer-events:none;
  transform:translate3d(0,100%,0);
  border-top-left-radius:60px;border-top-right-radius:60px;
}
.mo-veil.mo-up{transform:translate3d(0,0,0);transition:transform .8s var(--mo-ease);border-radius:0}
.mo-veil.mo-out{transform:translate3d(0,-101%,0);transition:transform .9s var(--mo-ease)}

body.mo-locked{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .mo-line > span{transform:none !important}
  .mo-fade{opacity:1 !important;transform:none !important}
  .mo-boot,.mo-veil{display:none}
  html.mo-intro::before{display:none}
}

/* ---------- Bild, das an der Work-Liste mitläuft ---------- */
.mo-float{
  position:fixed;top:0;left:0;z-index:950;
  width:clamp(240px,20vw,330px);aspect-ratio:3/4;
  overflow:hidden;pointer-events:none;opacity:0;
  transition:opacity .4s var(--mo-ease);
}
.mo-float img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .35s var(--mo-ease);
}
.mo-float.mo-on{opacity:1}
.mo-float img.mo-on{opacity:1}
@media(max-width:1100px),(hover:none){.mo-float{display:none}}