/* =========================================
   RESET, BODY, NOISE OVERLAY, CURSOR, UTILS
   ========================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }
::-webkit-scrollbar { display: none; }
html { overflow-x: hidden; }
body { -ms-overflow-style: none; scrollbar-width: none; }

body {
  background-color: var(--silver);
  color: var(--void);
  font-family: var(--font-sans);
  width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  transition: filter 0.5s ease, background-color 0.5s ease;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.95" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)"/%3E%3C/svg%3E');
  opacity: 0.15;
  z-index: 999;
  pointer-events: none;
  mix-blend-mode: color-burn;
}

@media (hover: hover) and (pointer: fine) {
  body:not(.calm-mode),
  body:not(.calm-mode) * {
    cursor: none;
  }
}

/* --- Custom Cursor --- */
#cursor-block {
  position: fixed;
  top: 0; left: 0;
  width: 24px; height: 24px;
  background-color: #fff;
  mix-blend-mode: difference;
  z-index: 20000;
  pointer-events: none;
  transition:
    width 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    height 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    border-radius 0.3s,
    transform 0.1s;
  transform: translate(-50%, -50%);
}
#cursor-block.hovered { width: 120px; height: 120px; border-radius: 50%; }
#cursor-block.clicking { transform: translate(-50%, -50%) scale(0.5); background-color: var(--neon-orange); }

/* --- Utility Classes --- */
.gothic { font-family: var(--font-gothic); font-weight: normal; }
.mono { font-family: var(--font-mono); text-transform: uppercase; font-size: 0.85rem; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.container { padding: 4rem 5vw; position: relative; }
.border-top { border-top: 2px solid var(--void); }
.border-bottom { border-bottom: 2px solid var(--void); }