/* Overview hero and the 3D runway of the coming weeks. */
/* Hero */
.hero {
  display: grid;
  gap: 22px;
  margin-bottom: 28px;
}
.hero-date {
  margin: 0 0 6px;
  font-weight: 650;
  color: var(--ink-3);
}
.hero h1 {
  margin: 0;
}
.hero-count {
  display: inline-block;
  min-width: 1.1ch;
  color: var(--accent);
}
.hero-sub {
  margin: 12px 0 0;
  font-size: 19px;
  color: var(--ink-2);
  max-width: 60ch;
}

/* The runway: a tilted plane of the coming weeks. Labels stand up so they stay legible. */
.runway {
  --plane-tilt: 58deg;
  position: relative;
  height: 330px;
  border-radius: var(--radius-board);
  overflow: hidden;
  perspective: 1100px;
  perspective-origin: 50% 12%;
  background:
    radial-gradient(
      120% 90% at 50% 0%,
      rgb(90 112 255 / 0.35),
      transparent 60%
    ),
    linear-gradient(180deg, #1a2a78 0%, #0e1845 58%, #0a1133 100%);
  box-shadow:
    var(--shadow-3),
    inset 0 1px 0 rgb(255 255 255 / 0.12);
  isolation: isolate;
}
.runway-stage {
  position: absolute;
  inset: 70px 56px 34px;
  transform-style: preserve-3d;
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform 500ms var(--ease-out);
}
.runway-plane {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--plane-tilt));
  transform-origin: 50% 100%;
  border-radius: 14px;
  background:
    repeating-linear-gradient(
      90deg,
      rgb(255 255 255 / 0.07) 0 1px,
      transparent 1px calc(100% / var(--span, 21))
    ),
    linear-gradient(180deg, rgb(255 255 255 / 0.1), rgb(255 255 255 / 0.02));
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.14),
    0 40px 60px -20px rgb(0 0 0 / 0.6);
}
.runway-week,
.runway-today,
.runway-dest,
.pin {
  position: absolute;
  left: var(--x, 0%);
}
.runway-week {
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgb(255 255 255 / 0.22);
  transform-style: preserve-3d;
}
.runway-week b {
  position: absolute;
  bottom: -2px;
  left: 6px;
  transform: rotateX(calc(-1 * var(--plane-tilt)));
  transform-origin: 0 100%;
  color: rgb(255 255 255 / 0.72);
  font: 650 12.5px/1 var(--body);
  white-space: nowrap;
}
.runway-today {
  top: -6px;
  bottom: -6px;
  width: 6px;
  margin-left: -3px;
  border-radius: 3px;
  background: var(--marker);
  box-shadow: 0 0 22px 4px rgb(255 210 63 / 0.55);
}
.runway-dest {
  top: 0;
  bottom: 0;
  width: 44px;
  margin-left: -22px;
  background: linear-gradient(
    90deg,
    transparent,
    rgb(147 164 255 / 0.55),
    transparent
  );
  box-shadow: 0 0 40px 10px rgb(147 164 255 / 0.25);
}

.pin {
  --h: calc(34px + min(var(--n, 1), 5) * 12px);
  bottom: 16%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  text-decoration: none;
  color: var(--ink);
}
.pin:nth-of-type(3n + 2) {
  bottom: 56%;
}
.pin:nth-of-type(3n) {
  bottom: 84%;
}
.pin-stem,
.pin-head,
.pin-card {
  position: absolute;
  left: 0;
  bottom: 0;
  transform-origin: 50% 100%;
  transform: rotateX(calc(-1 * var(--plane-tilt)));
}
.pin-stem {
  width: 2px;
  height: var(--h);
  margin-left: -1px;
  background: linear-gradient(180deg, #fff, rgb(255 255 255 / 0.2));
}
.pin-head {
  transform: rotateX(calc(-1 * var(--plane-tilt)))
    translateY(calc(-1 * var(--h))) translateX(-50%);
  display: grid;
  gap: 1px;
  padding: 6px 10px 7px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 22px -8px rgb(0 0 0 / 0.55);
  white-space: nowrap;
  transition:
    transform 260ms var(--ease-spring),
    box-shadow 260ms;
}
.pin-day {
  font: 650 11.5px/1.1 var(--body);
  color: #5a687d;
}
.pin-label {
  font: 760 14px/1.15 var(--display);
  color: #0f1a2b;
}
.pin-dest .pin-head {
  background: var(--marker);
}
.pin-dest .pin-label,
.pin-dest .pin-day {
  color: var(--marker-ink);
}
.pin-busy .pin-head {
  box-shadow:
    0 10px 22px -8px rgb(0 0 0 / 0.55),
    0 0 0 3px rgb(147 164 255 / 0.7);
}
.pin-card {
  transform: rotateX(calc(-1 * var(--plane-tilt)))
    translateY(calc(-1 * var(--h) - 58px)) translateX(-50%) scale(0.96);
  display: grid;
  gap: 6px;
  width: 300px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff;
  color: #0f1a2b;
  font: 500 13.5px/1.35 var(--body);
  box-shadow: 0 18px 40px -10px rgb(0 0 0 / 0.6);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 180ms,
    transform 220ms var(--ease-out);
  z-index: 3;
}
.pin-line b {
  display: block;
  font-weight: 700;
  color: #2c46e0;
  font-size: 12px;
}
.pin:hover {
  z-index: 5;
}
.pin:hover .pin-head {
  transform: rotateX(calc(-1 * var(--plane-tilt)))
    translateY(calc(-1 * var(--h) - 10px)) translateX(-50%) scale(1.06);
  box-shadow: 0 18px 30px -10px rgb(0 0 0 / 0.7);
}
.pin:hover .pin-card {
  opacity: 1;
  transform: rotateX(calc(-1 * var(--plane-tilt)))
    translateY(calc(-1 * var(--h) - 66px)) translateX(-50%) scale(1);
}

@media (prefers-reduced-motion: no-preference) {
  .runway-plane {
    animation: plane-settle 1100ms var(--ease-out) backwards;
  }
  .pin {
    animation: pin-rise 620ms var(--ease-spring) backwards;
    animation-delay: calc(500ms + var(--i, 0) * 45ms);
  }
  .runway-today {
    animation: today-glow 2.6s ease-in-out 1.2s infinite alternate;
  }
  @keyframes plane-settle { from { transform: rotateX(4deg) translateZ(-160px); } }
  @keyframes pin-rise { from { transform: translateZ(-60px) scale(0.2); } }
  @keyframes today-glow {
    to {
      box-shadow: 0 0 34px 8px rgb(255 210 63 / 0.75);
    }
  }
}

/* Phones: the runway flattens away; the dated list in the rail carries the same content. */
@media (max-width: 719px) {
  .runway {
    display: none;
  }
  .hero-sub {
    font-size: 17px;
  }
}