/* ================================================================
   RESET & BASE STYLES
================================================================ */

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

  html {
    scroll-behavior: smooth;
  }

  body {
    background: var(--bg);
    color: var(--t-body);
    font-family: var(--sans);
    font-weight: 300;
    line-height: 1.72;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    cursor: none;
  }

  img {
    display: block;
    max-width: 100%;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  ul {
    list-style: none;
  }

  button,
  input,
  select,
  textarea {
    font-family: var(--sans);
  }
}

@layer base {
  /* ── Scrollbar ─────────────────────────────────────────────── */
  ::-webkit-scrollbar {
    width: 3px;
  }

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

  ::-webkit-scrollbar-thumb {
    background: var(--gold);
    border-radius: 3px;
  }

  /* ── Grain Overlay ─────────────────────────────────────────── */
  body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9900;
    pointer-events: none;
    opacity: .022;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 180px;
    background-repeat: repeat;
  }

  /* ── Custom Cursor ─────────────────────────────────────────── */
  #cdot,
  #cring {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    border-radius: 50%;
  }

  #cdot {
    z-index: 9999;
    width: 8px;
    height: 8px;
    background: var(--gold);
    transform: translate(-50%, -50%);
    transition: width .18s var(--spring), height .18s var(--spring), background .2s;
    will-change: transform;
  }

  #cring {
    z-index: 9998;
    width: 36px;
    height: 36px;
    border: 1.5px solid rgba(138, 102, 32, .46);
    transform: translate(-50%, -50%);
    transition: width .32s var(--ease), height .32s var(--ease), border-color .24s;
    will-change: transform;
  }

  body.hov {
    & #cdot {
      width: 13px;
      height: 13px;
      background: var(--gold-mid);
    }

    & #cring {
      width: 52px;
      height: 52px;
      border-color: var(--gold);
    }
  }

  /* Hide custom cursor on touch devices */
  @media (hover: none), (pointer: coarse) {
    #cdot,
    #cring {
      display: none;
    }

    body {
      cursor: auto;
    }
  }

  /* ── Skip Link (Accessibility) ─────────────────────────────── */
  .skip-link {
    position: absolute;
    top: -100%;
    left: 16px;
    z-index: 10000;
    padding: 12px 24px;
    background: var(--gold);
    color: #FAF5ED;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    border-radius: 0 0 var(--r) var(--r);
    transition: top .2s var(--ease);

    &:focus {
      top: 0;
      outline: 2px solid var(--gold-mid);
      outline-offset: 2px;
    }
  }

  /* ── Focus Styles (Accessibility) ──────────────────────────── */
  :focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
  }

  /* ── Reduced Motion (Accessibility — WCAG 2.2) ────────────── */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}