/* Motion. Start states apply only under html.has-motion (set by js/motion.js
   when the visitor has not asked for reduced motion), so the page is fully
   visible without JS. */
:root {
  --ease-out: cubic-bezier(0.22, 0.8, 0.24, 1);
  --reveal-distance: 28px;
  --reveal-duration: 0.8s;
}

/* Header shadow after scrolling */
.header__bar { transition: box-shadow 0.3s ease, background-color 0.3s ease; }
.header.is-scrolled .header__bar { box-shadow: 0 8px 24px rgba(33, 33, 35, 0.08); }

/* Scroll reveal */
.has-motion .reveal {
  opacity: 0;
  transform: translate3d(0, var(--reveal-distance), 0);
  transition:
    opacity var(--reveal-duration) var(--ease-out) var(--reveal-delay, 0ms),
    transform var(--reveal-duration) var(--ease-out) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.has-motion .reveal.is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Reviews slide in sideways on the mobile carousel */
@media (max-width: 767px) {
  .has-motion .reviews__track > .reveal { transform: translate3d(32px, 0, 0); }
  .has-motion .reviews__track > .reveal.is-visible { transform: none; }
}

/* Hero entrance */
.has-motion .hero__media {
  transform: scale(1.063);
  transform-origin: 0 55%;
  transition: transform 1.6s var(--ease-out);
}
.has-motion.is-loaded .hero__media { transform: none; }

/* Hero depth: --hero-mx/--hero-my (pointer, -1..1) and --hero-sy (scroll, px) come from
   js/motion.js. The room moves less than Maria; the slight scale keeps the room's edges hidden. */
.has-motion .hero__layer { will-change: transform; }
.has-motion .hero__layer--bg {
  transform:
    translate3d(calc(var(--hero-mx, 0) * -6px), calc(var(--hero-my, 0) * -4px + var(--hero-sy, 0px) * 0.14), 0)
    scale(1.06);
}
.has-motion .hero__layer--fg {
  transform:
    translate3d(calc(var(--hero-mx, 0) * -16px), calc(var(--hero-my, 0) * -10px + var(--hero-sy, 0px) * 0.05), 0)
    scale(1.06);
}
.has-motion .hero__content > * {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.has-motion.is-loaded .hero__content > * { opacity: 1; transform: none; }
.has-motion .hero__content > :nth-child(1) { transition-delay: 0.1s; }
.has-motion .hero__content > :nth-child(2) { transition-delay: 0.22s; }
.has-motion .hero__content > :nth-child(3) { transition-delay: 0.34s; }
.has-motion .hero__content > :nth-child(4) { transition-delay: 0.5s; }

@media (max-width: 1100px) {
  .has-motion .hero__media { transform: none; transition: none; }
}

/* Mobile menu: the sheet drops from under the header, then the links rise one by one.
   Closing runs quicker and all at once (js/ui.js waits 400ms before hiding the menu). */
.mobile-menu {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.4s var(--ease-out);
}
.mobile-menu.is-open {
  clip-path: inset(0);
  transition-duration: 0.55s;
}
.mobile-menu .nav__link {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.mobile-menu.is-open .nav__link {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.5s var(--ease-out) var(--item-delay),
    transform 0.6s var(--ease-out) var(--item-delay);
}
.mobile-menu .nav__link:nth-child(1) { --item-delay: 0.15s; }
.mobile-menu .nav__link:nth-child(2) { --item-delay: 0.21s; }
.mobile-menu .nav__link:nth-child(3) { --item-delay: 0.27s; }
.mobile-menu .nav__link:nth-child(4) { --item-delay: 0.33s; }
.mobile-menu .nav__link:nth-child(5) { --item-delay: 0.39s; }
.mobile-menu.is-open .nav__link:hover { opacity: 0.6; transition-delay: 0s; }

/* Hero button docked to the bottom edge on mobile (js/ui.js) */
@media (max-width: 767px) {
  .hero .hero__cta.is-docked {
    position: fixed;
    left: var(--gutter);
    right: var(--gutter);
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 30;
    width: auto;
    box-shadow: 0 10px 28px rgba(33, 33, 35, 0.22);
    transition: opacity 0.3s ease, transform 0.35s var(--ease-out), visibility 0s;
  }
  .hero .hero__cta.is-docked-from-top { animation: cta-dock 0.45s var(--ease-out); }
  .hero .hero__cta.is-away {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, 24px, 0);
    transition: opacity 0.3s ease, transform 0.35s var(--ease-out), visibility 0s 0.35s;
  }
}
@keyframes cta-dock {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
}

/* About photo parallax: the image is scaled up, so the drift never shows an edge */
.has-motion .about__photo img {
  transform: translate3d(0, var(--parallax, 0px), 0) scale(1.22);
}

/* Card hover lift */
.help-card,
.review,
.free-call {
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
@media (hover: hover) {
  .help-card:hover,
  .review:hover,
  .free-call:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(33, 33, 35, 0.08);
  }
}

/* Button arrow nudge */
.btn img { transition: transform 0.25s var(--ease-out); }
.btn:hover img { transform: translate(2px, -2px); }

@media (prefers-reduced-motion: reduce) {
  .mobile-menu,
  .mobile-menu .nav__link,
  .mobile-menu.is-open .nav__link { transition: none; }
  .mobile-menu .nav__link { opacity: 1; transform: none; }
  .hero .hero__cta.is-docked-from-top { animation: none; }
  .help-card:hover, .review:hover, .free-call:hover { transform: none; }
  .btn:hover img { transform: none; }
}