/* The logo before the blog's title, in the style its host names:
   .up-host.is-empty, is-stamp, is-orbit, is-ring, is-board, is-stop, is-steps,
   is-sky or is-pass.
   Colours come from the site's palette; the admin's preview sets the same names. */
.up-host { display: inline-flex; align-items: center; gap: 12px; position: relative; color: var(--heading); }
.up-host a, .up-host a:hover { color: inherit; text-decoration: none; }
.up-home { position: relative; z-index: 3; display: inline-grid; } /* above the boarding pass, which slides out from behind it */
.up { position: relative; flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; margin: -2px 0; }
.up > * { grid-area: 1 / 1; }
.up-pic { position: relative; display: block; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.up-empty { background: var(--tile, #edf0f9); }
.up-title { position: relative; }

/* Every style's parts are hidden unless the host's style is theirs. */
.up-stamp, .up-trail, .up-ring, .up-flap, .up-arm, .up-pin, .up-now, .up-legend,
.up-sky, .up-pass, .up-time, .up-steps { display: none; }

/* Passport stamp */
.is-stamp .up { width: 52px; height: 52px; margin: -8px 0; }
.is-stamp .up-pic { width: 32px; height: 32px; transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.is-stamp .up-stamp { display: block; width: 100%; height: 100%; overflow: visible; animation: up-spin 24s linear infinite; }
.up-stamp text { font: 700 9.6px/1 system-ui, -apple-system, sans-serif; fill: var(--hover, #d81a23); }
.up-stamp circle { fill: none; stroke: var(--hover, #d81a23); stroke-width: 1; stroke-dasharray: 2 2.4; opacity: .55; }
.is-stamp:hover .up-stamp, .is-stamp:focus-within .up-stamp { animation-duration: 5s; }
.is-stamp:hover .up-pic, .is-stamp:focus-within .up-pic { transform: rotate(-12deg) scale(1.08); }
@keyframes up-spin { to { transform: rotate(360deg); } }

/* Orbit */
.is-orbit .up { width: 44px; height: 44px; margin: -4px 0; }
.is-orbit .up-pic { width: 34px; height: 34px; }
.is-orbit .up::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--muted, #736563) 45%, transparent); }
.is-orbit .up-trail { display: block; position: absolute; inset: -1px; border-radius: 50%; opacity: 0;
  background: conic-gradient(from 0deg, transparent 0 70%, color-mix(in srgb, var(--hover, #d81a23) 70%, transparent) 100%);
  -webkit-mask: radial-gradient(circle, transparent 0 calc(50% - 2px), #000 calc(50% - 1.5px));
          mask: radial-gradient(circle, transparent 0 calc(50% - 2px), #000 calc(50% - 1.5px)); }
.is-orbit .up-arm { display: block; position: absolute; inset: 0; transform: rotate(50deg); }
.up-plane { position: absolute; left: 50%; top: -7px; width: 14px; height: 14px; margin-left: -7px; fill: var(--hover, #d81a23); transform: rotate(90deg); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .2)); }
.is-orbit.fly .up-arm { animation: up-lap 1.6s cubic-bezier(.45, .05, .3, 1) forwards; }
.is-orbit.fly .up-trail { animation: up-lap-trail 1.6s cubic-bezier(.45, .05, .3, 1) forwards; }
@keyframes up-lap { from { transform: rotate(50deg); } to { transform: rotate(410deg); } }
@keyframes up-lap-trail { 0% { opacity: 0; transform: rotate(50deg); } 15%, 70% { opacity: 1; } 100% { opacity: 0; transform: rotate(410deg); } }

/* Continent ring: --ring-day and --ring-night are set on .up from the places. */
.is-ring .up { width: 42px; height: 42px; margin: -3px 0; transition: transform .8s cubic-bezier(.3, 1.3, .5, 1); }
.is-ring .up-ring { display: block; position: absolute; inset: 0; border-radius: 50%; background: var(--ring-day, var(--muted, #736563)); }
.is-ring .up-pic { width: 34px; height: 34px; box-shadow: 0 0 0 2.5px var(--page, #fff); transition: transform .8s cubic-bezier(.3, 1.3, .5, 1); }
.is-ring:hover .up, .is-ring:focus-within .up { transform: rotate(120deg); }
.is-ring:hover .up-pic, .is-ring:focus-within .up-pic { transform: rotate(-120deg); }
.up-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; background: var(--day); }
.is-ring .up-legend { display: flex; gap: 12px; position: absolute; left: 0; top: calc(100% + 10px); white-space: nowrap; font-size: 13px; font-weight: 500;
  color: var(--text, #463a38); padding: 6px 12px; border-radius: 999px; z-index: 5; pointer-events: none; opacity: 0; transform: translateY(-4px); transition: .25s; }
.is-ring:hover .up-legend, .is-ring:focus-within .up-legend { opacity: 1; transform: none; }

/* Departure board: the line across the picture only shows as it flips. */
.is-board .up-pic { width: 38px; height: 38px; }
.is-board .up-flap { display: block; position: absolute; left: 1px; top: 1px; width: 38px; height: 19px; overflow: hidden; border-radius: 19px 19px 0 0; transform-origin: 50% 100%; }
.is-board .up-flap img { display: block; width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.is-board .up::after { content: ""; position: absolute; left: 3px; right: 3px; top: 50%; height: 1.5px; margin-top: -.75px; border-radius: 1px;
  background: rgba(0, 0, 0, .55); box-shadow: 0 1px 0 rgba(255, 255, 255, .25); opacity: 0; transition: opacity .2s; }
.is-board.flip .up::after { opacity: 1; }
.is-board.flip .up-flap { animation: up-flap .55s cubic-bezier(.5, 0, .6, 1); }
@keyframes up-flap { 0% { transform: none; } 50% { transform: perspective(80px) rotateX(-90deg); filter: brightness(.5); } 100% { transform: none; } }
.up-name { white-space: nowrap; }
.up-name .ch { position: relative; white-space: pre; }
.up-name.city { color: var(--hover, #d81a23); }
.up-name .ch.turn { color: transparent; }
.up-name .ch.turn::after { content: attr(data-c); position: absolute; left: 50%; top: 0; transform: translateX(-50%); color: var(--hover, #d81a23); }

/* Last stop */
.is-stop .up { width: 40px; height: 40px; border-radius: 50%; padding: 3px; }
.is-stop .up-pic { width: 32px; height: 32px; }
.is-stop .up-pin { display: grid; place-items: center; position: absolute; right: -3px; bottom: -3px; width: 17px; height: 17px; border-radius: 50%;
  background: var(--page, #fff); font-size: 11px; line-height: 1; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.up-pin i { width: 7px; height: 7px; border-radius: 50%; background: var(--hover, #d81a23); }
.is-stop .up-pin::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--hover, #d81a23); opacity: 0; animation: up-ping 2.6s ease-out infinite; }
@keyframes up-ping { 0% { transform: scale(.6); opacity: .9; } 70%, 100% { transform: scale(1.5); opacity: 0; } }
.is-stop .up-name, .is-sky .up-name, .is-pass .up-name { display: inline-block; }
.is-stop .up-name, .is-stop .up-now, .is-sky .up-name, .is-sky .up-time, .is-pass .up-name { transition: opacity .3s, transform .35s cubic-bezier(.3, 1.3, .5, 1); }
.is-stop .up-now { display: block; position: absolute; left: 0; top: 50%; margin-top: -15px; opacity: 0; transform: translateY(8px); pointer-events: none; font-weight: 600; font-size: 15px; line-height: 18px; color: var(--text, #463a38); white-space: nowrap; }
.up-now small { display: block; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--hover, #d81a23); line-height: 12px; }
.is-stop:hover .up-name, .is-stop.open .up-name, .is-stop:focus-within .up-name, .is-sky:hover .up-name, .is-sky.open .up-name { opacity: 0; transform: translateY(-8px); }
.is-stop:hover .up-now, .is-stop.open .up-now, .is-stop:focus-within .up-now, .is-sky:hover .up-time, .is-sky.open .up-time { opacity: 1; transform: none; pointer-events: auto; }

/* Footsteps: left, right, left… out from the logo under the title. */
.is-steps .up-steps { display: block; position: absolute; left: 0; right: 0; bottom: -13px; height: 10px; pointer-events: none; } /* steps past the title are hidden by mark.js, not clipped */
.up-steps i { position: absolute; left: calc(var(--i) * 17px + 2px); top: 0; width: 6px; height: 10px; opacity: 0; transform: rotate(90deg); }
.up-steps i.past { display: none; } /* beyond the end of the title */
.up-steps i:nth-child(even) { top: 5px; }
.up-steps svg { display: block; width: 100%; height: 100%; fill: color-mix(in srgb, var(--muted, #736563) 70%, transparent); }
.is-steps.walk .up-steps i { animation: up-step 2.4s ease-out both; animation-delay: calc(var(--i) * .16s); }
@keyframes up-step { 0% { opacity: 0; transform: rotate(90deg) scale(.6); } 12% { opacity: 1; transform: rotate(90deg); } 55% { opacity: .9; } 100% { opacity: 0; } }

/* Sun & moon: noon at the top, midnight at the bottom, morning on the left. */
.is-sky .up { width: 44px; height: 44px; margin: -4px 0; }
.is-sky .up-pic { width: 34px; height: 34px; }
.is-sky .up-sky { display: block; position: absolute; inset: 0; border-radius: 50%; transform: rotate(var(--sky)); transition: transform 1.2s cubic-bezier(.3, 1.2, .5, 1);
  border: 1px dashed color-mix(in srgb, var(--muted, #736563) 35%, transparent); }
.up-body { position: absolute; left: 50%; top: -5px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #ffe27a, #f5a300); box-shadow: 0 0 8px 2px rgba(245, 163, 0, .55); }
.up-sky.night .up-body { background: #f1ecdc; box-shadow: inset -3px -1px 0 0 #c4bca4, 0 0 7px 1px rgba(241, 236, 220, .45); }
.is-sky:hover .up-sky { transform: rotate(calc(var(--sky) + 360deg)); }
.is-sky .up-time { display: block; position: absolute; left: 0; top: 50%; margin-top: -15px; opacity: 0; transform: translateY(8px);
  font-weight: 600; font-size: 15px; line-height: 18px; color: var(--text, #463a38); white-space: nowrap; }
.up-time small { display: block; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--hover, #d81a23); line-height: 12px; }
.up-clock { font-variant-numeric: tabular-nums; }

/* Boarding pass: a ticket slides out from behind the logo over the title. */
.is-pass .up-pass { display: flex; align-items: stretch; position: absolute; left: 18px; top: 50%; height: 38px; margin-top: -19px; border-radius: 10px;
  white-space: nowrap; color: var(--text, #463a38); font-size: 14px; font-weight: 600; line-height: 16px; letter-spacing: 0;
  clip-path: inset(0 100% 0 0 round 10px); opacity: 0; transition: clip-path .45s cubic-bezier(.3, 1, .4, 1), opacity .2s; z-index: 2; pointer-events: none; }
.is-pass:hover .up-pass, .is-pass.open .up-pass, .is-pass:focus-within .up-pass { clip-path: inset(0 0 0 0 round 10px); opacity: 1; pointer-events: auto; }
.is-pass:hover .up-name, .is-pass.open .up-name, .is-pass:focus-within .up-name { opacity: 0; transform: translateX(12px); }
.up-pass-stub { display: grid; place-items: center; width: 44px; padding-left: 18px; border-right: 1.5px dashed color-mix(in srgb, var(--muted, #736563) 45%, transparent); position: relative; }
.up-pass-stub::before, .up-pass-stub::after { content: ""; position: absolute; right: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--page, #fff); }
.up-pass-stub::before { top: -6px; }
.up-pass-stub::after { bottom: -6px; }
.up-pass-stub svg { width: 14px; height: 14px; fill: var(--hover, #d81a23); transform: rotate(90deg); }
.up-pass-main { display: flex; flex-direction: column; justify-content: center; padding: 0 16px 0 12px; }
.up-pass-main small { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--hover, #d81a23); line-height: 12px; }
.up-pass-main b { font-weight: 700; color: var(--heading, #2a1b19); }

/* Glass, as the globe's controls */
.is-stop .up, .is-ring .up-legend, .is-pass .up-pass {
  background: color-mix(in srgb, var(--page, #fff) 62%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid color-mix(in srgb, #fff 55%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 70%, transparent), 0 10px 36px rgba(20, 38, 48, .12), 0 1px 3px rgba(20, 38, 48, .08);
}
.is-stop .up { box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 70%, transparent), 0 4px 14px rgba(20, 38, 48, .12), 0 1px 3px rgba(20, 38, 48, .08); }

@media (prefers-color-scheme: dark) {
  :root:not([data-night="off"]) .is-ring .up-ring { background: var(--ring-night, var(--muted, #736563)); }
  :root:not([data-night="off"]) .up-legend i { background: var(--night); }
  :root:not([data-night="off"]) .is-stop .up, :root:not([data-night="off"]) .is-ring .up-legend, :root:not([data-night="off"]) .is-pass .up-pass {
    border-color: rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 10px 36px rgba(0, 0, 0, .45);
  }
}

@media (prefers-reduced-motion: reduce) {
  .up *, .up::before, .up::after, .up-title *, .up-pass { animation: none !important; transition: none !important; }
}