/* ============================================================
   19-firstvisit — "Your First Visit, Minute by Minute" timeline.
   All selectors scoped under .sec-19-firstvisit.

   Design decision: section background is a flat var(--bone-2) band
   (not --white) — the spec's own type/color rules forbid flat white
   cards on a white section, and this section's cards are white.
   A subtly deeper bone tone + hairline top/bottom borders let it read
   as its own moment between 08-why and 09-team without breaking the
   "never a flat endless scroll" rhythm or the no-flat-white-on-white rule.
   ============================================================ */

.sec-19-firstvisit {
  background: var(--bone-2);
  border-top: 1px solid var(--line-bone);
  border-bottom: 1px solid var(--line-bone);
  position: relative;
}

.sec-19-firstvisit__head {
  text-align: center;
  margin-inline: auto;
}
.sec-19-firstvisit__head .eyebrow { justify-content: center; }
.sec-19-firstvisit__head h2 { margin-inline: auto; }
.sec-19-firstvisit__head p:not(.eyebrow) { margin-inline: auto; }

/* --- Timeline wrapper --- */
.sec-19-firstvisit__timeline {
  position: relative;
}

/* --- Track (the self-drawing line) ---
   Spans column centers of a 4-col grid: 12.5% .. 87.5%. Vertically
   centered on the dot row via top:0 + translateY(-50%) so it lines
   up exactly with .sec-19-firstvisit__dot (also top:0, translate -50%). */
.sec-19-firstvisit__track {
  position: absolute;
  top: 0;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  transform: translateY(-50%);
  z-index: 1;
}
.sec-19-firstvisit__track-base {
  position: absolute;
  inset: 0;
  background: var(--line-bone);
  border-radius: 2px;
}
.sec-19-firstvisit__track-fill {
  position: absolute;
  inset: 0;
  background: var(--accent);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1600ms var(--ease-out);
}
.sec-19-firstvisit__track-ball {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 14px var(--accent-glow);
  transform: translate(-50%, -50%);
  transition: left 1600ms var(--ease-out);
}
.sec-19-firstvisit__timeline.is-drawn .sec-19-firstvisit__track-fill {
  transform: scaleX(1);
}
.sec-19-firstvisit__timeline.is-drawn .sec-19-firstvisit__track-ball {
  left: 100%;
}

/* --- Stops grid --- */
.sec-19-firstvisit__stops {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 1rem + 1vw, 2rem);
  position: relative;
  padding-top: 2.75rem; /* room for dot + time marker above each card */
}

.sec-19-firstvisit__stop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Small pulse dot on the track at this stop; lights up in sequence as
   the draw passes it. Delays are fractions of the 1600ms draw matching
   this dot's position along the track (0, 1/3, 2/3, 1). */
.sec-19-firstvisit__dot {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--line-bone);
  z-index: 2;
  transition: background-color 300ms var(--ease-out), border-color 300ms var(--ease-out),
    box-shadow 300ms var(--ease-out);
}
.sec-19-firstvisit__stop:nth-child(1) .sec-19-firstvisit__dot { transition-delay: 0ms; }
.sec-19-firstvisit__stop:nth-child(2) .sec-19-firstvisit__dot { transition-delay: 500ms; }
.sec-19-firstvisit__stop:nth-child(3) .sec-19-firstvisit__dot { transition-delay: 1050ms; }
.sec-19-firstvisit__stop:nth-child(4) .sec-19-firstvisit__dot { transition-delay: 1550ms; }
.sec-19-firstvisit__timeline.is-drawn .sec-19-firstvisit__dot {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 6px var(--accent-glow);
}

/* Time marker: ghost-numeral language, but solid accent (not stroked) */
.sec-19-firstvisit__time {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 1.4rem + 2vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent);
  margin-bottom: 1rem;
}

.sec-19-firstvisit__card {
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  padding: 1.5rem 1.5rem 1.75rem;
  width: 100%;
  transition: box-shadow 400ms var(--ease-out), transform 400ms var(--ease-out);
}
.sec-19-firstvisit__card:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); }

.sec-19-firstvisit__card-title { font-size: var(--fs-h4); margin-bottom: 0.5rem; }
.sec-19-firstvisit__card-copy { color: var(--text-on-bone-dim); }

/* --- CTA --- */
.sec-19-firstvisit__cta {
  margin-top: clamp(3rem, 4vw, 4.5rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
.sec-19-firstvisit__cta-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h4);
}

/* --- Mobile (≤820px): vertical timeline down the left edge --- */
@media (max-width: 820px) {
  .sec-19-firstvisit__timeline { padding-left: 1.75rem; }

  /* The horizontal track (and its travelling ball) is replaced on mobile by one rail
     segment per stop, drawn from that stop's dot down to the NEXT stop's dot. The old
     single track ran the full height of the timeline, so it overshot the last dot and
     ended at the bottom of the last card. Segments end exactly at the last dot, whatever
     the copy length or width. */
  .sec-19-firstvisit__track { display: none; }

  .sec-19-firstvisit__stops { --fv-gap: clamp(2rem, 8vw, 2.75rem); }
  .sec-19-firstvisit__stop:not(:last-child)::before,
  .sec-19-firstvisit__stop:not(:last-child)::after {
    content: "";
    position: absolute;
    left: -1.75rem;           /* same x as the dot centre */
    top: 0.3rem;              /* same y as the dot centre */
    width: 2px;
    height: calc(100% + var(--fv-gap));
    transform: translateX(-50%);
    border-radius: 2px;
    z-index: 1;
  }
  .sec-19-firstvisit__stop:not(:last-child)::before { background: var(--line-bone); }
  .sec-19-firstvisit__stop:not(:last-child)::after {
    background: var(--accent);
    transform: translateX(-50%) scaleY(0);
    transform-origin: top;
    transition: transform 500ms var(--ease-out);
  }
  .sec-19-firstvisit__stop:nth-child(1)::after { transition-delay: 0ms; }
  .sec-19-firstvisit__stop:nth-child(2)::after { transition-delay: 500ms; }
  .sec-19-firstvisit__stop:nth-child(3)::after { transition-delay: 1000ms; }
  .sec-19-firstvisit__timeline.is-drawn .sec-19-firstvisit__stop:not(:last-child)::after {
    transform: translateX(-50%) scaleY(1);
  }

  .sec-19-firstvisit__stops {
    grid-template-columns: 1fr;
    gap: var(--fv-gap);
    padding-top: 0;
  }

  .sec-19-firstvisit__stop { align-items: stretch; }

  .sec-19-firstvisit__dot {
    top: 0.3rem;
    left: -1.75rem;
    transform: translate(-50%, -50%);
  }

  .sec-19-firstvisit__time { margin-bottom: 0.75rem; }
}

/* --- Reduced motion: fully drawn, no travel, no delays --- */
html.reduced-motion .sec-19-firstvisit__track-fill,
html.reduced-motion .sec-19-firstvisit__track-ball,
html.reduced-motion .sec-19-firstvisit__dot {
  transition: none !important;
}
html.reduced-motion .sec-19-firstvisit__track-fill { transform: scaleX(1); }
html.reduced-motion .sec-19-firstvisit__track-ball { left: 100%; }
html.reduced-motion .sec-19-firstvisit__dot {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 6px var(--accent-glow);
}
@media (max-width: 820px) {
  html.reduced-motion .sec-19-firstvisit__stop:not(:last-child)::after {
    transform: translateX(-50%) scaleY(1);
    transition: none;
  }
}