/* 05 SUNSET, and the end of the road.
   The vehicle keeps going: it shrinks into the frame while the road behind it
   narrows to a thread, and that thread becomes the rule under the last two
   lines of the site. */

.sunset {
  position: relative;
  z-index: 1;
}
.sunset__track { height: 250vh; }

.sunset__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #12313d;
  color: var(--offwhite);
}
.sunset__shot { position: absolute; inset: 0; z-index: 0; }
.sunset__shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 46% 54%;
}
.sunset__shot::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12,42,54,.72), rgba(12,42,54,.05) 52%);
}

.sunset__body {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--maxw);
  padding-inline: var(--gut);
  align-self: center;
  display: grid;
  gap: 1.1rem;
  justify-items: start;
}
.sunset__body h2 {
  font-size: var(--t-mega);
  line-height: .8;
  letter-spacing: -.05em;
  text-shadow: 0 20px 60px rgba(8, 32, 42, .45);
}
.sunset__body h2 span { display: block; }
.sunset__body h2 span:nth-child(2) { padding-inline-start: .42em; color: var(--sun); }
.sunset__body p { color: rgba(250, 248, 242, .84); max-width: 30ch; }

/* --- the finish --------------------------------------------------------- */

.finish {
  position: relative;
  z-index: 2;
  padding-block: clamp(4rem, 12vh, 8rem);
  text-align: center;
  background: var(--paper);
  overflow: hidden;
}
.finish__lines {
  display: grid;
  gap: .1rem;
  font-family: var(--display);
  font-size: var(--t-xl);
  line-height: .9;
  text-transform: uppercase;
  letter-spacing: -.04em;
  justify-items: center;
}
.finish__lines span:nth-child(2) { color: var(--accent); }

/* the road line arrives and settles into a rule under the words */
.finish__rule {
  width: min(560px, 78vw);
  height: 10px;
  margin: 1.5rem auto 2.2rem;
  overflow: visible;
}
.finish__rule path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: var(--len, 600);
  stroke-dashoffset: var(--len, 600);
  transition: stroke-dashoffset 1.4s var(--ease-drive);
}
.finish.is-live .finish__rule path { stroke-dashoffset: 0; }

.finish__note {
  margin-top: 1.6rem;
  color: var(--ink-52);
  font-size: var(--t-small);
}

@media (prefers-reduced-motion: reduce) {
  .sunset__track { height: auto; }
  .sunset__pin { position: static; height: 88svh; }
  .sunset__away { transform: translate(-50%, 0) scale(.55); }
  .finish__rule path { transition-duration: .01ms; stroke-dashoffset: 0; }
}