/* Asake's Socials — the get-to-know-you form.
   Full-screen overlay opened from every "join waitlist" button.
   Translated from "Get To Know You Form" in the Claude Design bundle. */

@keyframes gtky-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes gtky-drop { from { opacity: 0; transform: translateY(-28px); } to { opacity: 1; transform: none; } }
@keyframes gtky-pop  { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }

body.gtky-open { overflow: hidden; }

.gtky {
  position: fixed;
  inset: 0;
  z-index: 100;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  overflow: hidden;
  animation: gtky-rise .5s var(--ease-out) both;
}
.gtky[hidden] { display: none; }

.gtky input, .gtky button, .gtky textarea { font-family: inherit; letter-spacing: inherit; }
.gtky input::placeholder, .gtky textarea::placeholder { color: #a5a29b; }

.gtky__progress {
  position: absolute;
  top: 0; left: 0;
  height: 3px;
  background: var(--yellow);
  width: var(--p, 0%);
  transition: width .6s var(--ease-out);
  z-index: 5;
}

.gtky__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
  z-index: 4;
}
.gtky__brand {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0;
  text-transform: none;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  color: var(--ink);
}
.gtky__meta { display: flex; align-items: center; gap: 14px; color: var(--muted); }
.gtky__close {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  color: var(--muted);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
.gtky__close:hover { color: var(--ink); }

.gtky__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 20px;
  min-height: 0;
  overflow: auto;
}
.gtky__inner {
  width: 100%;
  max-width: 720px;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 20px 0 40px;
}

/* step panels */
.gtky__step { display: flex; flex-direction: column; gap: 26px; }
.gtky__step--rise { animation: gtky-rise .55s var(--ease-out) both; }
.gtky__step--drop { animation: gtky-drop .55s var(--ease-out) both; }
.gtky__step--intro, .gtky__step--done { animation: gtky-rise .7s var(--ease-out) both; }

.gtky h1 {
  margin: 0;
  font-size: clamp(34px, 5vw, 57px);
  line-height: 1.05;
  font-weight: 400;
  text-wrap: balance;
}
.gtky__lede {
  margin: 0;
  font-size: 18px;
  line-height: 1.45;
  color: #4a4842;
  max-width: 44ch;
  text-wrap: pretty;
}
.gtky__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.gtky__actions--q { padding-top: 6px; }

.gtky__primary {
  border: 0;
  background: var(--ink);
  color: var(--bg);
  border-radius: 999px;
  padding: 16px 26px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .03em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .3s var(--ease-out), background .3s, color .3s;
}
.gtky__primary:hover:not(:disabled) { transform: scale(1.04); }
.gtky__primary--next { padding: 15px 24px; }
.gtky__primary:disabled { background: var(--stone); color: var(--muted); cursor: default; }
.gtky__ghost {
  border: 0;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
}
.gtky__ghost:hover { color: var(--ink); }

/* question header */
.gtky__q { display: flex; align-items: baseline; gap: 14px; }
.gtky__num { flex: none; }
.gtky__qtext { display: flex; flex-direction: column; gap: 10px; }
.gtky h2 {
  margin: 0;
  font-size: clamp(26px, 3.6vw, 42px);
  line-height: 1.1;
  font-weight: 400;
  text-wrap: balance;
}
.gtky__hint { margin: 0; font-size: 16px; line-height: 1.45; color: var(--muted); }

/* text answers */
.gtky__text, .gtky__long {
  border: 0;
  border-bottom: 1.5px solid var(--ink);
  background: transparent;
  padding: 10px 0 14px;
  outline: none;
  width: 100%;
  color: var(--ink);
  border-radius: 0;
}
.gtky__text { font-size: clamp(22px, 3vw, 32px); }
.gtky__long { font-size: clamp(20px, 2.4vw, 26px); line-height: 1.35; resize: none; }

/* option cards */
.gtky__cards { display: flex; flex-direction: column; gap: 8px; }
.gtky__card {
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
  border: 1px solid var(--stone);
  background: var(--white);
  border-radius: 6px;
  padding: 16px 18px;
  font-size: 18px;
  cursor: pointer;
  color: var(--ink);
  transition: all .3s var(--ease-out);
  animation: gtky-pop .5s var(--ease-out) var(--d, 0s) both;
}
.gtky__card:hover { border-color: var(--ink); }
.gtky__card.is-on { background: var(--yellow); border-color: var(--ink); }
.gtky__key {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .03em;
  text-transform: uppercase;
  width: 26px; height: 26px;
  border: 1px solid var(--ink);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  background: transparent;
}
.gtky__card.is-on .gtky__key { background: var(--white); }
.gtky__card-label { flex: 1; }
.gtky__tick { font-family: var(--font-mono); font-size: 12px; }
.gtky__note { margin-top: 6px; }

