/* ===========================================================
   MONTE — Premium Real Estate — Custom Styles
   =========================================================== */

:root{
  --bg-light:#F8F8F8;
  --bg-dark:#141414;
  --text-dark:#141414;
  --text-light:#FFFFFF;
  --accent:#1E6B5A;
  --accent-2:#2F6F5E;
  --accent-soft:rgba(30,107,90,0.12);
  --ease-out-soft: cubic-bezier(.16,.8,.24,1);
}

html{ scroll-behavior:smooth; background:var(--bg-light); }
body{
  font-family:'Inter',ui-sans-serif,system-ui,sans-serif;
  color:var(--text-dark);
  background:var(--bg-light);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.font-serif-display{ font-family:'Playfair Display', Georgia, serif; }

::selection{ background:var(--accent); color:#fff; }

/* ---------- Focus states (accessibility) ---------- */
a, button, input, [tabindex]{ outline-offset:3px; }
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:8px;
}

/* ---------- Glassmorphism utilities ---------- */
.glass{
  background:rgba(255,255,255,0.55);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid rgba(255,255,255,0.6);
}
.glass-dark{
  background:rgba(20,20,20,0.45);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid rgba(255,255,255,0.12);
}
.glass-teal{
  background:rgba(30,107,90,0.55);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,0.25);
}

/* ---------- Soft shadows ---------- */
.shadow-soft{ box-shadow:0 30px 80px -30px rgba(20,20,20,0.25); }
.shadow-soft-sm{ box-shadow:0 14px 40px -18px rgba(20,20,20,0.22); }
.shadow-glow-accent{ box-shadow:0 0 0 1px rgba(30,107,90,0.15), 0 30px 80px -25px rgba(30,107,90,0.45); }

/* ---------- Buttons ---------- */
.btn-pill{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  border-radius:999px; font-weight:600; letter-spacing:.01em;
  transition:transform .45s var(--ease-out-soft), background-color .35s ease, color .35s ease, box-shadow .35s ease;
  white-space:nowrap;
}
.btn-pill:hover{ transform:translateY(-2px); }
.btn-pill:active{ transform:translateY(0); }
.btn-primary{ background:var(--text-dark); color:#fff; }
.btn-primary:hover{ background:var(--accent); box-shadow:0 16px 40px -12px rgba(30,107,90,.55); }
.btn-outline{ border:1.5px solid rgba(20,20,20,0.18); color:var(--text-dark); background:rgba(255,255,255,0.5); }
.btn-outline:hover{ border-color:var(--accent); color:var(--accent); }
.btn-accent{ background:var(--accent); color:#fff; }
.btn-accent:hover{ background:#17564a; box-shadow:0 16px 40px -12px rgba(30,107,90,.55); }

/* Circular icon buttons */
.icon-circle{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; transition:transform .45s var(--ease-out-soft), background-color .3s ease, color .3s ease;
}
.icon-circle:hover{ transform:translateY(-3px) rotate(8deg); }

/* ---------- Marquee ---------- */
.marquee-wrap{ overflow:hidden; position:relative; }
.marquee-track{
  display:flex; width:max-content;
  animation:marquee-scroll 28s linear infinite;
  will-change:transform;
}
.marquee-track.reverse{ animation-direction:reverse; }
@keyframes marquee-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ---------- Scroll reveal ---------- */
.reveal{
  opacity:0; transform:translateY(48px) scale(.985);
  transition:opacity .9s var(--ease-out-soft), transform .9s var(--ease-out-soft);
}
.reveal.is-visible{ opacity:1; transform:translateY(0) scale(1); }
.reveal-left{ opacity:0; transform:translateX(-48px); transition:opacity .9s var(--ease-out-soft), transform .9s var(--ease-out-soft); }
.reveal-left.is-visible{ opacity:1; transform:translateX(0); }
.reveal-right{ opacity:0; transform:translateX(48px); transition:opacity .9s var(--ease-out-soft), transform .9s var(--ease-out-soft); }
.reveal-right.is-visible{ opacity:1; transform:translateX(0); }
.reveal-scale{ opacity:0; transform:scale(.85); transition:opacity 1s var(--ease-out-soft), transform 1s var(--ease-out-soft); }
.reveal-scale.is-visible{ opacity:1; transform:scale(1); }

/* ---------- Image zoom on hover ---------- */
.img-zoom{ overflow:hidden; }
.img-zoom img{ transition:transform 1.1s var(--ease-out-soft); }
.img-zoom:hover img{ transform:scale(1.08); }

/* ---------- Property card overlay ---------- */
.property-card{ position:relative; overflow:hidden; }
.property-card .card-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,20,20,0) 30%, rgba(20,20,20,0.85) 100%);
  transition:background .5s ease;
}
.property-card .card-info{
  transform:translateY(18px);
  opacity:0;
  transition:transform .55s var(--ease-out-soft), opacity .55s var(--ease-out-soft);
}
.property-card:hover .card-info, .property-card:focus-within .card-info{
  transform:translateY(0);
  opacity:1;
}
.property-card .card-hover-panel{
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .55s var(--ease-out-soft), opacity .45s ease;
}
.property-card:hover .card-hover-panel, .property-card:focus-within .card-hover-panel{
  max-height:220px; opacity:1;
}

