/* ============================================================
   Barokah Sri Village — design layer on top of Tailwind CDN
   Palette: deep tropical green + metallic gold (from the BSV
   wordmark) + warm cream, with a pool-water accent.
   ============================================================ */

:root{
  --ink:        #07291F;
  --forest:     #0B4634;
  --jade:       #228A64;
  --gold:       #C9A24B;
  --gold-soft:  #EBD29A;
  --lagoon:     #17A8A8;
  --cream:      #FDFAF4;
  --cream-100:  #F7F0E3;
}

html { scroll-behavior: smooth; overflow-x: hidden; }
body { -webkit-font-smoothing: antialiased; overflow-x: hidden; }

::selection { background: var(--gold); color: var(--ink); }

/* Slim branded scrollbar */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--cream-100); }
::-webkit-scrollbar-thumb { background: #BFD3C7; border-radius: 99px; border: 3px solid var(--cream-100); }
::-webkit-scrollbar-thumb:hover { background: var(--jade); }

/* Display headings: a touch tighter than Playfair's default */
.font-display { letter-spacing: -0.015em; }

/* ───────────────────────── Navbar ───────────────────────── */

#nav { background: transparent; }
#nav .nav-logo { filter: drop-shadow(0 4px 14px rgba(0,0,0,.45)); }

.nav-link{
  position: relative; display: inline-flex; align-items: center;
  padding: .55rem .85rem; border-radius: .7rem;
  font-size: .875rem; font-weight: 600; color: rgba(255,255,255,.92);
  transition: color .2s, background-color .2s;
}
.nav-link::after{
  content:''; position:absolute; left:.85rem; right:.85rem; bottom:.3rem; height:2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-soft));
  border-radius: 2px; transform: scaleX(0); transform-origin: left;
  transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); }
.nav-link:hover, .nav-link.is-active { color: var(--gold-soft); }

