/*
 * Toussus-le-Noble vu du ciel, à la lumière du moment. Les couleurs viennent de tokens.css, une palette par lumière ;
 * la carte est en mètres, les feux gardent la même taille à l'écran quel que soit le cadrage.
 */
.aerodrome {
  --map-ground: var(--color-map-day-ground);
  --map-mow: var(--color-map-day-mow);
  --map-strip: var(--color-map-day-strip);
  --map-runway: var(--color-map-day-runway);
  --map-paint: var(--color-map-day-paint);
  --map-taxiway: var(--color-map-day-taxiway);
  --map-taxi-line: var(--color-map-day-taxi-line);
  --map-apron: var(--color-map-day-apron);
  --map-roof: var(--color-map-day-roof);
  --map-ridge: var(--color-map-day-ridge);
  --map-road: var(--color-map-day-road);

  position: relative;
  grid-area: scene;
  overflow: hidden;
  background: var(--map-ground);
}

.aerodrome[data-phase="crepuscule"] {
  --map-ground: var(--color-map-dusk-ground);
  --map-mow: var(--color-map-dusk-mow);
  --map-strip: var(--color-map-dusk-strip);
  --map-runway: var(--color-map-dusk-runway);
  --map-paint: var(--color-map-dusk-paint);
  --map-taxiway: var(--color-map-dusk-taxiway);
  --map-taxi-line: var(--color-map-dusk-taxi-line);
  --map-apron: var(--color-map-dusk-apron);
  --map-roof: var(--color-map-dusk-roof);
  --map-ridge: var(--color-map-dusk-ridge);
  --map-road: var(--color-map-dusk-road);
}

.aerodrome[data-phase="nuit"] {
  --map-ground: var(--color-map-night-ground);
  --map-mow: var(--color-map-night-mow);
  --map-strip: var(--color-map-night-strip);
  --map-runway: var(--color-map-night-runway);
  --map-paint: var(--color-map-night-paint);
  --map-taxiway: var(--color-map-night-taxiway);
  --map-taxi-line: var(--color-map-night-taxi-line);
  --map-apron: var(--color-map-night-apron);
  --map-roof: var(--color-map-night-roof);
  --map-ridge: var(--color-map-night-ridge);
  --map-road: var(--color-map-night-road);
}

.aerodrome-map {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.map-ground {
  fill: var(--map-ground);
}

.map-strip {
  fill: var(--map-strip);
}

.map-mow {
  fill: var(--map-mow);
}

.map-road {
  fill: var(--map-road);
}

.map-apron {
  fill: var(--map-apron);
}

.map-taxiway {
  fill: var(--map-taxiway);
}

.map-taxi-line {
  stroke: var(--map-taxi-line);
  stroke-width: 2;
}

.map-holding {
  stroke: var(--map-taxi-line);
  stroke-width: 0.7;
}

.map-holding--dashed {
  stroke-dasharray: 1.2 0.9;
}

.map-roof {
  fill: var(--map-roof);
}

.map-ridge {
  fill: var(--map-ridge);
}

.map-runway {
  fill: var(--map-runway);
}

.map-paint {
  fill: var(--map-paint);
}

.map-designation {
  fill: var(--map-paint);
  font: 600 13px var(--font-sans);
}

/* Les feux : allumés du crépuscule à l'aube, d'un point de même taille à toutes les échelles. */
.map-lights {
  display: none;
}

.aerodrome:not([data-phase="jour"]) .map-lights {
  display: inline;
}

.map-light {
  stroke-width: 5;
  stroke-linecap: round;
}

.map-light--bord {
  stroke: var(--color-map-light-edge);
}

.map-light--seuil {
  stroke: var(--color-map-light-threshold);
}

.map-light--fin {
  stroke: var(--color-map-light-end);
}

.map-light--voie {
  stroke: var(--color-map-light-taxi);
  stroke-width: 4;
}

.aerodrome[data-phase="crepuscule"] .map-lights {
  opacity: 0.75;
}

/* La manche à air pointe sous le vent ; plus il souffle, plus elle se tend et bat vite. */
.windsock-circle {
  fill: none;
  stroke: var(--map-paint);
  stroke-width: 1.1;
  stroke-dasharray: 4.6 2.47;
}

.windsock-band {
  fill: var(--color-map-sock);
}

.windsock-band--light {
  fill: var(--color-map-sock-band);
}

.windsock-pole {
  fill: var(--color-map-pole);
}

.aerodrome:not([data-phase="jour"]) .windsock-pole {
  fill: var(--map-paint);
}

.windsock-cloth {
  transform-box: fill-box;
  transform-origin: 0% 50%;
  scale: 1;
}

.aerodrome[data-wind="calme"] .windsock-cloth {
  scale: 0.4 0.85;
}

.aerodrome[data-wind="faible"] .windsock-cloth {
  scale: 0.75 1;
}

/* Les avions : celui qui décolle, et ceux de l'école sur l'aire de trafic. */
.plane-body {
  fill: var(--color-map-plane);
}

.plane-trim {
  fill: var(--color-map-plane-trim);
}

.plane-canopy,
.plane-fin {
  fill: var(--color-map-plane-canopy);
}

.plane-prop {
  fill: var(--color-map-plane-prop);
}

.plane-shadow > * {
  fill: var(--color-map-shadow);
}

.plane-beam {
  display: none;
  fill: var(--color-map-beam);
}

.aerodrome:not([data-phase="jour"]) .plane-beam {
  display: inline;
}

.plane-strobe {
  opacity: 0;
  fill: var(--color-map-strobe);
}

.plane-beacon {
  opacity: 0;
  fill: var(--color-map-beacon);
}

.aerodrome.is-gone [data-plane],
.aerodrome.is-gone [data-plane-shadow] {
  visibility: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  .aerodrome[data-wind="faible"] .windsock-cloth {
    animation: sock-flutter 2.4s ease-in-out infinite alternate;
  }

  .aerodrome[data-wind="soutenu"] .windsock-cloth {
    animation: sock-flutter 1.3s ease-in-out infinite alternate;
  }

  .aerodrome[data-wind="fort"] .windsock-cloth {
    animation: sock-flutter 0.7s ease-in-out infinite alternate;
  }

  .aerodrome.is-flying .plane-strobe {
    animation: plane-flash 1.2s linear infinite;
  }

  .aerodrome.is-flying .plane-beacon {
    animation: plane-flash 1.2s linear 0.6s infinite;
  }
}

@keyframes sock-flutter {
  from {
    transform: rotate(-4deg) scaleX(0.96);
  }
  to {
    transform: rotate(3deg) scaleX(1);
  }
}

@keyframes plane-flash {
  0%,
  7% {
    opacity: 1;
  }
  8%,
  100% {
    opacity: 0;
  }
}

@media (max-width: 60rem) {
  .aerodrome {
    height: 34svh;
    min-height: 14rem;
  }
}