:root {
  /* Spacing variables for margins and padding */
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 3rem;
  --black: #000000;
  --white: #fcf7ed;
  --yellow: #f0f951;
  --purple: #5850c7;
  --olive: #504b39;
  --green: #00b76d;
  --red: #ff0000;
  --cream: #e6ecda;
  --font-primary: space-mono, mono;
  --font-secondary: nimbus-sans-condensed, sans-serif;
}

html {
  overflow-x: clip !important;
}

body {
  font-family: var(--font-primary);
  background-color: #000;
  color: var(--white);
  overflow-x: clip !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-secondary);
}

.d-none {
  display: none !important;
}

/* P tag: grass-like hover – letters lift and tilt, spring back */
p .split-char {
  display: inline-block;
  transform: translateY(0) rotate(0deg) scale(1);
  transform-origin: 50% 100%;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

p .split-char:hover {
  transform: translateY(-4px) rotate(-8deg) scale(1.6);
  transition-duration: 0s;
  transition-timing-function: ease-out;
  /* filter: blur(0.2px); */
  text-transform: uppercase;
  font-weight: bold;
  color: #5850c7;
}

/* Headings: split chars, smooth color change on hover (JS sets color from palette) */
h1 .split-char,
h2 .split-char,
h3 .split-char {
  display: inline-block;
  transition: color 0.2s ease;
}