/* Signature motion, adapted from the degacsid.com reference for a property marketplace:
   - a screen-style "switch on / switch off" (a thin line opening to the full picture) for the logo intro and city photo changes
   - a 0-100 loading counter with Skip on the once-per-session intro
   - the headline's shadow settling in when a city is shown
   - small ▶ markers that slide in on hover / keyboard focus
   - a soft vignette frame around the hero photo
   One timing scale (120 / 220 / 380 / 560 ms) and two curves: --rh-out for entering, --rh-in for leaving.
   Only transform, opacity and (briefly) filter are animated. Everything is removed under prefers-reduced-motion. Loaded last. */
:root{--rh-out:cubic-bezier(.2,.8,.2,1);--rh-in:cubic-bezier(.4,0,1,1);--rh-t1:120ms;--rh-t2:220ms;--rh-t3:380ms;--rh-t4:560ms}

/* ---------- logo intro ---------- */
html.brand-intro-pending .brand-intro{animation:none}
.brand-intro:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;background:repeating-linear-gradient(180deg,rgba(255,255,255,.9) 0 1px,transparent 1px 3px)}
.brand-intro:after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 160px rgba(0,0,0,.55)}
html.brand-intro-pending .brand-intro__lockup{animation:rhScreenOn var(--rh-t4) var(--rh-out) both}
.brand-intro__count{position:absolute;left:28px;bottom:24px;display:flex;align-items:baseline;gap:10px;color:rgba(255,255,255,.62);font:800 11px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.22em;text-transform:uppercase}
.brand-intro__count b{min-width:3ch;color:#fff;font-size:28px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.brand-intro__skip{position:absolute;right:24px;bottom:22px;pointer-events:auto;cursor:pointer;border:1px solid rgba(255,255,255,.28);border-radius:99px;background:rgba(255,255,255,.06);color:#fff;font:700 11px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.18em;text-transform:uppercase;padding:9px 14px;transition:background var(--rh-t1),border-color var(--rh-t1)}
.brand-intro__skip:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.5)}
.brand-intro.is-off .brand-intro__lockup,.brand-intro.is-off .brand-intro__line{animation:rhScreenOff var(--rh-t2) var(--rh-in) both}
.brand-intro.is-off{opacity:0;transition:opacity var(--rh-t2) var(--rh-in) 60ms}
.brand-intro.is-off .brand-intro__count,.brand-intro.is-off .brand-intro__skip{opacity:0;transition:opacity var(--rh-t1)}

@keyframes rhScreenOn{0%{opacity:0;transform:scaleY(.04) scaleX(1.06);filter:brightness(1.35)}45%{opacity:1;transform:scaleY(1.06) scaleX(.985);filter:brightness(1.1)}100%{opacity:1;transform:none;filter:none}}
@keyframes rhScreenOff{0%{transform:none;opacity:1}80%{transform:scaleY(.04) scaleX(1.05);opacity:1;filter:brightness(1.25)}100%{transform:scaleY(.04) scaleX(1.05);opacity:0}}

/* ---------- hero: framed "screen" and the city photo switching on ---------- */
@media(min-width:1001px){
  .home .hero{margin:10px 12px 0;border-radius:28px;box-shadow:0 30px 60px -40px rgba(15,23,42,.6)}
  .home .hero:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 140px rgba(3,7,18,.5),inset 0 0 0 1px rgba(255,255,255,.06);opacity:1;width:auto;height:auto;left:0;bottom:0;background:none}
}
.home .hero .hcity{transform-origin:50% 50%;will-change:auto}
.home .hero.has-city-image:not(.city-transitioning) .hcity{animation:rhPhotoOn var(--rh-t4) var(--rh-out) both}
.home .hero.city-transitioning .hcity{opacity:0!important;filter:none!important;transform:scaleY(.06) scaleX(1.03)!important;transition:transform var(--rh-t2) var(--rh-in),opacity var(--rh-t2) var(--rh-in)!important}
@keyframes rhPhotoOn{0%{opacity:0;transform:scaleY(.06) scaleX(1.03);filter:brightness(1.3)}55%{opacity:1;transform:scaleY(1.012) scaleX(.998);filter:brightness(1.06)}100%{opacity:1;transform:none;filter:none}}

