/* transport: VERVOER.leo — fly options, the greyed-out teleporter, max flight time or land options. */

/* room below the window so a freshly opened follow-up can scroll clear of Henk's bubble */
.scr-transport .tr-win { margin-bottom: 120px; }

.scr-transport .tr-head > * + * { margin-top: 6px; }
.scr-transport .tr-head .q-title { text-wrap: balance; }
.scr-transport .tr-head .q-sub { text-wrap: pretty; }

/* ---------- hero: sky strip with plane / train ---------- */
.scr-transport .tr-hero {
  position: relative;
  height: 84px;
  overflow: hidden;
  background: var(--lav-l);
  border: var(--bw) solid var(--ink);
}

.scr-transport .tr-cloud {
  position: absolute;
  display: flex;
  animation: transport-drift calc(4800ms / var(--speed)) steps(4) infinite alternate;
}

.scr-transport .tr-cloud--a { left: 7%; top: 9px; }
.scr-transport .tr-cloud--b { right: 9%; top: 32px; animation-delay: calc(-2400ms / var(--speed)); }

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

.scr-transport .tr-ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 12px;
  background: var(--mint);
  border-top: var(--bw) solid var(--ink);
}

.scr-transport .tr-vehicle {
  position: absolute;
  left: 50%;
  display: flex;
}

.scr-transport .tr-plane { top: 16px; margin-left: -32px; }
.scr-transport .tr-train { bottom: 12px; margin-left: -26px; }

/* idle motion lives on the inner sprite, the switch animation on the wrapper */
.scr-transport .tr-hero[data-mode="air"] .tr-plane > svg {
  animation: bob calc(900ms / var(--speed)) steps(2) infinite;
}

.scr-transport .tr-hero[data-fly="liever-niet"] .tr-plane > svg {
  animation: transport-nervous calc(500ms / var(--speed)) steps(2) infinite;
}

@keyframes transport-nervous {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(2px, 1px) rotate(-4deg); }
}

.scr-transport .tr-hero[data-mode="air"] .tr-train { visibility: hidden; transform: translateX(-220px); }
.scr-transport .tr-hero[data-mode="land"] .tr-plane { visibility: hidden; transform: translate(220px, -60px); }

.scr-transport .tr-hero:not(.is-static)[data-mode="land"] .tr-plane { animation: transport-fly-away var(--t-slow) steps(6) both; }
.scr-transport .tr-hero:not(.is-static)[data-mode="land"] .tr-train { animation: transport-roll-in var(--t-slow) steps(6) both; }
.scr-transport .tr-hero:not(.is-static)[data-mode="air"] .tr-plane { animation: transport-fly-in var(--t-slow) steps(6) both; }
.scr-transport .tr-hero:not(.is-static)[data-mode="air"] .tr-train { animation: transport-roll-away var(--t-slow) steps(6) both; }

@keyframes transport-fly-away {
  from { transform: translate(0, 0); visibility: visible; }
  to { transform: translate(220px, -60px); visibility: hidden; }
}

@keyframes transport-fly-in {
  from { transform: translate(-220px, 30px); visibility: visible; }
  to { transform: translate(0, 0); visibility: visible; }
}

@keyframes transport-roll-in {
  from { transform: translateX(-220px); visibility: visible; }
  to { transform: translateX(0); visibility: visible; }
}

@keyframes transport-roll-away {
  from { transform: translateX(0); visibility: visible; }
  to { transform: translateX(220px); visibility: hidden; }
}

/* ---------- fly options ---------- */
.scr-transport .tr-opts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.scr-transport .tr-opt {
  justify-content: flex-start;
  gap: 10px;
  min-height: 58px;
  padding: 6px 10px 6px 8px;
  text-align: left;
  background: var(--paper);
}

.scr-transport .tr-opt:active { background: var(--shade); }

.scr-transport .tr-opt__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
}

