/* ─── 23. Word Scroll / About Intro ─────────────────────────────────── */

/* sr-only helper (shared accessibility utility) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Section wrapper — fixed bg creates the scroll parallax */
.wss {
  position: relative;
  background-attachment: fixed;
  background-size: cover;
  background-position: var(--wss-bg-x, 50%) var(--wss-bg-y, 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 85vh;
  padding: var(--sp-xl) var(--sp-lg);
  padding: 12rem 0;
}

/* Gradient white wash so text stays readable */
.wss__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,.92) 0%,
    rgba(255,255,255,.82) 50%,
    rgba(255,255,255,.92) 100%
  );
  pointer-events: none;
  z-index: 0;
}

/* Centred content column */
.wss__container {
  position: relative;
  z-index: 1;
  max-width: 900px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-md);
}

/* "I Build [reel]" heading — one line on desktop */
.wss__heading {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.5rem, 6vw, 5.5rem);
  line-height: 1.2;
  color: var(--clr-text);
}

.wss__head-prefix {
  white-space: nowrap;
}

/* Ticker window — 3 rows tall, top & bottom thirds masked out */
.wss__ticker {
  display: inline-block;
  overflow: hidden;
  height: 3.6em; /* 3 × line-height (1.2em) */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent        0%,
    rgba(0,0,0,.45)   20%,
    black             33.33%,
    black             66.66%,
    rgba(0,0,0,.45)   80%,
    transparent      100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent        0%,
    rgba(0,0,0,.45)   20%,
    black             33.33%,
    black             66.66%,
    rgba(0,0,0,.45)   80%,
    transparent      100%
  );
}

/* Continuously scrolling column */
.wss__ticker-inner {
  display: flex;
  flex-direction: column;
  will-change: transform;
}

/* Each word row — exactly one line tall */
.wss__ticker-item {
  display: block;
  height: 1.2em;
  line-height: 1.2em;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 600;
}

/* Tagline body copy */
.wss__body {
  max-width: 80ch;
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
  line-height: 1.85;
  color: var(--clr-text-muted);
  margin-top: 4rem;
  text-align: center;
}

/* CTA gradient pill */
.wss__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  margin-top: var(--sp-xs);
  padding: 0.72em 1.6em;
  border-radius: 100px;
  background: var(--clr-primary);
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.wss__cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(168, 112, 219, 0.38);
}

/* ↗ NE arrow — character is already diagonal, no rotation needed */
.wss__arrow {
  display: inline-block;
  font-style: normal;
  font-size: 1.15em;
  line-height: 1;
}

/* --- Word Scroll responsive ------------------------------------------------ */

/* Tablet: cut the massive 12rem padding down to something reasonable */
@media (max-width: 992px) {
  .wss          { padding: 5rem var(--sp-lg); min-height: unset; }
  .wss__heading { font-size: clamp(2rem, 5vw, 3.5rem); }
}

/* Mobile: disable iOS fixed-bg bug, centre layout */
@media (max-width: 768px) {
  .wss {
    background-attachment: scroll;
    padding: 4rem var(--sp-md);
  }
  .wss__container { align-items: center; text-align: center; }
  .wss__heading {
    font-size: clamp(1.8rem, 7vw, 2.6rem);
    justify-content: center;
  }
  .wss__body {
    text-align: center;
    margin-top: 0;
  }
}

/* Small phones: stack heading to two lines to prevent overflow */
@media (max-width: 480px) {
  .wss { padding: 3rem var(--sp-md); }
  .wss__heading {
    flex-direction: column;
    align-items: center;
    white-space: normal;
    font-size: clamp(1.6rem, 9vw, 3rem);
    gap: 0.1em;
  }
  .wss__head-prefix { white-space: normal; }
  .wss__ticker      { height: 1.3em; }
}