/* Pronta motion set (shared/motion, copied into each template as
   css/motion.css; spec 2026-09-27-modernisierung.md, rules B1 to B5).
   Reaction first, ceremony rarely: buttons and cards answer hover and tap,
   the head lifts off once scrolled, the hero picture opens once on load,
   big pictures further down open as they arrive, card grids settle in a
   short stagger. Text never fades in. Switched on by js/motion.js
   (html.fx-on); without it, with reduced motion or while the tool layer's
   editing panel is open, the page is static and complete. Only opacity,
   translate, scale and clip-path move. */

:root {
  --fx-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fx-fast: 180ms;
  --fx-step: 70ms;
}

/* B5 page change: cross-fade with a small rise, the head stays put */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: fx-vt-out 220ms ease-in both; }
  ::view-transition-new(root) { animation: fx-vt-in 380ms var(--fx-ease) both; }
  .fx-head { view-transition-name: fx-head; }
}
@keyframes fx-vt-out { to { opacity: 0; } }
@keyframes fx-vt-in { from { opacity: 0; translate: 0 10px; } }

/* B1 reaction: solid buttons and card-like boxes */
html.fx-on .fx-press {
  transition: translate var(--fx-fast) var(--fx-ease), scale 120ms var(--fx-ease),
    box-shadow var(--fx-fast) var(--fx-ease), background-color var(--fx-fast), color var(--fx-fast),
    border-color var(--fx-fast);
}
html.fx-on .fx-press:active { scale: 0.97; }
@media (hover: hover) {
  html.fx-on .fx-press:hover { translate: 0 -2px; box-shadow: 0 10px 22px -12px rgb(0 0 0 / 0.45); }
  html.fx-on .fx-card { transition: translate 260ms var(--fx-ease), box-shadow 260ms var(--fx-ease); }
  html.fx-on .fx-card:hover { translate: 0 -3px; box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 18px 36px -22px rgb(0 0 0 / 0.35); }
  html.fx-on .fx-zoom { overflow: clip; }
  html.fx-on .fx-zoom img { transition: scale 700ms var(--fx-ease); }
  html.fx-on .fx-zoom:hover img { scale: 1.03; }
}

/* B2 the head lifts off once the page is scrolled; glass only where it
   already sticks */
.fx-head { transition: box-shadow 300ms var(--fx-ease), background-color 300ms; }
html.fx-scrolled .fx-head { box-shadow: 0 1px 0 rgb(0 0 0 / 0.04), 0 10px 28px -20px rgb(0 0 0 / 0.5); }
html.fx-scrolled .fx-head.fx-glass {
  background-color: var(--fx-glass);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
}

/* B3 one hero moment on load */
html.fx-on .fx-hero-img { animation: fx-hero 950ms var(--fx-ease) both; }
html.fx-on .fx-hero-clip { overflow: clip; }
/* the hero picture sinks slowly as the page scrolls away (depth, not
   background parallax); needs the frame to keep clipping */
@supports (animation-timeline: scroll()) {
  html.fx-on .fx-hero-img.fx-drift {
    animation: fx-hero 950ms var(--fx-ease) both, fx-drift linear both;
    animation-timeline: auto, scroll(root);
    animation-range: normal, 0 110vh;
  }
  @keyframes fx-drift { from { translate: 0 0; } to { translate: 0 12%; } }
}
/* the hero heading rises out of its own line once, just after the picture */
html.fx-on .fx-hero-h { animation: fx-line 900ms var(--fx-ease) 180ms both; }
@keyframes fx-line {
  from { opacity: 0; translate: 0 0.5em; clip-path: inset(0 0 100% 0); }
  to { opacity: 1; translate: none; clip-path: inset(-0.3em -0.3em -0.4em -0.3em); }
}
@keyframes fx-hero {
  from { clip-path: inset(6% 6% 6% 6%); scale: 1.06; opacity: 0.6; }
  to { clip-path: inset(0 0 0 0); scale: 1; opacity: 1; }
}

/* B4 big pictures open as they arrive, card grids settle in a stagger */
html.fx-on .fx-img:not(.fx-in) { clip-path: inset(10% 0 10% 0); scale: 1.05; }
html.fx-on .fx-img.fx-in { transition: clip-path 900ms var(--fx-ease), scale 1100ms var(--fx-ease); }
/* section headings rise out of a line mask as they arrive, as one block
   (no word spans: the tool layer edits the text) */
html.fx-on .fx-h:not(.fx-in) { opacity: 0; translate: 0 0.5em; clip-path: inset(0 0 100% 0); }
html.fx-on .fx-h.fx-in {
  clip-path: inset(-0.3em -0.3em -0.4em -0.3em);
  transition: opacity 700ms var(--fx-ease), translate 800ms var(--fx-ease), clip-path 800ms var(--fx-ease);
}
html.fx-on .fx-rise:not(.fx-in) { opacity: 0; translate: 0 16px; }
html.fx-on .fx-rise.fx-in {
  transition: opacity 600ms var(--fx-ease), translate 600ms var(--fx-ease);
  transition-delay: calc(var(--fx-i, 0) * var(--fx-step));
}

/* off switches: transforms, clip and backdrop filters on an ancestor
   become the containing block of the editing panel on phones */
.pr-panel-open :is(.fx-img, .fx-rise, .fx-h, .fx-hero-h, .fx-hero-img, .fx-press, .fx-card, .fx-zoom img, .fx-head) {
  opacity: 1 !important; translate: none !important; scale: none !important; clip-path: none !important;
  animation: none !important; transition: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; view-transition-name: none !important;
}
@media print {
  :is(.fx-img, .fx-rise, .fx-h) { opacity: 1 !important; translate: none !important; scale: none !important; clip-path: none !important; }
}