*{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body{
      position: relative;
      width: 100vmin;
      height: 100vh; /* 让body高度占满视口 */
      background-color: #000000;
      margin: 0 auto; /* 让body在页面中水平居中 */
    }
    a{
      text-decoration: none;
      color: inherit;
    }
    li{
      list-style: none;
    }
    .head-box{
      position: absolute;
      width: 30%;
      height: 30%;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    .name-back{
      position: absolute;
      width: 70px;
      min-height: 70px;
      background-color: #78787836; /* 半透明黑色背景 */
      opacity: 0;
      border-radius: 25px;
      z-index: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: all 0.8s ease-in-out; /* 添加过渡动画 */
      /* 初始位置与头像重叠 */
      left: 40%;
      top: 50%;
      transform: translate(-35%, -50%);
      box-shadow: inset 0  1px 1px #ffffff50,
      0 1px 2px #00000050,
      0 2px 8px #00000025;
      
    }
    .head{
      position: absolute;
      width: 70px;
      height: 70px;
      background-color: #1196e3;
      border-radius: 50%;
      z-index: 1;
      cursor: pointer; /* 显示点击指针 */
      transition: all 1s ease; /* 添加过渡动画 */
      /* 初始位置 */
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      box-shadow: inset 1px 1px 2px 1px #00000050,
      0 2px 4px #00000015,
      0 0 1px 1px #ffffff25;
    }
     .name {
       color: #ffffff;
      font-family: Arial, sans-serif;
      font-size: 1.2rem;
      font-weight: bold;
      padding: 0 20px;
      opacity: 0;
      transition: all 1s ease-in-out; /* 添加过渡动画 */
    }
    .name.active{
      opacity: 1;
      transition: opacity 0.7s ease-in-out 0.2s; /* 延迟显示文字 */
    }
    /* 激活状态样式 */
    .head.active {
      /* 头像向左平移50px */
      transform: translate(calc(-50% - 80px), -50%);
    }
    .name-back.active {
      opacity: 1;
      width: 140px;
      /* 背景框向右平移到头像右侧 */
      transform: translate(calc(0% + 15px), -50%);
    }
    /* --------------- 表单样式优化 --------------- */

    /* 表单相关样式 */
    .form-toggle {
      position: fixed;
      right: 0;
      top: 0; /* 从顶部开始，位于左上角 */
      margin: 20px; /* 与边缘保持间距，避免紧贴 */
      width: 52px;
      height: 52px;
      background-color: #ffffff; /* 按钮背景白色 */
      border-radius: 50%; /* 圆形按钮更精致 */
      cursor: pointer;
      z-index: 101;
      transition: all 1s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none; /* 清除默认边框 */
      box-shadow: inset 0 0 10px #00000050,
      0 2px 8px #00000025,
      0 4px 16px #00000015;/* 轻微阴影增强层次感 */
    }
    /* 为第二条矩形添加过渡动画 */
    #second-rect {
      transform-origin:  center;
    }
    #third-rect {
  /* 设置旋转原点为x:4的位置（左边缘） */
      transform-origin: center;
    }
    #first-rect, #second-rect, #third-rect {
      transition: all 0.5s ease-in-out; 
    }
    /* 鼠标悬停时的动画效果 */
    .form-toggle:hover #first-rect {
      width: 4px; /* 延长到与第二条矩形连接的宽度 */
      transition: all 0.5s ease-in-out;
    }
    /* 悬停时隐藏第二条矩形（形成一条线的视觉效果） */
    .form-toggle:hover #second-rect {
      x:4;
      width: 16px;
      transition: all 0.5s ease-in-out;
    }
    .form-toggle:hover #third-rect {
      transition: all 0.5s ease-in-out;
    }
    .form-toggle:hover #first-rect,
    .form-toggle:hover #second-rect,
    .form-toggle:hover #third-rect {
      transition-delay: 0s; 
      /* 悬停时立即生效 覆盖了默认的延迟设置，
      使得悬停时的样式变化（如矩形的宽度、位置调整）能够立即触发，
      不需要等待 0.3 秒*/
    } 
    /* 激活状态样式 */
    .form-toggle.active {
      background-color:#000;
      fill:#1196e3;
    }
    .form-toggle.active #first-rect {
      x:9;
      y:-2;
      width: 4px;
      transform: rotate(45deg);
    }
    .form-toggle.active #second-rect {
      x:16;
      y:10;
      width: 4px;
      transform: rotate(45deg);
    }
    .form-toggle.active #third-rect {
      x:4;
      y:10;
      transform: rotate(-45deg);
    }
    /* 激活样式状态下悬停 */
    .form-toggle.active:hover #first-rect {
      width: 9px;
      transform: rotate(45deg);
    }
    .form-toggle.active:hover #second-rect {
      x:12;
      y:10;
      width: 8px;
      transform: rotate(45deg);
    }
    .form-select{
      position: fixed;
      top: 0;
      left:0;
      width: 100%;
      height: 112%;
      background-color: #f0f0f0;
      z-index: 100;
      transition: 1s ease-in-out;
      box-shadow: inset 0 0 10px #00000050,
      0 2px 8px #00000025,
      0 4px 16px #00000015;
      border-radius: 0 0 10% 10%;
    }
    .form-out{
      transform: translateY(-100%);
    }
    .logo{
      position: fixed;
      display: flex;
      justify-content: center;
      align-items: center;
      top: 0;
      left: 0;
      margin: 20px;
      /* padding: 10px; */
      width: 52px;
      height: 52px;
      border-radius: 50%;
      overflow: hidden;
      background-color: #ffffff;
      z-index: 101;
      /* inherit 继承父元素的z-index值*/
      /* 将z-index设为其初始默认值（通常是auto） */
      transition: all 1s ease;
    }
    .logo.active{
      background-color:#000;
    }
    .logo.active svg path{
      fill: #1196e3;
      stroke:#1196e3;
      transition: all 1s ease;
    }

    /* form触发页面 */
    .form-index-left{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 60%;
      height: 100%;
    }
    .form-navigation{
      padding-left: 30%;
      margin-top: -40%;
      width: 100%;
      text-align: left;
    }
    .form-index-left .form-navigation a{
      font-size: 4rem;
    }
    .form-index-left{
      padding: 50px 0 115px 0;
      /* background-color: #1196e3; */
      border-radius: 0 0 0 10%;
    }
    .form-index-right{
      padding: 50px 50px 0 50px;
      /* background-color: #f0f0f0; */
      border-radius: 0 0 10% 0;
    }