/* ---------- Tabs ---------- */
.tab-btn{ transition:background-color .35s ease, color .35s ease, box-shadow .35s ease; }
.tab-btn[aria-selected="true"]{ background:var(--text-dark); color:#fff; }
.tab-btn[aria-selected="false"]{ background:transparent; color:var(--text-dark); }

/* ---------- Accordion ---------- */
.accordion-panel{
  max-height:0; overflow:hidden;
  transition:max-height .6s var(--ease-out-soft), padding .4s ease;
}
.accordion-item[data-open="true"] .accordion-panel{ max-height:400px; }
.accordion-item[data-open="true"] .accordion-chevron{ transform:rotate(180deg); }
.accordion-chevron{ transition:transform .45s var(--ease-out-soft); }
.accordion-item[data-open="true"] .accordion-plus{ transform:rotate(45deg); }
.accordion-plus{ transition:transform .4s var(--ease-out-soft); }

/* ---------- Vertical slider (with up/down controls) ---------- */
.v-slider-viewport{ overflow:hidden; position:relative; }
.v-slider-track{ transition:transform .6s var(--ease-out-soft); will-change:transform; }
.v-arrow{
  width:44px; height:44px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.85); color:var(--text-dark);
  border:1px solid rgba(20,20,20,0.1);
  transition:all .35s var(--ease-out-soft);
}
.v-arrow:hover:not(:disabled){ background:var(--accent); color:#fff; transform:translateY(-2px); box-shadow:0 12px 30px -10px rgba(30,107,90,.5); }
.v-arrow:disabled{ opacity:.35; cursor:not-allowed; }
.v-arrow-dark{ background:rgba(255,255,255,0.08); color:#fff; border:1px solid rgba(255,255,255,0.18); }
.v-arrow-dark:hover:not(:disabled){ background:var(--accent); color:#fff; }

/* ---------- Venn diagram ---------- */
.venn-circle{
  transition:transform 1.4s var(--ease-out-soft), opacity 1s ease;
}
.venn-wrap[data-merged="true"] .venn-c1{ transform:translate(0,0); }
.venn-wrap[data-merged="true"] .venn-c2{ transform:translate(0,0); }
.venn-wrap[data-merged="true"] .venn-c3{ transform:translate(0,0); }
.venn-wrap[data-merged="true"] .venn-label{ opacity:0; transition:opacity .5s ease; }
.venn-wrap[data-merged="true"] .venn-center-label{ opacity:1; transform:scale(1); }
.venn-center-label{ opacity:0; transform:scale(.7); transition:opacity .8s ease .4s, transform .8s var(--ease-out-soft) .4s; }

/* ---------- Outline text ---------- */
.text-outline{
  -webkit-text-stroke:1.5px rgba(255,255,255,0.55);
  color:transparent;
}
.text-outline-dark{
  -webkit-text-stroke:1.5px rgba(20,20,20,0.35);
  color:transparent;
}

/* ---------- Masonry grid ---------- */
.masonry-grid{
  column-count:1; column-gap:20px;
}
@media(min-width:640px){ .masonry-grid{ column-count:2; } }
@media(min-width:1024px){ .masonry-grid{ column-count:3; } }
.masonry-item{ break-inside:avoid; margin-bottom:20px; }

/* ---------- Animated map pins ---------- */
.map-pin{ position:absolute; }
.map-pin .pin-pulse{
  position:absolute; inset:0; border-radius:999px;
  background:var(--accent);
  animation:pin-pulse 2.4s ease-out infinite;
}
@keyframes pin-pulse{
  0%{ transform:scale(1); opacity:.55; }
  100%{ transform:scale(2.6); opacity:0; }
}

/* ---------- Counter numbers ---------- */
.counter-num{ font-variant-numeric:tabular-nums; }

/* ---------- Floating animation ---------- */
@keyframes float-y{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-14px); }
}
.animate-float{ animation:float-y 5s ease-in-out infinite; }
.animate-float-slow{ animation:float-y 7s ease-in-out infinite; }

/* ---------- Grayscale logo row ---------- */
.logo-grayscale{ filter:grayscale(100%) opacity(0.55); transition:filter .4s ease, opacity .4s ease; }
.logo-grayscale:hover{ filter:grayscale(0%) opacity(1); }

/* ---------- Nav ---------- */
#site-nav{ transition:transform .5s var(--ease-out-soft), background-color .4s ease, box-shadow .4s ease; }
#site-nav.nav-hidden{ transform:translateY(-120%); }
#site-nav.nav-scrolled{ box-shadow:0 10px 40px -20px rgba(0,0,0,.2); }

/* ---------- Mobile menu ---------- */
#mobile-menu{ transition:opacity .4s ease, visibility .4s ease; }
#mobile-menu[data-open="false"]{ opacity:0; visibility:hidden; pointer-events:none; }
#mobile-menu[data-open="true"]{ opacity:1; visibility:visible; pointer-events:auto; }
#mobile-menu .menu-item{ transform:translateY(16px); opacity:0; transition:transform .5s var(--ease-out-soft), opacity .5s ease; }
#mobile-menu[data-open="true"] .menu-item{ transform:translateY(0); opacity:1; }

.hamburger-line{ transition:transform .4s var(--ease-out-soft), opacity .3s ease; transform-origin:center; }
#hamburger-btn[aria-expanded="true"] .line-1{ transform:translateY(6px) rotate(45deg); }
#hamburger-btn[aria-expanded="true"] .line-2{ opacity:0; }
#hamburger-btn[aria-expanded="true"] .line-3{ transform:translateY(-6px) rotate(-45deg); }

/* ---------- Horizontal scroll tabs on mobile ---------- */
.scroll-tabs{ -ms-overflow-style:none; scrollbar-width:none; }
.scroll-tabs::-webkit-scrollbar{ display:none; }

/* ---------- Utility: no-scroll body when mobile menu open ---------- */
body.no-scroll{ overflow:hidden; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal, .reveal-left, .reveal-right, .reveal-scale{ opacity:1 !important; transform:none !important; }
}