.scr-transport .tr-opt__label {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.25;
  text-wrap: balance;
  overflow-wrap: anywhere;
  -webkit-hyphens: manual;
  hyphens: manual;
}

.scr-transport .tr-opt__check {
  display: flex;
  flex: none;
  visibility: hidden;
}

.scr-transport .tr-opt[aria-pressed="true"] { background: var(--pink); }
.scr-transport .tr-opt[aria-pressed="true"] .tr-opt__check { visibility: visible; }

/* ---------- teleporter: looks disabled, still answers ---------- */
.scr-transport .tr-tele.is-disabled {
  color: var(--lav-d);
  background: var(--shade);
  border-style: dashed;
  border-color: var(--lav-d);
  box-shadow: none;
}

.scr-transport .tr-tele.is-disabled:active { transform: none; background: var(--shade); }

.scr-transport .tr-tele__tag {
  flex: none;
  padding: 2px 5px;
  border: 2px solid var(--lav-d);
  font-size: var(--fs-xs);
}

.scr-transport .tr-tele-wrap { position: relative; }

/* The teleporter "says" its note in a bubble on top of itself: it covers only its own (fake) button, never one
   of the real answers, and lets taps through so she can try again. */
.scr-transport .tr-tele__note {
  position: absolute;
  inset: 0 0 0 44px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 0;
  pointer-events: none;
}

.scr-transport .tr-tele__bubble {
  position: relative;
  max-width: 100%;
  padding: 6px 10px;
  background: var(--yellow);
  border: var(--bw) solid var(--ink);
  box-shadow: 3px 3px 0 0 var(--ink);
  font-size: var(--fs-s);
  line-height: 1.25;
}

/* little pixel tail pointing left, at the sparkle on the button */
.scr-transport .tr-tele__bubble::before {
  content: "";
  position: absolute;
  left: -9px;
  top: calc(50% - 6px);
  width: 6px;
  height: 9px;
  background:
    linear-gradient(var(--ink), var(--ink)) 3px 0 / 3px 9px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 0 3px / 3px 3px no-repeat;
}

/* ---------- follow-up ---------- */
.scr-transport .tr-follow {
  padding-top: 14px;
  background: repeating-linear-gradient(90deg, var(--lav-d) 0 3px, transparent 3px 9px) 0 0 / 100% 3px no-repeat;
}

.scr-transport .tr-follow > * + * { margin-top: 10px; }
.scr-transport .tr-follow.tr-follow--in { animation: transport-in var(--t-med) steps(3) both; }

@keyframes transport-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

.scr-transport .tr-follow__title {
  font-size: var(--fs-m);
  font-weight: 700;
  line-height: 1.25;
}

.scr-transport .tr-follow__sub { margin-top: 2px; font-size: var(--fs-s); }

.scr-transport .tr-hours {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.scr-transport .tr-hour {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 56px;
  padding: 4px 0;
  color: var(--ink);
  background: var(--paper);
  border: var(--bw) solid var(--ink);
  box-shadow: 3px 3px 0 0 var(--ink);
  cursor: pointer;
}

.scr-transport .tr-hour:active { transform: translate(3px, 3px); box-shadow: none; }
.scr-transport .tr-hour[aria-pressed="true"] { background: var(--pink); }

.scr-transport .tr-hour__num {
  font-family: var(--font-ui);
  font-size: 20px;
  line-height: 1;
}

.scr-transport .tr-hour__unit {
  font-size: 13px;
  line-height: 1;
}

.scr-transport .tr-hint {
  min-height: 1.35em;
  font-size: var(--fs-s);
}

.scr-transport .tr-land {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.scr-transport .tr-land__opt {
  justify-content: flex-start;
  gap: 6px;
  min-height: 48px;
  padding: 4px 8px;
  min-width: 0;
  text-align: left;
}

.scr-transport .tr-land__label {
  min-width: 0;
  overflow-wrap: anywhere;
  -webkit-hyphens: manual;
  hyphens: manual;
}

.scr-transport .tr-land__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
}