/*
 * Casalta motion: hovers, scroll reveals and the header, drawn only with transform, opacity and clip-path.
 *
 * Reveals start hidden only under html.ct-motion, a class the head script adds when JavaScript runs and the visitor
 * has not asked for reduced motion; without it every element is simply visible. Page heroes never start transparent,
 * so the largest paint is not delayed. Any Elementor or Bricks element can opt in with one CSS class:
 * ct-m-rise, ct-m-mask, ct-m-slide, ct-m-scale, ct-m-curtain, ct-m-stagger (its children, one after another),
 * ct-m-count (a number that counts up), ct-m-parallax (an image or background that drifts while scrolling),
 * and ct-m-none switches off the motion of an element and of everything inside it.
 */
:root{--ct-ease:cubic-bezier(.16,1,.3,1);--ct-ease-io:cubic-bezier(.65,0,.35,1);--ct-dur:1s;--ct-step:90ms}

/* ---------- hovers (always on, also with the keyboard) ---------- */

/* Solid buttons: a light sheen crosses the button and the icon steps forward. */
.ct-btn,.ct-site .elementor-button,.casalta-btn{position:relative;isolation:isolate;overflow:hidden;transition:background-color .3s,color .3s,border-color .3s,transform .45s var(--ct-ease)}
.ct-btn::after,.ct-site .elementor-button::after,.casalta-btn::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.38) 50%,transparent 70%);transform:translateX(-110%)}
:is(.ct-btn,.ct-site .elementor-button,.casalta-btn):is(:hover,:focus-visible)::after{transform:translateX(110%);transition:transform .8s var(--ct-ease)}
:is(.ct-btn,.ct-site .elementor-button,.casalta-btn):is(:hover,:focus-visible){transform:translateY(-2px)}
:is(.ct-btn,.ct-site .elementor-button,.casalta-btn):active{transform:translateY(0) scale(.98);transition-duration:.12s}
.ct-btn .ct-ic,.ct-site .elementor-button-icon,.casalta-btn>:is(i,svg){transition:transform .45s var(--ct-ease)}
:is(.ct-btn,.ct-site .elementor-button,.casalta-btn):is(:hover,:focus-visible) :is(.ct-ic,.elementor-button-icon),.casalta-btn:is(:hover,:focus-visible)>:is(i,svg){transform:translateX(4px)}
.ct-btn:disabled,.ct-btn:disabled:hover{transform:none}

/* Outline buttons: ink rises from the bottom and the text turns white. */
:is(.ct-btn-line,.ct-site .ct-b-line .elementor-button,.casalta-btn--line)::after{background:var(--ct-ink);transform:scaleY(0);transform-origin:50% 100%;transition:transform .5s var(--ct-ease)}
:is(.ct-btn-line,.ct-site .ct-b-line .elementor-button,.casalta-btn--line):is(:hover,:focus-visible)::after{transform:scaleY(1);transition:transform .5s var(--ct-ease)}
/* Elementor writes each button's hover colors with four classes; these win so the text stays readable on the ink. */
:is(a.ct-btn.ct-btn-line,body.ct-site .ct-b-line.elementor-element .elementor-button.elementor-button,.casalta-btn.casalta-btn--line):is(:hover,:focus-visible){color:#fff;border-color:var(--ct-ink)}
body.ct-site .ct-b-line.elementor-element .elementor-button.elementor-button:is(:hover,:focus-visible) :is(svg,.elementor-button-text){fill:#fff;color:#fff}

/* Text links with an arrow: the underline draws from the left. */
.ct-site .ct-b-link .elementor-button,.casalta-btn--link{overflow:visible}
:is(.ct-site .ct-b-link .elementor-button,.casalta-btn--link)::after{inset:auto 0 0;height:1px;background:currentColor;transform:scaleX(.18);transform-origin:0 50%;transition:transform .5s var(--ct-ease)}
:is(.ct-site .ct-b-link .elementor-button,.casalta-btn--link):is(:hover,:focus-visible)::after{transform:scaleX(1)}
:is(.ct-site .ct-b-link .elementor-button,.casalta-btn--link):is(:hover,:focus-visible){transform:none}

/* Property cards: the card rises, the photo eases in and a gold rule draws under it. */
.ct-prop{position:relative;transition:transform .6s var(--ct-ease),box-shadow .6s var(--ct-ease)}
.ct-prop::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ct-gold);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ct-ease)}
.ct-prop:hover,.ct-prop:focus-visible{transform:translateY(-6px)}
.ct-prop:hover::after,.ct-prop:focus-visible::after{transform:scaleX(1)}
.ct-prop .ct-ph img,.ct-agent .ct-ph img,.ct-post .ct-ph img,.ct-hood img,.ct-gallery img,.ct-site .ct-img img{transition:transform 1.1s var(--ct-ease)}
.ct-prop:hover .ct-ph img,.ct-prop:focus-visible .ct-ph img,.ct-post:hover .ct-ph img,.ct-post:focus-visible .ct-ph img{transform:scale(1.06)}
.ct-prop .ct-price{transition:transform .6s var(--ct-ease);transform-origin:0 100%}
.ct-prop:hover .ct-price,.ct-prop:focus-visible .ct-price{transform:translateX(3px)}

