/* Elektro Meier: motion on top of the shared set (round 3, Rolf
   27.09.2026: only movement, the resting page stays exactly as it is).
   The site's own direction is sideways in reading direction, so lines
   draw from the left, pictures open from the left and rows nudge right.
   Everything hidden waits under .rv-init (js/site.js) and only below the
   first screen; without JavaScript or with reduced motion the page is
   complete at once. While the editing panel is open nothing moves. */

@media (prefers-reduced-motion: no-preference) {
  /* crisper reveals: the site's sideways fade on the set's easing, and
     no translate left behind once it has arrived */
  html.rv-init [data-reveal].rv-on {
    translate: none;
    transition: opacity 650ms var(--fx-ease), translate 750ms var(--fx-ease);
    transition-delay: calc(var(--rv-i, 0) * 90ms);
  }

  /* accent line: the slanted mark above a section heading draws itself
     in as its section arrives, also where an eyebrow carries it */
  html.rv-init [data-reveal] .eyebrow::before {
    scale: 0 1;
    transform-origin: left center;
  }
  html.rv-init [data-reveal].rv-on .eyebrow::before {
    scale: 1;
    transition: scale 420ms var(--fx-ease) 160ms;
  }
  html.rv-init [data-reveal].rv-on > h2::before {
    transition: scale 420ms var(--fx-ease) 160ms;
  }

  /* the title's mark draws on load, the title slides in on the set's
     curve, the lede follows */
  .stage__sign::before {
    transform-origin: left center;
    animation: em-draw 520ms var(--fx-ease) 80ms backwards;
  }
  .stage__sign h1 > span { animation-duration: 800ms; animation-timing-function: var(--fx-ease); }
  .stage__sign .stage__lede { animation-delay: 160ms; }

  /* pictures that arrive open from the left instead of fading */
  /* the clip sits on the picture, not on the observed figure: Chromium
     counts a target's own clip-path into the observer ratio, and a fully
     clipped figure would never reach the threshold */
  html.rv-init figure[data-reveal] { opacity: 1; translate: none; }
  html.rv-init figure[data-reveal] img { clip-path: inset(0 100% 0 0); }
  html.rv-init figure[data-reveal].rv-on img {
    clip-path: inset(0 0 0 0);
    transition: clip-path 900ms var(--fx-ease);
    transition-delay: calc(var(--rv-i, 0) * 90ms);
  }
  html.rv-init .svc[data-reveal] .svc__fig { clip-path: inset(0 100% 0 0); }
  html.rv-init .svc[data-reveal].rv-on .svc__fig {
    clip-path: inset(0 0 0 0);
    transition: clip-path 900ms var(--fx-ease) 180ms;
  }

  /* the map pin drops onto its place when the map arrives */
  html.rv-init .map.rv-on .map__pin { animation: em-pin 650ms var(--fx-ease) 350ms backwards; }

  /* on phones the contact dock rises into place once on load */
  .dock { animation: em-dock 600ms var(--fx-ease) 400ms backwards; }

  /* the head: the wordmark settles a touch smaller once the page runs
     underneath, the current page's mark draws in */
  .top__mark { transform-origin: left center; transition: scale 250ms var(--fx-ease); }
  html.fx-scrolled .top__mark { scale: 0.94; }
  .top__nav a[aria-current="page"]::before {
    transform-origin: left center;
    animation: em-draw 420ms var(--fx-ease) 450ms backwards;
  }

  @keyframes em-draw { from { scale: 0 1; } }
  @keyframes em-pin { from { translate: -15px -96px; opacity: 0; } }
  @keyframes em-dock { from { translate: 0 110%; } }
}

