/* ============================================================
   LUCKY STREET — Luxury Vintage Theme
   Black • Crimson • Champagne Gold • Ivory
   ============================================================ */
:root{ --gold:#C9A86A; --crimson:#D90429; }
html{ scroll-behavior:smooth; }
body{ background:#0B0B0D; }
::selection{ background:var(--crimson); color:#fff; }
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:#0B0B0D; }
::-webkit-scrollbar-thumb{ background:linear-gradient(#C9A86A,#6b5732); border-radius:99px; border:2px solid #0B0B0D; }

/* ---------- Typography helpers ---------- */
.eyebrow{ letter-spacing:.35em; text-transform:uppercase; font-size:11px; font-weight:700; }
.gold-line{ width:72px; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.text-gradient-gold{ background:linear-gradient(120deg,#E7D3A1,#C9A86A 45%,#9a7d45); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---------- Buttons ---------- */
.btn-gold{ display:inline-flex; align-items:center; gap:.6rem; padding:.8rem 1.7rem; border-radius:999px;
  background:linear-gradient(120deg,#E7D3A1,#C9A86A); color:#111; font-size:12px; font-weight:800;
  letter-spacing:.22em; text-transform:uppercase; transition:.35s; box-shadow:0 10px 30px rgba(201,168,106,.25); }
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 16px 40px rgba(201,168,106,.4); }
.btn-outline{ display:inline-flex; align-items:center; gap:.6rem; padding:.8rem 1.7rem; border-radius:999px;
  border:1px solid rgba(255,255,255,.35); color:#fff; font-size:12px; font-weight:800; letter-spacing:.22em;
  text-transform:uppercase; transition:.35s; backdrop-filter:blur(6px); }
.btn-outline:hover{ border-color:var(--gold); color:var(--gold); transform:translateY(-2px); }
.btn-red{ display:inline-flex; align-items:center; gap:.6rem; padding:.8rem 1.7rem; border-radius:999px;
  background:linear-gradient(120deg,#D90429,#8f021b); color:#fff; font-size:12px; font-weight:800;
  letter-spacing:.22em; text-transform:uppercase; transition:.35s; box-shadow:0 10px 30px rgba(217,4,41,.3); }
.btn-red:hover{ transform:translateY(-2px); box-shadow:0 16px 40px rgba(217,4,41,.45); }

/* ---------- Cards ---------- */
.lux-card{ position:relative; border:1px solid rgba(255,255,255,.09); background:linear-gradient(180deg,#17171a,#101012);
  border-radius:1.25rem; overflow:hidden; transition:.5s; }
.lux-card:hover{ transform:translateY(-8px); border-color:rgba(201,168,106,.55); box-shadow:0 30px 60px rgba(0,0,0,.55); }
.lux-card img{ transition:transform 1.2s cubic-bezier(.2,.7,.2,1); }
.lux-card:hover img{ transform:scale(1.08); }
.price-row{ display:flex; justify-content:space-between; gap:1rem; padding:1.1rem 0; border-bottom:1px dashed rgba(255,255,255,.12); transition:.3s; }
.price-row:hover{ padding-left:.5rem; border-color:rgba(201,168,106,.5); }

/* ---------- Hero ---------- */
.hero-bg{ position:absolute; inset:0; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; }
.hero-overlay{ position:absolute; inset:0; background:
  linear-gradient(180deg,rgba(5,5,6,.72) 0%,rgba(5,5,6,.45) 40%,rgba(11,11,13,.96) 100%),
  radial-gradient(ellipse at center,transparent 0%,rgba(0,0,0,.45) 100%); }
.hero-frame{ position:absolute; inset:18px; border:1px solid rgba(201,168,106,.35); border-radius:10px; pointer-events:none; }
@media(max-width:640px){ .hero-frame{ inset:10px; } }

/* ---------- Marquee ---------- */
.marquee{ overflow:hidden; white-space:nowrap; }
.marquee-track{ display:inline-flex; gap:0; animation:marquee 26s linear infinite; will-change:transform; }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.visible{ opacity:1; transform:none; }
.reveal-delay-1{ transition-delay:.12s; } .reveal-delay-2{ transition-delay:.24s; } .reveal-delay-3{ transition-delay:.36s; }

/* ---------- Gallery ---------- */
.gallery-item img{ transition:transform 1.1s cubic-bezier(.2,.7,.2,1),filter .5s; }
.gallery-item:hover img{ transform:scale(1.07); }
.filter-btn{ padding:.55rem 1.25rem; border-radius:999px; border:1px solid rgba(255,255,255,.2);
  font-size:11px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.7); transition:.3s; }
.filter-btn:hover{ border-color:var(--gold); color:var(--gold); }
.filter-btn.active{ background:linear-gradient(120deg,#E7D3A1,#C9A86A); color:#111; border-color:transparent; }

/* ---------- Forms ---------- */
.lux-input{ width:100%; background:#141416; border:1px solid rgba(255,255,255,.13); border-radius:.8rem;
  padding:.9rem 1.1rem; color:#F5F0E8; font-size:14px; transition:.3s; }
.lux-input:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 4px rgba(201,168,106,.15); }
.lux-input::placeholder{ color:rgba(255,255,255,.35); }
select.lux-input option{ background:#141416; }
input[type="date"].lux-input, input[type="time"].lux-input{ color-scheme:dark; }

/* ---------- Footer ---------- */
.footer-title{ font-family:Cinzel,serif; letter-spacing:.22em; text-transform:uppercase; font-size:13px; color:#fff; margin-bottom:1.1rem; }
.footer-links{ display:grid; gap:.65rem; font-size:14px; color:rgba(255,255,255,.55); }
.footer-links a{ transition:.3s; } .footer-links a:hover{ color:var(--gold); padding-left:6px; }

/* ---------- Misc ---------- */
.grain::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E"); }
.stat-num{ font-family:"Playfair Display",serif; }
.testi-slide{ display:none; } .testi-slide.active{ display:block; animation:fadeUp .7s ease both; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(16px);} to{ opacity:1; transform:none;} }
@keyframes floaty{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }
.floaty{ animation:floaty 5s ease-in-out infinite; }
#navbar.scrolled{ box-shadow:0 12px 40px rgba(0,0,0,.55); background:rgba(5,5,6,.94); }