/* A quiet editorial rhythm: enter once, settle gently, keep controls immediate. */
:root {
  --motion-ease: cubic-bezier(.16, 1, .3, 1);
  --motion-soft: cubic-bezier(.22, .61, .36, 1);
}

/* Content is visible by default. JavaScript opts individual elements in. */
.motion-ready .motion-reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity .75s var(--motion-soft) var(--motion-delay, 0ms),
    transform 1.05s var(--motion-ease) var(--motion-delay, 0ms),
    clip-path 1.05s var(--motion-ease) var(--motion-delay, 0ms),
    translate .4s var(--motion-ease), box-shadow .4s var(--motion-ease), border-color .3s;
}
.motion-ready .motion-reveal.in { opacity: 1; transform: none; }
.motion-ready .motion-reveal[data-motion="heading"] {
  transform: translate3d(0, 18px, 0);
  /* Leave a measurable sliver for IntersectionObserver; opacity still hides it. */
  clip-path: inset(-16% -6% 85% -6%);
}
.motion-ready .motion-reveal[data-motion="heading"].in {
  transform: none;
  clip-path: inset(-16% -6% -16% -6%);
}
.motion-ready .motion-reveal[data-motion="image"] { transform: translate3d(0, 16px, 0); }
.motion-ready .motion-reveal[data-motion="image"].in { transform: none; }
.motion-ready .motion-reveal[data-motion="image"] img {
  clip-path: inset(0 0 12% 0);
  transform: scale(1.035);
  transform-origin: center 58%;
  transition: clip-path 1.25s var(--motion-ease) var(--motion-delay, 0ms),
    transform 1.45s var(--motion-ease) var(--motion-delay, 0ms);
}
.motion-ready .motion-reveal[data-motion="image"].in img {
  clip-path: inset(0);
  transform: none;
}
.motion-ready .motion-reveal[data-motion="fade"] { transform: translate3d(0, 14px, 0); }
.motion-ready .motion-reveal[data-motion="fade"].in { transform: none; }
.motion-ready .motion-reveal.motion-instant,
.motion-ready .motion-reveal:focus-within {
  opacity: 1;
  transform: none;
  clip-path: none;
  transition: none !important;
}
.motion-ready .motion-reveal.motion-instant img,
.motion-ready .motion-reveal:focus-within img {
  transform: none;
  clip-path: none;
  transition: none !important;
}

/* The welcome unfolds in two lines; the photograph is never hidden. */
.hero-room .hero-copy > * { animation: none; }
.motion-ready .hero-room .hero-copy > .eyebrow,
.motion-ready .hero-room .hero-copy > .lede,
.motion-ready .hero-room .hero-actions,
.motion-ready .hero-room-foot {
  opacity: 0;
  translate: 0 14px;
  transition: opacity .8s var(--motion-soft), translate 1.1s var(--motion-ease);
}
.motion-ready .hero-room h1 > .hero-welcome,
.motion-ready .hero-room h1 > em {
  opacity: 0;
  translate: 0 22px;
  clip-path: inset(-14% -6% 100% -6%);
  transition: opacity .75s var(--motion-soft), translate 1.25s var(--motion-ease),
    clip-path 1.25s var(--motion-ease);
}
.motion-ready .motion-entered .hero-room .hero-copy > .eyebrow,
.motion-ready .motion-entered .hero-room .hero-copy > .lede,
.motion-ready .motion-entered .hero-room .hero-actions,
.motion-ready .motion-entered .hero-room-foot,
.motion-ready .motion-entered .hero-room h1 > .hero-welcome,
.motion-ready .motion-entered .hero-room h1 > em {
  opacity: 1;
  translate: 0 0;
  clip-path: inset(-14% -6% -14% -6%);
}
.motion-ready .motion-entered .hero-room .hero-copy > .eyebrow { transition-delay: .02s; }
.motion-ready .motion-entered .hero-room h1 > .hero-welcome { transition-delay: .08s; }
.motion-ready .motion-entered .hero-room h1 > em { transition-delay: .18s; }
.motion-ready .motion-entered .hero-room .hero-copy > .lede { transition-delay: .28s; }
.motion-ready .motion-entered .hero-room .hero-actions { transition-delay: .38s; }
.motion-ready .motion-entered .hero-room-foot { transition-delay: .55s; }
.motion-ready .motion-entered .hero-room-foot { clip-path: none; }
.motion-ready .hero-room-foot:focus-within {
  opacity: 1;
  translate: none;
  clip-path: none;
  transition: none;
}
.motion-ready .hero-room .hero-actions:focus-within {
  opacity: 1;
  translate: none;
  clip-path: none;
  transition: none;
}
.motion-ready .motion-entered .hero-photo picture {
  animation: lu-photo-open 1.8s var(--motion-ease) both;
}
.hero-room .hero-photo img {
  transform-origin: center 55%;
  animation: lu-room-drift 26s ease-in-out infinite alternate both;
  animation-play-state: paused;
}
.hero-room.motion-active .hero-photo img {
  animation-play-state: running;
  will-change: transform;
}
.hero-scroll svg {
  animation: lu-scroll-cue 3.2s ease-in-out infinite;
  animation-play-state: paused;
}
.hero-room.motion-active .hero-scroll svg { animation-play-state: running; }

