/* ============================================================
   Chelsea Javier — shared design system
   Warm boutique: ivory / clay / charcoal · Fraunces + Inter
   ============================================================ */
:root{
  --ink:#1F1E1C; --ivory:#F7F4EF; --clay:#B86B4B; --greige:#C9B79C;
  --stone:#E7E1D8; --taupe:#8A8377; --textc:#2A2926;
}
*{ -webkit-font-smoothing:antialiased; }
html{ scroll-behavior:smooth; }
body{
  background:var(--ivory); color:var(--textc);
  font-family:'Inter',system-ui,sans-serif;
  overflow-x:hidden;
}
::selection{ background:var(--clay); color:var(--ivory); }

.font-serif{ font-family:'Fraunces',Georgia,serif; }
.eyebrow{
  font-size:.72rem; letter-spacing:.28em; text-transform:uppercase;
  font-weight:500; color:var(--clay);
}
.display{ font-family:'Fraunces',Georgia,serif; line-height:1.02; letter-spacing:-.015em; font-weight:400; }

/* subtle paper grain */
.grain::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Motion engine (Framer-Motion-style) ---- */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity 1.1s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1); }
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-x{ opacity:0; transform:translateX(-40px); transition:opacity 1.1s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1); }
.reveal-x.in{ opacity:1; transform:translateX(0); }
.reveal-scale{ opacity:0; transform:scale(.96); transition:opacity 1.2s cubic-bezier(.16,1,.3,1), transform 1.2s cubic-bezier(.16,1,.3,1); }
.reveal-scale.in{ opacity:1; transform:scale(1); }
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}.d5{transition-delay:.40s}.d6{transition-delay:.48s}

/* word-by-word headline reveal */
.word{ display:inline-block; overflow:hidden; vertical-align:top; }
.word > span{ display:inline-block; transform:translateY(105%); transition:transform 1s cubic-bezier(.16,1,.3,1); }
.word.in > span{ transform:translateY(0); }

/* magnetic / primary button */
.btn-primary{
  position:relative; display:inline-flex; align-items:center; gap:.6rem;
  background:var(--ink); color:var(--ivory);
  padding:1rem 1.9rem; border-radius:999px; font-weight:500; font-size:.92rem;
  transition:transform .35s cubic-bezier(.16,1,.3,1), background .4s, box-shadow .4s;
  will-change:transform; overflow:hidden;
}
.btn-primary:hover{ background:var(--clay); box-shadow:0 18px 40px -14px rgba(184,107,75,.55); }
.btn-primary .arrow{ transition:transform .4s cubic-bezier(.16,1,.3,1); }
.btn-primary:hover .arrow{ transform:translateX(5px); }

.btn-ghost{
  display:inline-flex; align-items:center; gap:.55rem;
  border:1px solid rgba(42,41,38,.22); color:var(--ink);
  padding:.95rem 1.7rem; border-radius:999px; font-weight:500; font-size:.92rem;
  transition:border-color .4s, color .4s, background .4s, transform .35s;
}
.btn-ghost:hover{ border-color:var(--clay); color:var(--clay); transform:translateY(-2px); }

/* nav underline */
.navlink{ position:relative; }
.navlink::after{ content:""; position:absolute; left:0; bottom:-4px; height:1px; width:0; background:var(--clay); transition:width .4s cubic-bezier(.16,1,.3,1); }
.navlink:hover::after{ width:100%; }
.navlink.nav-active{ color:var(--ink); }
.navlink.nav-active::after{ width:100%; }

/* property card */
.prop{ transition:transform .6s cubic-bezier(.16,1,.3,1), box-shadow .6s; }
.prop:hover{ transform:translateY(-8px); box-shadow:0 40px 70px -34px rgba(31,30,28,.45); }
.prop .pimg{ transition:transform 1.2s cubic-bezier(.16,1,.3,1); }
.prop:hover .pimg{ transform:scale(1.06); }
.prop .veil{ opacity:0; transition:opacity .6s; }
.prop:hover .veil{ opacity:1; }

