/* Zebib Estates, custom design layer on top of Tailwind CDN */

:root {
  --navy: #0f0f10;          /* near-black for dark sections */
  --navy-soft: #1a1a1c;
  --gold: #24406b;          /* matte dark blue accent (was gold) */
  --gold-soft: #315388;
  --cream: #f7f7f5;
  --ink: #111111;
  --muted: #6b7280;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--ink);
  background: #ffffff;
}

h1, h2, h3, .serif {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.text-gold { color: var(--gold); }
.bg-navy { background-color: var(--navy); }
.bg-navy-soft { background-color: var(--navy-soft); }
.bg-cream { background-color: var(--cream); }
.border-gold { border-color: var(--gold); }

/* Thin gold divider */
.divider-gold {
  width: 64px;
  height: 2px;
  background: var(--gold);
}

/* Buttons — black on white / white on dark */
.btn-gold {
  background: #111111;
  color: #ffffff;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.8rem;
  transition: all .25s ease;
}
.btn-gold:hover { background: var(--gold); transform: translateY(-1px); }  /* hover -> blue */

/* Syncopate display font (kumarawilcoxon "PROVEN RESULTS" look) */
.font-display { font-family: 'Syncopate', sans-serif; letter-spacing: 0.12em; }

/* one blue cursive word inside a heading, to "illuminate" it */
.accent-word {
  font-family: 'Pinyon Script', cursive;
  color: var(--gold);           /* matte dark blue */
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
}

/* Hero "uncrop from centre" reveal — a centred rectangle of the image is
   visible on load, then expands to full-bleed (image never scales). */
@keyframes heroUncrop {
  0%   { clip-path: inset(18% 20% 18% 20%); }   /* starts even larger */
  53%  { clip-path: inset(18% 20% 18% 20%); }   /* hold (~same length), so expansion begins late */
  100% { clip-path: inset(0 0 0 0); }           /* expansion phase now 30% faster */
}
.hero-uncrop { animation: heroUncrop 1.75s cubic-bezier(.76,0,.24,1) both; }
/* text fades in WITH the expansion (no float) */
@keyframes heroFade { from { opacity: 0; } to { opacity: 1; } }
.hero-fade { opacity: 0; animation: heroFade 1.35s ease .8s forwards; }

/* Big footer wordmark that reveals on scroll (felix & friends style) */
.bottom-mark { font-family: 'Syncopate', sans-serif; letter-spacing: 0.18em; }

/* Hero marquee strip — POLARIS ESTATES ✦ repeating, moving continuously */
.marquee { display: flex; overflow: hidden; user-select: none; }
.marquee-track {
  flex: 0 0 auto;
  min-width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  animation: marquee 32s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.mq-word {
  font-family: 'Syncopate', sans-serif;
  letter-spacing: 0.22em;
  font-size: .78rem;
  color: #fff;
  white-space: nowrap;
  padding: 0 1.6rem;
}
.mq-star { color: var(--gold-soft); font-size: .6rem; }

.btn-outline {
  border: 1px solid rgba(255,255,255,.4);
  color: #fff;
  transition: all .2s ease;
}
.btn-outline:hover { border-color: var(--gold); color: var(--gold); }

/* Property card hover */
.prop-card {
  transition: transform .25s ease, box-shadow .25s ease;
}
.prop-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -20px rgba(10,22,40,.35);
}
.prop-card img { transition: transform .5s ease; }
.prop-card:hover img { transform: scale(1.05); }

/* Nav link underline */
.nav-link { position: relative; }
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  width: 0; height: 2px;
  background: var(--gold);
  transition: width .25s ease;
}
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

/* Hero overlay */
.hero-overlay {
  background: linear-gradient(180deg, rgba(10,22,40,.55) 0%, rgba(10,22,40,.75) 100%);
}

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: all .7s ease; }
.reveal.in { opacity: 1; transform: none; }

/* Status pill */
.pill {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
}

/* Mobile menu */
#mobileMenu { transition: opacity .2s ease; }

/* Minimal underline inputs (filters + contact form) */
.filt {
  background: transparent;
  border: 0;
  border-bottom: 1px solid #d4d4d8;
  padding: 6px 2px;
  font-size: .875rem;
  color: var(--ink);
}
.filt::placeholder { color: #9ca3af; }
.filt:focus { outline: none; border-bottom-color: var(--ink); }
select.filt { cursor: pointer; }
.filt-label {
  font-family: 'Syncopate', sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #9ca3af;
  margin-bottom: 8px;
}