/* Riviera pieces: the place-name marquee, the coast map. */

.marquee {
  overflow: hidden;
  padding-block: var(--s5);
  border-top: 1px solid var(--rule-strong);
}

.marquee p {
  max-width: none;
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 10vw, 9rem); /* unslop-ignore: display line, same register as the name */
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.marquee i {
  color: var(--accent);
  font-weight: 300;
}

/* Rolling state, set by marquee.js. Without it the names wrap and nothing is cut off. */

.marquee-track.rolling {
  display: flex;
  width: max-content;
  will-change: transform;
}

.marquee-track.rolling p {
  padding-right: 0.3em;
  line-height: 1;
  white-space: nowrap;
}

.coast {
  display: block;
  width: 100%;
  max-width: 900px;
  overflow: visible;
}

.coast .shore,
.coast .route {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-dasharray: 1;
}

.coast .route {
  stroke: var(--accent);
  stroke-width: 1;
}

.coast circle {
  fill: var(--accent);
  transform-box: fill-box;
  transform-origin: center;
}

.coast text {
  /* A paper halo keeps labels readable where a line passes behind them. */
  paint-order: stroke;
  stroke: var(--paper);
  stroke-width: 3px;
  stroke-linejoin: round;
  fill: var(--ink);
  font-family: var(--font-mono);
  font-size: 9px;
}

.coast .geo {
  fill: var(--accent);
  font-size: 7.5px;
}

.coast .sea-name {
  fill: var(--accent);
  font-family: var(--font-serif);
  font-size: 20px;
  font-style: italic;
  letter-spacing: 0.2em;
}

/* The shore draws first, then the route, then the places appear in career order. */

.motion [data-reveal] .shore,
.motion [data-reveal] .route {
  stroke-dashoffset: 1;
}

.motion [data-reveal].in .shore {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 2200ms cubic-bezier(0.6, 0, 0.2, 1) 300ms;
}

.motion [data-reveal].in .route {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 2600ms cubic-bezier(0.6, 0, 0.2, 1) 1600ms;
}

.motion [data-reveal] .place {
  opacity: 0;
}

.motion [data-reveal].in .place {
  opacity: 1;
  transition: opacity 400ms ease-out calc(1700ms + var(--i) * 500ms);
}

.motion [data-reveal] .place circle {
  transform: scale(0);
}

.motion [data-reveal].in .place circle {
  transform: scale(1);
  transition: transform 500ms var(--spring) calc(1700ms + var(--i) * 500ms);
}

@keyframes drift {
  to {
    transform: translateX(-12px);
  }
}

.motion .coast .sea-name {
  animation: drift 4s ease-in-out infinite alternate;
}

/* Small screens: the labels inside the map are too small to read, so a list carries them. */

.coast-legend {
  display: none;
}

.coast-legend li {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s3);
  justify-content: space-between;
  padding-block: var(--s2);
  border-top: 1px solid var(--rule);
}

@media (max-width: 720px) {
  .coast .place text {
    display: none;
  }

  .coast .sea-name {
    font-size: 22px;
    letter-spacing: 0.1em;
  }

  .coast .sea-geo {
    font-size: 16px;
  }

  .coast-legend {
    display: block;
  }
}

/* France map: training stops are filled, MOABI missions are rings, home is the large dot. */

.map-title {
  font-size: var(--t14);
  font-weight: 500;
}

.coast.france {
  max-width: 640px;
}

.coast .mission circle {
  fill: var(--paper);
  stroke: var(--accent);
  stroke-width: 2;
}

.coast .home circle {
  fill: var(--ink);
}

.coast-legend.always {
  display: block;
  max-width: 640px;
}

@media (min-width: 1100px) {
  .map-row {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: var(--s7);
    align-items: center;
  }

  .coast-legend.always {
    max-width: none;
  }
}

/* Nine places on the France map: a shorter stagger so the last one is not a long wait. */

.motion [data-reveal].in .france .place,
.motion [data-reveal].in .france .place circle {
  transition-delay: calc(1700ms + var(--i) * 220ms);
}