/* ============================================================
   sections/who.css
   "Who it's for" — left heading + two columns (FOR / NOT FOR).
   Below that a boundary paragraph and a centered closing line
   with the section's one hand-drawn gesture: an underline under
   "fit right in".
   Reveal animations are gated by `.screen--who.revealed`,
   added by IntersectionObserver in scripts/app.js.
   ============================================================ */

.screen--who {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8vh 6vw;
  border-top: 1px solid rgba(243, 237, 230, 0.09);
}

.who-top {
  display: flex;
  align-items: center;
  gap: 6vw;
}

.who-lists {
  flex: 1;
  display: flex;
  gap: 4vw;
}

.who-list {
  flex: 1;
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.screen--who.revealed .who-list { opacity: 1; transform: none; }
.screen--who.revealed .who-list--not { transition-delay: 0.12s; }

.who-list__label {
  display: block;
  font-family: "Neue Montreal", sans-serif;
  font-size: 0.85vw;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 2.2vh;
  margin-bottom: 2.6vh;
  border-bottom: 1px solid rgba(243, 237, 230, 0.12);
}

.who-list__items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.who-list__items li {
  display: flex;
  align-items: flex-start;
  gap: 0.85em;
  margin-bottom: 1.8vh;
  font-family: "Neue Montreal", sans-serif;
  line-height: 1.42;
}

.who-list__items li:last-child { margin-bottom: 0; }

.who-list--for li {
  color: var(--ink);
  font-size: 1.12vw;
}

.who-list--not li {
  color: rgba(161, 148, 138, 0.78);
  font-size: 0.96vw;
}

/* Hand-drawn green check used in the FOR column */
.check {
  flex: 0 0 auto;
  width: 1.15em;
  height: 0.95em;
  margin-top: 0.22em;
  overflow: visible;
}

.check path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The × glyph used in the NOT FOR column */
.x-mark {
  flex: 0 0 auto;
  width: 1em;
  font-size: 0.92em;
  color: rgba(161, 148, 138, 0.85);
  line-height: 1.55;
}

.who-bottom {
  margin: 5vh 0 0 40%;
}

.who-bound {
  margin: 0;
  padding-top: 2.6vh;
  max-width: 25em;
  border-top: 1px solid rgba(243, 237, 230, 0.12);
  font-family: "Neue Montreal", sans-serif;
  font-size: 0.94vw;
  line-height: 1.55;
  color: var(--muted);
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0.2s;
}

.screen--who.revealed .who-bound { opacity: 1; transform: none; }

.who-close {
  margin: 3vh 0 0;
  text-align: center;
  font-family: "Neue Montreal", sans-serif;
  font-weight: 400;
  font-size: 1.85vw;
  line-height: 1.42;
  color: var(--ink);
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0.45s;
}

.screen--who.revealed .who-close { opacity: 1; transform: none; }

/* Hand-drawn underline under "fit right in" — this section's one gesture */
.who-close .ul {
  position: relative;
  display: inline;
  white-space: nowrap;
}

.who-close .underline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.18em;
  width: 100%;
  height: 0.3em;
  overflow: visible;
  pointer-events: none;
  display: block;
}

.who-close .underline path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.screen--who.revealed .who-close .underline path {
  animation: draw 0.75s cubic-bezier(0.65, 0, 0.35, 1) 1s forwards;
}