/* Le souffle d’Orélia — one shared motion vocabulary, no layout or brand reset. */
:root {
  --motion-ease: cubic-bezier(.22,1,.36,1);
  --motion-response: 160ms;
  --motion-nav: 180ms;
  --motion-action: 220ms;
  --motion-fade: 240ms;
  --motion-reveal: 340ms;
  --motion-photo: 320ms;
  --motion-entry: 900ms;
  --motion-shift: 6px;
}
body :is(.button,.text-link,.care-rate,.booking-option,.booking-launcher) {
  transition:background-color var(--motion-action) var(--motion-ease),color var(--motion-action) var(--motion-ease),transform var(--motion-action) var(--motion-ease);
}
body :is(.button,.text-link,.care-reserve)>svg {
  transition:transform var(--motion-action) var(--motion-ease);
}
body .button:not(.light):not(.outline):hover,
.header .header-end>.button:hover,
.booking-launcher:hover {
  background:color-mix(in srgb,var(--wine) 91%,var(--paper));color:var(--paper);
}
/* The approved translucent ribbon and the light hero actions retain their colours. */
.home-video .header:not(.header-scrolled) .header-end>.button:hover {background:var(--paper);color:var(--wine)}
.hero-video .hero-video-copy .button:hover {background:var(--wine);color:var(--paper)}
body :is(.button,.text-link):is(:hover,:focus-visible)>svg,
.care-rate:is(:hover,:focus-visible) .care-reserve>svg {transform:translateX(4px)}
body :is(.button,.booking-launcher):active {transform:scale(.985)}
.booking-option:active,.care-rate:active {background:var(--cream)}
.nav>a:not(.button)::after {
  width:100%;bottom:4px;background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform var(--motion-nav) var(--motion-ease);
}
.nav>a:not(.button):is(:hover,:focus-visible,[aria-current])::after {width:100%;transform:scaleX(1)}
.nav-dropdown>summary {position:relative}
/* The summary's FAQ +/- pseudo-element must never become a navigation line. */
.nav-dropdown>summary::after,.nav-dropdown[open]>summary::after {content:none}
.nav-dropdown .nav-label {position:relative;display:inline-block}
.nav-dropdown .nav-label::after {
  content:"";position:absolute;inset:auto 0 -7px;height:1px;background:currentColor;pointer-events:none;
  transform:scaleX(0);transform-origin:left;transition:transform var(--motion-nav) var(--motion-ease);
}
.nav-dropdown:is([open],.is-current)>summary .nav-label::after,
.nav-dropdown>summary:is(:hover,:focus-visible) .nav-label::after {transform:scaleX(1)}
.nav-dropdown[open]>.nav-submenu {animation:orelia-menu 260ms var(--motion-ease)}
.nav-submenu a,.care-nav a {transition:background-color var(--motion-action) var(--motion-ease),color var(--motion-action) var(--motion-ease)}
.experience,.care-card {transition:transform var(--motion-action) var(--motion-ease)}
.experience img,.gallery-grid img {transition:transform var(--motion-photo) var(--motion-ease)}
@media (hover:hover) and (pointer:fine) {
  .experience:hover,.care-card:hover {transform:translateY(-4px)}
  .experience:hover img,.gallery-grid button:hover img {transform:scale(1.025)}
}
.experience:focus-visible .photo img {transform:scale(1.025)}
@media (hover:none) {
  .experience:hover img,.gallery-grid button:hover img {transform:none}
  .experience:active {transform:translateY(1px)}
}
.faq-list details[open]>p {animation:orelia-fade 300ms var(--motion-ease)}
.booking-embed[open],.booking-embed[open]::backdrop {animation:orelia-fade var(--motion-response) var(--motion-ease)}
.booking-picker:not([hidden]),.booking-recovery:not([hidden]) {animation:orelia-fade var(--motion-response) var(--motion-ease)}
.booking-option,.booking-back {transition:background-color var(--motion-response) var(--motion-ease)}
.lightbox [data-lightbox-image] {touch-action:pan-y}
.soft-in {animation:orelia-fade var(--motion-fade) var(--motion-ease)}
@keyframes orelia-fade {from{opacity:.15}to{opacity:1}}
@keyframes orelia-menu {from{opacity:.15;transform:translateY(-12px)}to{opacity:1;transform:none}}
@media(max-width:1279px) {.nav.is-open {animation:orelia-menu var(--motion-action) var(--motion-ease)}}

