/* Jornada fixa: estrada em perspectiva, trilho que preenche, ponto que
   percorre e etapas que acendem (--jp), como no eezyinn. */

.journey { --pin: 1; position: relative; }
.journey__sticky { position: relative; isolation: isolate; padding-block: 120px; overflow: clip; }

/* Estrada: linhas para o ponto de fuga e a faixa central correndo. */
.journey__road {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to top, var(--ink) 0%, color-mix(in srgb, var(--ink) 60%, transparent) 30%, transparent 62%);
  mask-image: linear-gradient(to top, var(--ink) 0%, color-mix(in srgb, var(--ink) 60%, transparent) 30%, transparent 62%);
}
.journey__road-lines line { stroke: color-mix(in srgb, var(--ink) 18%, transparent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.journey__road-edges line { stroke: color-mix(in srgb, var(--ink) 28%, transparent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.journey__road-center { stroke: color-mix(in srgb, var(--ink) 34%, transparent); stroke-width: 3; stroke-dasharray: 32 54; stroke-dashoffset: calc(var(--pin) * -640); vector-effect: non-scaling-stroke; }

/* Traços laranja cruzando o céu de tempos em tempos. */
.journey__sky { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.journey__shoot {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: 180px;
  height: 1.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--sun) 55%, transparent) 70%, var(--sun));
  opacity: 0;
  transform: rotate(var(--angle)) translate(0);
  transform-origin: 100% 50%;
}
.journey__shoot::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--sun);
  box-shadow: 0 0 10px 2px color-mix(in srgb, var(--sun) 55%, transparent);
  transform: translateY(-50%);
}
.journey__shoot--a { --x: 68%; --y: 12%; --angle: 152deg; }
.journey__shoot--b { --x: 30%; --y: 8%; --angle: 160deg; }
.journey__shoot--c { --x: 88%; --y: 34%; --angle: 147deg; }
.has-motion .journey__shoot { animation: shoot 11s linear infinite paused; }
.has-motion .journey__shoot--b { animation-duration: 14s; animation-delay: 4.5s; }
.has-motion .journey__shoot--c { animation-duration: 17s; animation-delay: 9s; }
.has-motion .journey__sky.is-inview .journey__shoot { animation-play-state: running; }
@keyframes shoot {
  0%, 88% { opacity: 0; transform: rotate(var(--angle)) translate(0); }
  89% { opacity: 1; }
  96% { opacity: 0.9; }
  100% { opacity: 0; transform: rotate(var(--angle)) translate(46vw); }
}

.journey__inner { position: relative; display: grid; gap: clamp(48px, 2rem + 4vw, 96px); }
.journey__head { display: grid; gap: 32px; }
.journey__copy { max-width: 34ch; font-size: 18px; color: var(--ink-soft); }

.journey__map { --p: 1; --jp: var(--p); }
.has-motion .journey__map { --p: 0; }
.journey__track { position: relative; }
.journey__phases { display: none; }
.journey__rail { position: absolute; left: 0.5rem; top: 0.75rem; bottom: 0.75rem; width: 1px; background: color-mix(in srgb, var(--ink) 30%, transparent); }
.journey__fill { position: absolute; inset: 0; background: var(--ink); transform-origin: center top; transform: scaleY(var(--jp)); }
.journey__dot { position: absolute; left: 0; top: calc(var(--jp) * 100%); translate: -50% -50%; box-shadow: 0 0 14px color-mix(in srgb, var(--sun) 55%, transparent); }
.journey__steps { display: grid; gap: 32px; margin: 0; padding: 0 0 0 48px; list-style: none; }
.journey__step {
  --r: clamp(0, calc((var(--jp) - var(--at)) * 30 + 1), 1);
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 2.5rem;
  opacity: calc(0.35 + var(--r) * 0.65);
  transition: opacity 0.3s var(--ease-out);
}
.journey__node {
  position: absolute;
  left: calc(-48px + 0.5rem);
  width: 0.625rem;
  height: 0.625rem;
  border: 1px solid color-mix(in srgb, var(--sun) calc(var(--r) * 100%), var(--ink));
  border-radius: 50%;
  background: color-mix(in srgb, var(--sun) calc(var(--r) * 100%), var(--warm));
  translate: -50%;
  transition: background-color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.journey__label { font-size: 22px; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; }
.journey__step.is-milestone .journey__label { padding: 2px 10px; border: 1px solid var(--ink); border-radius: 999px; font-size: 16px; }

@media (min-width: 900px) {
  /* Só a partir de 900 px a jornada fica fixa (como no eezyinn). */
  .has-motion .journey { --pin: 0; height: 300vh; }
  .has-motion .journey__sticky { position: sticky; top: 0; display: flex; align-items: center; min-height: 100svh; height: 100svh; padding-block: 104px 40px; }
  .journey__map { --steps: 7; --col: calc(100% / var(--steps)); }
  .has-motion .journey__map { --jp: min(1, calc(var(--pin) * 1.2)); }
  .journey__head { grid-template-columns: 8fr 4fr; align-items: end; gap: 40px; }
  .journey__copy { justify-self: end; }
  .journey__phases { display: grid; grid-template-columns: 3fr 4fr; margin-bottom: 32px; }
  .journey__phases span + span { padding-left: 16px; }
  .journey__rail { left: calc(var(--col) / 2); right: calc(var(--col) / 2); top: 1.8125rem; bottom: auto; width: auto; height: 1px; }
  .journey__fill { transform-origin: left center; transform: scaleX(var(--jp)); }
  .journey__dot { left: calc(var(--jp) * 100%); top: 0; }
  .journey__steps { grid-template-columns: repeat(var(--steps), minmax(0, 1fr)); gap: 0; padding: 0; }
  .journey__step { flex-direction: column; align-items: center; gap: 24px; padding-top: 1.5rem; text-align: center; }
  .journey__node { position: static; translate: none; }
  .journey__label { font-size: clamp(14px, 1.05vw, 20px); white-space: nowrap; }
}