/* Mila-wall · Stile für Animationen, Scroll-Reveal, Laufband und Sprachdialog.
   Einbinden im <head>: <link rel="stylesheet" href="/PFAD/mila-wall.css"> */

  @keyframes mba-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  html { scroll-behavior: smooth; }
  body section[id] { scroll-margin-top: 81px; }
  body :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
  body ::selection { background: #0a0a0a; color: #fff; }

  /* Scroll-Reveal: Verzögerung je Element über style="--d:.08s" */
  .js .mba-reveal { opacity: 0; transform: translateY(12px); transition: opacity .5s cubic-bezier(.22,.61,.21,1), transform .5s cubic-bezier(.22,.61,.21,1); transition-delay: var(--d, 0s); }
  .js .mba-reveal.is-in { opacity: 1; transform: none; }

  /* Prinzip-Animation: Module hängen sich ein */
  .mba-anim--armed .mba-anim-module { opacity: 0; transform: translate(240px, -30px); }
  .mba-anim--play .mba-anim-module { animation: mba-hang 1s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(.2s + var(--d, 0s)); }
  @keyframes mba-hang {
    0% { opacity: 0; transform: translate(240px, -30px); }
    20% { opacity: 1; }
    55% { transform: translate(0, -30px); animation-timing-function: cubic-bezier(.55,0,.9,.6); }
    100% { opacity: 1; transform: translate(0, 0); }
  }

  /* Maßzeichnung Standardformate: Module wachsen aus dem Boden */
  .mba-measure-mod { transform-box: fill-box; transform-origin: 50% 100%; }
  .mba-anim--armed .mba-measure-mod { opacity: 0; transform: scaleY(0); }
  .mba-anim--armed .mba-measure-h { opacity: 0; }
  .mba-anim--play .mba-measure-mod { opacity: 1; transform: none; transition: transform .45s cubic-bezier(.22,.61,.21,1), opacity .15s linear; transition-delay: calc(.15s + var(--d, 0s)); }
  .mba-anim--play .mba-measure-h { opacity: 1; transition: opacity .3s cubic-bezier(.22,.61,.21,1); transition-delay: calc(.35s + var(--d, 0s)); }

  /* Sprachwahl-Dialog */
  .mba-langdialog::backdrop { background: rgba(10,10,10,.32); }
  body:has(.mba-langdialog[open]) { overflow: hidden; }

  /* Platz für die Anrufleiste unter 768 px */
  @media (max-width: 767px) { body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); } }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    body *, body *::before, body *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .js .mba-reveal { opacity: 1; transform: none; }
  }