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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: Arial, sans-serif;
  color: #111;

  /* 黑白漫画风格的网点背景 */
  background-color: #f8f8f8;
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.2) 18%, transparent 19%);
  background-size: 10px 10px;
}

/* ===== 滚动分离动画区域 ===== */
.split-section {
  height: 260vh;
  position: relative;
}

/* 滚动时固定在屏幕中的舞台 */
.sticky-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== 从上方降落的白色文本框 ===== */
.falling-textbox {
  position: absolute;

  /*
    右边界紧贴网页中线：
    right: 50% 表示文本框右边刚好贴在页面中心线
  */
  right: 50%;

  /*
    top: 50% 配合 translateY(-50%)，
    表示文本框最终以屏幕中线附近为基准定位。
  */
  top: 50%;

  /*
    初始隐藏在屏幕上方。
    JS 会修改 --textbox-move-y。
  */
  transform: translateY(calc(-50% + var(--textbox-move-y, -140vh)));

  /*
    宽 25，高 50 的比例。
    也就是 1:2 的竖向文本框。
  */
  width: min(25vw, 300px);
  aspect-ratio: 1 / 2;

  background: #fff;
  border: 3px solid #111;

  /*
    层级：
    背景和边框 z-index: 1
    文本框 z-index: 2
    小女孩 z-index: 3
  */
  z-index: 2;

  /*
    这里不能是 none。
    因为文本框里的按钮需要可以点击。
  */
  pointer-events: auto;

  will-change: transform;
  transition: transform 0.04s linear;
}

/* 文本框内部内容 */
.textbox-content {
  position: relative;
  width: 100%;
  height: 100%;

  /*
    文本框内部留白。
    让标题和按钮不要贴边太死。
  */
  padding: 7% 6%;
}

/* 文本框内部标题：左上角 */
.sub-header-image {
  position: absolute;
  top: 6%;
  left: 6%;

  width: 50%;
  height: auto;

  pointer-events: none;
}

/* 按钮整体区域：位于文本框中央区域，靠左排列 */
.textbox-buttons {
  position: absolute;

  /*
    按钮左侧靠近文本框左边。
  */
  left: 6%;

  /*
    按钮纵向处于文本框中央区域。
  */
  top: 48%;
  transform: translateY(-50%);

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

/* 单个图片按钮 */
.image-button {
  display: block;

  /*
    圆形边框。
    如果按钮图片本身不是正方形，这里会呈现胶囊形圆角边框。
  */
  border: 3px solid #111;
  border-radius: 999px;

  background: #fff;
  overflow: hidden;

  cursor: pointer;
  text-decoration: none;

  transition: transform 0.18s ease, background-color 0.18s ease;
}

/* 鼠标悬停时轻微反馈 */
.image-button:hover {
  transform: translateX(4px);
  background-color: #f2f2f2;
}

/* 按钮图片 */
.image-button img {
  display: block;

  /*
    按钮图片大小。
    后面可以根据图片实际尺寸继续微调。
  */
  width: min(11vw, 132px);
  height: auto;

  padding: 8px 12px;

  pointer-events: none;
}

/* 插画舞台：只负责定位，不放边框 */
.art-stage {
  position: relative;

  width: min(53vw, 532px);
  aspect-ratio: 1 / 1;

  background: transparent;
  overflow: visible;
  box-shadow: none;
}

/* 背景外框：标题图、背景和边框作为一个整体移动 */
.moving-background-frame {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  border: 3px solid #111;
  background: transparent;

  z-index: 1;

  transform: translateY(var(--bg-move-y, 0px));
  will-change: transform;
  transition: transform 0.04s linear;

  /*
    必须 visible。
    因为 header.png 要放在背景上方，
    如果 hidden 会被裁掉。
  */
  overflow: visible;
}

/* 网页标题图片 */
.header-image {
  position: absolute;

  /*
    左边界对齐背景左边界
  */
  left: 0;

  /*
    放在背景上方。
    数值越大，离背景越远。
  */
  top: -15%;

  /*
    标题图片宽度。
  */
  width: 40%;
  height: auto;

  z-index: 3;
  pointer-events: none;
}

/* 所有图层基础设置 */
.art-layer {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;
  object-fit: contain;

  pointer-events: none;
}

/* 背景图层 */
.background-layer {
  z-index: 1;
}

/* 小女孩层：固定不动，没有边框 */
.girl-layer {
  z-index: 3;
  transform: translateY(0);
  will-change: transform;

  /*
    小女孩不拦截鼠标点击。
    这样即使按钮在她背后，也能点击到按钮。
  */
  pointer-events: none;
}

/* 手机适配 */
@media (max-width: 768px) {
  .art-stage {
    width: 70vw;
  }

  .falling-textbox {
    width: 36vw;
  }

  .header-image {
    top: -15%;
    width: 40%;
  }

  .sub-header-image {
    width: 78%;
  }

  .textbox-buttons {
    gap: 12px;
  }

  .image-button img {
    width: 16vw;
    padding: 6px 10px;
  }
}