/* Neighborhood tiles: the photo drifts closer, the title lifts and the arrow turns toward the visitor. */
.ct-hood:hover img,.ct-hood:focus-visible img{transform:scale(1.07)}
.ct-hood h3{transition:transform .6s var(--ct-ease)}
.ct-hood:hover h3,.ct-hood:focus-visible h3{transform:translateY(-4px)}
.ct-go{transition:background-color .3s,color .3s,transform .6s var(--ct-ease)}
.ct-hood:hover .ct-go,.ct-hood:focus-visible .ct-go{transform:rotate(45deg)}

/* Agents and journal: the portrait leans in, the name slides, the title gets an underline. */
.ct-agent:hover .ct-ph img,.ct-agent:focus-visible .ct-ph img{transform:scale(1.05)}
.ct-agent h3,.ct-post h3{transition:transform .6s var(--ct-ease)}
.ct-agent:hover h3,.ct-agent:focus-visible h3{transform:translateX(6px)}
.ct-post:hover h3,.ct-post:focus-visible h3{transform:translateY(-2px)}
.ct-agentmini img{transition:transform .6s var(--ct-ease)}
a.ct-agentmini:hover img,a.ct-agentmini:focus-visible img{transform:scale(1.08) rotate(-3deg)}

/* Photos in the page body and the gallery. */
.ct-site .ct-img{overflow:hidden}
.ct-site .ct-img:hover img{transform:scale(1.04)}
.ct-gallery a:hover img,.ct-gallery a:focus-visible img{transform:scale(1.05)}
.ct-plan img{transition:transform .8s var(--ct-ease)}
.ct-plan:hover img{transform:scale(1.02)}

/* Services: a gold rule draws across the top and the icon lifts. */
.ct-svc{position:relative}
.ct-svc::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--ct-gold);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ct-ease)}
.ct-svc:hover::after,.ct-svc:focus-within::after{transform:scaleX(1)}
.ct-svc .elementor-icon,.ct-svc .brxe-icon,.ct-ring .elementor-icon,.ct-step .elementor-icon{transition:transform .6s var(--ct-ease)}
.ct-svc:hover .elementor-icon,.ct-svc:hover .brxe-icon{transform:translateY(-4px) rotate(-6deg)}
.ct-ring:hover .elementor-icon,.ct-step:hover .elementor-icon{transform:rotate(-10deg) scale(1.08)}

/* Testimonials and cards lift a little. */
.ct-quote,.ct-card-e,.ct-step{transition:transform .6s var(--ct-ease)}
.ct-quote:hover,.ct-card-e:hover{transform:translateY(-4px)}

