:root {
  --bg: #0a6c74;
  --card: #0f7c7c;
  --card-deep: #0f7c7c;
  --text: #ffffff;
  --shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
  --radius: 18px;
  --duration: 1.0s;
  --card-bg-url: url("https://static.igem.wiki/teams/5550/pic/members/base-color.webp");

  /* 白色区域 （人物图片）*/
  --white-top: 12%;
  --white-left: 12%;
  --white-right: 12%;
  --white-height: 80%;
  --white-radius: 10px;
  --white-shadow: 0 8px 10px rgba(0, 0, 0, .28);

  /* 卡片尺寸 */
  /* 卡片宽度 */
  --card-w: 370px;
  /* 列间距 */
  --col-gap: 55px;
  /* 行间距 */
  --row-gap: 35px;
  --title-size-min: 28px;
  --title-size-prefer: 5.2vw;
  /* 随视口缩放 */
  --title-size-max: 64px;
}


/* 全局基础设置 */
* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Microsoft Yahei", sans-serif;
}



/* 页面容器,每个 pageN 是一个独立的内容块 */

.page1,
.page2,
.page3,
.page4 {
  max-width: 1000px;
  padding: 48px 24px 72px;
  margin: 0 auto;
}


/* 标题本体：统一排版并在不同屏宽下保持合适大小与间距 */
.page-title1,
.page-title2,
.page-title3,
.page-title4 {
  display: block;
  text-align: center;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  font-weight: 800;
  font-size: clamp(32px, 6vw, 72px);
  /* 小屏不太挤，大屏不太夸张 */
  line-height: 1.06;
  letter-spacing: 0.07em;
  color: #fff;
  text-shadow:
    0 2px 8px rgba(0, 0, 0, .25),
    0 0 24px rgba(255, 255, 255, .22);

  /* 让标题在卡片上方一层，避免 hover 产生遮挡错觉 */
  position: relative;
  z-index: 2;

  /* 顶部与下方卡片的距离 */
  margin: clamp(14px, 2.5vh, 28px) auto clamp(16px, 3vh, 36px);

  /* 锚点滚动到标题时别被顶栏挡住（如果以后有目录锚点会很有用） */
  scroll-margin-top: calc(var(--nav-h) + 16px);

  /* 不需要交互，避免挡住下方内容的鼠标事件 */
  pointer-events: none;
}

/* 修复：之前 ::after 只作用到 .page-title4。
   现在四个标题都有同款柔光下划线 */
.page-title1::after,
.page-title2::after,
.page-title3::after,
.page-title4::after {
  content: "";
  display: block;
  width: min(540px, 60vw);
  height: 10px;
  margin: clamp(8px, 1vw, 14px) auto 0;
  border-radius: 999px;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 255, 255, .32) 70%, transparent 100%);
  filter: blur(.6px);
  opacity: .92;
}

/* 大屏时，标题与卡片拉开更多呼吸感 */
@media (min-width: 1100px) {

  .page-title1,
  .page-title2,
  .page-title3,
  .page-title4 {
    margin-top: 84px;
    margin-bottom: 32px;
  }
}


.team-grid1,
.team-grid2,
.team-grid3,
.team-grid4 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--row-gap);
}

.team-row1,
.team-row2,
.team-row3,
.team-row4 {
  display: grid;
  justify-content: center;
  column-gap: var(--col-gap);
}


.team-row1.row-11 {
  grid-template-columns: repeat(2, var(--card-w));
}

.team-row1.row-21 {
  grid-template-columns: repeat(3, var(--card-w));
}

.team-row2.row-12 {
  grid-template-columns: repeat(3, var(--card-w));
}

.team-row2.row-22 {
  grid-template-columns: repeat(3, var(--card-w));
}

.team-row3.row-13 {
  grid-template-columns: repeat(3, var(--card-w));
}

.team-row3.row-23 {
  grid-template-columns: repeat(3, var(--card-w));
}

.team-row4.row-14 {
  grid-template-columns: repeat(3, var(--card-w));
}

.team-row4.row-24 {
  grid-template-columns: repeat(3, var(--card-w));
}

.team-row4.row-34 {
  grid-template-columns: repeat(3, var(--card-w));
}

.team-card1,
.team-card2,
.team-card3,
.team-card4 {
  position: relative;
  width: var(--card-w);
  /* 卡片高度 */
  height: 520px;
  perspective: 1000px;
  border-radius: var(--radius);
}

.card-inner1,
.card-inner2,
.card-inner3,
.card-inner4 {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform var(--duration) cubic-bezier(.2, .7, .2, 1);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* 这些是反转动画 */
.team-card1:hover .card-inner1,
.team-card1.flipped .card-inner1,
.team-card2:hover .card-inner2,
.team-card2.flipped .card-inner2,
.team-card3:hover .card-inner3,
.team-card3.flipped .card-inner3,
.team-card4:hover .card-inner4,
.team-card4.flipped .card-inner4 {
  transform: rotateY(180deg);
}


.card-front1,
.card-front2,
.card-front3,
.card-front4 {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  backface-visibility: hidden;
  background: center / 100% 100% no-repeat var(--card-bg-url);
}

.card-front1::before,
.card-front2::before,
.card-front3::before,
.card-front4::before {
  content: "";
  position: absolute;
  top: var(--white-top);
  left: var(--white-left);
  right: var(--white-right);
  height: var(--white-height);
  background: #fff;
  border-radius: var(--white-radius);
  box-shadow: var(--white-shadow);
  z-index: 1;
}

/* 卡片头像和名字，到时候不对的话可以改大小 */
.avatar-box1,
.avatar-box2,
.avatar-box3,
.avatar-box4 {
  position: absolute;
  top: calc(var(--white-top) + 1.2%);
  left: calc(var(--white-left) + 1.2%);
  right: calc(var(--white-right) + 1.2%);
  height: calc(var(--white-height) - 2.4%);
  border-radius: calc(var(--white-radius) - 2px);
  overflow: hidden;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}


.name1,
.name2,
.name3,
.name4 {
  position: absolute;
  top: calc(var(--white-top) - 6.5%);
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}


.avatar1,
.avatar2,
.avatar3,
.avatar4 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}


.card-back1,
.card-back2,
.card-back3,
.card-back4 {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: left;
  padding: 28px;
  border-radius: var(--radius);
  backface-visibility: hidden;
  transform: rotateY(180deg);


  background: linear-gradient(135deg,
      rgba(180, 225, 225, 0.85),
      rgba(160, 210, 210, 0.85));
  backdrop-filter: blur(6px);
}


.team-card1:focus-visible,
.team-card2:focus-visible,
.team-card3:focus-visible,
.team-card4:focus-visible {
  box-shadow: 0 0 0 3px #fff8, 0 0 0 6px #00d2ff88;
  border-radius: var(--radius);
}


@media (max-width: 900px) {

  .team-row1.row-11,
  .team-row1.row-21,
  .team-row2.row-12,
  .team-row2.row-22,
  .team-row3.row-13,
  .team-row3.row-23,
  .team-row4.row-14,
  .team-row4.row-24 {
    grid-template-columns: 1fr;
  }

  .team-card1,
  .team-card2,
  .team-card3,
  .team-card4 {
    justify-self: center;
  }
}