* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
  overflow: hidden;

  background: #f8f8f4;
  color: #111111;

  font-family: Arial, Helvetica, sans-serif;
}

button,
a {
  font: inherit;
}

/* =========================
   页面背景
========================= */

.contact-page {
  position: relative;

  width: 100vw;
  height: 100vh;

  overflow: hidden;

  background-image: url("./联系.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* 中间粉色晕染 */

.contact-page::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: 0;

  pointer-events: none;

  background:
    radial-gradient(
      circle at center 58%,
      rgba(248, 220, 229, 0.5),
      rgba(250, 232, 238, 0.22) 28%,
      rgba(255, 255, 255, 0.08) 44%,
      transparent 58%
    );
}

/* =========================
   页面主体
========================= */

.contact-wheel-section {
  position: relative;

  z-index: 1;

  width: 100%;
  height: 100%;

  overflow: hidden;
}

/* =========================
   顶部标题区域
========================= */

.contact-title {
  position: absolute;

  top: 54px;
  left: 50%;

  z-index: 60;

  width: min(900px, calc(100% - 40px));

  transform: translateX(-50%);

  text-align: center;

  pointer-events: none;
}

.contact-title p {
  margin: 0 0 18px;

  color: rgba(0, 0, 0, 0.42);

  font-family: Arial, Helvetica, sans-serif;
  font-size: 17px;
  font-weight: 500;

  letter-spacing: 0.62em;
}

.contact-title h1 {
  margin: 0;

  color: #111111;

  font-family: Arial, Helvetica, sans-serif;
  font-size: 62px;
  font-weight: 800;

  line-height: 1;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

/* =========================
   SVG 发散线
========================= */

.connection-layer {
  position: absolute;

  inset: 0;

  z-index: 4;

  width: 100%;
  height: 100%;

  overflow: visible;

  pointer-events: none;
}

.connection-line {
  fill: none;

  stroke: rgba(0, 0, 0, 0.16);
  stroke-width: 1;

  stroke-dasharray: 8 11;
  stroke-linecap: round;

  vector-effect: non-scaling-stroke;

  opacity: 0.58;

  transition:
    stroke 0.55s ease,
    stroke-width 0.55s ease,
    stroke-dasharray 0.55s ease,
    opacity 0.55s ease;
}

.connection-line.active {
  stroke: rgba(0, 0, 0, 0.48);
  stroke-width: 1.35;

  stroke-dasharray: 8 11;

  opacity: 0.95;
}

.origin-point {
  position: absolute;

  left: 50%;
  bottom: -1px;

  z-index: 7;

  width: 9px;
  height: 9px;

  transform: translate(-50%, 50%);

  border: 1px solid rgba(0, 0, 0, 0.24);
  border-radius: 50%;

  background: rgba(255, 255, 255, 0.96);

  box-shadow:
    0 0 0 5px rgba(255, 255, 255, 0.34);

  pointer-events: none;
}

/* =========================
   大圆轨道
========================= */

.wheel-wrap {
  position: absolute;

  left: 50%;
  bottom: -1160px;

  z-index: 10;

  width: 1600px;
  height: 1600px;

  transform: translateX(-50%);

  cursor: grab;

  touch-action: none;
  user-select: none;
}

/* 轮盘淡粉色柔光 */

.wheel-wrap::before {
  content: "";

  position: absolute;

  top: 50%;
  left: 50%;

  z-index: -3;

  width: 1520px;
  height: 1520px;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      transparent 55%,
      rgba(248, 207, 222, 0.07) 65%,
      rgba(248, 207, 222, 0.17) 73%,
      rgba(248, 207, 222, 0.05) 81%,
      transparent 87%
    );

  filter: blur(2px);

  pointer-events: none;
}

/* 外侧细密刻度 */

.wheel-wrap::after {
  content: "";

  position: absolute;

  top: 50%;
  left: 50%;

  z-index: -1;

  width: 1510px;
  height: 1510px;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  background:
    repeating-conic-gradient(
      from -90deg,
      rgba(0, 0, 0, 0.28) 0deg 0.18deg,
      transparent 0.18deg 2.4deg
    );

  -webkit-mask:
    radial-gradient(
      circle,
      transparent 0 736px,
      #000 737px 742px,
      transparent 743px
    );

  mask:
    radial-gradient(
      circle,
      transparent 0 736px,
      #000 737px 742px,
      transparent 743px
    );

  opacity: 0.52;

  pointer-events: none;
}

.wheel-wrap:active {
  cursor: grabbing;
}

/* =========================
   圆形轨道
========================= */

.track {
  position: absolute;

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  pointer-events: none;
}

.track-one {
  width: 1460px;
  height: 1460px;

  border: 1.4px solid rgba(0, 0, 0, 0.2);

  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.46),
    0 0 38px rgba(245, 194, 214, 0.18),
    inset 0 0 30px rgba(255, 255, 255, 0.22);
}

