/* Polish layer for the existing homepage. Loads after the page's own CSS; changes motion, hover/press feedback and
   text rhythm only. Colors, fonts, layout, imagery and copy are the page's own. */
:root {
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-io: cubic-bezier(.77, 0, .175, 1);
}
html { scroll-padding-top: calc(var(--nav-h) + 16px); }
::selection { background: var(--sands); color: var(--green); }

/* Text rhythm */
h1, h2, h3, .display, .h2, .statement, .keyes-band p { text-wrap: balance; }
.hero-lede, .section-head .intro, .about-body p, .cta p, .help-item p { text-wrap: pretty; }

/* ── Entrance: hero choreography ───────────────────────────── */
html.pjs .home-hero .hero-copy > *,
html.pjs .home-hero .hero-search-wrap,
html.pjs .home-hero .hero-photo { animation: none; }
html.pjs:not(.p-ready) .home-hero .hero-copy > *,
html.pjs:not(.p-ready) .home-hero .hero-search-wrap { opacity: 0; transform: translateY(18px); }
html.pjs.p-ready .home-hero .hero-copy > *,
html.pjs.p-ready .home-hero .hero-search-wrap {
  animation: p-rise .85s var(--ease-out) both;
  animation-delay: calc(var(--pd, 0) * 1ms);
}
.home-hero .hero-copy > :nth-child(1) { --pd: 40; }
.home-hero .hero-copy > :nth-child(2) { --pd: 140; }
.home-hero .hero-copy > :nth-child(3) { --pd: 260; }
.home-hero .hero-search-wrap { --pd: 380; }
@keyframes p-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Photo: the sand panel draws in, then the portrait settles onto it, then the name card arrives */
html.pjs:not(.p-ready) .hero-photo::before { transform: scaleY(0); }
html.pjs:not(.p-ready) .hero-photo picture { opacity: 0; transform: translateY(26px) scale(1.03); }
html.pjs:not(.p-ready) .name-card { opacity: 0; transform: translateX(-16px); }
.hero-photo::before { transform-origin: 50% 100%; transition: transform 1s var(--ease-io) .05s; }
.hero-photo picture { display: block; transition: opacity .9s var(--ease-out) .25s, transform 1.1s var(--ease-out) .25s; }
.hero-photo picture img { will-change: transform; }
.name-card { transition: opacity .7s var(--ease-out) .85s, transform .8s var(--ease-out) .85s; }

/* ── Scroll reveals (staggered, driven by polish.js) ───────── */
html.pjs [data-p]:not(.p-in) { opacity: 0; transform: translateY(22px); }
html.pjs [data-p] {
  transition: opacity .75s var(--ease-out), transform .85s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
html.pjs [data-p].p-in { opacity: 1; transform: none; }
html.pjs [data-p].p-done { transition: none; }   /* hand the element back to its own hover transitions */

/* ── Press + hover feedback (hover only where hover exists) ── */
.btn, .lead-btn, .hs-submit { transition: background .2s var(--ease-out), color .2s var(--ease-out), border-color .2s var(--ease-out), transform .18s var(--ease-out), box-shadow .25s var(--ease-out); }
.btn:active, .lead-btn:active, .hs-submit:active { transform: scale(.97); }
@media (hover: hover) {
  .btn-green:hover, .lead-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 26px -16px rgba(89,19,58,.65); }
  .btn-green:hover:active, .lead-btn:hover:active { transform: scale(.97); }
  .btn-ghost:hover, .btn-sands:hover, .btn-ghost-light:hover { transform: translateY(-1px); }
  .link-arrow svg, .lead-btn span { transition: transform .25s var(--ease-out); }
  .link-arrow:hover svg { transform: translateX(3px); }

  .hero-search { transition: box-shadow .3s var(--ease-out), transform .3s var(--ease-out); }
  .hero-search:hover { box-shadow: 0 22px 44px -24px rgba(4,68,57,.55); }

  .help-icon { transition: transform .35s var(--ease-out), background .25s var(--ease-out), color .25s var(--ease-out); }
  .help-item:hover .help-icon { transform: translateY(-3px) scale(1.06); background: var(--crimson); color: var(--delray); }

  .sale-card { transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .25s; }
  .sale-card:hover { transform: translateY(-4px); border-color: rgba(4,68,57,.28); }
  .sale-media img { transition: transform .8s var(--ease-out); }
  .sale-card:hover .sale-media img { transform: scale(1.05); }
  .sale-price { transition: color .25s var(--ease-out); }
  .sale-card:hover .sale-price { color: var(--crimson); }
  .lead-card.offer { transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
  .lead-card.offer:hover { transform: translateY(-3px); box-shadow: 0 24px 44px -30px rgba(4,68,57,.5); }
}

/* Search field: one clear focus state for the whole pill */
.hero-search:focus-within { box-shadow: 0 0 0 2px var(--green), 0 22px 44px -24px rgba(4,68,57,.55); }
.hs-field { transition: opacity .2s; }
.hero-search:focus-within .hs-field:not(:focus-within) { opacity: .7; }
.hs-field input:focus-visible, .hs-field select:focus-visible { outline: none; }

/* Hero portrait drifts slightly slower than the page (set by polish.js, composite-only) */
.hero-photo picture img { transform: translate3d(0, var(--py, 0px), 0); }

/* Keyes band mark and the closing section arrive with a little weight */
html.pjs .keyes-band[data-p] { transform: none; }
.cta .btn-row .btn { transition-delay: 0s; }

/* Narrow screens: keep movement short so nothing jumps */
@media (max-width: 720px) {
  html.pjs [data-p]:not(.p-in) { transform: translateY(14px); }
  html.pjs [data-p] { transition-delay: calc(var(--i, 0) * 50ms); }
}

/* Reduced motion: everything visible immediately, no drift */
@media (prefers-reduced-motion: reduce) {
  html.pjs [data-p]:not(.p-in) { opacity: 1; transform: none; }
  html.pjs:not(.p-ready) .home-hero .hero-copy > *,
  html.pjs:not(.p-ready) .home-hero .hero-search-wrap,
  html.pjs:not(.p-ready) .hero-photo picture,
  html.pjs:not(.p-ready) .name-card { opacity: 1; transform: none; }
  html.pjs:not(.p-ready) .hero-photo::before { transform: none; }
  .hero-photo picture img { transform: none; }
}