/* Motion layer for the pages copied from the design — see assets/js/motion.js.
   Nothing here changes how a page looks at rest: every rule either animates back to the design's own values
   or styles an element that only exists while something moves. The .js-anim class (head.html) is absent under
   prefers-reduced-motion, which switches all of it off. */

/* ---------- page to page: the browser's own view transitions (Chrome 126+, Safari 18.2+; elsewhere the veil) ----------
   The hero photo keeps its name, so a photo you click morphs into the next page's hero and two heroes cross-fade in
   place. Book now opens the booking page in a circle from the button (html.vt-circle, set by motion.js). */
@media (prefers-reduced-motion: no-preference){
  @view-transition{navigation:auto}
  .pv-d .hero > img:first-of-type,.pv-m .mhero > img:first-of-type{view-transition-name:chq-hero}
  ::view-transition-old(root){animation:vt-out .4s ease both}
  ::view-transition-new(root){animation:vt-in .55s ease both}
  ::view-transition-group(chq-hero){animation-duration:.8s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
  ::view-transition-old(chq-hero){animation:vt-out .6s ease both}
  ::view-transition-new(chq-hero){animation:vt-in .6s ease both}
  html.vt-circle::view-transition-old(root){animation:none}
  html.vt-circle::view-transition-new(root){animation:vt-circle .85s cubic-bezier(.2,.7,.2,1) both;mix-blend-mode:normal}
  @keyframes vt-out{to{opacity:0}}
  @keyframes vt-in{from{opacity:0}}
  @keyframes vt-circle{from{clip-path:circle(0 at var(--vt-x,50%) var(--vt-y,50%))}to{clip-path:circle(150% at var(--vt-x,50%) var(--vt-y,50%))}}
}

/* ---------- hero: stays put while the next section slides over it; the photo drifts, zooms and dims with the
   scroll (--hp runs 0→1 over the hero's height, set by motion.js). All of it applies only once the page has
   scrolled (html.scrolled, also set by motion.js): at the top the hero is laid out and painted exactly as designed. ---------- */
.js-anim.scrolled .pv-d .hero,.js-anim.scrolled .pv-m .mhero{position:sticky!important;top:0}
.js-anim.scrolled .pv-d .hero ~ *,.js-anim.scrolled .pv-m .mhero ~ *{position:relative;background-color:inherit} /* sections without their own background take the page's, so the hero doesn't show through them */
.js-anim.scrolled .pv-d .hero ~ *:not([style*="z-index"]),.js-anim.scrolled .pv-m .mhero ~ *:not([style*="z-index"]){z-index:1}
.js-anim.scrolled :is(.hero,.mhero) > img:first-of-type{scale:calc(1 + var(--hp,0) * .08)} /* zooms only: a photo that moved would uncover the hero's olive background */
.js-anim.scrolled :is(.hero,.mhero) > div:not([aria-hidden]){translate:0 calc(var(--hp,0) * -8%)}
.js-anim.scrolled :is(.hero,.mhero)::after{content:"";position:absolute;inset:0;z-index:2;background:#1B1A17;opacity:calc(var(--hp,0) * .6);pointer-events:none}

/* ---------- mist drifting over the hero clouds, snow in winter (desktop; tiles and --mist-to come from motion.js) ---------- */
.mist{position:absolute;inset:0;pointer-events:none;background-repeat:repeat;opacity:0;transition:opacity 2s ease}
.js-anim .mist.is-on{opacity:1;animation:mist-drift 60s linear infinite}
.js-anim.hero-past .mist{animation-play-state:paused}
@keyframes mist-drift{to{background-position:var(--mist-to,0 0)}}

/* ---------- quiet touches: the cookie bar rises in; a header link underlines itself as you hover ---------- */
.js-anim [data-ck-banner]:not([hidden]),.js-anim [data-ck-done]:not([hidden]){animation:ck-in .55s cubic-bezier(.2,.7,.2,1) both}
@keyframes ck-in{from{opacity:0;translate:0 14px}}
/* header links: a line only under the link the mouse is on — the design's underline on the current page's link is
   dropped (the user asked for one line, on hover) */
.nav-c a[aria-current]{text-decoration:none!important}
.nav-c a{position:relative}
.nav-c a::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.nav-c a:hover::after,.nav-c a:focus-visible::after{transform:scaleX(1)}

/* ---------- top bar: the header rides in it once the page scrolls (motion.js); slides away going down, comes back
   tinted and blurred going up. Light pages (dark header text) get a cream tint instead of a dark one. ---------- */
.topbar{position:fixed;top:0;left:0;right:0;z-index:90;transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .55s ease,background-color .35s ease,box-shadow .35s ease}
.topbar:empty{display:none}
.topbar.is-up{transform:translateY(-72px);opacity:0;pointer-events:none} /* as on Velaa: drifts up a little while it fades out */
/* over the page it has a solid background in the brand's Warm Alpine cream (#EEE6DB), the user's choice; over the hero
   photo, and at the top of the page, it stays transparent. On the cream the header switches to its dark version, as the
   design draws it on light pages (Contacts): dark text and logo, olive Book button and active language. */
.topbar{background-color:transparent}
.topbar.is-solid{background-color:#EEE6DB;box-shadow:0 1px 0 #DDD3C5,0 10px 24px -18px rgba(36,34,30,.35)}
.topbar.to-dark header,.topbar.to-dark header :is(a,button):not(.sh-book):not(.mh-book):not([aria-pressed="true"]){color:#24221E!important}
.topbar.to-dark header [data-lang]:not([aria-current]):not([aria-pressed="true"]){color:rgba(36,34,30,.6)!important}
.topbar.to-dark :is(.sh-book,.mh-book){background:#5B5A3D!important;border-color:#5B5A3D!important;color:#EEE6DB!important}
.topbar.to-dark [data-lang-switch]{border-color:#CFC3B3!important}
.topbar.to-dark .mh-lang[aria-pressed="true"]{background:#5B5A3D!important;color:#EEE6DB!important}
.topbar.is-up{box-shadow:none}
html:not(.js-anim) .topbar{transition:none}

/* the header settles in a moment after the page appears */
.js-anim :is(.hero,.mhero) > div[style*="z-index: 3"] > header{animation:hdr-in 1s cubic-bezier(.2,.7,.2,1) .15s both}
@keyframes hdr-in{from{opacity:0;translate:0 -14px}}

/* ---------- small text rises in as on Velaa (motion.js): it replaces the design's scroll-tied section fade ---------- */
.js-anim .page section:not(.hero) > *{animation:none!important}
.js-anim .chq-rise{opacity:0}

/* ---------- headings, letter by letter (motion.js splits them while they move) ---------- */
.js-anim .chq-wait{opacity:0}
.chq-ch{position:relative}

/* ---------- photos fade in as they finish loading ---------- */
.js-anim img.ld{opacity:0}
.js-anim img.ld-in{animation:ld-in .9s ease both}
@keyframes ld-in{from{opacity:0}}