/* 页面基础设置 */
html, body {
  margin: 0;
  padding: 0;
  font-family: 'Lato', serif;
  font-weight: 300;
  height: 100%;

  font-size: 5vh;
  z-index: 999;
  transition: opacity 1s ease;
}

.intro-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgb(246, 246, 246);
  /* ✅ 你也可以用 rgba(255,255,255,1) */
  z-index: 11000;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.6s ease;
  /* ✅ 防止遮罩干扰点击 */
}
/* 开场 intro 容器 */
.intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
    /* ✅ 左对齐 */
  justify-content: flex-end;
  height: 100vh;
  z-index: 11001;
  padding-left: 5vw;
  padding-bottom: 5vh;
  position: relative;
  transition: opacity 0.6s ease;
}

/* 淡入动画类 */
.fade-in {
  opacity: 0;
  animation: fadeIn 0.5s forwards;
}

.delay-0 { animation-delay: 0s; }
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }

@keyframes fadeIn {
  to { opacity: 1; }
}

/* 字体样式 */
.name {
  position: relative;
  font-family: 'Lato', sans-serif;
  font-size: 20vh;
  font-weight: 100;
  color: black;
  margin-bottom: 0px;
  margin-left: 0vw;
}

.name .first-letter {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 24vh;
}

.title {
  position: relative;
  font-weight: 100;
  top: -32vh;
  left: 0.5vw;
  font-size: 5vh;
  color: black;
  
}

/* 年份数字容器 */
.year-container {
  position: absolute;
  bottom: 38vh;
  
  right: calc(95vw - 18em);;
  display: flex;
  height: 5vh;
  overflow: hidden;
}

/* 单个数字盒子 */
.digit {
  position: relative;
  width: 3vh;
  height: 5vh;
  margin: 0 2px;
}

/* 数字动画基础层 */
.digit span {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.4s ease-in-out;
}

/* 默认下一位在下方 */
.digit .next {
  transform: translateY(100%);
}

/* 添加 flip 后触发动画 */
.digit.flip .current {
  transform: translateY(-100%);
}

.digit.flip .next {
  transform: translateY(0);
}

/* 主页面内容样式 */
.main-content {
  display: none;
  height: 100vh;
  justify-content: center;
  align-items: center;
  font-size: 5vh;
  color: black;
}

.fade-out {
  opacity: 0;
  transition: opacity 0.8s ease;
}