/* ═══════════════════════════════════════════════════════
   SPACESYNC — ARCHITECTURAL DESIGN STUDIO
   Dark luxury editorial aesthetic
═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Jost:wght@200;300;400;500&display=swap');

:root {
  --bg:        #080808;
  --surface:   #101010;
  --surface2:  #161616;
  --gold:      #C8A96E;
  --gold-dim:  rgba(200,169,110,0.18);
  --gold-line: rgba(200,169,110,0.35);
  --text:      #EDE9E3;
  --muted:     #7A7570;
  --border:    #1E1E1E;
  --white:     #FFFFFF;
  --trans:     400ms cubic-bezier(0.4,0,0.2,1);
  --trans-slow:900ms cubic-bezier(0.4,0,0.2,1);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:smooth; font-size:16px; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  overflow-x: hidden;
  cursor: none;
}

/* ── CUSTOM CURSOR ─────────────────────────────────── */
.cursor {
  position: fixed;
  width: 8px; height: 8px;
  background: var(--gold);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%,-50%);
  transition: width .2s, height .2s, background .2s;
}
.cursor-ring {
  position: fixed;
  width: 36px; height: 36px;
  border: 1px solid var(--gold-line);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%,-50%);
  transition: all .15s ease;
}
body:hover .cursor { opacity:1; }
a:hover ~ .cursor, button:hover ~ .cursor { width:16px; height:16px; }

/* ── PAGE TRANSITION OVERLAY ───────────────────────── */
#page-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 8888;
  pointer-events: none;
  transform: scaleY(0);
  transform-origin: bottom;
}
#page-overlay.entering {
  animation: overlayIn 0.5s cubic-bezier(0.76,0,0.24,1) forwards;
}
#page-overlay.leaving {
  animation: overlayOut 0.5s cubic-bezier(0.76,0,0.24,1) forwards;
}
@keyframes overlayIn {
  from { transform: scaleY(0); transform-origin: bottom; }
  to   { transform: scaleY(1); transform-origin: bottom; }
}
@keyframes overlayOut {
  from { transform: scaleY(1); transform-origin: top; }
  to   { transform: scaleY(0); transform-origin: top; }
}

/* ── NAVBAR ────────────────────────────────────────── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 28px 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background var(--trans), padding var(--trans), border-color var(--trans);
  border-bottom: 1px solid transparent;
}
nav.scrolled {
  background: rgba(8,8,8,0.95);
  backdrop-filter: blur(12px);
  padding: 18px 60px;
  border-bottom-color: var(--border);
}

/* Logo */
.logo { display:flex; align-items:center; gap:12px; text-decoration:none; }
.logo-mark svg { width:36px; height:36px; }
.logo-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--text);
  line-height: 1;
}
.logo-text span { display:block; font-size:0.55rem; font-family:'Jost',sans-serif; letter-spacing:0.22em; color:var(--gold); text-transform:uppercase; font-weight:400; margin-top:2px; }

/* Nav links */
.nav-links { display:flex; gap:44px; list-style:none; align-items:center; }
.nav-links a {
  font-family: 'Jost', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  position: relative;
  transition: color var(--trans);
}
.nav-links a::after {
  content:'';
  position:absolute;
  bottom:-4px; left:0;
  width:0; height:1px;
  background: var(--gold);
  transition: width var(--trans);
}
.nav-links a:hover, .nav-links a.active { color: var(--text); }
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }

/* Hamburger */
.hamburger { display:none; flex-direction:column; gap:5px; cursor:none; background:none; border:none; padding:4px; }
.hamburger span { display:block; width:26px; height:1px; background:var(--text); transition:all var(--trans); }
.hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(4px,4px); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(4px,-4px); }

/* Mobile menu */
.mobile-menu {
  position:fixed;
  inset:0;
  background: rgba(8,8,8,0.98);
  backdrop-filter: blur(20px);
  z-index: 999;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:40px;
  opacity:0;
  pointer-events:none;
  transition: opacity 0.4s ease;
}
.mobile-menu.open { opacity:1; pointer-events:all; }
.mobile-menu a {
  font-family:'Cormorant Garamond',serif;
  font-size:2.8rem;
  font-weight:300;
  color:var(--text);
  text-decoration:none;
  letter-spacing:0.04em;
  transition:color var(--trans);
}
.mobile-menu a:hover { color:var(--gold); }

/* ── SCROLL REVEAL ─────────────────────────────────── */
.reveal {
  opacity:0;
  transform:translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-delay-1 { transition-delay:0.1s; }
.reveal-delay-2 { transition-delay:0.2s; }
.reveal-delay-3 { transition-delay:0.3s; }
.reveal-delay-4 { transition-delay:0.4s; }

/* ── SECTION LABEL ─────────────────────────────────── */
.section-label {
  font-size:0.65rem;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--gold);
  font-family:'Jost',sans-serif;
  font-weight:400;
  display:flex;
  align-items:center;
  gap:12px;
}
.section-label::before {
  content:'';
  width:32px;
  height:1px;
  background:var(--gold);
}

/* ── GOLD RULE ──────────────────────────────────────── */
.gold-rule { width:100%; height:1px; background:var(--gold-line); }
.gold-rule-short { width:60px; height:1px; background:var(--gold); }

/* ── FOOTER ────────────────────────────────────────── */
footer {
  background: var(--surface);
  border-top: 1px solid var(--gold-line);
  padding: 64px 60px 40px;
}
.footer-grid {
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:48px;
  margin-bottom:48px;
}
.footer-brand .logo { margin-bottom:16px; }
.footer-brand p {
  font-size:0.85rem;
  color:var(--muted);
  line-height:1.8;
  max-width:240px;
}
.footer-col h4 {
  font-size:0.65rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:20px;
  font-family:'Jost',sans-serif;
  font-weight:400;
}
.footer-col a, .footer-col p {
  display:block;
  font-size:0.85rem;
  color:var(--muted);
  text-decoration:none;
  line-height:2;
  transition:color var(--trans);
}
.footer-col a:hover { color:var(--text); }
.footer-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:32px;
  border-top:1px solid var(--border);
}
.footer-bottom p { font-size:0.75rem; color:var(--muted); letter-spacing:0.06em; }
.social-links { display:flex; gap:20px; }
.social-links a { font-size:0.75rem; color:var(--muted); text-decoration:none; letter-spacing:0.1em; transition:color var(--trans); }
.social-links a:hover { color:var(--gold); }

/* ── BTN ────────────────────────────────────────────── */
.btn {
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 36px;
  font-family:'Jost',sans-serif;
  font-size:0.7rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  text-decoration:none;
  border:1px solid var(--gold-line);
  color:var(--text);
  background:transparent;
  cursor:none;
  transition:all var(--trans);
  position:relative;
  overflow:hidden;
}
.btn::before {
  content:'';
  position:absolute;
  inset:0;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--trans);
  z-index:-1;
}
.btn:hover { color:var(--bg); border-color:var(--gold); }
.btn:hover::before { transform:scaleX(1); }
.btn-solid {
  background:var(--gold);
  color:var(--bg);
  border-color:var(--gold);
  font-weight:500;
}
.btn-solid::before { background:var(--text); }
.btn-solid:hover { color:var(--bg); border-color:var(--text); }

/* ── RESPONSIVE ────────────────────────────────────── */
@media(max-width:900px){
  nav { padding:20px 24px; }
  nav.scrolled { padding:14px 24px; }
  .nav-links { display:none; }
  .hamburger { display:flex; }
  footer { padding:48px 24px 32px; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:32px; }
}
@media(max-width:580px){
  .footer-grid { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; gap:16px; text-align:center; }
}