/* Moser Reinigungen: motion on top of the shared set (css/motion.css),
   round 3, 27.09.2026 (Rolf: only motion, the resting page stays as it
   is). Everything here moves only on load, scroll, hover, focus or tap,
   ends in the state site.css already draws, and is gone with reduced
   motion or while the tool layer's editing panel is open. */

@media (prefers-reduced-motion: no-preference) {
  :root {
    --fx-ease: cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* the one-shot reveals of js/site.js, crisper: a longer rise on the
     shared easing; the fixed 0/140/280 ms rhythm of decision 121 stays */
  .js .reveal {
    transform: translateY(22px);
  }

  .js .reveal.is-in {
    transform: none;
    transition:
      opacity 650ms var(--fx-ease) var(--reveal-delay, 0ms),
      transform 750ms var(--fx-ease) var(--reveal-delay, 0ms);
  }

  /* the step numbers rise out of their own line once their row is in */
  .js .steps .reveal .num {
    clip-path: inset(100% 0 0 0);
    translate: 0 0.35em;
  }

  .js .steps .reveal.is-in .num {
    clip-path: inset(-0.2em);
    translate: none;
    transition: clip-path 800ms var(--fx-ease) 180ms, translate 800ms var(--fx-ease) 180ms;
  }

  /* the place list settles name by name */
  .js .reveal .places li {
    opacity: 0;
    translate: 0 10px;
  }

  .js .reveal.is-in .places li {
    opacity: 1;
    translate: none;
    transition: opacity 500ms var(--fx-ease), translate 600ms var(--fx-ease);
    transition-delay: calc(120ms + var(--fx-n, 0) * 45ms);
  }

  .places li:nth-child(2) { --fx-n: 1; }
  .places li:nth-child(3) { --fx-n: 2; }
  .places li:nth-child(4) { --fx-n: 3; }
  .places li:nth-child(5) { --fx-n: 4; }
  .places li:nth-child(6) { --fx-n: 5; }
  .places li:nth-child(7) { --fx-n: 6; }
  .places li:nth-child(8) { --fx-n: 7; }
  .places li:nth-child(n + 9) { --fx-n: 8; }

  /* the quality seal is stamped on load: it turns in and the tick draws */
  .stage__seal .seal {
    animation: rm-stamp 900ms var(--fx-ease) 350ms both;
  }

  .stage__seal .seal__tick {
    stroke-dasharray: 40;
    animation: rm-tick 520ms var(--fx-ease) 1050ms both;
  }

  /* and turns a little with the first screen of scrolling */
  @supports (animation-timeline: scroll()) {
    .stage__sealart {
      animation: rm-turn linear both;
      animation-timeline: scroll(root);
      animation-range: 0 100vh;
    }
  }

  /* navigation: the square grows in instead of switching on */
  .mast__nav a::before {
    transition: background-color 200ms var(--fx-ease), scale 240ms var(--fx-ease);
  }

  .mast__nav a:not([aria-current])::before {
    scale: 0.2;
  }

  .mast__nav a:not([aria-current]):hover::before {
    scale: 1;
  }

  .mast__nav a[aria-current="page"]::before {
    animation: rm-pop 520ms var(--fx-ease) 200ms backwards;
  }

  /* the menu icon turns as it opens and closes */
  .mast__burger span {
    transition: rotate 320ms var(--fx-ease);
  }

  .mast__burger[aria-expanded="true"] span {
    rotate: 180deg;
  }

  /* service lines: name and arrow lean towards the target */
  .svcs h3 {
    transition: translate 220ms var(--fx-ease);
  }

  .svcs li > a::after {
    transition: border-color 200ms var(--fx-ease), translate 220ms var(--fx-ease);
  }

  @media (hover: hover) {
    .svcs li > a:hover h3 {
      translate: 4px 0;
    }

    .svcs li > a:hover::after {
      translate: 6px -50%;
    }
  }

  /* questions: the plus turns into the minus, the answer drops in */
  .faq summary::before {
    transition: opacity 200ms var(--fx-ease), rotate 280ms var(--fx-ease);
  }

  .faq details[open] summary::before {
    rotate: 90deg;
  }

  .faq details[open] .answer {
    animation: rm-drop 420ms var(--fx-ease) both;
  }

  /* fields and every focus ring close in on the element */
  :focus-visible {
    animation: rm-ring 240ms var(--fx-ease);
  }

  .form input,
  .form select,
  .form textarea {
    transition: border-color 180ms var(--fx-ease), box-shadow 180ms var(--fx-ease);
  }

  /* phones: the contact dock slides up once the page has loaded */
  .dock {
    animation: rm-dock 600ms var(--fx-ease) 500ms both;
  }
}

@keyframes rm-stamp {
  from { opacity: 0; scale: 0.4; rotate: -120deg; }
  60% { opacity: 1; }
}

@keyframes rm-tick {
  from { stroke-dashoffset: 40; }
  to { stroke-dashoffset: 0; }
}

@keyframes rm-turn {
  to { rotate: -28deg; }
}

@keyframes rm-pop {
  from { scale: 0; }
}

@keyframes rm-drop {
  from { opacity: 0; translate: 0 -6px; }
}

@keyframes rm-ring {
  from { outline-offset: 9px; outline-color: transparent; }
}

@keyframes rm-dock {
  from { translate: 0 110%; }
}

/* off while the tool layer's editing panel is open, see css/motion.css */
.pr-panel-open :is(.reveal, .reveal .num, .places li, .seal, .seal__tick, .stage__sealart, .dock, .svcs h3, .faq .answer) {
  opacity: 1 !important; transform: none !important; translate: none !important; rotate: none !important;
  scale: none !important; clip-path: none !important; animation: none !important; transition: none !important;
  stroke-dashoffset: 0 !important;
}

/* Round 4, 28.09.2026 (Rolf: feel more motion, best practice 2026) */
@media (prefers-reduced-motion: no-preference) {
  /* page change: the picture under the head morphs between the start
     page's place band and the strips of the sub pages */
  .stage > .herostrip,
  main > .strip {
    view-transition-name: rm-pic;
  }

  ::view-transition-group(rm-pic) {
    animation-duration: 520ms;
    animation-timing-function: var(--fx-ease);
  }

  /* sub pages get their own load moment: the lede follows the title the
     shared set raises, the strip opens from the middle */
  .pagehead .lede {
    animation: rm-rise 800ms var(--fx-ease) 320ms backwards;
  }

  main > .strip img:not(.fx-hero-img) {
    animation: rm-open 1000ms var(--fx-ease) 200ms backwards;
  }

  /* every link answers: small ones like a button under the finger,
     footer links with an underline that steps away on hover */
  .foot__links a,
  .mast__mark,
  a[href^="tel:"]:not(.btn),
  a[href^="mailto:"]:not(.btn) {
    transition: text-underline-offset 200ms var(--fx-ease), opacity 120ms var(--fx-ease), scale 160ms var(--fx-ease);
  }

  .foot__links a:active,
  .mast__mark:active,
  a[href^="tel:"]:not(.btn):active,
  a[href^="mailto:"]:not(.btn):active {
    scale: 0.96;
    opacity: 0.7;
  }

  @media (hover: hover) {
    .foot__links a:hover {
      text-underline-offset: 0.34em;
    }

    .mast__mark:hover {
      scale: 1.03;
    }
  }

  /* form: the label of the field in use leans in, a case group that
     opens drops into place */
  .form label {
    transition: translate 200ms var(--fx-ease);
  }

  .form :is(div, p):focus-within > label {
    translate: 4px 0;
  }
}

@keyframes rm-rise {
  from { opacity: 0; translate: 0 18px; }
}

@keyframes rm-open {
  from { clip-path: inset(0 50% 0 50%); }
  to { clip-path: inset(0); }
}

.pr-panel-open :is(.stage > .herostrip, main > .strip) {
  view-transition-name: none !important;
}

.pr-panel-open :is(.pagehead .lede, main > .strip img, .foot__links a, .mast__mark, .form label) {
  opacity: 1 !important; translate: none !important; scale: none !important;
  clip-path: none !important; animation: none !important; transition: none !important;
}