/* 确保整个页面没有白边 */
html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-color: #000; /* 黑色背景，这样即使露出一点边缘也不明显 */
}

/* 通用背景设置 - 基础样式 */
.background {
  position: fixed;
  top: -100px; 
  left: -100px; 
  width: calc(100% + 200px); 
  height: calc(100% + 200px); 
  z-index: -1;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 1;
  will-change: transform;
}

/* 首页背景 */
.background {
  background-image: url('/img/main_bg.webp');
}

/* 认证页面背景 */
.auth-page .background {
  background-image: url('/img/wood.jpg') !important;
  opacity: 1 !important;
}

/* 木质背景过渡层 */
.transition-overlay {
  position: fixed;
  bottom: -100%; /* Start from below the viewport */
  left: -100px;
  width: calc(100% + 200px);
  height: calc(100% + 200px);
  z-index: 999;
  background: url('/img/wood.jpg') no-repeat center center;
  background-size: cover;
  transition: bottom 2s cubic-bezier(0.19, 1, 0.22, 1); /* 从1秒改为2秒，让动画变慢 */
}

@font-face {
  font-family: 'PPPangaia';
  src: url('/fonts/PPPangaia-Bold.otf') format('opentype');
  font-weight: bold;
}
@font-face {
  font-family: 'PPPangaia';
  src: url('/fonts/PPPangaia-Ultralight.otf') format('opentype');
  font-weight: 100;
}

body {
  font-family: 'PPPangaia', sans-serif;
  mix-blend-mode: difference;
  color: white;
  margin: 0;
  padding: 0;
}

/* 使用不同的方式居中元素，避免与tilt效果冲突 */
.letter-container,
.welcome-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  pointer-events: none; /* 允许点击穿透到下面的元素 */
}

.letter,
.welcome-message {
  /* 移除冲突的transform */
  position: relative; /* 改为相对定位 */
  margin: 0;
  padding: 0;
  max-width: 80vw;
  max-height: 80vh;
  will-change: transform;
  pointer-events: auto; /* 确保元素本身可点击 */
}

.bookmark {
  position: fixed;
  width: 40vh;
  transition: transform 0.3s ease;
  cursor: pointer;
  z-index: 10;
}

.bookmark.login {
  top: -1vh;
  left: 0vh;
  transform: rotate(277deg);
}

.bookmark.signup {
  top: -1vh;
  left: 15vh;
  transform: rotate(267deg);
}

.bookmark.garden {
  bottom: -1vh;
  right: 15vh;
  transform: rotate(88deg);
}

.bookmark.explore {
  bottom: -1vh;
  right: 0vh;
  transform: rotate(97deg);
}

.bookmark.logout {
  top: -1vh;
  left: 0vh;
  transform: rotate(277deg);
}

/* Hover效果统一样式 */
.bookmark.login:hover {
  transform: rotate(285deg) scale(1.1) translateX(-5vh);
}

.bookmark.signup:hover {
  transform: rotate(265deg) scale(1.1) translateX(-5vh);
}

.bookmark.garden:hover {
  transform: rotate(85deg) scale(1.1) translateX(-5vh);
}

.bookmark.explore:hover {
  transform: rotate(105deg) scale(1.1) translateX(-5vh);
}

.bookmark.logout:hover {
  transform: rotate(285deg) scale(1.1) translateX(-5vh);
} 

/* Specific styles for the index page */
.welcome-message {
  font-family: 'PPPangaia', sans-serif;
  font-size: 3rem;
  color: white;
  text-align: center;
  display: none; /* 初始隐藏，通过JS或inline样式显示 */
}

.welcome-message .username {
  font-weight: bold;
  display: block;
  font-size: 4rem;
  margin-top: 10px;
}

.welcome-message.show {
  display: block;
}

/* Parallax effect styles */
.parallax-container {
  transform-style: preserve-3d;
  transform: perspective(1000px);
  transition: transform 0.3s ease;
}

.parallax-item {
  transform: translateZ(20px);
  transition: transform 0.3s ease;
}

.full-page-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* Hover effect styles */
.scale-on-hover {
  transition: transform 0.3s ease;
}

.scale-on-hover:hover {
  transform: translateZ(20px) scale(1.1);
}

/* 认证过渡相关样式 */
.transition-overlay.active {
  bottom: 0; /* Move to fill the screen */
}

.auth-form-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  z-index: 1000;
  opacity: 0;
}

.auth-form-container img {
  max-width: 90%;
  max-height: 90vh;
  display: block;
  margin: 0 auto;
}

/* 认证页面表单切换动画 */
@keyframes slideUp {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-50vh); opacity: 0; }
}

@keyframes slideDown {
  0% { transform: translateY(50vh); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

.exit-up {
  animation: slideUp 0.8s cubic-bezier(0.65, 0, 0.35, 1) forwards; /* 从0.35秒改为0.8秒，让动画变慢 */
  will-change: transform, opacity;
}

.enter-from-below {
  animation: slideDown 1.2s cubic-bezier(0.65, 0, 0.35, 1) forwards; /* 从0.6秒改为1.2秒，让动画变慢 */
  transform: translateY(50vh);
  opacity: 0;
  will-change: transform, opacity;
}

/* Positioning for the switching forms */
.form-switching-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  width: 90vw;
  max-width: 550px;
}

/* Input field interaction fixes */
.tilt-container {
  z-index: 1;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.input-field {
  cursor: text !important;
  -webkit-appearance: none;
  appearance: none;
}

.input-field:focus {
  outline: 2px solid #4a6741;
  box-shadow: 0 0 5px rgba(74, 103, 65, 0.5);
}

/* 响应式样式 */
@media screen and (max-width: 768px) {
  .background, 
  .auth-page .background,
  .transition-overlay {
    /* 在小屏幕上增加更多出血区域 */
    top: -150px;
    left: -150px;
    width: calc(100% + 300px);
    height: calc(100% + 300px);
  }
}

/* 禁用iOS页面弹性滚动 */
html {
  position: fixed;
  height: 100%;
  overflow: hidden;
}

/* 特定页面背景样式 */
.index-page {
  background-color: #000; /* 确保首页背景为黑色 */
}

/* 为index页面背景额外增加出血区域 */
.index-page .background {
  top: -200px !important; /* 为index页面提供比其他页面更多的出血区域 */
  left: -200px !important;
  width: calc(100% + 400px) !important; /* 显著加大背景尺寸 */
  height: calc(100% + 400px) !important;
}