/* generic lift */
.lift{ transition:transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s, border-color .5s; }
.lift:hover{ transform:translateY(-6px); box-shadow:0 36px 60px -34px rgba(31,30,28,.4); }

/* neighbourhood row */
.hood{ transition:padding-left .5s cubic-bezier(.16,1,.3,1), color .5s; }
.hood:hover{ padding-left:1.4rem; color:var(--clay); }
.hood .harr{ opacity:0; transform:translateX(-12px); transition:opacity .5s, transform .5s; }
.hood:hover .harr{ opacity:1; transform:translateX(0); }

/* hero parallax img */
.parallax{ will-change:transform; }

/* marquee */
@keyframes drift{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.marquee{ animation:drift 38s linear infinite; }

.lang-active{ color:var(--ink)!important; }
.lang-btn{ color:var(--taupe); transition:color .3s; cursor:pointer; }

/* portrait warm-grade touch-up (CSS only, preserves real likeness) */
.portrait-frame{ position:relative; }
.portrait-img{
  width:100%; height:100%; object-fit:cover; object-position:50% 18%;
  filter:saturate(1.04) contrast(1.02) brightness(1.02) sepia(.07);
  transition:transform 1.4s cubic-bezier(.16,1,.3,1), filter .6s;
}
.portrait-frame:hover .portrait-img{ transform:scale(1.035); filter:saturate(1.06) contrast(1.03) brightness(1.03) sepia(.05); }
.portrait-warm{ position:absolute; inset:0; pointer-events:none; mix-blend-mode:multiply;
  background:linear-gradient(180deg, rgba(184,107,75,.12) 0%, rgba(201,183,156,.05) 48%, rgba(31,30,28,.22) 100%); }
.portrait-grain{ position:absolute; inset:0; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* form fields */
.field{ background:transparent; border:none; border-bottom:1px solid rgba(42,41,38,.22); padding:.7rem 0; transition:border-color .4s; width:100%; }
.field:focus{ outline:none; border-color:var(--clay); }
.field::placeholder{ color:var(--taupe); }

/* ---- Listings filter UI ---- */
.chip{
  cursor:pointer; border:1px solid rgba(42,41,38,.16); color:var(--textc);
  background:rgba(255,255,255,.4); padding:.5rem 1.05rem; border-radius:999px;
  font-size:.85rem; font-weight:500; transition:all .3s cubic-bezier(.16,1,.3,1); white-space:nowrap;
}
.chip:hover{ border-color:var(--clay); color:var(--clay); }
.chip.active{ background:var(--ink); color:var(--ivory); border-color:var(--ink); }

select.ctrl, .ctrl{
  -webkit-appearance:none; appearance:none; cursor:pointer;
  background:rgba(255,255,255,.5); border:1px solid rgba(42,41,38,.16);
  border-radius:12px; padding:.6rem 2.1rem .6rem .9rem; font-size:.86rem; color:var(--textc);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23B86B4B' stroke-width='1.6'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .8rem center; transition:border-color .3s;
}
select.ctrl:focus{ outline:none; border-color:var(--clay); }
input[type=range]{ accent-color:var(--clay); width:100%; }

/* accordion (FAQ / services) */
.acc-panel{ max-height:0; overflow:hidden; transition:max-height .55s cubic-bezier(.16,1,.3,1); }
.acc.open .acc-panel{ max-height:360px; }
.acc .acc-ic{ transition:transform .4s cubic-bezier(.16,1,.3,1); }
.acc.open .acc-ic{ transform:rotate(45deg); }

/* fade for filtered cards */
.card-pop{ animation:pop .5s cubic-bezier(.16,1,.3,1) both; }
@keyframes pop{ from{opacity:0; transform:translateY(16px) scale(.98)} to{opacity:1; transform:none} }