/* =============================================================
   MOTION, Coiffeur Meier only (brief round 3, Rolf 27.09.2026)
   Movement on top of the shared set in css/motion.css; nothing here
   changes the page at rest: every rule is either an animation that
   ends in the untouched state, a hover/press state, or a waiting state
   that only exists while html.ml-on (set by js/motion-local.js).
   ============================================================= */

:root { --ml-ease: cubic-bezier(.22, 1, .36, 1); }

@media (prefers-reduced-motion: no-preference) {

  /* Hero load moment: the landscape opens from a band and settles,
     replacing the pilot's faint hero-in, then the card rises and its
     lines follow one after the other */
  .landscape-hero__image img {
    animation: ml-hero-open 1200ms var(--ml-ease) backwards;
  }
  .landscape-hero__card {
    animation: ml-rise 800ms var(--ml-ease) 250ms backwards;
  }
  .landscape-hero__card > :is(.hero__place, .hero__intro, .hero__actions) {
    animation: ml-rise-s 700ms var(--ml-ease) backwards;
  }
  .landscape-hero__card > .hero__place { animation-delay: 450ms; }
  .landscape-hero__card > .hero__intro { animation-delay: 700ms; }
  .landscape-hero__card > .hero__actions { animation-delay: 820ms; }

  /* the same moment for the page heads of the sub pages */
  .profile-hero figure img { animation: ml-hero-open 1200ms var(--ml-ease) backwards; }

  /* the landscape sinks a little as the page scrolls away from it */
  @supports (animation-timeline: scroll()) {
    .landscape-hero__image img {
      animation: ml-hero-open 1200ms var(--ml-ease) backwards, ml-sink linear both;
      animation-timeline: auto, scroll(root);
      animation-range: normal, 0px 800px;
    }
  }

  /* phone: the quick-action bar slides up once the page stands */
  .mobile-cta { animation: ml-bar 650ms var(--ml-ease) 900ms backwards; }

  /* Reveals, driven by js/motion-local.js: an element waits in its
     start state (.ml-wait) and plays once (.ml-go), then both classes
     go, so nothing keeps a clip or a translate afterwards */
  html.ml-on .ml-wait { opacity: 0; }
  html.ml-on .ml-wipe.ml-wait { opacity: 1; clip-path: inset(0 100% 0 0); }
  html.ml-on .ml-go { animation: ml-rise-s 650ms var(--ml-ease) var(--ml-d, 0ms) backwards; }
  html.ml-on .ml-wipe.ml-go { animation: ml-wipe 750ms var(--ml-ease) var(--ml-d, 0ms) backwards; }
  html.ml-on .ml-drop.ml-go { animation: ml-drop 700ms var(--ml-ease) var(--ml-d, 0ms) backwards; }

  /* Hover and press, only where a pointer can hover */
  @media (hover: hover) {
    .value-list article > span,
    .value-list h3,
    .service-card__number,
    .steps-grid span {
      transition: translate 220ms var(--ml-ease), scale 220ms var(--ml-ease), rotate 220ms var(--ml-ease);
    }
    .value-list article:hover > span { translate: 6px 0; }
    .value-list article:hover h3 { translate: 4px 0; }
    .service-card:hover .service-card__number { translate: 6px 0; }
    .steps-grid article:hover span { scale: 1.12; rotate: -8deg; }
    .price-row { transition: translate 180ms var(--ml-ease); }
    .price-row:hover { translate: 4px 0; }
    .button svg, .split-action svg { transition: translate 200ms var(--ml-ease); }
    .button:hover svg, .split-action:hover svg { translate: 4px 0; }
    .brand__name { transition: translate 220ms var(--ml-ease); }
    .brand:hover .brand__name { translate: 0 -2px; }
  }
  .text-link svg { transition: transform 200ms var(--ml-ease); }


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

  /* sub pages get their own load moment: the head's lines rise one
     after the other, as on the start page */
  :is(.subhero__inner, .profile-hero__copy, .legal-page__inner) > :not(.pr-mark) {
    animation: ml-rise-s 750ms var(--ml-ease) backwards;
  }
  :is(.subhero__inner, .profile-hero__copy, .legal-page__inner) > :nth-child(2) { animation-delay: 120ms; }
  :is(.subhero__inner, .profile-hero__copy, .legal-page__inner) > :nth-child(3) { animation-delay: 260ms; }
  :is(.subhero__inner, .profile-hero__copy, .legal-page__inner) > :nth-child(n+4) { animation-delay: 380ms; }

  /* named view transitions: wordmark, page head and title morph from
     page to page instead of only cross-fading; the quick-action bar
     stands still */
  .site-header .brand__name { view-transition-name: ml-brand; }
  :is(.landscape-hero, .subhero, .profile-hero, .legal-page) { view-transition-name: ml-head; }
  main h1 { view-transition-name: ml-title; }
  .mobile-cta { view-transition-name: ml-bar; }
  ::view-transition-group(ml-head),
  ::view-transition-group(ml-title),
  ::view-transition-group(ml-brand) { animation-duration: 480ms; animation-timing-function: var(--ml-ease); }

  /* the phone menu: its entries arrive one after the other */
  .mobile-nav--open nav > * { animation: ml-rise-s 450ms var(--ml-ease) backwards; }
  .mobile-nav--open nav > :nth-child(2) { animation-delay: 50ms; }
  .mobile-nav--open nav > :nth-child(3) { animation-delay: 100ms; }
  .mobile-nav--open nav > :nth-child(4) { animation-delay: 150ms; }
  .mobile-nav--open nav > :nth-child(n+5) { animation-delay: 200ms; }

  /* every tap answers like a button: bar, footer, links, wordmark */
  :is(.mobile-cta > *, .site-footer a, .text-link, .brand, .form-footer button, .desktop-nav a, .mobile-nav a) {
    transition: scale 140ms var(--ml-ease), translate 200ms var(--ml-ease);
  }
  :is(.mobile-cta > *, .site-footer a, .text-link, .brand, .mobile-nav a):active { scale: 0.96; }
  .form-footer button:active { scale: 0.97; }
  @media (hover: hover) {
    .site-footer nav a:hover, .site-footer a[href^="tel"]:hover, .site-footer a[href^="mailto"]:hover { translate: 0 -2px; }
    .form-footer button:hover { translate: 0 -2px; }
  }

  /* form: the focused field lifts a touch, the notice after sending
     opens from the top */
  .request-form :is(input, textarea, select) { transition: translate 200ms var(--ml-ease), border-color 200ms, box-shadow 200ms; }
  .request-form :is(input, textarea, select):focus { translate: 0 -2px; }
  .form-notice { animation: ml-notice 600ms var(--ml-ease) backwards; }

  /* scroll depth below the fold: the owner's portrait settles from a
     slight zoom while it crosses the screen (picture only, never text) */
  @supports (animation-timeline: view()) {
    .owner-visual img {
      animation: ml-depth linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 60%;
    }
  }

  /* the menu toggle answers the tap */
  .menu-toggle { transition: scale 140ms var(--ml-ease); }
  .menu-toggle:active { scale: 0.92; }
}