/* this-or-that sliders */
.gtky__sliders { display: flex; flex-direction: column; gap: 22px; }
.gtky__slider { display: flex; flex-direction: column; gap: 8px; }
.gtky__slider-ends { display: flex; justify-content: space-between; font-size: 17px; }
.gtky__slider-ends span { color: var(--muted); transition: color .3s; }
.gtky__slider-ends span.is-on { color: var(--ink); }
.gtky__track {
  position: relative;
  height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
  border: 0;
  background: none;
  padding: 0;
  width: 100%;
}
.gtky__track::before { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: var(--ink); }
.gtky__tick-mark { position: absolute; left: var(--x); width: 1px; height: 10px; background: var(--ink); transform: translateX(-50%); }
.gtky__knob {
  position: absolute;
  left: var(--x, 50%);
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--yellow);
  border: 1.5px solid var(--ink);
  transform: translateX(-50%);
  transition: left .35s var(--ease-out);
}
.gtky__track:not(.is-set) .gtky__knob { background: var(--white); }

/* 1–5 scale */
.gtky__scale { display: flex; flex-direction: column; gap: 10px; }
.gtky__scale-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.gtky__scale-btn {
  border: 1px solid var(--stone);
  background: var(--white);
  border-radius: 6px;
  height: 72px;
  font-size: 24px;
  cursor: pointer;
  color: var(--ink);
  transition: all .3s var(--ease-out);
  animation: gtky-pop .5s var(--ease-out) var(--d, 0s) both;
}
.gtky__scale-btn:hover { border-color: var(--ink); }
.gtky__scale-btn.is-on { background: var(--yellow); border-color: var(--ink); }
.gtky__scale-ends { display: flex; justify-content: space-between; color: var(--muted); }

/* rank */
.gtky__rank { display: flex; flex-direction: column; gap: 8px; }
.gtky__rank-row {
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--ink);
  background: var(--white);
  border-radius: 6px;
  padding: 14px 18px;
  font-size: 18px;
  cursor: grab;
  transition: transform .3s var(--ease-out), background .3s;
  animation: gtky-pop .5s var(--ease-out) var(--d, 0s) both;
}
.gtky__rank-row.is-drag { background: var(--yellow); }
.gtky__rank-n { font-family: var(--font-display); font-size: 26px; width: 32px; flex: none; }
.gtky__rank-label { flex: 1; }
.gtky__rank-btns { display: flex; gap: 4px; }
.gtky__rank-btns button {
  border: 1px solid var(--ink);
  background: transparent;
  border-radius: 4px;
  width: 34px; height: 34px;
  cursor: pointer;
  font-size: 14px;
  color: var(--ink);
}
.gtky__rank-btns button:disabled { opacity: .3; cursor: default; }

/* done */
.gtky__step--done { gap: 30px; }
.gtky__in {
  font-family: var(--font-display);
  font-size: clamp(90px, 18vw, 220px);
  line-height: .85;
  animation: gtky-pop .8s var(--ease-out) .1s both;
}
.gtky__done-title { font-size: clamp(30px, 4.4vw, 50px); line-height: 1.08; }
.gtky__steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.gtky__steps > div {
  background: var(--white);
  border-radius: 6px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gtky__steps > div span:last-child { font-size: 16px; line-height: 1.4; }
.gtky__primary--link { display: inline-block; text-decoration: none; padding: 15px 24px; }

/* bottom bar */
.gtky__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px 18px;
  z-index: 4;
  gap: 12px;
}
.gtky__nav { display: flex; gap: 6px; background: var(--white); padding: 5px; border-radius: 8px; flex: none; }
.gtky__nav button {
  border: 0;
  width: 40px; height: 40px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  color: var(--ink);
  background: transparent;
  transition: opacity .3s, background .3s;
}
.gtky__nav button:hover:not(:disabled) { background: var(--bg); }
.gtky__nav .gtky__nav-prev:disabled { color: var(--ink-soft); cursor: default; }
.gtky__nav .gtky__nav-next { background: var(--yellow); }
.gtky__nav .gtky__nav-next:disabled { opacity: .35; cursor: default; }
.gtky__nav .gtky__nav-next:hover:not(:disabled) { background: var(--yellow); opacity: 1; }

@media (max-width: 760px) {
  .gtky__head { padding: 14px 16px; }
  .gtky__body { padding: 0 16px; }
  .gtky__foot { padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); }
  .gtky__card { font-size: 16px; padding: 14px 14px; }
  .gtky__rank-row { font-size: 16px; padding: 12px 12px; gap: 10px; }
  .gtky__rank-n { font-size: 22px; width: 26px; }
  .gtky__slider-ends { font-size: 15px; }
  .gtky__text, .gtky__long { font-size: 20px; }
}