/* Fleuve et Montagnes: motion built on one idea, the horizon opening over the river.
   Every state below ends on the original layout; nothing changes size or flow. */

/* Hero headline lines: block wrappers that never inherit the legacy `.hero h1 span` subtitle style. */
.hero .hero-copy h1 .fm-l{display:block;font:inherit;letter-spacing:inherit;color:inherit;margin:0;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.hero .hero-copy h1 .fm-l>span{display:inline-block;font:inherit;letter-spacing:inherit;color:inherit;margin:0}

@media (prefers-reduced-motion: no-preference) {
  /* 1. Opening: the photo opens from the horizon line, the headline rises line by line. */
  .fm-hero-ready .hero-visual img{animation:fm-horizon 1.5s cubic-bezier(.16,1,.3,1) .05s both,fm-settle 2.6s cubic-bezier(.16,1,.3,1) .05s both}
  .fm-hero-ready .hero .hero-copy h1 .fm-l>span{animation:fm-line 1.05s cubic-bezier(.16,1,.3,1) both}
  .fm-hero-ready .hero .hero-copy h1 .fm-l:nth-child(1)>span{animation-delay:.3s}
  .fm-hero-ready .hero .hero-copy h1 .fm-l:nth-child(2)>span{animation-delay:.42s}
  .fm-hero-ready .hero .hero-location{animation:fm-rise .9s cubic-bezier(.16,1,.3,1) .2s both}
  .fm-hero-ready .hero .hero-copy .lead{animation:fm-rise .9s cubic-bezier(.16,1,.3,1) .62s both}
  .fm-hero-ready .hero .hero-actions{animation:fm-rise .9s cubic-bezier(.16,1,.3,1) .74s both}
  .fm-hero-ready .hero .book-hero{animation:fm-dock 1.1s cubic-bezier(.16,1,.3,1) .86s both}

  /* Inner pages: the title rises once on arrival. */
  main h1:not(.hero h1){animation:fm-title 1s cubic-bezier(.16,1,.3,1) .08s both}

  /* Riverbank tabs: the new scene slides in like the current, from the right. */
  .fm-river-panel:not([hidden]){animation:fm-current .9s cubic-bezier(.16,1,.3,1) both}

  /* Stay carousel and filters: the next stays slide up into place. */
  .home-stays .fm-stay-grid .unit:not([hidden]){animation:fm-rise .75s cubic-bezier(.16,1,.3,1) backwards}
  .home-stays .fm-stay-grid .unit:not([hidden]):nth-child(n){animation-delay:calc(var(--fm-i,0) * 90ms)}
}

@keyframes fm-horizon{from{clip-path:inset(46% 0 46% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes fm-settle{from{scale:1.16}to{scale:1}}
@keyframes fm-line{from{translate:0 108%}to{translate:0 0}}
@keyframes fm-rise{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}
@keyframes fm-dock{from{opacity:0;translate:0 36px}to{opacity:1;translate:0 0}}
@keyframes fm-title{from{opacity:0;translate:0 .45em;clip-path:inset(0 0 100% 0)}to{opacity:1;translate:0 0;clip-path:inset(-20% -5% -30% -5%)}}
@keyframes fm-current{from{opacity:.35;clip-path:inset(0 0 0 38%)}to{opacity:1;clip-path:inset(0 0 0 0)}}

/* Scroll states set by motion.js; individual properties compose with existing hover transforms. */
[data-fm-motion]{translate:0 calc(var(--fm-lift,0) * 1px)}
[data-fm-zoom]{scale:var(--fm-zoom,1)}

/* Buttons acknowledge the pointer. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  :is(a.btn, a.head-book, a.fm-action, .bk-go):not(.news *){transition:background-color .25s ease,box-shadow .25s ease,translate .35s cubic-bezier(.16,1,.3,1)}
  :is(a.btn, a.head-book, a.fm-action, .bk-go):not(.news *):hover{translate:0 -3px;box-shadow:0 10px 22px -12px rgba(21,46,67,.55)}
  :is(a.btn, a.head-book, a.fm-action, .bk-go):not(.news *):active{translate:0 0;box-shadow:none}
}

/* Retire legacy entrances; this file is the only motion system. */
.fm-arrive,.fm-photo-change{animation:none!important}

@media (prefers-reduced-motion: reduce), print {
  [data-fm-motion]{opacity:1!important;translate:none!important;clip-path:none!important}
  [data-fm-zoom]{scale:none!important}
  :is(a.btn, a.head-book, a.fm-action, .bk-go):not(.news *){translate:none!important}
  html{scroll-behavior:auto!important}
}