/* Small controls. */
.ct-chip,.ct-pager a{transition:transform .4s var(--ct-ease),background-color .3s,border-color .3s,color .3s}
.ct-chip:hover,.ct-pager a:hover,.ct-chip:focus-visible,.ct-pager a:focus-visible{transform:translateY(-2px)}
.ct-links .elementor-icon-list-item a,.ct-linklist .brxe-text-link,.ct-legal a{display:inline-block;transition:color .25s,transform .45s var(--ct-ease)}
.ct-links .elementor-icon-list-item a:hover,.ct-linklist .brxe-text-link:hover,.ct-links .elementor-icon-list-item a:focus-visible{transform:translateX(4px)}
.ct-faq .elementor-toggle-icon{transition:transform .5s var(--ct-ease)}
.ct-faq .elementor-tab-title:hover .elementor-toggle-icon{transform:rotate(90deg)}
.ct-search .ct-field{transition:transform .5s var(--ct-ease)}
.ct-search .ct-field:focus-within{transform:translateY(-2px)}

/* ---------- header ---------- */

/* Menu links: an underline draws from the left; the current page keeps it. */
.ct-nav .ct-nav-list a{position:relative;display:inline-block;padding:6px 0}
.ct-nav .ct-nav-list a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform .5s var(--ct-ease)}
.ct-nav .ct-nav-list a:hover::after,.ct-nav .ct-nav-list a:focus-visible::after,.ct-nav .current-menu-item>a::after{transform:scaleX(1);transform-origin:0 50%}
.ct-nav a:focus-visible,.ct-lang a:focus-visible,.ct-panel a:focus-visible{outline:2px solid var(--ct-gold);outline-offset:4px;border-radius:2px}
/* The kit and the theme reset the outline of buttons and selects; these rings always show for the keyboard. */
.ct-menu .ct-menu-btn.ct-menu-btn:focus-visible{outline:2px solid var(--ct-gold);outline-offset:3px}
.ct-search .ct-field:has(select:focus-visible){outline:2px solid var(--ct-gold-2);outline-offset:-4px;border-radius:12px}
.ct-menu .ct-lang a{transition:opacity .25s,transform .45s var(--ct-ease)}
.ct-menu .ct-lang a:not(.is-on):hover{opacity:1;transform:translateY(-1px)}
.ct-logo .elementor-heading-title::before,[class*="brxe-"].ct-logo::before{transition:transform .6s var(--ct-ease)}
.ct-logo:hover .elementor-heading-title::before,[class*="brxe-"].ct-logo:hover::before{transform:translateY(-3px)}

/* The menu icon turns into the close icon. */
.ct-menu-btn .ct-open,.ct-menu-btn .ct-close{transition:transform .5s var(--ct-ease),opacity .3s}
.ct-menu .ct-menu-btn .ct-close{display:block;position:absolute;inset:0;margin:auto;opacity:0;transform:rotate(-90deg) scale(.6)}
.ct-menu .ct-menu-btn[aria-expanded="true"] .ct-open{display:block;opacity:0;transform:rotate(90deg) scale(.6)}
.ct-menu .ct-menu-btn[aria-expanded="true"] .ct-close{opacity:1;transform:none}

/* With JavaScript the header is fixed: it compacts over a dark glass bar, hides while reading down and comes back
   when the visitor scrolls up. At the top of the page it looks exactly like the plain header. */
