/* Base styles */
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;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

body {
  font-family: var(--font-family-body);
  color: var(--color-neutral-100);
  background-color: var(--color-yellowbg-100);
  background-repeat: repeat;
  background-image: url("../assets/noise40.webp");
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
  margin: 0;
  color: var(--color-neutral-100);
}

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

/* Icon styling */
.lucide {
  width: 24px;
  height: 24px;
  stroke-width: 2.5;
  stroke: currentColor;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Mac-like Dots Component */
.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 3px solid var(--color-neutral-100);
  display: inline-block;
}

.dot--red {
  background-color: var(--color-accent-red);
}

.dot--yellow {
  background-color: var(--color-accent-yellow);
}

.dot--green {
  background-color: var(--color-accent-green);
}


/* ── Scroll Reveal ── */

/* Block-level reveal (sections, cards, containers) */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0s);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Word-level reveal (used by JS on titles with [data-reveal-words]) */
.word {
  display: inline-block;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.word.active {
  opacity: 1;
  transform: translateY(0);
}