/* The same compact logo footprint: the secondary mark only appears briefly. */
.brand--signature {position:relative}
.brand-wordmark {display:block;width:var(--logo-width);flex:0 0 auto}
.brand-emblem {
  position:absolute;left:50%;top:50%;width:66px;height:53px;opacity:0;
  transform:translate(-50%,-50%);background:currentColor;pointer-events:none;
  -webkit-mask:url('/assets/brand-v2/Orelia_Secondaire_Bordeaux.svg') center / contain no-repeat;
  mask:url('/assets/brand-v2/Orelia_Secondaire_Bordeaux.svg') center / contain no-repeat;
}
.hero-video h1 {position:relative}
.hero-motion-line {
  position:absolute;left:0;bottom:-13px;width:72px;height:1px;
  background:var(--paper);opacity:.65;transform-origin:left;pointer-events:none;
}

/* The Signature's existing three steps become selectable, without replacing
   their text, adding a section or making the booking action depend on a step. */
.ritual-flow {position:relative;--ritual-progress:0}
.ritual-flow::before,.ritual-flow::after {
  content:"";position:absolute;left:16px;top:39.5px;height:var(--ritual-track-height,0px);width:1px;
  background:var(--line);pointer-events:none;
}
.ritual-flow::after {
  background:var(--gold);transform:scaleY(var(--ritual-progress));transform-origin:top;
  transition:transform var(--motion-reveal) var(--motion-ease);
}
.ritual-flow .step {z-index:1}
.ritual-flow .step::before {
  left:0;top:23px;width:33px;height:33px;display:grid;place-items:center;
  border-radius:50%;background:var(--cream);color:var(--wine);font-weight:500;
  transition:background-color var(--motion-action) var(--motion-ease),color var(--motion-action) var(--motion-ease);
}
.ritual-flow .step.is-selected::before {background:var(--wine);color:var(--paper)}
.ritual-step-button {
  display:block;min-height:44px;width:100%;padding:0;text-align:left;
  font:inherit;color:inherit;border:0;background:none;
}
.ritual-flow .step h3 {margin-top:-6px}
.ritual-flow .step p {margin-top:8px}
.ritual-flow-visual {
  margin-top:28px;aspect-ratio:4 / 3;overflow:hidden;
  border-radius:42% 42% 0 0 / 48% 48% 0 0;background:var(--cream);
}
.ritual-flow-visual img {display:block;width:100%;height:100%;object-fit:cover}
.ritual-flow-visual img[hidden] {display:none}
.ritual-flow-caption {display:none}
.ritual-story:has(.ritual-flow-visual) {align-items:center}
@media(max-width:620px) {
  :root {--motion-shift:4px}
  @keyframes orelia-menu {from{opacity:.15;transform:translateY(-8px)}to{opacity:1;transform:none}}
  .brand-emblem {display:none}
  .ritual-flow {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:30px}
  .ritual-flow::before,.ritual-flow::after {left:var(--ritual-track-left);top:13.5px;width:var(--ritual-track-width);height:1px}
  .ritual-flow::after {transform:scaleX(var(--ritual-progress));transform-origin:left}
  .ritual-flow .step {padding:35px 4px 0;border-top:0;min-width:0;text-align:center}
  .ritual-flow .step::before {width:27px;height:27px;top:0;left:50%;transform:translateX(-50%)}
  .ritual-flow .step h3 {font-size:17px;line-height:1.35;margin:0}
  .ritual-step-button {text-align:center;min-height:48px}
  .ritual-flow .step p {display:none}
  .ritual-flow-caption {display:block;grid-column:1 / -1;min-height:5.2em;margin-top:18px;font-size:16px;line-height:1.6;color:var(--muted)}
  .ritual-flow-visual {aspect-ratio:3 / 2;border-radius:38% 38% 0 0 / 42% 42% 0 0}
}
/* Also covers existing CSS effects. The JS controller cancels running WAAPI
   effects immediately on a preference change; video keeps its own controls. */
@media(prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto!important}
  *,*::before,*::after {animation:none!important;transition:none!important}
  .experience:hover,.experience:active,.care-card:hover,.booking-launcher:hover,
  body :is(.button,.booking-launcher):active,
  .experience:hover img,.gallery-grid button:hover img,
  .experience:focus-visible .photo img,
  body :is(.button,.text-link):is(:hover,:focus-visible)>svg,
  .care-rate:is(:hover,:focus-visible) .care-reserve>svg {transform:none!important}
}
@media print {.ritual-flow::before,.ritual-flow::after {display:none}}