/* headline: the shadow settles in, as if the words lift off the photo */
.home .hero h1.rh-lift{animation:rhLift var(--rh-t4) var(--rh-out) both}
@keyframes rhLift{from{opacity:.001;transform:translateY(8px);text-shadow:0 0 0 rgba(3,7,18,0)}to{opacity:1;transform:none;text-shadow:.04em .1em .28em rgba(3,7,18,.45)}}

/* ---------- ▶ markers on hover / focus ---------- */
.rh-arw{position:relative}
.rh-arw:before{content:"\25B6\FE0E";display:inline-block;width:0;overflow:hidden;opacity:0;transform:translateX(-6px);font-size:.62em;vertical-align:.18em;color:var(--or);transition:opacity var(--rh-t1) var(--rh-out),transform var(--rh-t1) var(--rh-out),width var(--rh-t1) var(--rh-out),margin var(--rh-t1) var(--rh-out)}
.rh-arw:hover:before,.rh-arw:focus-visible:before{width:1em;margin-right:.35em;opacity:1;transform:none}

/* ---------- gentle entrances for cards and tiles (once, when they first scroll into view) ---------- */
.rh-in{opacity:0;transform:translateY(14px)}
.rh-in.rh-shown{opacity:1;transform:none;transition:opacity var(--rh-t4) var(--rh-out),transform var(--rh-t4) var(--rh-out);transition-delay:calc(var(--rh-i,0) * 45ms)}

/* ---------- consistent press / hover feedback ---------- */
.cta,.hgo,.ghostb,.cpk-city,.hcat,.cg,.hcity-t{transition-timing-function:var(--rh-out)}
.cta:active,.hgo:active,.ghostb:active,.cpk-city:active{transform:scale(.97);transition-duration:var(--rh-t1)}

@media(prefers-reduced-motion:reduce){
  html.brand-intro-pending .brand-intro__lockup,.brand-intro.is-off .brand-intro__lockup,.brand-intro.is-off .brand-intro__line,
  .home .hero.has-city-image:not(.city-transitioning) .hcity,.home .hero h1.rh-lift{animation:none!important}
  .home .hero.city-transitioning .hcity{transform:none!important;opacity:1!important;transition:none!important}
  .rh-in{opacity:1;transform:none}.rh-in.rh-shown{transition:none}
  .rh-arw:before{transition:none}
  .cta:active,.hgo:active,.ghostb:active,.cpk-city:active{transform:none}
}

/* ---------- 3D depth on the hero (desktop, fine pointer only): photo and text drift apart a few pixels, a soft light follows ---------- */
@media(hover:hover) and (pointer:fine) and (min-width:1001px){
  .home .hero.rh-depth .hcity{scale:1.045;translate:calc(var(--px,0) * -14px) calc(var(--py,0) * -10px);transition:translate var(--rh-t4) var(--rh-out)}
  .home .hero.rh-depth .hl{translate:calc(var(--px,0) * 5px) calc(var(--py,0) * 4px);transition:translate var(--rh-t4) var(--rh-out)}
  .home .hero .hsheen{position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity var(--rh-t3) var(--rh-out);background:radial-gradient(520px circle at var(--mx,70%) var(--my,40%),rgba(255,214,160,.16),transparent 62%);mix-blend-mode:soft-light}
  .home .hero.rh-depth.rh-hover .hsheen{opacity:1}
}
@media(prefers-reduced-motion:reduce){.home .hero.rh-depth .hcity,.home .hero.rh-depth .hl{translate:none!important;scale:none!important}.home .hero .hsheen{display:none}}