/* =====================================================================
   Motion (v4) — editorial, slow, quiet.
   Active only when <html class="js-motion"> (set in the <head>, never for
   visitors who prefer reduced motion). Without it everything renders
   instantly. Nothing in the header that holds the mobile menu is animated.
   ===================================================================== */
:root {
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes motion-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes motion-word {
  from { opacity: 0; filter: blur(12px); translate: 0 0.3em; }
  to { opacity: 1; filter: blur(0); translate: 0 0; }
}

@keyframes motion-lift {
  from { opacity: 0; translate: 0 20px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes motion-bob {
  0%, 100% { translate: -50% 0; }
  50% { translate: -50% 6px; }
}

/* ---- scroll progress hairline ---- */
.motion-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 10000;
  background: var(--Gray-9);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

/* ---- page load ----
   Only the logo fades: an animation on the menu or the button would make it
   a stacking context and put the mobile menu panel under the dark overlay. */
html.js-motion header .header--logo {
  animation: motion-fade 1.2s ease-out both;
}

html.js-motion .hero--content .motion-word {
  display: inline-block;
  animation: motion-word 1.3s var(--motion-ease) both;
  animation-delay: calc(0.2s + var(--w, 0) * 0.09s);
}

html.js-motion .hero--content > p {
  animation: motion-lift 1.2s var(--motion-ease) 0.9s both;
}

html.js-motion .hero--content .search-header {
  animation: motion-lift 1.2s var(--motion-ease) 1.1s both;
}

html.js-motion .hero--content .scrollTo {
  animation: motion-fade 1s ease-out 1.6s both;
}

/* ---- soft rise ---- */
html.js-motion .reveal {
  opacity: 0;
  translate: 0 26px;
  transition: opacity 1s var(--motion-ease), translate 1s var(--motion-ease);
  transition-delay: var(--reveal-delay, 0s);
}

html.js-motion .reveal.is-visible {
  opacity: 1;
  translate: 0 0;
}

/* ---- titles track in: spacing settles as they appear ---- */
html.js-motion .reveal-track {
  opacity: 0;
  letter-spacing: 0.16em;
  filter: blur(3px);
  transition: opacity 1.2s ease, letter-spacing 1.6s var(--motion-ease), filter 1.2s ease;
}

html.js-motion .reveal-track.is-visible {
  opacity: 1;
  letter-spacing: normal;
  filter: none;
}

/* ---- photographs develop from grey into colour ---- */
html.js-motion .reveal-develop img {
  filter: grayscale(1) brightness(1.12) contrast(0.9);
  opacity: 0.35;
  scale: 1.06;
  transition: filter 2s ease, opacity 1.4s ease, scale 2s var(--motion-ease);
  transition-delay: var(--reveal-delay, 0s);
}

html.js-motion .reveal-develop.is-visible img {
  filter: none;
  opacity: 1;
  scale: 1;
}

/* neighborhood name plates slide up after the photo */
html.js-motion .neighborhoods--content ul li.reveal-develop > a > div {
  opacity: 0;
  translate: 0 18px;
  transition: opacity 0.9s ease, translate 1s var(--motion-ease);
  transition-delay: calc(var(--reveal-delay, 0s) + 0.6s);
}

html.js-motion .neighborhoods--content ul li.reveal-develop.is-visible > a > div {
  opacity: 1;
  translate: 0 0;
}

/* agent portraits: settle in scale, plate follows */
html.js-motion .reveal-settle {
  opacity: 0;
  transition: opacity 1.1s ease;
  transition-delay: var(--reveal-delay, 0s);
}

html.js-motion .reveal-settle picture {
  scale: 1.07;
  transition: scale 1.8s var(--motion-ease);
  transition-delay: var(--reveal-delay, 0s);
}

html.js-motion .reveal-settle .agentsRoster--plate {
  translate: 0 14px;
  opacity: 0;
  transition: translate 1s var(--motion-ease), opacity 0.9s ease, background-color 0.5s ease;
  transition-delay: calc(var(--reveal-delay, 0s) + 0.45s);
}

html.js-motion .reveal-settle.is-visible,
html.js-motion .reveal-settle.is-visible .agentsRoster--plate {
  opacity: 1;
  translate: 0 0;
}

html.js-motion .reveal-settle.is-visible picture {
  scale: 1;
}

/* results: the mark turns into place */
html.js-motion .results ul li > img {
  transition: rotate 1.6s var(--motion-ease), opacity 1s ease;
}

html.js-motion .results ul li.reveal > img {
  rotate: -90deg;
  opacity: 0;
}

html.js-motion .results ul li.reveal.is-visible > img {
  rotate: 0deg;
  opacity: 1;
  transition-delay: calc(var(--reveal-delay, 0s) + 0.25s);
}

/* ---- hover details ---- */
.btn--gray-9 {
  box-shadow: inset 0 0 0 0 var(--Gray-7);
  transition: box-shadow 0.6s var(--motion-ease), color 0.3s ease;
}

.btn--gray-9:hover {
  box-shadow: inset 320px 0 0 0 var(--Gray-7);
}

.btn--icon > img {
  transition: translate 0.5s var(--motion-ease);
}

.btn--icon:hover > img {
  translate: 4px 0;
}

.neighborhoods--content ul li a {
  display: block;
  overflow: hidden;
  border-radius: 2px;
}

.neighborhoods--content ul li a img {
  transition: transform 1.4s var(--motion-ease);
}

.neighborhoods--content ul li a:hover img {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .motion-progress {
    display: none;
  }
  html.js-motion *,
  html.js-motion *::before {
    animation: none !important;
    transition: none !important;
  }
}