/* ============================================================
   RESET & BASE STYLES
   ============================================================ */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box }
html {
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.6;
  overflow: hidden;
  width: 100%;
  max-width: 100vw;
  min-height: 100dvh;
  height: 100dvh;
  position: relative;
  cursor: none;
}
body.panel-open {
  cursor: none;
  overflow: hidden;
  height: 100dvh;
  max-height: 100dvh;
  overscroll-behavior: none;
}
::selection { background: var(--accent); color: var(--bg) }
a { color: var(--accent); text-decoration: none; transition: opacity .3s; cursor: none }
a:hover { opacity: .75 }
button { font-family: inherit; border: none; background: none; cursor: none; color: inherit }

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
.custom-cursor {
  position: fixed; pointer-events: none; z-index: 9999;
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(196,169,106,.9);
  box-shadow: 0 0 8px 2px rgba(196,169,106,.3), 0 0 20px 4px rgba(196,169,106,.1);
  transform: translate(-50%,-50%);
  transition: width .25s ease, height .25s ease, background .25s ease, box-shadow .25s ease;
  opacity: 0;
}
.custom-cursor.visible { opacity: 1 }
.custom-cursor.hover {
  width: 28px; height: 28px;
  background: rgba(196,169,106,.08);
  border: 1px solid rgba(196,169,106,.5);
  box-shadow: 0 0 15px 3px rgba(196,169,106,.15), 0 0 30px 8px rgba(196,169,106,.05);
}
/* Context-aware cursor states */
.custom-cursor.cursor-view {
  width: 60px; height: 60px;
  background: rgba(196,169,106,.06);
  border: 1px solid rgba(196,169,106,.3);
  box-shadow: 0 0 20px 5px rgba(196,169,106,.1);
}
.custom-cursor.cursor-view::after {
  content: 'View';
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  font-family: var(--sans); font-size: .5rem;
  letter-spacing: .15em; text-transform: uppercase;
  color: rgba(196,169,106,.8);
}

/* ============================================================
   CURSOR GLOW
   ============================================================ */
.cursor-glow {
  position: fixed; pointer-events: none; z-index: 5;
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(196,169,106,.04) 0%, rgba(196,169,106,.01) 30%, transparent 70%);
  transform: translate(-50%,-50%);
  transition: opacity .3s ease; opacity: 0;
}
.cursor-glow.visible { opacity: 1 }