/* ===== 第一屏（Hero） ===== */
.first {
  /* 高度目标：≈1.2 屏，上限 1280px；如需略短可调 --first-extra 为负 */
  --hero-base: clamp(700px, 120svh, 1280px);
  --first-extra: -200px;

  /* 三层图变量：保持比例不拉伸，仅移动；可独立调整尺寸与位置 */
  /* Deer（右下锚点） */
  --deer-w: 1400px;
  /* 宽度定值，高度等比 */
  --deer-right: -70px;
  --deer-bottom: 34px;

  /* Fortress（右下锚点） */
  --fortress-w: auto;
  /* 建议与 --fortress-h 二选一设为 auto */
  --fortress-h: 100%;
  --fortress-right: -50px;
  --fortress-bottom: 1px;

  /* Left-mat（左上锚点） */
  --leftmat-w: 100%;
  /* 可填 110% / 90vw / 1000px 等 */
  --leftmat-h: auto;
  --leftmat-left: 0px;
  --leftmat-top: 60px;

  position: relative;
  height: calc(var(--hero-base) + var(--first-extra));
  min-height: calc(var(--hero-base) + var(--first-extra));
  overflow: hidden;

  /* Full-bleed 横向出血，避免外层 padding 影响 */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  /* 本区背景透明（让出全局连续背景） */
  background: transparent !important;

  will-change: opacity;
}

/* 一次性绘制三层：鹿 → 城堡 → 左布（顺序决定遮挡关系） */
.first::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    url("https://static.igem.wiki/teams/5550/pic/image/deer.webp"),
    url("https://static.igem.wiki/teams/5550/pic/image/fortress2.webp"),
    url("https://static.igem.wiki/teams/5550/pic/image/left-mat.webp");
  background-repeat: no-repeat, no-repeat, no-repeat;

  /* 尺寸与位置由变量独立控制 */
  background-size:
    var(--deer-w) auto,
    var(--fortress-w) var(--fortress-h),
    var(--leftmat-w) var(--leftmat-h);

  background-position:
    right var(--deer-right) bottom var(--deer-bottom),
    right var(--fortress-right) bottom var(--fortress-bottom),
    left var(--leftmat-left) top var(--leftmat-top);
}

/* 内容层（text.png + 六个细菌） */
.first-of-all {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* 保持 text.png 的“原始位置”与缩放，不移动容器盒模型 */
.text-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-60%, -50%) scale(1.6);
  z-index: 3;
}

.text {
  max-width: 100%;
  height: auto;
  animation: shapeFadeInUp 1s ease-out forwards;
}

@keyframes shapeFadeInUp {
  0% {
    transform: translateY(30px) scale(0.9);
    opacity: 0;
  }

  100% {
    transform: translateY(0) scale(1.0);
    opacity: 1;
  }
}

/* 六个细菌：原位*/
.caton {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  transition: transform .3s ease-out;
}

.c1 {
  width: 11%;
  height: auto;
  top: 130px;
  left: 670px;
}


.c2 {
  width: 10%;
  height: auto;
  top: 620px;
  left: 660px;
}

.c3 {
  width: 10%;
  height: auto;
  top: 130px;
  left: 40px;
}

.c4 {
  width: 11%;
  height: auto;
  top: 580px;
  left: 20px;
}

.c5 {
  width: 10%;
  height: auto;
  top: 600px;
  left: 300px;
}

.c6 {
  width: 10%;
  height: auto;
  top: 140px;
  left: 150px;
}


/* 自然坠落初始态（若有 microbe-drop.js 控制入场可直接兼容） */
.first .caton {
  opacity: 0;
  translate: 0 -120vh;
  will-change: translate, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .first .caton {
    opacity: 1;
    translate: 0 0;
  }
}

/* 移动端高度轻调，避免过长 */
@media (max-width: 980px) {
  .first {
    --hero-base: clamp(560px, 105svh, 980px);
  }
}

/* 开屏加载 */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}