/* 申请邀请码页：一句提问、一张表单、一幅纸面插画，其余全部让位，只在本页加载 */

/* 页眉是固定层，这里自己控制上下留白，让提问与表单落在视线中央 */
.invite-page { position: relative; display: flex; flex-direction: column; padding-top: 15vh; padding-bottom: 0; }

.invite-stage {
  position: relative; display: grid; gap: 6vw; align-items: center; width: 100%; max-width: 1400px;
  padding-bottom: 9vh; grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
}

.invite-col { max-width: 520px; }
.invite-lead {
  margin-bottom: 34px; color: var(--muted);
}

/* ── 通栏底片：整屏的氛围，不是右栏的一块贴图 ───────────── */

.invite-backdrop {
  /* 遮罩只裁绘制不裁布局：里层放大后会撑出横向滚动，必须显式裁掉 */
  overflow: hidden;
  position: absolute; inset: 0 0 auto; height: 980px;
  /* .page > * 的 1400 上限会把通栏底切出一条硬边，这里必须解掉 */
  max-width: none;
  /* 遮罩留在外层：图在里面缓慢平移，这团光本身不跟着晃 */
  -webkit-mask-image: radial-gradient(66% 62% at 74% 20%, #000 8%, transparent 74%);
  mask-image: radial-gradient(66% 62% at 74% 20%, #000 8%, transparent 74%);
}
/* 三层各管一个自由度：横向与转动在 i、纵向在 b、缩放在 b::before。
   三个周期互质，任一时刻的相位组合都不同，合成轨迹是一条缓慢进动的曲线，
   不会退化成来回推拉的斜线。三层都只改 transform，由合成器执行，不触发重排重绘。 */
.invite-backdrop i, .invite-backdrop b { position: absolute; inset: 0; }
.invite-backdrop i {
  animation: invite-court-sweep 37s var(--ease-in-out) infinite alternate;
}
.invite-backdrop b {
  animation: invite-court-rise 23s var(--ease-in-out) infinite alternate;
}
.invite-backdrop b::before {
  content: ""; position: absolute; inset: 0;
  /* 调色（去色 .7、压暗 .46、微提对比）已经烘焙进图片：这一层整屏且一直在动，
     用 CSS filter 就是每帧一次全屏滤镜通道。 */
  background: url("/illustrations/invite-net-wide-graded.jpg") no-repeat;
  /* 左对齐让球落在表单与流程轨之间那道空档里，右对齐会把它推到表单背后 */
  background-position: left top; background-size: cover;
  /* 照片本身足够暗，saturate 只压掉残余色偏，contrast 把暗部收回纯墨色；
     不做模糊，避免看起来像放糊了 */
  animation: invite-court-swell 53s var(--ease-in-out) infinite alternate;
}
/* 缩放下限 1.1 给出 5% 的每侧余量，大于横向 3% + 转动约 0.5%、纵向 2.2% + 约 0.6%，
   三个相位任意组合下画面边缘都不会露出来 */
@keyframes invite-court-sweep {
  from { transform: translate3d(-3%, 0, 0) rotate(-.5deg); }
  to { transform: translate3d(3%, 0, 0) rotate(.5deg); }
}
@keyframes invite-court-rise {
  from { transform: translate3d(0, 2.2%, 0); }
  to { transform: translate3d(0, -2.2%, 0); }
}
@keyframes invite-court-swell {
  from { transform: scale(1.1); }
  to { transform: scale(1.22); }
}

/* ── 表单 ─────────────────────────────────────────────── */

.field-row { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field { display: grid; align-content: start; margin-bottom: 18px; }
.field label { margin-bottom: 8px; color: rgba(241, 248, 250, .72); }
.field input, .field textarea {
  width: 100%; height: 48px; padding: 0 15px; border: 1px solid rgba(241, 248, 250, .16);
  border-radius: 6px; background: rgba(241, 248, 250, .04); color: var(--white);
  font-family: inherit;
  transition: border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
.field textarea {
  height: auto; min-height: 92px; padding: 13px 15px; resize: vertical;
}
.field input::placeholder, .field textarea::placeholder { color: rgba(241, 248, 250, .24); }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(115, 232, 255, .16);
}
.field input[aria-invalid="true"] { border-color: var(--amber); }
.field-error { margin-top: 8px; color: var(--amber); }

.invite-submit {
  width: 100%; height: 50px; margin-top: 6px; border: 0; border-radius: 6px;
  background: var(--cyan); color: var(--ink);
  cursor: pointer; transition: background-color 180ms var(--ease-out);
}
.invite-submit:disabled { background: rgba(115, 232, 255, .34); cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .invite-submit:not(:disabled):hover { background: #a4f1ff; }
}

.invite-form-error {
  margin: 16px 0 0; padding: 11px 13px; border: 1px solid rgba(255, 188, 82, .34);
  border-radius: 6px; color: var(--amber);
}
.invite-consent {
  margin-top: 16px; color: rgba(155, 178, 188, .55);
}

/* ── 提交完成：同一列原地换成回执 ─────────────────────── */

.invite-done { outline: none; }
.invite-done .invite-lead { margin-bottom: 0; }
.invite-done-targets {
  display: grid; gap: 12px; margin: 24px 0 0; padding: 22px 0 0;
  border-top: 1px solid rgba(241, 248, 250, .12); list-style: none;
}
.invite-done-targets li { display: flex; align-items: baseline; gap: 16px; }
.invite-done-targets span {
  flex: none; width: 3em; color: rgba(155, 178, 188, .7);
}
.invite-done-targets strong {
  min-width: 0; word-break: break-all;
}

/* ── 右栏：纵向流程 ─────────────────────────────────── */

/* 一条竖线把三步串起来，节点落在每一步的序号旁；线本身是青到蓝的渐隐，
   越往下越淡，读起来有先后而不是三条并列的条目 */
.invite-steps {
  position: relative; display: grid; gap: 40px; margin: 0; padding: 4px 0 4px 32px;
  /* 靠到右栏的外缘：左边表单贴页面左边距，右边流程贴右边距，两端都咬住版心 */
  justify-self: end; list-style: none;
}
.invite-steps::before {
  content: ""; position: absolute; left: 5px; top: 12px; bottom: 12px; width: 1px;
  background: linear-gradient(180deg, rgba(115, 232, 255, .5), rgba(124, 166, 255, .1));
}
.invite-steps li { position: relative; }
.invite-steps li::before {
  content: ""; position: absolute; left: -32px; top: 5px; width: 11px; height: 11px;
  border: 1px solid var(--cyan); border-radius: 50%; background: var(--ink);
}
/* 最后一步已经拿到邀请码，节点填实，竖线到此为止 */
.invite-steps li:last-child::before { background: var(--cyan); }

.invite-step-index { color: rgba(241, 248, 250, .3); }
.invite-steps h2 { margin-top: 8px; }
.invite-steps li p:not(.invite-step-index) {
  max-width: 40ch; margin-top: 8px; color: var(--muted);
}

@media (max-width: 1000px) {
  .invite-stage { gap: 44px; grid-template-columns: minmax(0, 1fr); }
  /* 单栏时提问与表单在前，流程跟在后面，并收回左对齐 */
  .invite-steps { gap: 32px; justify-self: start; }
  /* 单栏时表单占满整幅，底片只能退到提问上方的一条天光，不能压在输入框后面。
     取景推近到球右侧那段网绳：按满幅取景会把半只球卡在页眉后面，糊成一团 */
  .invite-backdrop b::before { background-size: auto 220%; background-position: 100% 82%; }
  .invite-backdrop {
    height: 520px;
    -webkit-mask-image: radial-gradient(104% 40% at 66% 4%, #000 0%, transparent 76%);
    mask-image: radial-gradient(104% 40% at 66% 4%, #000 0%, transparent 76%);
  }
}

@media (max-width: 720px) {
  .invite-page { padding-top: 17vh; }
  .field-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .invite-backdrop i, .invite-backdrop b, .invite-backdrop b::before { animation: none; }
  .field input, .field textarea, .invite-submit { transition: none; }
}