/* Homepage motion (step two of the redesign). Loaded after the page's own styles.
   Everything starts from the page's normal, visible state; the "js-motion" and
   "hero-pre" classes are only added when animations can actually run. */

/* ---------- Hero: taller, lighter, more of the sunset ---------- */
.hero { min-height: min(88svh, 900px); }
.hero-bg { inset: -2%; transform-origin: 60% 55%; will-change: transform; }
.hero-bg::after {
  background:
    linear-gradient(90deg, rgba(10,18,15,.78) 0%, rgba(10,18,15,.45) 48%, rgba(10,18,15,.12) 100%),
    linear-gradient(0deg, rgba(10,16,14,.7) 0%, rgba(10,16,14,0) 40%),
    linear-gradient(180deg, rgba(10,16,14,.55) 0%, rgba(10,16,14,0) 25%);
}
@media (max-width: 768px) {
  .hero { min-height: 82svh; }
  .hero-bg::after {
    background:
      linear-gradient(0deg, rgba(10,16,14,.9) 0%, rgba(10,16,14,.6) 50%, rgba(10,16,14,.3) 100%);
  }
}
.hero-headline .ln { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.hero-headline .ln > span { display: block; }

/* Hidden only until the opening sequence starts (set in the page head) */
.hero-pre .hero .label,
.hero-pre .hero-headline .ln > span,
.hero-pre .hero-sub,
.hero-pre .hero-actions,
.hero-pre .hero-stats { opacity: 0; }

/* ---------- Buttons: a fill that rises from below ---------- */
.js-motion .btn { position: relative; overflow: hidden; isolation: isolate; transition: color .5s var(--tide), border-color .5s var(--tide), transform .7s var(--tide); }
.js-motion .btn::before { content: ''; position: absolute; inset: 0; z-index: -1; transform: translateY(101%); transition: transform .6s var(--tide); }
.js-motion .btn-light:hover { background: transparent; }
.js-motion .btn-light::before { background: var(--white); }
.js-motion .btn-dark:hover { background: transparent; }
.js-motion .btn-dark::before { background: var(--ink); }
.js-motion .btn:hover::before { transform: translateY(0); }
.js-motion .btn-accent::before { background: var(--accent-lt); }
.js-motion .btn-accent:hover { background: var(--accent); }

/* ---------- Section reveals: slower, softer ---------- */
.js-loaded .reveal { transition: opacity 1.1s var(--tide), transform 1.1s var(--tide); }
.js-motion .reveal h2 .ln { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.js-motion .reveal h2 .ln > span { display: block; transform: translateY(105%); transition: transform 1.15s var(--tide); transition-delay: calc(var(--i, 0) * .12s + .15s); }
.js-motion .reveal.visible h2 .ln > span { transform: none; }
.js-motion .reveal .divider { transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--tide) .2s; }
.services-header .divider, .testimonials-header .divider { transform-origin: center !important; }
.js-motion .reveal.visible .divider { transform: scaleX(1); }

/* Portraits unveil like a window shade */
.js-motion .about-img-box, .js-motion .about-family-photo { clip-path: inset(100% 0 0 0); transition: clip-path 1.5s var(--tide-io); }
.js-motion .about-img-box img, .js-motion .about-family-photo img { transform: scale(1.25); transition: transform 2.2s var(--tide); }
.js-motion .reveal.visible .about-img-box, .js-motion .reveal.visible .about-family-photo { clip-path: inset(0 0 0 0); }
.js-motion .reveal.visible .about-img-box img, .js-motion .reveal.visible .about-family-photo img { transform: none; }
.js-motion .about-family-photo { transition-delay: .5s; }
.js-motion .about-badge { opacity: 0; transform: translateY(14px); transition: opacity .9s var(--tide), transform .9s var(--tide); transition-delay: calc(var(--i, 0) * .12s + .6s); }
.js-motion .reveal.visible .about-badge { opacity: 1; transform: none; }

/* ---------- Services: a gold line draws across the top on hover ---------- */
.service-card { position: relative; transition: transform .7s var(--tide), box-shadow .7s var(--tide); }
.service-card::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--tide); }
.service-card:hover::after { transform: scaleX(1); }

/* ---------- Recent sales ---------- */
.listing-card .listing-photo { transition: transform 1.6s var(--tide), filter 1.2s var(--tide) !important; filter: saturate(.92); }
.listing-card:hover .listing-photo { transform: scale(1.07); filter: saturate(1.05); }
.listing-overlay::before { content: ''; display: block; order: 2; width: 0; height: 1px; background: var(--gold); margin: 0 0 12px; transition: width .9s var(--tide); }
.listing-price { order: 1; font-variant-numeric: tabular-nums lining-nums; }
.listing-status { order: 0; }
.listing-address { order: 3; }
.listing-details { order: 4; }
.listing-card:hover .listing-overlay::before { width: 56px; }
@media (hover: hover) and (pointer: fine) {
  .listing-details { opacity: 0; transform: translateY(12px); transition: opacity .7s var(--tide), transform .8s var(--tide); }
  .listing-card:hover .listing-details, .listing-card:focus-within .listing-details { opacity: 1; transform: none; }
  .listings-track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
  .listings-track.is-dragging .listing-card { pointer-events: none; }
  .listings-track { cursor: grab; }
}
.listings-count { font-family: var(--serif); font-size: 18px; letter-spacing: .06em; color: rgba(255,255,255,.75); font-variant-numeric: tabular-nums lining-nums; min-width: 64px; text-align: center; }
.listings-count b { font-weight: 400; color: var(--white); }

