/* ---------- Stickers & doodles (real asset images) ---------- */
.sticker {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.3));
}

.sticker--xs { width: clamp(2.75rem, 4vw, 4rem); }
.sticker--sm { width: clamp(3.5rem, 5vw, 5.5rem); }
.sticker--md { width: clamp(4.5rem, 7vw, 7.5rem); }
.sticker--lg { width: clamp(6rem, 9vw, 10rem); }

/* ---------- Generic section shell ---------- */
.section {
  position: relative;
  padding: var(--space-lg) var(--space-lg) var(--space-section);
}

.section__head {
  max-width: 60ch;
  margin-bottom: var(--space-lg);
}

.section__eyebrow {
  --tilt: -1deg;
  display: inline-block;
  margin-bottom: var(--space-sm);
  padding: 0.3em 0.8em;
  background: #0a0a0a;
  color: var(--color-accent-green-bright);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: rotate(var(--tilt));
}

.section__title {
  font-size: var(--text-display-sm);
  color: var(--color-text);
  text-shadow: 0 3px 0 rgba(10, 10, 10, 0.3);
}

.section__title .stroke {
  color: #0a0a0a;
  -webkit-text-stroke: 2px var(--color-accent-pink);
  text-shadow: none;
}

/* ---------- Reveal-on-scroll ----------
   --tilt lets a sticker-style element keep its resting rotation while it
   animates in; --reveal-d staggers siblings in a cascade (each step = 90ms). */
.reveal {
  opacity: 0;
  transform: rotate(var(--tilt, 0deg)) translateY(26px) scale(0.96);
  transition: opacity var(--duration-slow) var(--ease-out-expo),
    transform var(--duration-slow) var(--ease-out-expo);
  transition-delay: calc(var(--reveal-d, 0) * 90ms);
}

.reveal.is-visible {
  opacity: 1;
  transform: rotate(var(--tilt, 0deg)) translateY(0) scale(1);
}

/* ---------- Letter-by-letter reveal for big display headlines ----------
   JS wraps each character in a .letter span with --li (its index) and
   --lr (a small random rotation) so the word slams in like it's being
   stamped on, one letter at a time. */
.split-letters .letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.45em) rotate(calc(var(--lr, 0) * 1deg)) scale(0.7);
  transition: opacity 420ms var(--ease-out-back), transform 420ms var(--ease-out-back);
  transition-delay: calc(var(--li, 0) * 35ms);
}

.split-letters.is-visible .letter {
  opacity: 1;
  transform: translateY(0) rotate(0deg) scale(1);
}

@media (max-width: 640px) {
  .section {
    padding-inline: var(--space-md);
  }
}