.track-one::before {
  content: "";

  position: absolute;

  inset: 13px;

  border: 1.2px solid rgba(222, 143, 175, 0.28);
  border-radius: 50%;

  box-shadow:
    0 0 18px rgba(238, 175, 200, 0.16);
}

.track-one::after {
  content: "";

  position: absolute;

  inset: 45px;

  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;

  box-shadow:
    inset 0 0 20px rgba(245, 200, 217, 0.1);
}

.track-two {
  width: 1260px;
  height: 1260px;

  border: 1.3px dashed rgba(0, 0, 0, 0.18);

  box-shadow:
    0 0 28px rgba(245, 195, 214, 0.13);
}

.track-two::before {
  content: "";

  position: absolute;

  inset: 20px;

  border-radius: 50%;

  background:
    repeating-conic-gradient(
      rgba(0, 0, 0, 0.24) 0deg 0.24deg,
      transparent 0.24deg 4deg
    );

  -webkit-mask:
    radial-gradient(
      circle,
      transparent 0 calc(50% - 2px),
      #000 calc(50% - 1px) 50%,
      transparent calc(50% + 1px)
    );

  mask:
    radial-gradient(
      circle,
      transparent 0 calc(50% - 2px),
      #000 calc(50% - 1px) 50%,
      transparent calc(50% + 1px)
    );

  opacity: 0.45;
}

.track-two::after {
  content: "";

  position: absolute;

  inset: -8px;

  border: 1px solid rgba(230, 154, 185, 0.2);
  border-radius: 50%;

  filter: blur(0.6px);
}

/* =========================
   联系方式节点
========================= */

.wheel-item {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 240px;
  height: 220px;

  margin: 0;
  padding: 0;

  transform: translate(-50%, -50%);

  border: 0;
  outline: none;

  background: transparent;

  color: #111111;

  font-family: Arial, Helvetica, sans-serif;

  cursor: pointer;
  user-select: none;

  will-change: transform, opacity;

  transition:
    transform 0.58s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.5s ease;
}

.wheel-content {
  position: absolute;

  left: 50%;
  bottom: 0;

  display: flex;
  flex-direction: column;
  align-items: center;

  width: 240px;

  transform: translateX(-50%);

  text-align: center;

  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* =========================
   账号框
========================= */

.wheel-account {
  display: block;

  max-width: 225px;

  margin-bottom: 14px;
  padding: 8px 13px;

  overflow: hidden;

  border: 1px dashed rgba(0, 0, 0, 0.2);
  border-radius: 9px;

  background: rgba(255, 255, 255, 0.22);

  color: rgba(0, 0, 0, 0.68);

  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);

  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 600;

  line-height: 1.2;
  letter-spacing: 0.01em;

  text-overflow: ellipsis;
  white-space: nowrap;

  cursor: copy;

  transition:
    color 0.35s ease,
    background 0.35s ease,
    border-color 0.35s ease,
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.wheel-account:hover {
  transform: scale(1.04);

  background: rgba(255, 255, 255, 0.42);

  color: #111111;
}

/* =========================
   普通 icon
========================= */

.wheel-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 48px;
  height: 48px;

  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 50%;

  background: rgba(255, 255, 255, 0.92);

  color: rgba(0, 0, 0, 0.5);

  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.07);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  font-size: 19px;

  transition:
    width 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    font-size 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.45s ease,
    border-color 0.45s ease,
    background 0.45s ease,
    box-shadow 0.45s ease,
    transform 0.45s ease;
}

.wheel-icon i {
  display: block;

  line-height: 1;

  pointer-events: none;
}

/* =========================
   App 名称
========================= */

.wheel-label {
  display: block;

  margin-top: 16px;

  color: rgba(0, 0, 0, 0.58);

  font-family: Arial, Helvetica, sans-serif;
  font-size: 17px;
  font-weight: 600;

  line-height: 1;

  letter-spacing: 0.17em;

  text-transform: uppercase;

  transition:
    color 0.45s ease,
    font-size 0.45s ease,
    letter-spacing 0.45s ease,
    margin-top 0.45s ease;
}

/* =========================
   当前中间节点
========================= */

.wheel-item.active {
  z-index: 100;
}

.wheel-item.active .wheel-content {
  transform:
    translateX(-50%)
    translateY(-8px);
}

.wheel-item.active .wheel-account {
  max-width: 300px;

  margin-bottom: 19px;
  padding: 10px 18px;

  border-color: rgba(0, 0, 0, 0.36);

  background: rgba(255, 255, 255, 0.34);

  color: #111111;

  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);

  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 600;

  box-shadow:
    0 12px 38px rgba(0, 0, 0, 0.08);
}

