/* WHERE TO NEXT — the fork in the road.
   Not three cards. Three full-bleed destinations stacked on one another; the
   pointer (or a swipe) wipes between them from the side the option sits on,
   and the choice rewrites the accent, the road colour and the stop name that
   the car is driving towards. */

.fork {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: grid;
  align-content: center;
  gap: clamp(1.6rem, 4vh, 3rem);
  padding-block: var(--chapter);
  color: var(--offwhite);
  overflow: clip;
  isolation: isolate;
}

.fork__stack { position: absolute; inset: 0; z-index: -2; background: var(--deep); }
.fork__stack .fork__pic {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  clip-path: inset(0 0 0 100%);
  transition: clip-path .78s var(--ease-drive);
}
.fork__stack .fork__pic.is-on { clip-path: inset(0 0 0 0); }
/* the option below the current one wipes in from the other side */
.fork__stack .fork__pic.from-left { clip-path: inset(0 100% 0 0); }
/* the head and the options are white, and the photographs behind them run from
   a dark jeep to a white-hot beach — the scrim has to hold in both */
.fork__stack::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, rgba(4,32,42,.82) 0%, rgba(4,32,42,.42) 52%, rgba(4,32,42,.62) 100%),
    linear-gradient(to top, rgba(4,32,42,.6), rgba(4,32,42,0) 42%);
}

.fork__head {
  position: relative;
  padding-inline: var(--gut);
  max-width: var(--maxw);
  margin-inline: auto;
  width: 100%;
}
.fork__head h2 {
  font-size: var(--t-xl);
  line-height: .84;
}
.fork__head p {
  margin-top: .9rem;
  max-width: 36ch;
  color: rgba(250, 248, 242, .78);
}

.fork__opts {
  position: relative;
  list-style: none;
  margin: 0;
  padding-inline: var(--gut);
  max-width: var(--maxw);
  margin-inline: auto;
  width: 100%;
  display: grid;
  gap: clamp(.2rem, 1vh, .7rem);
}

.fork__opt {
  --pad: clamp(.2rem, 1.4vh, .9rem);
  display: flex;
  align-items: baseline;
  gap: clamp(.7rem, 2vw, 1.6rem);
  width: 100%;
  padding-block: var(--pad);
  text-align: left;
  color: inherit;
  border-bottom: 2px solid rgba(250, 248, 242, .2);
  transition: border-color .4s linear, padding-inline-start .5s var(--ease-drive);
}
.fork__opt b {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.6rem, 9.5vw, 7.5rem);
  line-height: .92;
  letter-spacing: -.05em;
  text-transform: uppercase;
  color: rgba(250, 248, 242, .58);
  text-shadow: 0 12px 40px rgba(4, 32, 42, .6);
  transition: color .45s var(--ease-brake), transform .5s var(--ease-drive);
  transform-origin: left center;
}
.fork__opt i {
  font-style: normal;
  font-size: var(--t-micro);
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(250, 248, 242, .0);
  transition: color .4s linear, transform .5s var(--ease-drive);
  transform: translateX(-10px);
}
.fork__opt .go {
  margin-inline-start: auto;
  width: 30px; height: 14px;
  flex: none;
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity .3s linear, transform .5s var(--ease-drive);
  align-self: center;
}

.fork__opt:hover, .fork__opt:focus-visible { border-color: rgba(250, 248, 242, .45); }
.fork__opt[aria-selected='true'] {
  border-color: var(--accent);
  padding-inline-start: clamp(.4rem, 2vw, 2rem);
}
.fork__opt[aria-selected='true'] b { color: var(--offwhite); }
.fork__opt[aria-selected='true'] i { color: var(--sun); transform: none; }
.fork__opt[aria-selected='true'] .go { opacity: 1; transform: none; }

.fork__hint {
  padding-inline: var(--gut);
  max-width: var(--maxw);
  margin-inline: auto;
  width: 100%;
  font-size: var(--t-micro);
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(250, 248, 242, .55);
}

/* --------------------------------------------------------------- the branch */

/* The chosen route gets one panel. Its photograph is revealed through a
   road-shaped mask that sweeps open along the curve — the same gesture the
   road itself makes, never a vertical fade. */

.branch {
  position: relative;
  z-index: 1;
  padding-block: var(--chapter);
}
.branch__grid {
  display: grid;
  gap: clamp(1.8rem, 5vw, 4rem);
  align-items: center;
}

.branch__media {
  position: relative;
  aspect-ratio: 5 / 4;
  border-radius: 18px;
  overflow: hidden;
  background: var(--sky);
}
.branch__media .branch__pic {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .45s linear;
}
.branch__media .branch__pic.is-on { opacity: 1; }

/* The reveal is a curtain shaped like the road, not a mask: one very thick
   stroke painted in the page colour lies over the photograph and is pulled off
   along its own curve. Works everywhere, and it is the road's own gesture. */
.branch__curtain {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%; height: 100%;
  pointer-events: none;
}
.branch__curtain path {
  fill: none;
  stroke: var(--paper);
  stroke-width: 460;
  stroke-linecap: round;
  stroke-dasharray: var(--len, 1200) var(--len, 1200);
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.25s var(--ease-drive);
}
.branch__media.is-open .branch__curtain path {
  stroke-dashoffset: var(--len, 1200);
}

.branch__panel { display: none; }
.branch__panel.is-on { display: block; }

.branch__copy h2 {
  font-size: var(--t-xl);
  line-height: .82;
  letter-spacing: -.045em;
}
.branch__copy h2 span { display: block; }
.branch__copy h2 span:nth-child(2) { padding-inline-start: .5em; color: var(--accent); }

.branch__lines {
  margin: 1.6rem 0 2rem;
  display: grid;
  gap: .2rem;
  font-family: var(--display);
  font-size: clamp(1.05rem, 2.1vw, 1.55rem);
  line-height: 1.18;
  text-transform: uppercase;
  color: var(--ink-70);
}
.branch__lines span {
  opacity: 0;
  transform: translateX(-6%);
  transition: opacity .3s linear, transform .55s var(--ease-drive);
}
.branch.is-live .branch__lines span { opacity: 1; transform: none; }
.branch.is-live .branch__lines span:nth-child(2) { transition-delay: .07s; }
.branch.is-live .branch__lines span:nth-child(3) { transition-delay: .14s; }
.branch.is-live .branch__lines span:nth-child(4) { transition-delay: .21s; }

.branch__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.6rem;
}
.branch__meta b {
  font-size: var(--t-micro);
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
  padding: .45rem .75rem;
  border-radius: 999px;
  background: var(--ink-08);
  color: var(--ink-70);
}

@media (min-width: 940px) {
  .branch__grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
  .fork__opts { gap: 0; }
}
@media (max-width: 939px) {
  .branch__grid > .branch__copy { order: -1; }
}

@media (prefers-reduced-motion: reduce) {
  .fork__stack .fork__pic { transition-duration: .01ms; }
  .branch__curtain { display: none; }
  .branch__lines span { opacity: 1; transform: none; }
}