/* ========================================
   Base Styles — Light Theme
   ======================================== */

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--text-primary);
  background-color: var(--bg);
  overflow-x: hidden;
  cursor: none;
}

/* ---- Lenis Overrides ---- */
html.lenis, html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

/* ---- Selection ---- */
::selection {
  background: var(--accent);
  color: #fff;
}

::-moz-selection {
  background: var(--accent);
  color: #fff;
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: var(--border-hover);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* ---- Links ---- */
a {
  transition: color var(--duration-fast) var(--ease-out);
}

a:hover {
  color: var(--accent);
}

/* ---- Typography Helpers ---- */
.serif {
  font-family: var(--font-serif);
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-muted);
}

/* ---- Grain Overlay ---- */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10000;
  opacity: 0.03;
}

.grain svg {
  width: 100%;
  height: 100%;
}

/* ---- Custom Cursor ---- */
.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  background: var(--dark);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  transition: width 0.3s var(--ease-spring),
              height 0.3s var(--ease-spring),
              background 0.3s var(--ease-out);
}

.cursor-circle {
  position: fixed;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(26, 26, 26, 0.25);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  transition: width 0.4s var(--ease-spring),
              height 0.4s var(--ease-spring),
              border-color 0.3s var(--ease-out),
              background 0.3s var(--ease-out);
}

/* Cursor states */
.cursor-hover .cursor-dot {
  width: 10px;
  height: 10px;
  background: var(--accent);
}

.cursor-hover .cursor-circle {
  width: 60px;
  height: 60px;
  border-color: rgba(200, 150, 62, 0.4);
  background: rgba(200, 150, 62, 0.04);
}

/* ---- Page Load ---- */
.page-loader {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s var(--ease-out), visibility 0.6s;
}

.page-loader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ---- Visibility helpers for animation ---- */
.reveal {
  opacity: 0;
  visibility: hidden;
}

.reveal.revealed {
  opacity: 1;
  visibility: visible;
}

/* Touch devices: no custom cursor */
@media (hover: none) and (pointer: coarse) {
  body { cursor: auto; }
  .cursor-dot, .cursor-circle { display: none !important; }
}