/* Framing details drift only while their section is on screen. */
.page-intro::after,
.home-cta::before,
.home-cta::after {
  animation: lu-ring-drift 24s ease-in-out infinite alternate both;
  animation-play-state: paused;
}
.home-cta::after { animation-duration: 29s; animation-direction: alternate-reverse; }
.page-intro.motion-active::after,
.home-cta.motion-active::before,
.home-cta.motion-active::after { animation-play-state: running; }
@supports selector(:has(*)) {
  .motion-ready .steps::before {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.35s var(--motion-ease);
  }
  .motion-ready .steps:has(.step.in)::before { transform: scaleX(1); }
}

/* Hover uses translate, independently of the one-time entrance transform. */
:is(.home-service, .svc, .together-card, .benefit-card, .review-card, .ben, .gallery-item) {
  transition: translate .4s var(--motion-ease), box-shadow .4s var(--motion-ease), border-color .3s;
}
.svc:hover { transform: none; }
:is(.home-service, .svc, .together-card, .benefit-card, .review-card):focus-within {
  translate: 0 -4px;
  box-shadow: 0 22px 45px -28px rgba(75, 52, 41, .3);
}
.btn { overflow: hidden; }
.btn > span, .btn > svg { position: relative; z-index: 1; }
.btn:not(.btn-ghost):not(.btn-outline)::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 25%, rgba(255, 253, 249, .2) 50%, transparent 75%);
  transform: translateX(-115%);
}
a.btn svg, .home-service-link > svg, .svc-link > svg,
.text-link > span:last-child, .price-row > a svg {
  transition: translate .4s var(--motion-ease), transform .4s var(--motion-ease);
}
a.btn:focus-visible svg, .home-service-link:focus-visible > svg,
.svc-link:focus-visible > svg, .text-link:focus-visible > span:last-child,
.price-row > a:focus-visible svg { translate: 4px 0; }
.gallery-open .gallery-thumb { transition: transform .9s var(--motion-ease); }
.gallery-open:focus-visible .gallery-thumb { transform: scale(1.035); }
.nav-links a::after { transform-origin: left center; transition-duration: .4s; }
@media (hover: hover) and (pointer: fine) {
  :is(.home-service, .svc, .together-card, .benefit-card, .review-card, .ben):hover {
    translate: 0 -6px;
    box-shadow: 0 22px 45px -28px rgba(75, 52, 41, .3);
  }
  .gallery-item:hover { translate: 0 -4px; }
  .btn:hover, .hero-room .btn:hover { transform: none; translate: 0 -2px; }
  .gallery-open:hover .gallery-thumb { transform: scale(1.045); }
  .btn:not(.btn-ghost):not(.btn-outline):hover::before {
    transform: translateX(115%);
    transition: transform .85s var(--motion-ease);
  }
  a.btn:hover svg, .home-service-link:hover > svg, .svc-link:hover > svg,
  .text-link:hover > span:last-child, .price-row > a:hover svg { translate: 4px 0; }
  .svc-link:hover > svg { transform: none; }
}