.ct-hj{position:fixed;transition:transform .55s var(--ct-ease)}
.ct-hj::before{content:"";position:absolute;left:0;right:0;top:var(--ct-hcut,12px);height:calc(100% - 2 * var(--ct-hcut,12px));background:color-mix(in srgb,var(--ct-night) 93%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 1px 0 rgba(255,255,255,.08);opacity:0;transition:opacity .45s;pointer-events:none}
.ct-hprog{position:absolute;left:0;bottom:var(--ct-hcut,12px);width:100%;height:1px;background:var(--ct-gold);transform:scaleX(0);transform-origin:0 50%;opacity:0;transition:opacity .45s;pointer-events:none}
.ct-hj.is-stuck{transform:translateY(calc(-1 * var(--ct-hcut,12px)))}
.ct-hj.is-stuck::before,.ct-hj.is-stuck .ct-hprog{opacity:1}
.ct-hj.is-stuck.is-away{transform:translateY(-110%)}
.ct-hj.is-stuck .ct-menu.ct-tone-dark{color:#fff}
.ct-hj.is-stuck .ct-menu.ct-tone-dark .ct-lang a.is-on{background:#fff;color:var(--ct-ink)}

/* Phone and tablet menu: it opens as a circle from the button, the links rise one after another. */
.ct-hj-panel.ct-panel{z-index:19;clip-path:circle(0 at var(--ct-ox,100%) var(--ct-oy,0));visibility:hidden;transition:clip-path .7s var(--ct-ease-io),visibility 0s .7s}
.ct-hj-panel.ct-panel.is-open{clip-path:circle(150% at var(--ct-ox,100%) var(--ct-oy,0));visibility:visible;transition:clip-path .8s var(--ct-ease-io),visibility 0s}
.ct-hj-panel .ct-nav-list>li,.ct-hj-panel>.ct-btn{opacity:0;transform:translateY(26px);transition:opacity .3s,transform .3s}
.ct-hj-panel.is-open .ct-nav-list>li,.ct-hj-panel.is-open>.ct-btn{opacity:1;transform:none;transition:opacity .6s calc(.18s + var(--i,0) * 60ms),transform .8s var(--ct-ease) calc(.18s + var(--i,0) * 60ms)}
.ct-hj-panel .ct-nav-list a{display:inline-block;transition:transform .45s var(--ct-ease),color .25s}
.ct-hj-panel .ct-nav-list a:hover,.ct-hj-panel .ct-nav-list a:focus-visible{transform:translateX(6px);color:var(--ct-gold)}
.ct-hj-panel .current-menu-item>a{color:var(--ct-gold)}
.ct-hj-panel>nav:focus{outline:none}

/* ---------- page heroes: an entrance that runs from the first paint (no JavaScript, never transparent text) ---------- */
@keyframes ctm-settle{from{transform:scale(1.08)}to{transform:none}}
@keyframes ctm-lift{from{transform:translateY(28px)}to{transform:none}}
@keyframes ctm-fade{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes ctm-draw{from{transform:scaleX(0)}to{transform:none}}
/* A copy of the hero's own background settles from a slight zoom while the page appears. */
.ct-motion :is(.ct-hero-e,.ct-phero-e).ct-veil::after{content:"";position:absolute;inset:0;z-index:0;background:inherit;pointer-events:none;animation:ctm-settle 2.2s var(--ct-ease) both}
.ct-motion .ct-phero>img{animation:ctm-settle 2.2s var(--ct-ease) both}
.ct-motion :is(.ct-hero-e,.ct-phero-e) :is(.elementor-widget-heading,.elementor-widget-text-editor,.brxe-heading,.brxe-text,.brxe-text-basic):not(.ct-eb):not(.ct-crumbs-w),
.ct-motion .ct-phero :is(h1,.ct-lead,.ct-ptop .ct-price,.ct-loc){animation:ctm-lift 1.3s var(--ct-ease) both}
.ct-motion :is(.ct-hero-e,.ct-phero-e) :is(.elementor-widget-text-editor,.brxe-text,.brxe-text-basic):not(.ct-crumbs-w),.ct-motion .ct-phero .ct-lead{animation-delay:.12s}
.ct-motion :is(.ct-hero-e,.ct-phero-e) .ct-eb .elementor-heading-title::before,.ct-motion :is(.ct-hero-e,.ct-phero-e) [class*="brxe-"].ct-eb::before,.ct-motion .ct-phero .ct-eyebrow::before{transform-origin:0 50%;animation:ctm-draw 1.2s var(--ct-ease) .1s both}
.ct-motion :is(.ct-hero-e,.ct-phero-e) :is(.ct-crumbs-w,.elementor-widget-button,.brxe-button,.ct-proof,.ct-hero-search),.ct-motion .ct-phero :is(.ct-crumbs,.ct-badge){animation:ctm-fade 1.1s var(--ct-ease) both}
.ct-motion :is(.ct-hero-e,.ct-phero-e) :is(.elementor-widget-button,.brxe-button){animation-delay:.3s}
.ct-motion :is(.ct-hero-e,.ct-phero-e) .ct-proof{animation-delay:.45s}
.ct-motion :is(.ct-hero-e,.ct-phero-e) .ct-hero-search{animation-delay:.55s}

/* ---------- scroll reveals ---------- */
/* Each block waits hidden until it enters the screen; the script then adds .is-in, and once the entrance is over it
   drops data-ct-m so the block's own hover transitions take over again. --i staggers siblings. Reveals use the
   individual translate and scale properties, so they never fight a hover transform. */
.ct-motion [data-ct-m]{transition:opacity .9s var(--ct-ease) calc(var(--i,0) * var(--ct-step)),translate 1.1s var(--ct-ease) calc(var(--i,0) * var(--ct-step)),scale 1.1s var(--ct-ease) calc(var(--i,0) * var(--ct-step)),clip-path 1.2s var(--ct-ease-io) calc(var(--i,0) * var(--ct-step))}
/* Blocks waiting off to the side never widen the page (clip keeps sticky columns working). */
.ct-motion :is(.ct-sec,.ct-foot,.ct-m-stagger){overflow-x:clip}
/* rise: a short lift with a fade */
.ct-motion [data-ct-m="rise"]:not(.is-in){opacity:0;translate:0 34px}
/* slide: in from the side (from the left with ct-from-left) */
.ct-motion [data-ct-m="rise"].ct-deep:not(.is-in){translate:0 72px}
.ct-motion [data-ct-m="slide"]:not(.is-in){opacity:0;translate:48px 0}
.ct-motion [data-ct-m="slide"].ct-from-left:not(.is-in){translate:-48px 0}
/* scale: grows into place */
.ct-motion [data-ct-m="scale"]:not(.is-in){opacity:0;scale:.92}
/* mask: uncovered from the bottom edge while the photo inside settles */
.ct-motion [data-ct-m="mask"]:not(.is-in){clip-path:inset(100% 0 0 0)}
.ct-motion [data-ct-m="mask"].is-in{clip-path:inset(0 0 0 0)}
.ct-motion [data-ct-m="mask"] img{transition:scale 1.6s var(--ct-ease) calc(var(--i,0) * var(--ct-step))}
.ct-motion [data-ct-m="mask"]:not(.is-in) img{scale:1.18}
/* curtain: uncovered from the left while the photo inside settles */
.ct-motion [data-ct-m="curtain"]:not(.is-in){clip-path:inset(0 100% 0 0)}
.ct-motion [data-ct-m="curtain"].is-in{clip-path:inset(0 0 0 0)}
.ct-motion [data-ct-m="curtain"] img{transition:scale 1.8s var(--ct-ease)}
.ct-motion [data-ct-m="curtain"]:not(.is-in) img{scale:1.15}
/* title: the line rises out of its own baseline */
.ct-motion [data-ct-m="title"]:not(.is-in){clip-path:inset(0 0 100% 0);translate:0 40%}
.ct-motion [data-ct-m="title"].is-in{clip-path:inset(-10% 0 -25% 0)}
/* eyebrow: the rule draws, then the words follow */
.ct-motion [data-ct-m="eyebrow"]:not(.is-in){opacity:0;translate:-10px 0}
.ct-motion [data-ct-m="eyebrow"] .elementor-heading-title::before,.ct-motion [data-ct-m="eyebrow"][class*="brxe-"]::before,.ct-motion .ct-eyebrow[data-ct-m="eyebrow"]::before{transform-origin:0 50%;transition:transform 1s var(--ct-ease) .1s}
.ct-motion [data-ct-m="eyebrow"]:not(.is-in) .elementor-heading-title::before,.ct-motion [data-ct-m="eyebrow"][class*="brxe-"]:not(.is-in)::before,.ct-motion .ct-eyebrow[data-ct-m="eyebrow"]:not(.is-in)::before{transform:scaleX(0)}
/* pop: icons and small marks */
.ct-motion [data-ct-m="pop"]:not(.is-in){opacity:0;scale:.6;rotate:-12deg}
.ct-motion [data-ct-m="pop"]{transition:opacity .6s var(--ct-ease) calc(var(--i,0) * var(--ct-step)),scale .9s var(--ct-ease) calc(var(--i,0) * var(--ct-step)),rotate .9s var(--ct-ease) calc(var(--i,0) * var(--ct-step))}
/* stars draw from left to right */
.ct-motion .ct-stars{display:inline-block}
.ct-motion [data-ct-m] .ct-stars{transition:clip-path 1.2s var(--ct-ease-io) calc(.35s + var(--i,0) * var(--ct-step))}
.ct-motion [data-ct-m]:not(.is-in) .ct-stars{clip-path:inset(0 100% 0 0)}
.ct-motion [data-ct-m].is-in .ct-stars{clip-path:inset(0 0 0 0)}
/* Numbers count up; screen readers get the final figure, which also holds the width. */
.ct-countup{position:relative;display:inline-block;font-variant-numeric:tabular-nums}
.ct-countup>.ct-countup-f{visibility:hidden}
.ct-countup>.ct-countup-n{position:absolute;left:0;top:0;white-space:nowrap}

/* Parallax: photos drift inside their frame, slightly enlarged so no edge ever shows (the script moves them). */
.ct-motion img[data-ct-px]{scale:1.1}
.ct-motion :is(.ct-img,.ct-aprof>.ct-ph,.ct-m-parallax,.ct-phero):has(>img[data-ct-px]),.ct-motion .ct-img:has(img[data-ct-px]){overflow:hidden}
.ct-countup .screen-reader-text{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* The Elementor and Bricks editors show everything in place. */
.elementor-editor-active [data-ct-m],.bricks-is-builder [data-ct-m]{opacity:1!important;translate:none!important;scale:none!important;clip-path:none!important}

@media (prefers-reduced-motion:reduce){
  .ct-btn,.ct-btn::after,.ct-site .elementor-button,.ct-site .elementor-button::after,.casalta-btn,.casalta-btn::after,.ct-prop,.ct-prop::after,[class*="ct-"] img,.ct-hj,.ct-hj-panel.ct-panel,.ct-hj-panel *,.ct-svc::after,.ct-nav .ct-nav-list a::after{transition:none!important;animation:none!important}
  .ct-btn:hover,.ct-site .elementor-button:hover,.casalta-btn:hover,.ct-prop:hover,.ct-quote:hover,.ct-card-e:hover,.ct-chip:hover,.ct-pager a:hover,.ct-hood:hover .ct-go,.ct-hood:hover h3,.ct-agent:hover h3{transform:none}
  .ct-btn:hover::after,.ct-site .elementor-button:hover::after,.casalta-btn:hover::after{transform:translateX(-110%)}
  .ct-hood:hover img,.ct-prop:hover .ct-ph img,.ct-post:hover .ct-ph img,.ct-agent:hover .ct-ph img,.ct-gallery a:hover img,.ct-site .ct-img:hover img{transform:none}
}