/* reaction, 120 to 250 ms */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  /* navigation: an accent underline runs in under the pointer */
  .top__nav a:not([aria-current]) {
    background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 100% / 0 2px;
    transition: color 120ms var(--ease), background-size 220ms var(--fx-ease);
  }
  .top__nav a:not([aria-current]):hover { background-size: 100% 2px; }

  /* rows of the teasers, steps and reasons nudge in reading direction */
  .teasers h3,
  .steps b,
  .sheet dt {
    transition: translate 220ms var(--fx-ease);
  }
  .teasers > li:hover h3,
  .steps > li:hover b,
  .sheet > div:hover dt { translate: 0.4rem 0; }

  /* the closing number: its accent rule stretches under the pointer */
  .cta__tel { transition: color 120ms var(--ease), translate 220ms var(--fx-ease); }
  .cta__tel:hover { translate: 0.3rem 0; }

  /* links in the footer and contact list slide a little */
  .plate__cell a,
  .dlist a { transition: text-decoration-color 130ms var(--ease), translate 180ms var(--fx-ease); }
  .plate__cell a:hover,
  .dlist a:hover { translate: 0.2rem 0; }
}

/* fields answer focus: the label steps aside toward the field */
@media (prefers-reduced-motion: no-preference) {
  .form__field label { transition: translate 200ms var(--fx-ease), color 200ms var(--fx-ease); }
  .form__field:focus-within label { translate: 0.3rem 0; color: var(--ink); }
}

/* ---------- round 4 (Rolf 28.09.2026) ------------------------------ */

/* Page change: wordmark and title block carry their own names, so on a
   switch between pages they morph from place to place instead of only
   fading with the rest. One element per name and page: the start page's
   title sign, the subpages' head body. */
@media (prefers-reduced-motion: no-preference) {
  .top__mark { view-transition-name: em-mark; }
  .stage__sign,
  .pagehead__body { view-transition-name: em-title; }
  ::view-transition-group(em-title),
  ::view-transition-group(em-mark) { animation-duration: 480ms; animation-timing-function: var(--fx-ease); }

  /* Subpages get their own load moment: the head's accent line draws,
     the lead under the title follows the title in from the left. */
  .pagehead .eyebrow::before {
    transform-origin: left center;
    animation: em-draw 520ms var(--fx-ease) 120ms backwards;
  }
  .pagehead__body > p:not(.eyebrow) { animation: em-in 700ms var(--fx-ease) 320ms backwards; }
  @keyframes em-in { from { opacity: 0; translate: -24px 0; } }
}

/* Scroll depth: two big pictures further down settle as they pass
   through the screen (never text, never the first screen) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    figure.side,
    #qualitaet .fig { overflow: clip; }
    figure.side img,
    #qualitaet .fig img {
      animation: em-depth linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 60%;
    }
    @keyframes em-depth { from { scale: 1.1; } to { scale: 1; } }
  }
}

/* Tapping feels like a button everywhere: every link and row answers
   the press, on the phone as on the desktop */
@media (prefers-reduced-motion: no-preference) {
  .top__mark,
  .top__nav a,
  .plate__cell a,
  .dlist a,
  .cta__tel,
  .map__attr a {
    transition-property: color, background-size, text-decoration-color, translate, scale;
    transition-duration: 180ms;
    transition-timing-function: var(--fx-ease);
  }
  .top__mark:active,
  .top__nav a:active,
  .plate__cell a:active,
  .dlist a:active,
  .cta__tel:active,
  .map__attr a:active { scale: 0.96; }
  .teasers > li,
  .steps > li,
  .sheet > div { transition: scale 160ms var(--fx-ease); }
  .teasers > li:active,
  .steps > li:active,
  .sheet > div:active { scale: 0.985; }
  html.fx-scrolled .top__mark:active { scale: 0.9; }
}

/* editing panel open: every one of these stands still */
.pr-panel-open :is([data-reveal], figure[data-reveal] img, .svc__fig, .dock, .top__mark,
  .stage__sign h1 > span, .pagehead__body > p, figure.side img, #qualitaet .fig img,
  .teasers > li, .steps > li, .sheet > div, .map__attr a, .top__nav a, .teasers h3, .steps b, .sheet dt, .cta__tel, .plate__cell a, .dlist a, .form__field label) {
  translate: none !important;
  scale: none !important;
  clip-path: none !important;
  animation: none !important;
  transition: none !important;
}
.pr-panel-open .map__pin { animation: none !important; }
.pr-panel-open :is(.top__mark, .stage__sign, .pagehead__body) { view-transition-name: none !important; }
.pr-panel-open .pagehead .eyebrow::before { animation: none !important; }