/* Template motion for pension-meier (brief round 3, 27.09.2026): only
   movement on top of the shared set, the resting page stays as it is.
   Groups the set does not reach (fact ribbon, prices, destinations,
   booking notes, room numbers) are tagged by js/motion-local.js
   (html.pm-on) and settle in a short stagger; the hero landscape opens
   wider and slower than on the other templates. Without JS, with reduced
   motion or with the editing panel open everything is static. */

/* hero: the strongest load moment of the templates */
html.fx-on .fx-hero-img { animation: pm-hero 1300ms var(--fx-ease) both; }
@supports (animation-timeline: scroll()) {
  html.fx-on .fx-hero-img.fx-drift {
    animation: pm-hero 1300ms var(--fx-ease) both, fx-drift linear both;
    animation-timeline: auto, scroll(root);
    animation-range: normal, 0 110vh;
  }
}
@keyframes pm-hero {
  from { clip-path: inset(9% 7% 12% 7%); scale: 1.14; opacity: 0.45; }
  to { clip-path: inset(0 0 0 0); scale: 1; opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  /* the pilot's own hero line reveal, crisper and more clearly staggered */
  .hero-content > * { animation-duration: 800ms; animation-timing-function: var(--fx-ease); }
  .hero-content > :nth-child(2) { animation-delay: 160ms; }
  .hero-content > :nth-child(3) { animation-delay: 320ms; }
  .hero-content > :nth-child(4) { animation-delay: 480ms; }

  /* the phone contact bar slides up once the hero has opened */
  html.fx-on .mobile-actionbar { animation: pm-bar 700ms var(--fx-ease) 700ms both; }
}
@keyframes pm-bar { from { translate: 0 calc(100% + 1.5rem); opacity: 0; } }

/* groups settle as they arrive */
html.pm-on .pm-rise:not(.pm-in) { opacity: 0; translate: 0 18px; }
html.pm-on .pm-rise.pm-in {
  transition: opacity 650ms var(--fx-ease), translate 700ms var(--fx-ease);
  transition-delay: calc(var(--pm-i, 0) * 90ms);
}
/* rules draw themselves: the price rows and the room numbers' stroke */
html.pm-on .pm-draw:not(.pm-in) { clip-path: inset(0 100% 0 0); }
html.pm-on .pm-draw.pm-in { transition: clip-path 900ms var(--fx-ease) 120ms; }

/* reaction */
.text-link { transition: color 180ms var(--fx-ease), text-underline-offset 220ms var(--fx-ease), gap 180ms; }
@media (hover: hover) {
  .text-link:hover { text-underline-offset: 0.18em; }
}
.inquiry-form :is(input, select, textarea) {
  transition: translate 200ms var(--fx-ease), border-color 200ms, box-shadow 200ms var(--fx-ease);
}
.inquiry-form :is(input, select, textarea):focus { translate: 0 -2px; }
.brand-emblem { transition: scale 300ms var(--fx-ease), rotate 300ms var(--fx-ease); transform-origin: 50% 60%; }
html.fx-scrolled .brand-emblem { scale: 0.88; }
@media (hover: hover) {
  .brand:hover .brand-emblem { rotate: -6deg; }
}
.mobile-menu[open] nav { animation: pm-drop 260ms var(--fx-ease) both; }
@keyframes pm-drop { from { opacity: 0; translate: 0 -8px; } }

@media (prefers-reduced-motion: reduce) {
  .inquiry-form :is(input, select, textarea):focus { translate: none; }
  html.fx-scrolled .brand-emblem { scale: none; }
}

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

/* page change: picture, title and wordmark morph from page to page
   instead of only cross-fading (one element per name and page) */
@media (prefers-reduced-motion: no-preference) {
  .home-hero > .hero-image,
  .page-intro > img { view-transition-name: pm-hero; }
  .hero-content h1,
  .page-intro-content h1 { view-transition-name: pm-title; }
  .site-header .brand { view-transition-name: pm-brand; }
  ::view-transition-group(pm-hero),
  ::view-transition-group(pm-title),
  ::view-transition-group(pm-brand) { animation-duration: 520ms; animation-timing-function: var(--fx-ease); }

  /* sub pages: the page head gets its own load moment around the title
     the set already raises */
  html.fx-on .page-intro-content > :not(h1, .pr-mark) { animation: pm-up 800ms var(--fx-ease) both; }
  html.fx-on .page-intro-content > .eyebrow { animation-delay: 60ms; }
  html.fx-on .page-intro-content > h1 ~ * { animation-delay: 380ms; }

  /* the form's answer arrives instead of popping in */
  .form-notice { animation: pm-up 600ms var(--fx-ease) both; }
}
@keyframes pm-up { from { opacity: 0; translate: 0 14px; } }

/* every tap target answers like a button */
.mobile-actionbar a,
.mobile-menu summary,
.mobile-menu nav a,
.site-footer a,
.contact-mini-card a,
.desktop-nav a {
  transition: scale 120ms var(--fx-ease), translate 200ms var(--fx-ease), color 180ms, opacity 180ms;
}
:is(.mobile-actionbar a, .mobile-menu summary, .mobile-menu nav a, .site-footer a,
  .contact-mini-card a):active { scale: 0.96; }
@media (hover: hover) {
  .site-footer a:not(.footer-brand):hover,
  .mobile-menu nav a:hover { translate: 4px 0; }
  .desktop-nav a:hover { translate: 0 -1px; }
}
.mobile-menu[open] nav a { animation: pm-up 360ms var(--fx-ease) both; }
.mobile-menu[open] nav a:nth-of-type(2) { animation-delay: 40ms; }
.mobile-menu[open] nav a:nth-of-type(3) { animation-delay: 80ms; }
.mobile-menu[open] nav a:nth-of-type(4) { animation-delay: 120ms; }
.mobile-menu[open] nav a:nth-of-type(5) { animation-delay: 160ms; }

/* scroll-bound depth: the closing picture's scrim slides into place
   against the picture as it arrives (decoration only, never text); from
   the middle of the screen on it rests where it always was */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html.fx-on .closing-overlay {
      animation: pm-depth linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 50%;
    }
  }
}
@keyframes pm-depth { from { translate: -5% 0; } to { translate: none; } }

/* off while the editing panel is open */
.pr-panel-open :is(.pm-rise, .pm-draw, .mobile-actionbar, .brand-emblem, .inquiry-form input,
  .inquiry-form select, .inquiry-form textarea, .mobile-menu nav, .hero-content > *,
  .page-intro-content > *, .form-notice, .mobile-actionbar a, .mobile-menu summary, .mobile-menu nav a,
  .site-footer a, .contact-mini-card a, .desktop-nav a, .closing-overlay) {
  opacity: 1 !important; translate: none !important; scale: none !important; rotate: none !important;
  clip-path: none !important; animation: none !important; transition: none !important;
}
.pr-panel-open :is(.hero-image, .page-intro > img, h1, .brand) { view-transition-name: none !important; }
@media print {
  :is(.pm-rise, .pm-draw) { opacity: 1 !important; translate: none !important; clip-path: none !important; }
}