/* A short cascade within the native mobile menu. */
.drawer { transition: opacity .45s var(--motion-soft), visibility .45s; }
.drawer > a {
  opacity: 0;
  translate: 0 16px;
  transition: opacity .3s, translate .5s var(--motion-ease);
}
.drawer.open > a { opacity: 1; translate: none; }
.drawer.open > a:nth-child(1) { transition-delay: .05s; }
.drawer.open > a:nth-child(2) { transition-delay: .09s; }
.drawer.open > a:nth-child(3) { transition-delay: .13s; }
.drawer.open > a:nth-child(4) { transition-delay: .17s; }
.drawer.open > a:nth-child(5) { transition-delay: .21s; }
.drawer.open > a:nth-child(6) { transition-delay: .25s; }
.drawer.open > a:focus-visible { opacity: 1; translate: none; transition: none; }

/* Category changes don't move the amounts or delay access to a price. */
.price-panel { animation: none; }
.motion-ready .price-panel.price-panel-enter { animation: lu-price-fade .4s var(--motion-soft) both; }
.motion-ready .price-panel-enter .price-row { animation: lu-price-fade .55s var(--motion-soft) both; }
.motion-ready .price-panel-enter .price-row:nth-of-type(2) { animation-delay: .035s; }
.motion-ready .price-panel-enter .price-row:nth-of-type(3) { animation-delay: .07s; }
.motion-ready .price-panel-enter .price-row:nth-of-type(4) { animation-delay: .105s; }
.motion-ready .price-panel-enter .price-row:nth-of-type(n+5) { animation-delay: .14s; }
.motion-ready .price-panel-enter:focus-within,
.motion-ready .price-panel-enter .price-row:focus-within { animation: none; }

@keyframes lu-photo-open { from { transform: scale(1.06); } to { transform: scale(1); } }
@keyframes lu-room-drift {
  from { transform: scale(1.006) translate(0, 0); }
  to { transform: scale(1.035) translate(-.35%, -.25%); }
}
@keyframes lu-scroll-cue {
  0%, 100% { translate: 0 0; opacity: .85; }
  50% { translate: 0 5px; opacity: .55; }
}
@keyframes lu-ring-drift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(-18px, 17px) scale(1.055); }
}
@keyframes lu-price-fade { from { opacity: .25; } to { opacity: 1; } }

@media (max-width: 640px) {
  .motion-ready .motion-reveal { transform: translate3d(0, 18px, 0); transition-duration: .65s, .85s, .85s, .3s, .3s, .3s; }
  .motion-ready .motion-reveal.in { transform: none; }
  .motion-ready .motion-reveal[data-motion="image"] img { transition-duration: .95s, 1.1s; }
  .motion-ready .motion-entered .hero-photo picture { animation-duration: 1.45s; }
}

@media (prefers-reduced-motion: reduce) {
  .motion-ready .motion-reveal,
  .motion-ready .motion-reveal img,
  .motion-ready .hero-room .hero-copy > *,
  .motion-ready .hero-room h1 > .hero-welcome,
  .motion-ready .hero-room h1 > em,
  .motion-ready .hero-room .hero-actions,
  .drawer > a {
    opacity: 1 !important;
    transform: none !important;
    translate: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .motion-ready .hero-room-foot {
    opacity: 1 !important;
    translate: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .hero-photo picture, .hero-photo img, .hero-scroll svg,
  .page-intro::after, .home-cta::before, .home-cta::after,
  .price-panel, .price-row { animation: none !important; will-change: auto !important; }
  :is(.home-service, .svc, .together-card, .benefit-card, .review-card, .ben, .gallery-item),
  :is(.home-service, .svc, .together-card, .benefit-card, .review-card, .ben, .gallery-item):hover,
  :is(.home-service, .svc, .together-card, .benefit-card, .review-card):focus-within,
  .gallery-open .gallery-thumb, a.btn svg, .home-service-link > svg,
  .svc-link > svg, .text-link > span:last-child, .price-row > a svg {
    translate: none !important;
    transform: none !important;
    transition: none !important;
  }
  .btn::before { display: none; }
  .motion-ready .steps::before { transform: none; transition: none; }
}
