/* The hero does not fade out. As the page starts moving, the photograph is
   driven up and out of frame while the starting road line grows down out of it
   and hands the visitor over to the journey. */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: clip;
  color: var(--offwhite);
  background: var(--deep);
}

.hero__frame {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  will-change: transform;
}
.hero__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 62% 46%;
}
.hero__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(200deg, rgba(6,44,58,.62) 0%, rgba(6,44,58,.12) 46%, rgba(6,44,58,0) 68%),
    linear-gradient(to top, rgba(6,44,58,.66), rgba(6,44,58,0) 44%);
}

.hero__body {
  position: relative;
  z-index: 2;
  align-self: end;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 0 var(--gut) clamp(2.6rem, 7vh, 5.4rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
}

.hero__title {
  font-size: var(--t-mega);
  line-height: .82;
  letter-spacing: -.045em;
  text-shadow: 0 18px 60px rgba(4, 30, 40, .38);
}
.hero__title span { display: block; }
.hero__title .l2 { padding-inline-start: clamp(.6rem, 7vw, 6.5rem); }

.hero__sub {
  font-family: var(--display);
  font-size: clamp(1rem, 1.9vw, 1.5rem);
  line-height: 1.12;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--sky);
  margin: 0;
}
.hero__sub em { font-style: normal; color: var(--sun); }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .85rem;
}

.hero__aside {
  display: grid;
  gap: clamp(1.2rem, 3vh, 2rem);
  align-content: end;
}

@media (min-width: 900px) {
  .hero__body {
    grid-template-columns: minmax(0, 1.35fr) minmax(240px, .65fr);
    align-items: end;
  }
  .hero__aside {
    justify-items: end;
    text-align: right;
    padding-bottom: clamp(3.5rem, 9vh, 6.5rem);
  }
}

/* --- the word that runs off the edge ------------------------------------ */

.hero__ticker {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(.2rem, 1vh, 1rem);
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  opacity: .16;
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.hero__ticker div {
  display: flex;
  width: max-content;
  gap: 2.4rem;
  font-family: var(--display);
  font-size: clamp(3rem, 9vw, 8rem);
  line-height: .84;
  text-transform: uppercase;
  letter-spacing: -.04em;
  animation: hero-roll 26s linear infinite;
}
@keyframes hero-roll { to { transform: translateX(-50%); } }

/* --- start marker + the first metres of road ---------------------------- */

/* Where the road begins. It sits between the two columns of the hero rather
   than under the buttons, and the first journey anchor uses the same x, so the
   line the visitor sees growing here is literally the start of the route. */
.hero__start {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 0;
  width: 3px;
  height: clamp(78px, 15vh, 150px);
  pointer-events: none;
}
.hero__start i {
  position: absolute;
  left: 50%; top: 0;
  transform: translate(-50%, -100%);
  display: flex;
  align-items: center;
  gap: .45rem;
  font-style: normal;
  font-size: var(--t-micro);
  font-weight: 800;
  letter-spacing: .24em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--sun);
  padding-bottom: .8rem;
}
.hero__start i::before {
  content: '';
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--sun);
  box-shadow: 0 0 0 0 rgba(255, 200, 61, .55);
  animation: start-ping 2.4s var(--ease-brake) infinite;
}
.hero__start svg { width: 100%; height: 100%; overflow: visible; }
.hero__start path {
  fill: none;
  stroke: var(--sun);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: var(--len, 150);
  stroke-dashoffset: var(--len, 150);
  animation: start-grow 1.05s .35s var(--ease-drive) forwards;
}
@keyframes start-grow { to { stroke-dashoffset: 0; } }
@keyframes start-ping {
  0%   { box-shadow: 0 0 0 0 rgba(255, 200, 61, .5); }
  70%  { box-shadow: 0 0 0 14px rgba(255, 200, 61, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 200, 61, 0); }
}

/* --- the small print under the hero ------------------------------------- */

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.4rem;
  font-size: var(--t-micro);
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(250, 248, 242, .74);
}
.hero__meta span { display: inline-flex; align-items: center; gap: .45rem; }
.hero__meta span::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sun);
}

/* on a single-column hero the middle is where the buttons are */
@media (max-width: 899px) {
  /* The label sits on top of the start line, and a 78–150px line lifted it
     level with the buttons: on a phone where the two buttons share a row it
     sat on START THE TRIP. A short stub puts the label in the band under the
     pickup/delivery line, right where the road leaves the frame; the body
     keeps that band free. */
  .hero__start { left: 78%; height: 22px; }
  .hero__body { padding-bottom: 5.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__ticker div { animation: none; }
  .hero__start path { animation: none; stroke-dashoffset: 0; }
  .hero__start i::before { animation: none; }
}