/* 01 AIRPORT — the arrival.
   Motion idea for this chapter only: the destination marker *becomes* the
   photograph. A circle centred on the pin grows until it fills the frame, so
   the picture opens out of the route rather than fading up into it. */

.airport {
  position: relative;
  z-index: 1;
  padding-block: var(--chapter);
}

.airport__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.airport__media { position: relative; }

.airport__plate {
  position: relative;
  aspect-ratio: 4 / 3.15;
  border-radius: 20px;
  overflow: hidden;
  background: var(--sky);
  box-shadow: var(--shadow-card);
}
.airport__plate img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* opened by airport.js — the pin is the centre of the circle */
  clip-path: circle(var(--open, 0%) at var(--ox, 22%) var(--oy, 76%));
  transition: clip-path 1.15s var(--ease-brake);
}
.airport__plate::before {
  content: '';
  position: absolute;
  z-index: 2;
  left: var(--ox, 22%); top: var(--oy, 76%);
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  background: var(--sun);
  box-shadow: 0 0 0 5px rgba(255, 200, 61, .28);
  transition: opacity .4s linear .5s, transform .6s var(--ease-brake);
}
.airport__plate.is-open::before { opacity: 0; transform: scale(2.6); }

/* The kerbside frame rides slightly against the scroll. It hangs outside the
   main plate — which clips its own photograph for the circular open — so it is
   a sibling of that plate, not a child of it. */
.airport__inset {
  position: absolute;
  right: -2%;
  bottom: -10%;
  width: 44%;
  aspect-ratio: 5 / 4;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  outline: 7px solid var(--paper);
  will-change: transform;
}
.airport__inset img { width: 100%; height: 100%; object-fit: cover; }

.airport__copy { position: relative; z-index: 2; }
.airport__copy h2 { font-size: var(--t-xl); }
.airport__copy h2 em { font-style: normal; color: var(--accent); }

.airport__tag {
  display: inline-grid;
  gap: .05rem;
  margin-bottom: 1.4rem;
  font-family: var(--display);
  font-size: clamp(1.1rem, 2.4vw, 1.75rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink);
}
.airport__tag b {
  font-weight: 400;
  display: block;
  transform: translateX(-8%);
  opacity: 0;
  transition: transform .6s var(--ease-drive), opacity .35s linear;
}
.airport.is-live .airport__tag b { transform: none; opacity: 1; }
.airport.is-live .airport__tag b:nth-child(2) { transition-delay: .10s; }
.airport.is-live .airport__tag b:nth-child(3) { transition-delay: .20s; }
.airport__tag b:last-child { color: var(--accent); }

.airport__list {
  list-style: none;
  margin: 1.6rem 0 2rem;
  padding: 0;
  display: grid;
  gap: .55rem;
  max-width: 30ch;
}
.airport__list li {
  display: flex;
  gap: .7rem;
  align-items: baseline;
  font-weight: 500;
  color: var(--ink-70);
}
.airport__list li::before {
  content: '';
  flex: none;
  width: 18px; height: 3px;
  border-radius: 2px;
  background: var(--accent);
  transform: translateY(-4px);
}

@media (min-width: 940px) {
  .airport__grid { grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); }
  .airport__media { padding-right: 8%; }
  .airport__copy { padding-inline-start: clamp(0px, 3vw, 3rem); }
}
@media (max-width: 939px) {
  .airport__inset { right: 0; width: 42%; bottom: -8%; }
  .airport__media { margin-bottom: 3.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .airport__plate img { transition-duration: .01ms; }
  .airport__tag b { transform: none; opacity: 1; }
}