@keyframes ml-hero-open {
  from { clip-path: inset(8% 6% 8% 6%); scale: 1.08; opacity: 0.6; }
  to { clip-path: inset(0); scale: 1; opacity: 1; }
}
@keyframes ml-sink { to { translate: 0 40px; } }
@keyframes ml-rise { from { opacity: 0; translate: 0 28px; } }
@keyframes ml-rise-s { from { opacity: 0; translate: 0 14px; } }
@keyframes ml-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ml-drop { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ml-bar { from { translate: 0 100%; } }
@keyframes ml-notice { from { opacity: 0; clip-path: inset(0 0 100% 0); translate: 0 -8px; } to { opacity: 1; clip-path: inset(0); translate: none; } }
@keyframes ml-depth { from { transform: scale(1.08); } to { transform: scale(1); } }

/* the open editing panel stops every movement of this file */
.pr-panel-open :is(.landscape-hero__image img, .landscape-hero__card, .landscape-hero__card > *,
  .profile-hero figure img, .mobile-cta, .ml-wait, .ml-go, .owner-visual img, .form-notice,
  .subhero__inner > *, .profile-hero__copy > *, .legal-page__inner > *) {
  transform: none !important;
  animation: none !important;
  clip-path: none !important;
  opacity: 1 !important;
  translate: none !important;
}

.pr-panel-open :is(.site-header .brand__name, .landscape-hero, .subhero, .profile-hero, .legal-page, main h1, .mobile-cta) {
  view-transition-name: none !important;
}