/* Architectural accents and a single, coordinated motion language. */
:root {
  --entry-ease: cubic-bezier(0.19, 1, 0.22, 1);
  --soft-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hero-atmosphere {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.hero-aura {
  position: absolute;
  inset: -22% -18% -18% 28%;
  background:
    radial-gradient(ellipse at 78% 23%, #d634514f, transparent 55%),
    radial-gradient(ellipse at 35% 82%, #5381c847, transparent 58%);
  filter: blur(26px);
  transform: rotate(-12deg);
}
.hero .eyebrow::before {
  width: 112px;
  border: 0;
  background: linear-gradient(90deg, #ed6374, #ed637480 66%, transparent) left
    top / 112px 2px no-repeat;
}
.about-art::before {
  content: "";
  position: absolute;
  top: -20px;
  left: -20px;
  width: 118px;
  height: 112px;
  border-top: 3px solid var(--red);
  border-left: 3px solid var(--red);
  border-top-left-radius: 26px;
  pointer-events: none;
}
.neighbourhood-card::before {
  content: "";
  position: absolute;
  top: 26px;
  right: 26px;
  width: 65px;
  height: 78px;
  border-top: 3px solid #f06a7a;
  border-right: 3px solid #f06a7a;
  z-index: 1;
  pointer-events: none;
}
.motion-line {
  display: block;
  overflow: hidden;
  padding: 0.1em 0.02em 0.14em 0;
  margin: -0.1em -0.02em -0.14em 0;
}
.motion-line-inner {
  display: block;
}
/* Wrapper spans retain the original heading colours and readable text. */
h2 .motion-line,
h2 .motion-line-inner,
.hero h1 .motion-line,
.hero h1 .motion-line-inner,
.statement-section > p .motion-line,
.statement-section > p .motion-line-inner {
  color: inherit;
}
.js-motion .hero-photo {
  inset: -4%;
  translate: 0 var(--photo-shift, 0px);
  animation: cinematic-arrival 2.2s var(--soft-ease) both;
}
.js-motion .hero-atmosphere {
  translate: 0 var(--aura-shift, 0px);
}
.js-motion .hero-aura {
  animation: aura-arrival 3.2s 0.1s var(--soft-ease) both;
}
.js-motion .hero .eyebrow {
  animation: measured-rise 0.8s 0.08s var(--entry-ease) both;
}
.js-motion .hero .eyebrow::before {
  animation: corner-trace 1.1s 0.2s var(--soft-ease) both;
}
.js-motion .hero .motion-line-inner {
  animation: line-unveil 1.2s var(--entry-ease) both;
  animation-delay: calc(0.18s + var(--line-index, 0) * 0.17s);
}
.js-motion .hero-description {
  animation: measured-rise 1s 0.6s var(--entry-ease) both;
}
.js-motion .hero-content > .button {
  animation: measured-rise 1s 0.8s var(--entry-ease) both;
}
.js-motion .hero-bottom {
  animation: measured-rise 1s 0.95s var(--entry-ease) both;
}
.js-motion .site-header .brand-monogram {
  animation: monogram-arrival 1.1s var(--entry-ease) both;
}
.js-motion .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.9s var(--soft-ease),
    transform 1.1s var(--entry-ease);
  transition-delay: var(--entry-delay, 0ms);
}
.js-motion .reveal.visible,
.js-motion .reveal:focus-within {
  opacity: 1;
  transform: none;
}
.js-motion .reveal.visible .motion-line-inner {
  animation: line-unveil 1.15s var(--entry-ease) both;
  animation-delay: calc(var(--entry-delay, 0ms) + var(--line-index, 0) * 140ms);
}
.js-motion .eyebrow.reveal.visible::before,
.js-motion .reveal.visible > .eyebrow::before,
.js-motion .about-art.reveal.visible::before {
  animation: corner-trace 1.25s 0.15s var(--soft-ease) both;
}
.js-motion .about-art {
  transform: none;
}
.js-motion .about-art.visible .architecture-photo {
  animation: image-unveil 1.45s var(--entry-ease) both;
}
.js-motion .about-art.visible .architecture-photo img {
  animation: image-settle 1.8s var(--soft-ease) both;
}
.js-motion .about-art.visible .portrait-card {
  animation: portrait-arrival 1.2s 0.45s var(--entry-ease) both;
}
.js-motion .property-card.visible .property-image {
  animation: image-unveil 1.2s var(--entry-ease) both;
  animation-delay: var(--entry-delay, 0ms);
}
.js-motion .property-card.visible .property-info {
  animation: measured-rise 0.85s var(--entry-ease) both;
  animation-delay: calc(var(--entry-delay, 0ms) + 140ms);
}
.js-motion .property-card:focus-within .property-image,
.js-motion .property-card:focus-within .property-info {
  animation: none;
}
.js-motion .neighbourhood-card.visible::before {
  animation: corner-trace 1.2s var(--soft-ease) both;
  animation-delay: calc(var(--entry-delay, 0ms) + 400ms);
}
.js-motion .neighbourhood-card.visible .neighbourhood-name {
  animation: measured-rise 1s var(--entry-ease) both;
  animation-delay: calc(var(--entry-delay, 0ms) + 200ms);
}
.js-motion .service-list.visible details {
  animation: service-arrival 1s var(--entry-ease) both;
}
.js-motion .service-list.visible details:nth-child(2) {
  animation-delay: 0.14s;
}
.js-motion .service-list.visible details:nth-child(3) {
  animation-delay: 0.28s;
}
.js-motion .approach-intro.visible .line-art path {
  stroke-dasharray: 1800;
  animation: draw-homes 2.5s 0.35s var(--soft-ease) both;
}
.js-motion dialog[open] {
  animation: dialog-arrival 0.65s var(--entry-ease) both;
}
.js-motion dialog[open]::backdrop {
  animation: veil-arrival 0.4s ease both;
}
@media (hover: hover) and (pointer: fine) {
  .property-image::after {
    content: "";
    position: absolute;
    bottom: 22px;
    right: 22px;
    width: 58px;
    height: 48px;
    border-bottom: 3px solid var(--red);
    border-right: 3px solid var(--red);
    clip-path: inset(100% 0 0 100%);
    transition: clip-path 0.55s var(--soft-ease);
    pointer-events: none;
  }
  .property-image:hover::after,
  .property-image:focus-visible::after {
    clip-path: inset(0);
  }
  .neighbourhood-card::before {
    transition:
      width 0.6s var(--entry-ease),
      height 0.6s var(--entry-ease);
  }
  .neighbourhood-card:hover::before {
    width: 90px;
    height: 104px;
  }
}
@keyframes cinematic-arrival {
  from {
    transform: scale(1.085);
    filter: brightness(0.8);
  }
  to {
    transform: scale(1);
    filter: brightness(1);
  }
}
@keyframes aura-arrival {
  from {
    opacity: 0;
    transform: translate3d(7%, 4%, 0) rotate(-16deg) scale(1.08);
  }
  to {
    opacity: 1;
    transform: rotate(-12deg);
  }
}
@keyframes corner-trace {
  from {
    clip-path: inset(0 100% 100% 0);
  }
  to {
    clip-path: inset(0);
  }
}
@keyframes line-unveil {
  from {
    transform: translateY(110%) rotate(0.8deg);
    opacity: 0.3;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@keyframes measured-rise {
  from {
    transform: translateY(24px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@keyframes image-unveil {
  from {
    clip-path: inset(0 100% 0 0 round 22px);
  }
  to {
    clip-path: inset(0 round 22px);
  }
}
@keyframes image-settle {
  from {
    transform: scale(1.09);
  }
  to {
    transform: scale(1);
  }
}
@keyframes portrait-arrival {
  from {
    transform: translateY(44px) rotate(2deg);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@keyframes monogram-arrival {
  from {
    clip-path: inset(0 0 100%);
    transform: translateY(5px);
  }
  to {
    clip-path: inset(0);
    transform: none;
  }
}
@keyframes service-arrival {
  from {
    transform: translateX(28px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@keyframes draw-homes {
  from {
    stroke-dashoffset: 1800;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes dialog-arrival {
  from {
    opacity: 0;
    transform: translateY(26px) scale(0.975);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes veil-arrival {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (max-width: 600px) {
  .hero-atmosphere {
    opacity: 0.6;
  }
  .hero-aura {
    inset: -15% -70% -5% 0;
  }
  .about-art::before {
    top: -12px;
    left: -12px;
    width: 84px;
    height: 84px;
    border-top-left-radius: 22px;
  }
  .neighbourhood-card::before {
    width: 52px;
    height: 60px;
  }
  .statement-section > div {
    border-left: 0;
  }
  .js-motion .reveal {
    transition-duration: 0.7s, 0.85s;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .js-motion .reveal {
    opacity: 1;
    transform: none;
  }
  .hero-photo,
  .hero-atmosphere {
    translate: none !important;
  }
  .motion-line {
    overflow: visible;
  }
}