/* Raketenflug: Flugbahn am Desktop, kompakte Höhenzeile auf dem Handy. */

/* Handy: eine Zeile in der Aufgabenkarte */
.flight-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.flight-line__icon {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  color: var(--color-primary);
}

.flight-line__icon .rocket__flame {
  stroke: var(--color-flame);
}

.flight-line__text strong {
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
}

.flight-line__score {
  margin-left: auto;
}

/* Desktop: Flugbahn als eigene Spalte */
.layout__track {
  display: none;
}

@media (min-width: 56rem) {
  .task__stats {
    display: none;
  }

  .layout__track {
    grid-area: track;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0 0 var(--space-5) var(--space-4);
  }

  .flight__track {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
  }

  /* Gestrichelte Umlaufbahn und darüber der schon geflogene Teil in Tinte */
  .flight__track::before,
  .flight__track::after {
    content: '';
    position: absolute;
    left: var(--track-line-x);
    bottom: var(--track-inset);
    border-left: var(--track-line-width) dashed var(--color-border);
  }

  .flight__track::before {
    top: var(--track-inset);
  }

  .flight__track::after {
    height: calc(var(--progress) * (100% - 2 * var(--track-inset)));
    border-left-style: solid;
    border-left-color: var(--color-primary);
  }

  .flight__stations {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .flight__station {
    position: absolute;
    left: calc(var(--track-line-x) - var(--station-dot-size) / 2 + var(--track-line-width) / 2);
    bottom: calc(var(--track-inset) + var(--position) * (100% - 2 * var(--track-inset)));
    /* Nur ein Punkt mit etwas Fläche drumherum, damit der Tooltip gut erreichbar ist */
    width: var(--station-hit-size);
    height: var(--station-hit-size);
    margin-left: calc((var(--station-dot-size) - var(--station-hit-size)) / 2);
    transform: translateY(50%);
    color: var(--color-text-muted);
  }

  /* Punkt auf der Bahn */
  .flight__station::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--station-dot-size);
    height: var(--station-dot-size);
    border: var(--border-width-strong) solid var(--color-border);
    border-radius: var(--radius-dot);
    background: var(--color-bg);
    transform: translate(-50%, -50%);
  }

  .flight__station--reached::before {
    border-color: var(--color-primary);
    background: var(--color-primary);
  }

  /* Erreichte Stationen und das nächste Ziel tragen eine Beschriftung */
  .flight__station--labeled {
    right: 0;
    width: auto;
    height: auto;
    min-height: var(--station-hit-size);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: var(--space-2);
    padding-left: calc(var(--station-hit-size) + var(--space-2));
    color: var(--color-text);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-tight);
  }

  .flight__station--labeled::before {
    left: calc(var(--station-hit-size) / 2);
  }

  .flight__station-name {
    font-weight: var(--font-weight-semibold);
  }

  .flight__station-label,
  .flight__station-distance {
    color: var(--color-text-muted);
  }

  /* Das nächste Ziel hebt sich ab: eigene Zeile „Nächstes Ziel“, Name in Tinte */
  /* Der Textblock wächst vom Punkt nach oben, damit er tiefer liegende Stationen nicht verdeckt */
  .flight__station--next {
    flex-direction: column;
    align-items: flex-start;
    transform: translateY(calc(var(--station-hit-size) / 2));
  }

  .flight__station--next::before {
    top: auto;
    bottom: calc(var(--station-hit-size) / 2);
    border-color: var(--color-primary);
    transform: translate(-50%, 50%);
  }

  .flight__station--next .flight__station-name {
    color: var(--color-primary);
    font-size: var(--font-size-sm);
  }

  .flight__rocket {
    position: absolute;
    left: calc(var(--track-line-x) + var(--track-line-width) / 2 - var(--rocket-size) / 2);
    bottom: calc(var(--track-inset) + var(--to) * (100% - 2 * var(--track-inset)));
    width: var(--rocket-size);
    height: var(--rocket-size);
    color: var(--color-primary);
    transform: translateY(35%);
  }

  .flight__rocket--launch {
    animation: rocket-launch var(--flight-duration) cubic-bezier(0.3, 0.6, 0.3, 1) both;
  }

  .flight__rocket-icon {
    width: 100%;
    height: 100%;
  }

  .flight__rocket-icon .rocket__flame {
    stroke: var(--color-flame);
    transform-box: fill-box;
    transform-origin: top center;
    transform: scaleY(var(--flame-scale));
    animation: flame-flicker var(--flicker-duration) ease-in-out infinite alternate;
  }

  .flight__rocket--flame-0 { --flame-scale: var(--flame-scale-0); }
  .flight__rocket--flame-1 { --flame-scale: var(--flame-scale-1); }
  .flight__rocket--flame-2 { --flame-scale: var(--flame-scale-2); }
  .flight__rocket--flame-3 { --flame-scale: var(--flame-scale-3); }
  .flight__rocket--flame-4 { --flame-scale: var(--flame-scale-4); }

  .flight__footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    padding-top: var(--space-3);
    border-top: var(--border-width) solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
  }

  .flight__altitude {
    display: flex;
    flex-direction: column;
    color: var(--color-text);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
  }

  .flight__label {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
  }
}

@keyframes rocket-launch {
  from {
    bottom: calc(var(--track-inset) + var(--from) * (100% - 2 * var(--track-inset)));
  }

  to {
    bottom: calc(var(--track-inset) + var(--to) * (100% - 2 * var(--track-inset)));
  }
}

@keyframes flame-flicker {
  to {
    transform: scaleY(calc(var(--flame-scale) * var(--flicker-strength)));
  }
}

/* Wer weniger Bewegung möchte, sieht die Rakete direkt an ihrer neuen Position. */
@media (prefers-reduced-motion: reduce) {
  .flight__rocket--launch,
  .flight__rocket-icon .rocket__flame {
    animation: none;
  }
}