:root { color-scheme: dark; }
html, body { background: #070C1B; color: #F5F1E8; }
body { font-family: 'Inter', system-ui, sans-serif; overflow-x:hidden; }
.font-serif { font-family: 'Playfair Display', serif; }

/* Animated aurora background for hero */
.aurora { position: absolute; inset: -10%; overflow: hidden; z-index: 0; pointer-events:none; }
.aurora::before, .aurora::after {
  content: ""; position: absolute; width: 60vw; height: 60vw; border-radius: 50%;
  filter: blur(120px); opacity: .35;
  background: radial-gradient(circle, #D4AF37 0%, transparent 60%);
  animation: float 18s ease-in-out infinite;
}
.aurora::before { top: -10%; left: -15%; }
.aurora::after  { bottom: -20%; right: -10%; background: radial-gradient(circle, #6B4FF6 0%, transparent 60%); animation-delay: -9s; }
@keyframes float {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(40px,-30px) scale(1.15); }
}

/* Glass card */
.glass {
  background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255,255,255,.08);
}
.floor_4_img_edited{
  object-position: center 10% !important;
}
.glass-strong {
  background: linear-gradient(135deg, rgba(18,27,58,.85), rgba(7,12,27,.85));
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(212,175,55,.18);
}

/* Gold gradient text */
.text-gold-grad {
  background: linear-gradient(120deg, #F1D67A 0%, #D4AF37 50%, #B8862A 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Pulse for available status dot */
.pulse-dot { position: relative; }
.pulse-dot::before {
  content:""; position:absolute; inset:-6px; border-radius:50%;
  box-shadow: 0 0 0 0 rgba(212,175,55,.7); animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(212,175,55,.55); }
  70%{ box-shadow: 0 0 0 12px rgba(212,175,55,0); }
  100%{ box-shadow: 0 0 0 0 rgba(212,175,55,0); }
}

/* Space card hover */
.space-card {
  position: relative; overflow: hidden; cursor: pointer;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s;
}
[data-book="FLOOR-4-HOARDING"] .img-wrap img {
  object-position: center 50%;
}
.space-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -20px rgba(212,175,55,.25), 0 0 0 1px rgba(212,175,55,.4); }
.space-card .img-wrap { position: relative; overflow: hidden; }
.space-card .img-wrap img { transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
.space-card:hover .img-wrap img { transform: scale(1.08); }
.space-card .hover-cta {
  position:absolute; inset:0; background: linear-gradient(180deg, transparent 30%, rgba(7,12,27,.92) 100%);
  display:flex; align-items:flex-end; justify-content:center; padding: 24px;
  opacity: 0; transition: opacity .3s;
}
.space-card:hover .hover-cta { opacity: 1; }

/* Modal anim */
.modal-back { background: rgba(7,12,27,.85); backdrop-filter: blur(8px); }
@keyframes slideIn { from { transform: translateY(40px); opacity:0; } to { transform:none; opacity:1; } }
.modal-panel { animation: slideIn .45s cubic-bezier(.2,.8,.2,1); }

/* Toast */
@keyframes toastIn { from { transform: translate(-50%, -120%); } to { transform: translate(-50%, 0); } }
.toast { animation: toastIn .5s cubic-bezier(.2,.8,.2,1); }

/* CSS checkmark */
.checkmark { width: 80px; height: 80px; border-radius: 50%; display:block;
  box-shadow: inset 0 0 0 2px rgba(212,175,55,.5); margin: 0 auto; position:relative;
  animation: scaleIn .5s ease-out; }
@keyframes scaleIn { from { transform: scale(0); } to { transform: scale(1); } }
.checkmark svg { width: 80px; height: 80px; }
.checkmark path { stroke: #D4AF37; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; fill:none;
  stroke-dasharray: 60; stroke-dashoffset: 60; animation: draw .7s .25s forwards ease-out; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Chatbot */
.chat-bubble {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  width: 60px; height: 60px; border-radius: 50%;
  background: linear-gradient(135deg, #D4AF37, #B8862A);
  color: #070C1B; display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 30px -5px rgba(212,175,55,.6); cursor:pointer;
  transition: transform .3s; border: none;
}
.chat-bubble:hover { transform: scale(1.08); }
.chat-panel {
  position: fixed; right: 22px; bottom: 96px; z-index: 60;
  width: 360px; max-width: calc(100vw - 44px); height: 520px; max-height: calc(100vh - 130px);
  border-radius: 18px; display:flex; flex-direction: column; overflow:hidden;
  transform: translateY(20px); opacity: 0; pointer-events: none;
  transition: transform .35s, opacity .35s;
}
.chat-panel.open { transform: none; opacity: 1; pointer-events: auto; }
.chat-msg-bot { align-self: flex-start; background: rgba(212,175,55,.12); border: 1px solid rgba(212,175,55,.25); }
.chat-msg-user { align-self: flex-end; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); }

/* Filter chip */
.chip { transition: all .2s; }
.chip[aria-pressed="true"] { background: linear-gradient(135deg, #D4AF37, #B8862A); color:#070C1B; border-color: transparent; }

/* Marquee gallery */
.marquee { display:flex; gap:18px; animation: scroll 60s linear infinite; }
@keyframes scroll { from { transform:translateX(0); } to { transform: translateX(-50%); } }
.marquee-wrap:hover .marquee { animation-play-state: paused; }

/* Section reveal */
.reveal { opacity: 0; transform: translateY(28px); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #070C1B; }
::-webkit-scrollbar-thumb { background: rgba(212,175,55,.3); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: rgba(212,175,55,.5); }

/* Hide scrollbar in modal lists if any */
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Mobile menu */
.mobile-menu.open { pointer-events: auto; }
.mobile-menu.open #mobile-menu-backdrop { opacity: 1; }
.mobile-menu.open .mobile-menu-panel { transform: translateX(0); }

/* Hamburger → X animation */
#nav-toggle.open .ham-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#nav-toggle.open .ham-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
#nav-toggle.open .ham-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }