/* ═══════════════════════════════════════════════
   BASE — Reset, CSS custom properties, body
═══════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#07070a;
  --surface:#0e0e14;
  --surface-2:#14141c;
  --gold:#c8a84b;
  --gold-light:#e2c97a;
  --text:#f0ebe0;
  --text-muted:#7a756c;
  --text-dim:#3e3b38;
  --border:rgba(200,168,75,0.12);
  --border-soft:rgba(255,255,255,0.06);
  --radius:12px;
  --ff-display:'Cormorant Garamond',Georgia,serif;
  --ff-body:'Outfit',system-ui,sans-serif;
}

html{scroll-behavior:smooth}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--ff-body);
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
  cursor:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}

/* ═══ KEYFRAMES ═══ */
@keyframes fillReveal{0%{clip-path:inset(0 100% 0 0)}100%{clip-path:inset(0 0% 0 0)}}
@keyframes lineGrow{0%{width:0}100%{width:clamp(160px,28vw,300px)}}
@keyframes marqueeScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes pulse{0%,100%{opacity:.3;transform:scaleY(.85)}50%{opacity:1;transform:scaleY(1)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}