/* treuhand-moser: motion on top of the shared set (css/motion.css).
   Round 3 (Rolf 27.09.): movement only; fonts, colours, pictures,
   spacing and the resting page stay exactly as they are. Everything
   here moves on load, scroll, hover, focus or tap, and nothing of it
   applies with reduced motion or while the editing panel is open. */

@media (prefers-reduced-motion: no-preference) {
  /* the site's own reveals (js/site.js): the set's easing, a touch
     longer and a tighter stagger, so they land crisper */
  html.rv-init [data-reveal].rv-on {
    transition-duration: 700ms;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--rv-i, 0) * 90ms);
  }

  /* desktop navigation: the hover line runs in from the left and the
     current page's line draws itself once on load; the border keeps
     the resting look, the pseudo line only carries the movement */
  @media (min-width: 56.25em) {
    .masthead__nav a {
      position: relative;
    }

    .masthead__nav a::after {
      content: "";
      position: absolute;
      inset: auto 0 -2px;
      block-size: 2px;
      background: var(--rule);
      scale: 0 1;
      transform-origin: left;
      transition: scale 240ms cubic-bezier(0.22, 1, 0.36, 1);
      pointer-events: none;
    }

    .masthead__nav a:hover:not([aria-current="page"]) {
      border-block-end-color: transparent;
    }

    .masthead__nav a:hover::after {
      scale: 1 1;
    }

    .masthead__nav a[aria-current="page"] {
      border-block-end-color: transparent;
    }

    .masthead__nav a[aria-current="page"]::after {
      background: var(--seal);
      scale: 1 1;
      animation: tm-draw 700ms cubic-bezier(0.22, 1, 0.36, 1) 250ms backwards;
    }
  }

  /* phone menu: the pages drop in one after the other */
  .masthead__nav:popover-open > a {
    animation: tm-drop 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .masthead__nav:popover-open > a:nth-of-type(2) { animation-delay: 50ms; }
  .masthead__nav:popover-open > a:nth-of-type(3) { animation-delay: 100ms; }
  .masthead__nav:popover-open > a:nth-of-type(4) { animation-delay: 150ms; }

  /* the title leaves as the page scrolls: it rises faster than the
     picture sinks (the set's drift) and fades, which gives the stage
     depth; at the top of the page it is exactly where it was */
  @supports (animation-timeline: scroll()) {
    .stage__card h1 {
      animation: tm-leave linear both;
      animation-timeline: scroll(root);
      animation-range: 0 70vh;
    }
  }

  /* the docked action bar slides in with the set's easing */
  @media (min-width: 62.5em) {
    .actionbar {
      transition-duration: 320ms;
      transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    }
  }

  /* arrows move towards where they lead */
  .svc__more a::after {
    display: inline-block;
    transition: translate 200ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* services answer the pointer and the finger */
  .svc__row {
    transition: translate 220ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .svc__item:active .svc__row {
    translate: 4px 0;
  }

  @media (hover: hover) {
    .svc__more a:hover::after {
      translate: 5px 0;
    }

    .svc__item:hover .svc__row {
      translate: 6px 0;
    }
  }

  /* form fields: a soft ring grows while the field has focus */
  .field input,
  .field textarea {
    transition: border-color 180ms, box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .field input:focus,
  .field textarea:focus {
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--seal) 16%, transparent);
  }
}

@keyframes tm-draw {
  from { scale: 0 1; }
}

@keyframes tm-drop {
  from { opacity: 0; translate: 0 -8px; }
}

@keyframes tm-leave {
  to { translate: 0 -12vh; opacity: 0.15; }
}

/* Round 4 (Rolf 28.09.) ------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
  /* page change: the stage picture and the page title morph from page
     to page instead of only cross-fading, one element per name and
     page. Named only while a transition runs: a name at rest made the
     hero render a hair differently. */
  html:active-view-transition body:not(.pr-panel-open) .stage > .band--place {
    view-transition-name: tm-stage;
  }

  html:active-view-transition body:not(.pr-panel-open) :is(.stage__card h1, .pagehead h1) {
    view-transition-name: tm-title;
  }

  ::view-transition-group(tm-stage),
  ::view-transition-group(tm-title) {
    animation-duration: 520ms;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* every control answers the finger: footer pages and note link, the
     menu button, the phone and mail links in the running text */
  .foot__pages a,
  .foot__status a,
  .burger {
    transition: translate 180ms cubic-bezier(0.22, 1, 0.36, 1), scale 120ms cubic-bezier(0.22, 1, 0.36, 1),
      color 180ms;
  }

  .foot__pages a:active,
  .foot__status a:active {
    scale: 0.96;
  }

  .burger:active {
    scale: 0.9;
  }

  .facts a,
  .prose a,
  .masthead__nav a {
    transition: opacity 120ms, color 180ms, text-underline-offset 200ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .facts a:active,
  .prose a:active,
  .masthead__nav a:active {
    opacity: 0.6;
  }

  @media (hover: hover) {
    .foot__pages a:hover,
    .foot__status a:hover {
      translate: 0 -2px;
    }

    .facts a:hover,
    .prose a:hover {
      text-underline-offset: 0.34em;
    }
  }

  /* the preview form answers the send: the locked button gives one
     short press, the note under it rises in with the new text */
  .form:has(button:disabled) .btn {
    animation: tm-sent 420ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .form:has(button:disabled) #form-hinweis {
    animation: tm-note 600ms cubic-bezier(0.22, 1, 0.36, 1) 120ms backwards;
  }
}

@keyframes tm-sent {
  40% { scale: 0.95; }
}

@keyframes tm-note {
  from { opacity: 0; translate: 0 8px; }
}

/* the editing panel: no transform on any of its ancestors */
.pr-panel-open :is(.stage__card h1, .svc__row, .masthead__nav a, .foot__pages a, .foot__status a, .burger, .btn, #form-hinweis) {
  animation: none !important;
  translate: none !important;
  scale: none !important;
}