/* ════════════════════════════════════════════════════════
   LEGENDARY.WORK — Global Design System
   ──────────────────────────────────────────────────────
   This file contains core resets, design tokens, and
   common interactive components (Grain, Cursor, Corners)
   shared across the entire experience.
   ════════════════════════════════════════════════════════ */

/* 1. RESET & TOKENS */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* Colors */
  --bg: #070707;
  --bg-card: #0e0e0e;
  --bg-modal: #0c0c0c;
  --fg: #F0EDE6;
  --fg-dim: rgba(240, 237, 230, 0.28);
  --fg-mid: rgba(240, 237, 230, 0.55);
  --accent: #C4A062;
  --accent-lo: rgba(196, 160, 98, 0.08); /* Project cards use 0.08, Hero uses 0.06. Normalizing to 0.08. */
  
  /* Borders */
  --border: rgba(240, 237, 230, 0.07);
  --border-h: rgba(196, 160, 98, 0.4);

  /* Typography */
  --font-d: 'Bebas Neue', sans-serif;
  --font-m: 'Space Mono', monospace;
  
  /* Animations */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Grid Tokens (Shared by Hero) */
  --grid-size: 88px;
  --grid-color: rgba(240, 237, 230, 0.02);
  --grid-color-active: rgba(196, 160, 98, 0.35);
  --grid-glow-size: 350px;
  
  /* Dynamic Variables */
  --mouseX: -1000px;
  --mouseY: -1000px;
}

@media (max-width: 768px) {
  :root {
    --grid-size: 44px;
    --grid-glow-size: 220px;
  }
}

html,
body {
  height: 100%;
  min-height: 100dvh;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-m);
  overflow-x: hidden;
  cursor: none;
  -webkit-font-smoothing: antialiased;
}

/* Restore cursor on touch devices */
@media (hover: none) {
  body {
    cursor: auto;
  }

  .cursor-dot,
  .cursor-ring {
    display: none !important;
  }
}

/* 2. GRAIN CANVAS — Animated Noise Overlay */
#grain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 998;
  mix-blend-mode: overlay;
  opacity: 0.055;
}

/* 3. CUSTOM CURSOR */
.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 5px;
  height: 5px;
  background: var(--fg);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1000;
}

.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(240, 237, 230, 0.4);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1000;
}

/* 4. FIXED CORNER LABELS */
.corner {
  position: fixed;
  font-family: var(--font-m);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
  z-index: 20;
  opacity: 0;
  line-height: 1.8;
  user-select: none;
}

.corner a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s;
}

.corner a:hover {
  color: var(--fg);
}

.c-tl {
  top: 32px;
  left: 40px;
}

.c-tr {
  top: 32px;
  right: 40px;
  text-align: right;
}

.c-bl {
  bottom: 38px;
  left: 40px;
}

.c-br {
  bottom: 38px;
  right: 40px;
  text-align: right;
}

@media (max-width: 768px) {
  .c-tl { top: 20px; left: 20px; }
  .c-tr { top: 20px; right: 20px; }
  .c-bl { bottom: 24px; left: 20px; }
  .c-br { bottom: 24px; right: 20px; }
  .corner { font-size: 8px; }
}

/* 5. COMMON UTILITIES */
.progress-line {
  position: fixed;
  top: 0;
  left: 0;
  height: 1px;
  width: 0%;
  background: linear-gradient(to right, transparent, var(--accent), transparent);
  z-index: 100;
}