:root { --ls-anim-ease: cubic-bezier(0.22, 1, 0.36, 1); --ls-anim-dur: 680ms; } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } } /* Header scroll state */ .site-header { transition: background 220ms var(--ls-anim-ease), border-color 220ms var(--ls-anim-ease), transform 220ms var(--ls-anim-ease); } .site-header.is-scrolled { background: var(--ls-color-header-bg-scrolled); border-bottom-color: rgba(27, 63, 107, 0.1); box-shadow: var(--ls-shadow-soft); } .site-header.is-scrolled .site-header__inner { padding: 0.75rem 0; } /* * Three identical segments: each loop moves exactly 1/3 of the track (percentage = own width). * Start at +100vw so text enters from the right; scrolls left and exits; reset is invisible because copy 2/3 align with copy 1. */ @keyframes ls-marquee-scroll { 0% { transform: translate3d(100vw, 0, 0); } 100% { transform: translate3d(calc(100vw - (100% / 3)), 0, 0); } } /* Reveal system (JS adds .has-anim to ) */ html.has-anim .reveal { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity var(--ls-anim-dur) var(--ls-anim-ease), transform var(--ls-anim-dur) var(--ls-anim-ease); will-change: opacity, transform; } html.has-anim .reveal.reveal-up { transform: translate3d(0, 18px, 0); } html.has-anim .reveal.reveal-left { transform: translate3d(-18px, 0, 0); } html.has-anim .reveal.reveal-right { transform: translate3d(18px, 0, 0); } html.has-anim .reveal.is-visible { opacity: 1; transform: translate3d(0, 0, 0); } /* Child staggering (activated by JS) */ html.has-anim .reveal-child { opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity 520ms var(--ls-anim-ease), transform 520ms var(--ls-anim-ease); will-change: opacity, transform; } html.has-anim .reveal-child.is-visible { opacity: 1; transform: translate3d(0, 0, 0); } /* Hero premium motion — keep scale modest; .ls-hero clips overflow. */ .ls-hero__media { will-change: transform; transform: translate3d(0, 0, 0) scale(1.02); transition: transform 900ms var(--ls-anim-ease); } .ls-hero__content { opacity: 1; transform: none; } html.has-anim .ls-hero__content { opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity 700ms var(--ls-anim-ease), transform 700ms var(--ls-anim-ease); } html.has-anim .ls-hero__content.is-visible { opacity: 1; transform: translate3d(0, 0, 0); } /* Card hover motion (elegant + fast) */ .ls-property-card { transition: transform 180ms var(--ls-anim-ease), box-shadow 180ms var(--ls-anim-ease); } .ls-property-card__img { transition: transform 220ms var(--ls-anim-ease); } .ls-property-card:hover { transform: translate3d(0, -3px, 0); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12); } .ls-property-card:hover .ls-property-card__img { transform: scale(1.04); } .ls-featured-properties__img { transition: transform 260ms var(--ls-anim-ease); will-change: transform; } .ls-featured-properties__link:hover .ls-featured-properties__img { transform: scale(1.025); } /* FAQ smooth open/close (JS drives height) */ .ls-faq__a { overflow: hidden; transition: height 220ms var(--ls-anim-ease); will-change: height; } @media (prefers-reduced-motion: reduce) { html.has-anim .reveal, html.has-anim .reveal-child, .ls-hero__media, .ls-property-card, .ls-property-card__img, .ls-featured-properties__img, .ls-faq__a { transition: none !important; transform: none !important; } .ls-marquee__track { animation: none !important; justify-content: center; flex-wrap: wrap; white-space: normal; text-align: center; padding-inline: 1rem; transform: none !important; will-change: auto; width: 100%; max-width: 100%; } .ls-marquee__segment[aria-hidden="true"] { display: none; } }