/* Dropdown */
.dd-panel{
  position:absolute; top:calc(100% + .4rem); left:50%; transform: translateX(-50%) translateY(6px);
  min-width: 17rem; padding:.5rem; border-radius: 1rem;
  background:#fff; box-shadow: 0 24px 60px -18px rgba(7,41,31,.4);
  border:1px solid #E7EFE9; opacity:0; visibility:hidden;
  transition: opacity .2s, transform .2s, visibility .2s; z-index: 60;
}
.group\/dd:hover .dd-panel, .group\/dd:focus-within .dd-panel{
  opacity:1; visibility:visible; transform: translateX(-50%) translateY(0);
}
.dd-item{
  display:flex; align-items:center; gap:.7rem; padding:.6rem .7rem; border-radius:.7rem;
  font-size:.85rem; font-weight:600; color:#0B4634; transition: background-color .18s, color .18s;
}
.dd-item:hover { background: var(--cream-100); color: #8C6B27; }
.dd-ic{
  height:2rem; width:2rem; flex:none; display:grid; place-items:center; border-radius:.55rem;
  background: linear-gradient(135deg, var(--gold), #AE8734); color:#07291F; font-size:.8rem;
}

/* Solid state: on scroll, and on inner pages that have no hero */
#nav.scrolled, body.solid-nav #nav{
  background: rgba(253,250,244,.9);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 10px 34px -16px rgba(7,41,31,.35);
  border-bottom: 1px solid rgba(201,162,75,.18);
}
#nav.scrolled .nav-logo, body.solid-nav #nav .nav-logo { filter: none; }
#nav.scrolled .nav-link, body.solid-nav #nav .nav-link { color: #0B4634; }
#nav.scrolled .nav-link:hover, #nav.scrolled .nav-link.is-active,
body.solid-nav #nav .nav-link:hover, body.solid-nav #nav .nav-link.is-active { color: #8C6B27; }
#nav.scrolled #navToggle, body.solid-nav #nav #navToggle { color:#0B4634; border-color:#CFE0D5; }

@media (max-width: 1279px){
  #nav { background: rgba(253,250,244,.95); backdrop-filter: blur(12px); }
  #nav .nav-logo { filter:none; }
  #nav #navToggle { color:#0B4634; border-color:#CFE0D5; }
}

/* ───────────────────────── Buttons ───────────────────────── */

.btn-gold{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.9rem 1.6rem; border-radius:999px; overflow:hidden;
  font-weight:700; color:#07291F;
  background: linear-gradient(135deg, #EBD29A 0%, #C9A24B 45%, #AE8734 100%);
  box-shadow: 0 14px 34px -14px rgba(201,162,75,.75);
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s;
}
.btn-gold:hover{ transform: translateY(-2px); box-shadow: 0 20px 44px -14px rgba(201,162,75,.85); }
.btn-gold::before{                      /* sheen sweep */
  content:''; position:absolute; inset:0 auto 0 -60%; width:45%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg); transition: left .6s ease;
}
.btn-gold:hover::before { left:120%; }

.btn-glass{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.9rem 1.6rem; border-radius:999px; font-weight:600; color:#fff;
  background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(8px); transition: background-color .22s, transform .22s, border-color .22s;
}
.btn-glass:hover{ background: rgba(255,255,255,.2); border-color: rgba(235,210,154,.6); transform: translateY(-2px); }

.btn-ghost{
  display:inline-flex; align-items:center; gap:.5rem; font-weight:700; color:#0B4634;
  transition: color .2s, gap .2s;
}
.btn-ghost:hover { color:#AE8734; gap:.8rem; }

/* ───────────────────────── Bits & pieces ───────────────────────── */

/* Section label: BAROKAH-style eyebrow with a gold rule */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.7rem; font-weight:700; letter-spacing:.28em; text-transform:uppercase; color:#AE8734;
}
.eyebrow::before{ content:''; width:1.9rem; height:2px; background:linear-gradient(90deg,var(--gold),transparent); }
.eyebrow.is-light { color: var(--gold-soft); }
.eyebrow.is-center::after{ content:''; width:1.9rem; height:2px; background:linear-gradient(270deg,var(--gold),transparent); }

/* Pulsing "we're open" dot */
.live-dot{
  position:relative; height:.5rem; width:.5rem; border-radius:999px; background:#4ADE80; flex:none;
}
.live-dot::after{
  content:''; position:absolute; inset:-4px; border-radius:999px; border:2px solid #4ADE80;
  animation: ping 1.8s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes ping { 75%,100% { transform: scale(1.9); opacity:0; } }

/* Gold underline flourish under a display heading */
.rule-gold{ display:block; width:5.5rem; height:3px; border-radius:3px;
  background:linear-gradient(90deg,var(--gold),rgba(201,162,75,0)); }
.rule-gold.is-center{ margin-inline:auto;
  background:linear-gradient(90deg,rgba(201,162,75,0),var(--gold),rgba(201,162,75,0)); width:7rem; }

/* ───────────────────────── Hero ───────────────────────── */

.hero-img{ animation: kenburns 22s ease-in-out infinite alternate; will-change: transform; }
@keyframes kenburns{
  from { transform: scale(1.06) translate3d(0,0,0); }
  to   { transform: scale(1.16) translate3d(-1.5%, -1.5%, 0); }
}

/* Glass amenity bar that straddles hero and next section */
.amenity-bar{
  background: rgba(253,250,244,.92);
  backdrop-filter: blur(14px) saturate(140%);
  border:1px solid rgba(201,162,75,.25);
  box-shadow: 0 30px 70px -28px rgba(7,41,31,.55);
}
.amenity{ transition: transform .25s, color .25s; }
.amenity:hover{ transform: translateY(-3px); }
.amenity:hover .amenity-ic{ background: linear-gradient(135deg,var(--gold),#AE8734); color:#07291F; }
.amenity-ic{
  height:2.9rem; width:2.9rem; display:grid; place-items:center; border-radius:.9rem;
  background:#EAF2EC; color:#14724F; font-size:1.05rem; transition: background .25s, color .25s;
}

/* Scroll cue */
.scroll-cue{ animation: cue 2.2s ease-in-out infinite; }
@keyframes cue { 0%,100%{ transform:translateY(0); opacity:.65 } 50%{ transform:translateY(7px); opacity:1 } }

/* ───────────────────────── Cards ───────────────────────── */

.card{
  background:#fff; border-radius:1.5rem; overflow:hidden;
  box-shadow: 0 10px 40px -12px rgba(7,41,31,.22);
  transition: transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s;
}
.card:hover{ transform: translateY(-6px); box-shadow: 0 30px 64px -24px rgba(7,41,31,.42); }

/* Image tile that zooms on hover, with a readable gradient scrim */
.tile{ position:relative; overflow:hidden; border-radius:1.5rem; display:block; }
.tile img{ transition: transform .8s cubic-bezier(.22,1,.36,1); }
.tile:hover img{ transform: scale(1.09); }
.tile-scrim{
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(7,41,31,.92) 0%, rgba(7,41,31,.45) 38%, rgba(7,41,31,.05) 70%);
}
.tile:hover .tile-arrow{ opacity:1; transform: translate(0,0); }
.tile-arrow{ opacity:0; transform: translate(-6px,6px); transition: opacity .3s, transform .3s; }

/* Gold frame behind the about image */
.frame-gold{ position:relative; }
.frame-gold::before{
  content:''; position:absolute; inset:1.1rem -1.1rem -1.1rem 1.1rem;
  border:2px solid rgba(201,162,75,.55); border-radius:1.75rem; z-index:0;
}

/* Price / status pills */
.pill{
  display:inline-flex; align-items:center; gap:.35rem; padding:.3rem .75rem; border-radius:999px;
  font-size:.72rem; font-weight:700; letter-spacing:.02em;
}
.pill-gold{ background: linear-gradient(135deg,var(--gold),#AE8734); color:#07291F; }
.pill-glass{ background: rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.28); backdrop-filter: blur(6px); }

/* ───────────────────────── Forms ───────────────────────── */

.form-label{
  display:block; margin-bottom:.4rem;
  font-size:.75rem; font-weight:700; letter-spacing:.04em; color:#0B4634;
}
.form-input{
  width:100%; padding:.7rem .9rem; border-radius:.85rem;
  border:1px solid #D7EBE0; background:#fff; color:#07291F; font-size:.9rem;
  transition: border-color .18s, box-shadow .18s;
}
.form-input::placeholder{ color:#9BB3A5; }
.form-input:focus{
  outline:none; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,162,75,.18);
}
textarea.form-input{ resize:vertical; min-height:5rem; }

/* ───────────────────────── Decoration ───────────────────────── */

/* Soft radial glows for dark sections */
.glow-gold{
  background-image:
    radial-gradient(60% 55% at 12% 10%, rgba(201,162,75,.18) 0%, transparent 60%),
    radial-gradient(55% 50% at 88% 86%, rgba(23,168,168,.16) 0%, transparent 62%);
}
/* Faint woven pattern, echoes the kampung architecture */
.pattern-weave{
  background-image:
    repeating-linear-gradient(45deg, rgba(201,162,75,.06) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(-45deg, rgba(201,162,75,.06) 0 2px, transparent 2px 9px);
}

/* Marquee strip */
.marquee{ display:flex; overflow:hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track{ display:flex; gap:3rem; padding-block:.25rem; animation: slide 38s linear infinite; white-space:nowrap; }
.marquee:hover .marquee__track{ animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ───────────────────────── Gallery ───────────────────────── */

.gal-chip {
  padding: .5rem 1.15rem; border-radius: 9999px; font-size: .82rem; font-weight: 600;
  background: #fff; color: #0E5C40; border: 1px solid #D7EBE0; transition: all .22s; cursor: pointer;
}
.gal-chip:hover { border-color: var(--gold); color:#8C6B27; }
.gal-chip.is-active { background: #0B4634; color: var(--gold-soft); border-color: #0B4634; }
.gal-item { transition: opacity .3s, transform .3s; }
.gal-item.hide { display: none; }

.line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-5 { display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; }

/* Facebook plugin container keeps it tidy */
.fb-wrap { max-height: 560px; }

/* ───────────────────────── Motion preferences ───────────────────────── */

@media (prefers-reduced-motion: reduce){
  html { scroll-behavior: auto; }
  .hero-img, .live-dot::after, .scroll-cue, .marquee__track { animation: none !important; }
  .card, .tile img, .btn-gold, .btn-glass { transition: none !important; }
}