/* ---------- Area tags fly the map ---------- */
.area-tag { transition: border-color .4s var(--tide), color .4s var(--tide), background-color .4s var(--tide); }
.area-tag:hover, .area-tag:focus-visible { background: var(--accent); border-color: var(--accent); color: var(--white); }

/* ---------- Testimonials: big, quiet quotes; words surface one after another ---------- */
.testimonial-text .w { display: inline-block; }
.js-motion .testimonials { background: #f3efe7; }
.js-motion .testimonials .container {
  display: grid;
  grid-template-columns: minmax(0, .75fr) minmax(0, 1.6fr);
  grid-template-rows: auto 1fr;
  column-gap: clamp(40px, 7vw, 120px);
}
.js-motion .testimonials-header { grid-column: 1; grid-row: 1; text-align: left; margin-bottom: 0; }
.js-motion .testimonials-header .divider { margin: 20px 0 !important; transform-origin: left !important; }
.js-motion .testimonials-header h2 { font-size: clamp(36px, 4.4vw, 58px); line-height: 1.05; }
.js-motion .testimonials-track-wrap { grid-column: 2; grid-row: 1 / span 2; overflow: visible; }
.js-motion .testimonials-track { display: grid; transform: none !important; transition: none; }
.js-motion .testimonial-slide {
  grid-area: 1 / 1; min-width: 0; padding: 0; text-align: left;
  opacity: 0; visibility: hidden; transition: opacity .7s var(--tide), visibility 0s linear .7s;
}
.js-motion .testimonial-slide.is-active { opacity: 1; visibility: visible; transition: opacity .7s var(--tide); }
.js-motion .testimonial-stars { display: none; }
.js-motion .testimonial-quote { margin: 0 0 6px; }
.js-motion .testimonial-quote svg { display: none; }
.js-motion .testimonial-quote::before { content: '\201C'; display: block; font-family: var(--serif); font-size: 120px; line-height: .7; height: 56px; color: var(--gold); }
.js-motion .testimonial-text {
  font-style: normal; font-size: clamp(21px, 2.15vw, 30px); line-height: 1.45; color: var(--ink);
  max-width: 34em; margin: 0 0 28px; text-wrap: pretty;
}
.js-motion .testimonial-author { color: #86683f; letter-spacing: .24em; }
.js-motion .testimonials-nav { grid-column: 1; grid-row: 2; align-self: start; justify-content: flex-start; flex-wrap: wrap; gap: 10px 12px; margin-top: 44px; }
.js-motion .testimonials-arrow, .js-motion .testimonials-pause { width: 46px; height: 46px; border-radius: 50%; border-color: #d6cfc2; color: var(--ink); transition: border-color .4s var(--tide), background-color .4s var(--tide), color .4s var(--tide); }
.js-motion .testimonials-arrow:hover, .js-motion .testimonials-pause:hover { background: var(--accent); border-color: var(--accent); color: var(--white); }
.js-motion .testimonials-dot { background: #cfc7b8; }
.js-motion .testimonials-dot.active { background: var(--accent); }
.testimonials-count { flex-basis: 100%; font-family: var(--serif); font-size: 22px; letter-spacing: .06em; color: #6c645b; font-variant-numeric: tabular-nums lining-nums; margin-bottom: 6px; }
.testimonials-count b { font-weight: 400; color: var(--ink); }
@media (max-width: 900px) {
  .js-motion .testimonials .container { grid-template-columns: 1fr; grid-template-rows: auto; }
  .js-motion .testimonials-header { margin-bottom: 36px; }
  .js-motion .testimonials-track-wrap { grid-column: 1; grid-row: 2; }
  .js-motion .testimonials-track { position: relative; }
  .js-motion .testimonial-slide:not(.is-active) { position: absolute; inset: 0 0 auto; }
  .js-motion .testimonials-nav { grid-column: 1; grid-row: 3; margin-top: 28px; }
}

/* ---------- Blog cards ---------- */
.blog-card-img img { transition: transform 1.6s var(--tide); }
.blog-card:hover .blog-card-img img { transform: scale(1.06); }

/* ---------- Forms ---------- */
.form-group label { transition: color .4s var(--tide); }
.form-group:focus-within label { color: var(--accent); }
.form-group input:not([type="checkbox"]), .form-group select, .form-group textarea { transition: border-color .4s var(--tide), background-color .4s var(--tide), box-shadow .5s var(--tide); }
.form-group input:not([type="checkbox"]):focus, .form-group select:focus, .form-group textarea:focus { box-shadow: inset 0 -2px 0 var(--gold); }
.newsletter-input { transition: background-color .4s var(--tide), box-shadow .5s var(--tide); }
.newsletter-input:focus { box-shadow: inset 0 -2px 0 var(--gold); }

@media (prefers-reduced-motion: reduce) {
  .hero-pre .hero .label, .hero-pre .hero-headline .ln > span, .hero-pre .hero-sub, .hero-pre .hero-actions, .hero-pre .hero-stats { opacity: 1; }
}

/* Testimonial dots: same look, a larger area to tap */
.testimonials-dot { width: 24px; height: 24px; padding: 0; background: transparent !important; position: relative; transform: none !important; }
.testimonials-dot::before { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: var(--stone-300); transition: background .3s, transform .3s; }
.js-motion .testimonials-dot::before { background: #cfc7b8; }
.testimonials-dot.active::before { background: var(--accent); transform: scale(1.4); }
.testimonials-nav { gap: 2px 4px; }
/* The "01 / 07" counter does the dots' job in the redesigned layout */
.js-motion .testimonials-dot { display: none; }