.wheel-item.active .wheel-account:hover {
  background: rgba(255, 255, 255, 0.52);
}

.wheel-item.active .wheel-icon {
  width: 94px;
  height: 94px;

  border-color: rgba(0, 0, 0, 0.52);
  border-radius: 50%;

  background: rgba(255, 255, 255, 0.98);

  color: #111111;

  box-shadow:
    0 0 0 12px rgba(255, 255, 255, 0.58),
    0 24px 68px rgba(0, 0, 0, 0.15);

  font-size: 32px;
}

.wheel-item.active .wheel-label {
  margin-top: 22px;

  color: #111111;

  font-family: Arial, Helvetica, sans-serif;
  font-size: 21px;
  font-weight: 600;

  letter-spacing: 0.21em;
}

/* =========================
   底部提示
========================= */

.hint {
  position: absolute;

  bottom: 24px;
  left: 50%;

  z-index: 50;

  margin: 0;

  transform: translateX(-50%);

  color: rgba(0, 0, 0, 0.38);

  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 500;

  letter-spacing: 0.26em;

  white-space: nowrap;
}

/* =========================
   平板
========================= */

@media (max-width: 1100px) {
  .contact-title {
    top: 48px;
  }

  .contact-title h1 {
    font-size: 52px;
  }

  .wheel-wrap {
    bottom: -965px;

    width: 1360px;
    height: 1360px;
  }

  .wheel-wrap::before {
    width: 1300px;
    height: 1300px;
  }

  .wheel-wrap::after {
    width: 1290px;
    height: 1290px;

    -webkit-mask:
      radial-gradient(
        circle,
        transparent 0 626px,
        #000 627px 632px,
        transparent 633px
      );

    mask:
      radial-gradient(
        circle,
        transparent 0 626px,
        #000 627px 632px,
        transparent 633px
      );
  }

  .track-one {
    width: 1240px;
    height: 1240px;
  }

  .track-two {
    width: 1070px;
    height: 1070px;
  }

  .wheel-item {
    width: 205px;
    height: 205px;
  }

  .wheel-content {
    width: 205px;
  }

  .wheel-account {
    max-width: 195px;

    font-size: 10px;
  }

  .wheel-label {
    margin-top: 14px;

    font-size: 15px;
  }

  .wheel-item.active .wheel-account {
    max-width: 245px;

    font-size: 12px;
  }

  .wheel-item.active .wheel-icon {
    width: 82px;
    height: 82px;

    font-size: 28px;
  }

  .wheel-item.active .wheel-label {
    margin-top: 19px;

    font-size: 18px;
  }
}

/* =========================
   手机
========================= */

@media (max-width: 760px) {
  .contact-title {
    top: 34px;
  }

  .contact-title p {
    font-size: 11px;
    letter-spacing: 0.48em;
  }

  .contact-title h1 {
    font-size: 38px;
    letter-spacing: 0.14em;
  }

  .wheel-wrap {
    bottom: -700px;

    width: 970px;
    height: 970px;
  }

  .wheel-wrap::before {
    width: 920px;
    height: 920px;
  }

  .wheel-wrap::after {
    width: 920px;
    height: 920px;

    -webkit-mask:
      radial-gradient(
        circle,
        transparent 0 441px,
        #000 442px 447px,
        transparent 448px
      );

    mask:
      radial-gradient(
        circle,
        transparent 0 441px,
        #000 442px 447px,
        transparent 448px
      );
  }

  .track-one {
    width: 890px;
    height: 890px;
  }

  .track-two {
    width: 760px;
    height: 760px;
  }

  .wheel-item {
    width: 165px;
    height: 175px;
  }

  .wheel-content {
    width: 165px;
  }

  .wheel-account {
    max-width: 155px;

    margin-bottom: 9px;
    padding: 6px 9px;

    font-size: 8px;
  }

  .wheel-icon {
    width: 42px;
    height: 42px;

    font-size: 16px;
  }

  .wheel-label {
    margin-top: 12px;

    font-size: 12px;
  }

  .wheel-item.active .wheel-account {
    max-width: 195px;

    margin-bottom: 13px;
    padding: 8px 12px;

    font-size: 10px;
  }

  .wheel-item.active .wheel-icon {
    width: 68px;
    height: 68px;

    font-size: 24px;

    box-shadow:
      0 0 0 8px rgba(255, 255, 255, 0.58),
      0 20px 48px rgba(0, 0, 0, 0.13);
  }

  .wheel-item.active .wheel-label {
    margin-top: 16px;

    font-size: 15px;
  }

  .hint {
    bottom: 16px;

    max-width: calc(100vw - 30px);

    font-size: 9px;
    letter-spacing: 0.1em;

    text-align: center;
    white-space: normal;
  }
}