/*
 * CHAPTER 8: DIGITAL GROWTH & MARKETING
 * Infinite marquees, velocity scaling
 */

.chapter-8 {
  position: relative;
  width: 100vw;
  padding: 15vh 0;
  z-index: var(--z-content);
  background: var(--bg-deep); /* Solid reset */
  overflow: hidden;
}

.c8-header {
  text-align: center;
  margin-bottom: 8rem;
}

.c8-title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 6rem);
  letter-spacing: -0.03em;
  margin-bottom: 1rem;
}

.c8-subtitle {
  color: var(--text-muted);
  font-size: var(--text-manifesto);
  max-width: 600px;
  margin: 0 auto;
}

/* Marquees */
.c8-marquee-wrapper {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  transform: rotate(-3deg); /* Dramatic cinematic angle */
}

.c8-marquee-track {
  display: flex;
  white-space: nowrap;
  width: max-content;
  will-change: transform;
}

.c8-marquee-item {
  font-family: var(--font-display);
  font-size: clamp(4rem, 8vw, 8rem);
  font-weight: 700;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.1);
  padding: 0 2rem;
  transition: color 0.4s, -webkit-text-stroke 0.4s;
}

/* Alternate row styling */
.c8-marquee-track.reverse .c8-marquee-item {
  -webkit-text-stroke: 1px var(--accent-primary);
}

.c8-marquee-item:hover {
  color: var(--text-pure);
  -webkit-text-stroke: 1px var(--text-pure);
}