/* Moulded surfaces, sampled from House of Mira and tinted to this salon. */
:root {
  --depth-face: linear-gradient(180deg, #ffffffd9, #ffffff38 46%, #3814260d);
  --depth-face-dark: linear-gradient(180deg, #ffffff38, #ffffff0d 44%, #230c181c);
  --depth-rim: inset 0 1px 0 #fffffff2, inset 0 0 0 1px #ffffff80, inset 0 -7px 9px -9px #38142673;
  --depth-rim-dark: inset 0 1px 0 #ffffff4d, inset 0 0 0 1px #ffffff17, inset 0 -9px 14px -11px #230c1899;
  --depth-lift: 0 .5px 1px #38142612, 0 2px 3px -1px #38142612, 0 6px 12px -4px #38142617;
  --depth-hover: 0 1px 1.5px #38142612, 0 4px 7px -2px #38142617, 0 13px 22px -8px #38142626;
  --depth-press: inset 0 2px 6px #230c1852, inset 0 0 0 1px #230c181a, 0 .5px 1px #3814261f;
  --depth-press-soft: inset 0 2px 5px #3814262b, inset 0 0 0 1px #3814260d, 0 .5px 1px #38142617;
}
.depth-control {
  --control-face: var(--depth-face-dark);
  --control-rim: var(--depth-rim-dark);
  --control-press: var(--depth-press);
}
.depth-control.depth-soft {
  --control-face: var(--depth-face);
  --control-rim: var(--depth-rim);
  --control-press: var(--depth-press-soft);
}
/* Specificity keeps the same finish on card, header and footer actions. */
body .depth-control.depth-control {
  background-image: var(--control-face);
  background-origin: border-box;
  box-shadow: var(--control-rim), var(--depth-lift);
  transition: background-color .2s, color .2s, box-shadow .2s;
}
@media (hover: hover) and (pointer: fine) {
  body .depth-control.depth-control:hover:not(:disabled) { box-shadow: var(--control-rim), var(--depth-hover); }
}
body .depth-control.depth-control.is-pressed {
  box-shadow: var(--control-press);
  transition-duration: .06s;
}
.press-control {
  translate: 0 var(--press-y, 0px);
  scale: var(--press-scale, 1);
  transform-origin: center;
}
body .press-control:active { transform: none; }
.button .button-icon {
  background-image: var(--depth-face-dark);
  box-shadow: inset 0 1px 0 #ffffff4d, inset 0 -4px 5px -5px #230c1880, 0 1px 1.5px #38142621;
}
.services .service-book {
  --control-face: linear-gradient(135deg, #ffffff12, transparent 60%, #38142612);
  --control-rim: inset 0 1px 0 #ffffff26;
  --depth-lift: 0 4px 10px -6px #681e4973;
  --depth-hover: 0 8px 16px -7px #681e4966;
  --control-press: inset 0 2px 4px #38142640, 0 1px 2px #3814261a;
}
.services .service-book svg { transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.services .service-book:focus-visible svg { transform: translateX(2px); }
@media (hover: hover) and (pointer: fine) {
  .services .service-book:hover svg { transform: translateX(2px); }
}

/* Minutes-inspired entrances: rise into focus, then settle. Text has its own
   sequence; the gallery keeps its 3D transforms and doesn't receive blur. */
:root {
  --entrance-ease: cubic-bezier(.22, 1, .36, 1);
  --heading-duration: 850ms;
  --heading-step: 65ms;
}
.hero-title-line { display: inline-block; }
@keyframes page-arrive {
  from { opacity: .01; translate: 0 var(--intro-y, 18px); filter: blur(var(--intro-blur, 0px)); }
  to { opacity: 1; translate: 0 0; filter: blur(0px); }
}
@keyframes heading-resolve {
  from { opacity: .01; translate: 0 26px; filter: blur(5px); }
  to { opacity: 1; translate: 0 0; filter: blur(0px); }
}
@media (prefers-reduced-motion: no-preference) {
  [data-intro] {
    animation: page-arrive .9s var(--entrance-ease) backwards;
    animation-delay: var(--intro-delay, 0ms);
  }
  [data-intro="chrome"] { --intro-y: 0px; animation-duration: .45s; }
  [data-intro="eyebrow"] { --intro-y: 12px; --intro-blur: 3px; --intro-delay: 60ms; }
  [data-intro="title-first"] { --intro-y: 36px; --intro-blur: 7px; --intro-delay: 140ms; animation-duration: 1s; }
  [data-intro="title-second"] { --intro-y: 36px; --intro-blur: 7px; --intro-delay: 280ms; animation-duration: 1s; }
  [data-intro="actions"] { --intro-y: 20px; --intro-blur: 3px; --intro-delay: 420ms; }
  [data-intro="gallery"] { --intro-y: 26px; --intro-delay: 260ms; animation-duration: 1.05s; }
  [data-intro="detail"] { --intro-y: 0px; --intro-delay: 480ms; animation-duration: .65s; }
  /* Keyboard navigation never lands in an element waiting to appear. */
  [data-intro]:focus-within { opacity: 1 !important; translate: 0 0 !important; filter: none !important; }
  .motion-ready .heading-reveal:not(.is-visible) .heading-word {
    opacity: .01;
    translate: 0 26px;
    filter: blur(5px);
  }
  .motion-ready .heading-reveal.is-visible .heading-word {
    animation: heading-resolve var(--heading-duration) var(--entrance-ease) backwards;
    animation-delay: calc(min(var(--heading-index, 0), 6) * var(--heading-step));
  }
  .motion-ready .heading-reveal.is-reveal-static .heading-word,
  .motion-ready .heading-reveal:focus-within .heading-word {
    animation: none;
    opacity: 1;
    translate: none;
    filter: none;
  }
}
.heading-word { display: inline-block; }

/* Spring entrances use individual translate so portrait rotations survive. */
.motion-ready .reveal {
  opacity: var(--reveal-opacity, 1);
  translate: 0 var(--reveal-y, 0px);
  filter: blur(var(--reveal-blur, 0px));
  transform: none;
  transition: none;
}
.motion-ready .reveal.is-revealing { will-change: opacity, translate, filter; }
/* Replace the legacy hidden transform too, so the entrance only moves once. */
.motion-ready .reveal:not(.is-visible) { transform: none; }
.motion-ready .reveal.is-visible:not(.is-revealing) { filter: none; }
.motion-ready .reveal.heading-reveal { opacity: 1; translate: none; transform: none; filter: none; }
.motion-ready .reveal:focus-within { opacity: 1; }
.motion-ready .story-photo-left { transform: rotate(-10deg); }
.motion-ready .story-photo-right { transform: rotate(10deg); }
.services .service-card { transition: box-shadow .3s; }
.services .service-card:hover { transform: none; }
.motion-ready .service-card { translate: 0 calc(var(--reveal-y, 0px) + var(--lift-y, 0px)); }
.reel-card { translate: 0 var(--lift-y, 0px); transition: box-shadow .3s; }
.reel-card:hover, .reel-card:focus-visible { transform: none; }
.services .service-image img { transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.services .service-card:hover .service-image img { transform: scale(1.025); }
.orbit-line, .orbit-star { animation: none; }

.faq-answer-shell { overflow: hidden; }
.faq-list .motion-question[open] .faq-answer { animation: none; }
.faq-list .motion-question summary > span { transition: background .2s, color .2s, transform .3s cubic-bezier(.16, 1, .3, 1); }
.faq-list .motion-question summary[aria-expanded=false] { color: var(--plum); }
.faq-list .motion-question summary[aria-expanded=false] > span { transform: none; background: #f5e7ea; border-color: #e6cbd4; color: var(--berry); }
.booking-treatment:has(input:checked), .booking-time-options label:has(input:checked) span {
  box-shadow: inset 0 1px 0 #ffffffb3, 0 3px 10px -6px #38142633;
}

/* Native dialog transitions keep focus trapping and animate both directions. */
@supports (transition-behavior: allow-discrete) {
  dialog:not(.mobile-menu-dialog) {
    opacity: 0;
    transform: translateY(8px) scale(.99);
    transition: opacity .2s, transform .32s cubic-bezier(.16, 1, .3, 1), display .32s allow-discrete, overlay .32s allow-discrete;
  }
  dialog:not(.mobile-menu-dialog)[open] { animation: none; opacity: 1; transform: none; }
  dialog:not(.mobile-menu-dialog)::backdrop {
    opacity: 0;
    transition: opacity .2s, display .32s allow-discrete, overlay .32s allow-discrete;
  }
  dialog:not(.mobile-menu-dialog)[open]::backdrop { opacity: 1; }
  @starting-style {
    dialog:not(.mobile-menu-dialog)[open] { opacity: 0; transform: translateY(8px) scale(.99); }
    dialog:not(.mobile-menu-dialog)[open]::backdrop { opacity: 0; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .motion-ready .reveal { translate: none; opacity: 1; filter: none; }
  .heading-word { opacity: 1; translate: none; filter: none; animation: none; }
  .motion-ready .service-card, .reel-card { translate: none; }
  .press-control { translate: none; scale: 1; }
  .services .service-book:is(:hover, :focus-visible) svg { transform: none; }
  .services .service-card:hover .service-image img { transform: none; }
  .faq-list .motion-question summary > span { transition: background .15s, color .15s; }
  dialog:not(.mobile-menu-dialog), dialog:not(.mobile-menu-dialog)[open] { transform: none; animation: none; transition-duration: .12s; }
}