/* ============================================================================
   COFFEE FESTIVAL EUROPE — die Bewegungsschicht
   ----------------------------------------------------------------------------
   Fuenf Mechaniken, die auf jeder Seite greifen, ohne dass im Markup etwas
   dafuer stehen muss. Sie sind bewusst klein gehalten: was hier passiert,
   schreibt ausschliesslich `transform` und `opacity`, also das, was der
   Browser ohne Zwischenlayout auf die Grafikkarte schieben kann.

   Die Erfahrung aus dieser Seite: der teuerste Fehler ist nicht eine Animation
   zu viel, sondern eine Messung pro Bild. Deshalb liest motion.js Geometrie
   nur beim Registrieren und bei Groessenaenderungen — im laufenden Bild wird
   gerechnet, nicht gemessen.

   Alles hier liegt hinter `prefers-reduced-motion: no-preference`. Wer im
   Betriebssystem oder im Barrierefreiheitspanel reduzierte Bewegung gewaehlt
   hat, bekommt sofort den Endzustand.
   ========================================================================= */

/* ---- 1 · Fortschrittslinie ---------------------------------------------
   Eine haarfeine Glutlinie unter der Kopfzeile. Sie beantwortet die Frage,
   die auf langen Seiten am haeufigsten aufkommt: wie viel kommt noch.      */
.mprog{position:fixed;top:0;left:0;right:0;height:2px;z-index:130;
  pointer-events:none;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--ember),var(--ember-lo));
  opacity:0;transition:opacity .4s var(--e-out-cubic)}
.mprog.is-on{opacity:.9}

/* ---- 2 · Wortweises Aufdecken ------------------------------------------
   Abschnittstitel steigen Wort fuer Wort aus ihrer Zeile. Der Versatz ist
   klein — es soll wie ein Satz wirken, der sich setzt, nicht wie eine
   Aufzaehlung, die einlaeuft.                                             */
.mw{display:inline-block;overflow:hidden;vertical-align:top}
.mw > span{display:inline-block;will-change:transform}

/* ---- 3 · Laufband -------------------------------------------------------
   Ein Band aus Woertern, das langsam von rechts nach links zieht und beim
   Scrollen kurz beschleunigt. Es traegt keine Information, die man sonst
   nirgends faende — es traegt den Ton.                                     */
.mq{position:relative;overflow:hidden;padding-block:clamp(26px,3.6vw,54px);
  border-block:1px solid var(--hairline)}
.mq__row{display:flex;width:max-content;will-change:transform}
.mq__g{display:flex;flex:none;align-items:center;gap:clamp(24px,3vw,56px);
  padding-right:clamp(24px,3vw,56px)}
.mq__i{font-family:var(--f-display);font-weight:800;font-stretch:112%;
  text-transform:uppercase;letter-spacing:-.02em;white-space:nowrap;
  font-size:clamp(1.6rem,4.4vw,3.4rem);line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(244,238,228,.28)}
.mq__i--solid{color:var(--ivory);-webkit-text-stroke:0}
.mq__i--ember{color:var(--ember);-webkit-text-stroke:0}
.mq__d{flex:none;width:clamp(7px,.8vw,11px);aspect-ratio:1;border-radius:50%;
  background:var(--ember);opacity:.75}
.section--light .mq__i,.psec--light .mq__i{-webkit-text-stroke-color:rgba(11,8,6,.26)}
.section--light .mq__i--solid,.psec--light .mq__i--solid{color:var(--ink)}

/* ---- 4 · Zeigerneigung --------------------------------------------------
   Karten kippen leicht zum Zeiger. Zwei Grad, nicht mehr: es soll sich
   anfassbar anfuehlen und nicht wackeln.                                   */
[data-mtilt]{transform-style:preserve-3d;will-change:transform}

/* ---- 5 · Bildversatz ----------------------------------------------------
   Bilder in Mosaiken und Filmrollen wandern langsamer als die Seite. Der
   Ausschlag ist bewusst klein — sichtbar wird er erst im Vergleich zweier
   nebeneinanderliegender Bilder.                                           */
[data-mpar]{will-change:transform}

@media (prefers-reduced-motion:no-preference){
  .mw > span{transform:translate3d(0,110%,0)}
  .mw.is-in > span{transform:none;
    transition:transform .9s var(--e-out-expo) calc(var(--i,0) * 42ms)}
  .mq__row{animation:mq-run var(--mq-t,42s) linear infinite}
  .mq:hover .mq__row{animation-play-state:paused}
  @keyframes mq-run{to{transform:translate3d(calc(var(--mq-w,50%) * -1),0,0)}}
}
@media (prefers-reduced-motion:reduce){
  .mw,.mw > span{overflow:visible;transform:none}
  .mprog{display:none}
  .mq__row{transform:none}
  .mq{overflow-x:auto;overscroll-behavior-x:contain}
}
/* Dieselbe Ruhe, wenn sie im Barrierefreiheitspanel bestellt wurde. */
.a11y-rm .mw,.a11y-rm .mw > span{overflow:visible;transform:none}
.a11y-rm .mprog{display:none}
.a11y-rm .mq__row{animation:none;transform:none}
.a11y-rm .mq{overflow-x:auto}

@media (max-width:700px){
  .mq{padding-block:clamp(20px,4vw,34px)}
}