:root {
  --ink: #14283a;
  --muted: #47627a;
  --panel: #ffffff;
  --line: rgba(20, 40, 58, .16);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #8fd0f0;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* ---- Sky ------------------------------------------------------------- */
.sky {
  position: fixed;
  inset: 0;
  background: linear-gradient(#7cc6ee, #c9eafa 70%, #eaf7fd);
  overflow: hidden;
}
.cloud {
  position: absolute;
  left: 0;
  width: 220px;
  height: 60px;
  background: #fff;
  border-radius: 999px;
  opacity: .85;
  animation: drift 120s linear infinite;
}
.cloud::before, .cloud::after {
  content: "";
  position: absolute;
  background: #fff;
  border-radius: 50%;
}
.cloud::before { width: 90px; height: 90px; left: 34px; top: -44px; }
.cloud::after  { width: 120px; height: 120px; left: 88px; top: -62px; }
.cloud--1 { top: 62%; animation-duration: 95s;  animation-delay: -20s; }
.cloud--2 { top: 80%; animation-duration: 140s; animation-delay: -90s; transform-origin: left; scale: 1.5; }
.cloud--3 { top: 44%; animation-duration: 170s; animation-delay: -60s; scale: .7; opacity: .6; }
.cloud--4 { top: 90%; animation-duration: 110s; animation-delay: -5s;  scale: 1.1; }
@keyframes drift {
  from { translate: 110vw 0; }
  to   { translate: -40vw 0; }
}

/* ---- Name tag, lanyard and contact form ------------------------------- */
.nametag {
  pointer-events: auto;
  cursor: zoom-in;
  transform-origin: 236px 150px;
  transition: scale .25s cubic-bezier(.3, 1.4, .5, 1);
}
.nametag:hover, .nametag:focus-visible { scale: 3.4; }
.nametag:focus { outline: none; }
.lanyard {
  transform-origin: 208px 113px;
  animation: swing 3.4s ease-in-out infinite alternate;
}

.lanyard { pointer-events: auto; cursor: pointer; }
.lanyard:hover #about-plaque, .lanyard:focus-visible #about-plaque { fill: #24425c; }
.lanyard:focus { outline: none; }

/* The plaque's colour floods the screen, then the board fades in over it. */
.about-zoom {
  position: fixed;
  background: #14283a;
  border-radius: 5px;
  z-index: 6;
  transition: left .28s cubic-bezier(.6, 0, .9, .4), top .28s cubic-bezier(.6, 0, .9, .4),
              width .28s cubic-bezier(.6, 0, .9, .4), height .28s cubic-bezier(.6, 0, .9, .4);
}
.about-zoom[hidden] { display: none; }
.about {
  position: fixed;
  inset: 0;
  background: #14283a;
  z-index: 7;
}
.about[hidden] { display: none; }
.about iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  opacity: 0;
  transition: opacity .45s ease-out;
}
.about.is-ready iframe { opacity: 1; }
/* Back to Austin: a keycap seen from above, with a dished top. The legend is
   white until the key is pressed, then lights green like a backlit key. */
.about .about__back {
  position: absolute;
  right: 26px;
  bottom: 26px;
  padding: 13px 18px 12px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  /* darker in the middle than at the rim reads as concave */
  background: radial-gradient(ellipse 70% 90% at 50% 42%, #18212a 0%, #26313c 62%, #3a4754 100%);
  border-style: solid;
  border-width: 5px 8px 11px;
  border-color: #4a5866 #2a3540 #141b22 #2a3540;
  border-radius: 9px;
  box-shadow: 0 0 0 1px #000, 0 8px 14px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .08);
  transition: border-width .08s, color .08s, text-shadow .08s, box-shadow .08s;
}
.about .about__back:hover { background: radial-gradient(ellipse 70% 90% at 50% 42%, #1c2630 0%, #2b3743 62%, #414f5d 100%); }
.about .about__back:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.about .about__back:active, .about .about__back.is-pressed {
  /* the base stays put; the skirt shortens so the top face sinks */
  border-width: 5px 8px 5px;
  color: #7dff9b;
  text-shadow: 0 0 6px #7dff9b, 0 0 16px #7dff9b;
  box-shadow: 0 0 0 1px #000, 0 2px 4px rgba(0, 0, 0, .7), inset 0 0 14px rgba(125, 255, 155, .25), 0 0 22px rgba(125, 255, 155, .35);
}

.contact {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  z-index: 5;
  animation: rise .5s ease-out both;
}
.contact[hidden] { display: none; }
@keyframes rise {
  from { opacity: 0; translate: 0 24px; }
  to   { opacity: 1; translate: 0 0; }
}
/* The contact panel is a cloud: a rounded body with three puffs on top. */
.cloud-card {
  position: relative;
  width: min(600px, 100%);
  margin-top: 70px;
  filter: drop-shadow(0 18px 30px rgba(20, 40, 58, .22));
}
.cloud-card__body {
  position: relative;
  padding: 34px 48px 40px;
  background: #fff;
  border-radius: 90px;
  text-align: center;
}
.cloud-card__puff {
  position: absolute;
  background: #fff;
  border-radius: 50%;
}
.cloud-card__puff--1 { width: 34%; aspect-ratio: 1; left: 9%;  top: -58px; }
.cloud-card__puff--2 { width: 44%; aspect-ratio: 1; left: 30%; top: -112px; }
.cloud-card__puff--3 { width: 30%; aspect-ratio: 1; right: 8%; top: -44px; }
.cloud-card h2 {
  margin: 0 auto 22px;
  max-width: 24ch;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.2;
  letter-spacing: -.02em;
}
.ways {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  counter-reset: way;
  text-align: left;
}
.ways li { counter-increment: way; border-top: 1px solid var(--line); }
.ways li:last-child { border-bottom: 1px solid var(--line); }
.ways a {
  display: grid;
  grid-template-columns: 28px 1fr;
  column-gap: 6px;
  padding: 13px 10px;
  color: var(--ink);
  text-decoration: none;
  border-radius: 6px;
}
.ways a::before {
  content: counter(way);
  grid-row: span 2;
  font-size: 20px;
  font-weight: 800;
  color: var(--muted);
}
.ways b { font-size: 18px; letter-spacing: -.01em; }
.ways b::after { content: " \2197"; font-weight: 400; color: var(--muted); }
.ways span { font-size: 14px; line-height: 1.4; color: var(--muted); }
.ways a:hover, .ways a:focus-visible { background: #eef4f8; }
.ways a:hover b { text-decoration: underline; }
.btn {
  padding: 11px 18px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  background: none;
  border: 1px solid var(--ink);
  border-radius: 999px;
  cursor: pointer;
}
.btn:hover { background: #eef4f8; }

/* ---- Balloons and the chair ------------------------------------------ */
#balloons {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
#balloons.is-pointing { cursor: pointer; }

.rig {
  position: fixed;
  overflow: visible;
  pointer-events: none;
  will-change: transform;
}

.leg { animation: kick 2.6s ease-in-out infinite alternate; }
.leg--l { transform-origin: 170px 296px; }
.leg--r { transform-origin: 230px 296px; animation-delay: -1.3s; }
@keyframes kick {
  from { rotate: -7deg; }
  to   { rotate: 9deg; }
}

.bag {
  pointer-events: auto;
  cursor: pointer;
  animation: swing 5s ease-in-out infinite alternate;
}
@keyframes swing {
  from { rotate: -3.5deg; }
  to   { rotate: 3.5deg; }
}
.bag__rope { stroke: #8a6a3a; stroke-width: 2; fill: none; }
.bag__body { fill: #d3b27a; stroke: #8a6a3a; stroke-width: 2.5; stroke-linejoin: round; }
.bag text {
  font-size: 14px;
  font-weight: 700;
  fill: #4a3413;
  text-anchor: middle;
}
.bag:hover .bag__body, .bag:focus-visible .bag__body, .bag.is-selected .bag__body { fill: #f0d39c; stroke: #4a3413; }
.bag:focus { outline: none; }

.tip {
  position: fixed;
  transform: translate(-50%, -100%);
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  color: #fff;
  background: var(--ink);
  border-radius: 6px;
  pointer-events: none;
  z-index: 4;
}
.tip[hidden] { display: none; }

.detail {
  position: fixed;
  top: 20px;
  right: 20px;
  width: min(350px, calc(100vw - 40px));
  max-height: calc(100vh - 90px);
  overflow: auto;
  padding: 24px 26px 22px;
  background: var(--panel);
  border-top: 4px solid var(--accent, var(--ink));
  border-radius: 4px;
  box-shadow: 0 12px 40px rgba(20, 40, 58, .22);
  z-index: 3;
}
.detail[hidden] { display: none; }
.detail__close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 32px;
  height: 32px;
  font-size: 22px;
  line-height: 1;
  color: var(--muted);
  background: none;
  border: 0;
  cursor: pointer;
}
.detail__close:hover { color: var(--ink); }
.detail__kind {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.detail__title {
  margin: 0 0 12px;
  font-size: 25px;
  line-height: 1.12;
  letter-spacing: -.02em;
}
.detail__body {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.6;
}
.detail__links { display: flex; flex-wrap: wrap; gap: 8px; }
.detail__links a {
  padding: 8px 14px;
  font-size: 13px;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--ink);
  border-radius: 999px;
}
.detail__links a:hover { background: var(--ink); color: #fff; }

@media (max-width: 760px) {
  .detail {
    top: auto;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: 50vh;
    border-radius: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cloud, .leg, .bag, .lanyard, .contact { animation: none; }
}