@import url('https://fonts.googleapis.com/css2?family=Balthazar&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body,
html {
  overflow-x: hidden; /* 避免水平滾動條 */
  font-family: 'Balthazar', serif, 'Lato', Helvetica, Arial, Lucida, sans-serif;
  /* cursor: url(/imgs/cursor.png), auto !important; */
  background-color: #c7b69a;
  width: 100%;
  height: 100%;
}

.coming-soon-text {
  font-family: 'Balthazar', serif; /* Updated font-family */
  font-size: 3rem;
  z-index: 1;
  display: inline-block;
  position: relative;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(255, 255, 255, 0.5);
  animation: glow 2s ease-in-out infinite; /* 字体的柔光动画 */
  display: inline-flex;
  align-items: center;
}

#parallax_wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  perspective: 5000px;
  background: transparent; /* 讓整個區域保持透明 */
}

#parallax_bg,
#parallax_church,
#parallax_cloud {
  position: absolute;
  object-fit: cover; /* 保持圖片比例 */
  top: 0;
  left: 0;
  width: 120%; /* 確保寬度佔滿視窗 */
  height: 100%;
  background: transparent;
  transition: transform 0.1s ease-out;
  overflow: visible;
}

#parallax_bg {
  width: 100%; /* 增加圖片寬度確保覆蓋 */
  height: 100%; /* 增加圖片高度確保覆蓋 */
  top: 0; /* 上移圖片 */
  left: 0; /* 左移圖片 */
}

/* Header styles */
.header-coming-soon {
  position: absolute;
  top: 10px;
  width: 100%;
  text-align: center;
  font-size: 35px;
  font-weight: 700;
  color: #4b2e2a; /* Dark brown color matching the church */
  font-family: 'Balthazar', serif; /* Updated font-family */
  z-index: 10;
}

.header-coming-soon h1 {
  padding: 10px 20px; /* Add padding around text */
  border-radius: 10px;
  display: inline-block;
  text-shadow: 1px 1px 2px #8b7500, /* Inner shadow for 3D depth */ -1px -1px 2px #e7d19a,
    /* Top-left shadow for embossing */ 2px 2px 5px rgba(0, 0, 0, 0.3); /* Outer shadow for 3D lift */
}

.coming-soon-container {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  transition: opacity 1s ease, visibility 1s ease;
  z-index: 999;
}

.coming-soon-container.hidden {
  opacity: 0;
  visibility: hidden;
}

.homepage-content {
  opacity: 0;
  transition: opacity 1s ease-in;
}

.homepage-content.loaded {
  opacity: 1;
}

.dots::after {
  content: '';
  display: inline-block;
  animation: loading-dots 2s infinite steps(3, end);
}

/* 柔光文字动画 */
@keyframes glow {
  0%,
  100% {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(255, 255, 255, 0.5);
  }
  50% {
    text-shadow: 0 0 20px rgba(255, 255, 255, 1), 0 0 30px rgba(255, 255, 255, 0.7);
  }
}

@keyframes loading-dots {
  0% {
    content: '';
  }
  33% {
    content: '.';
  }
  66% {
    content: '..';
  }
  100% {
    content: '...';
  }
}

.background-image {
  position: absolute;
  object-fit: cover;
  width: 100%;
  height: 100%;
  filter: sepia(0.4) brightness(0.5);
}
/* Navbar hidden initially */
#navbar {
  opacity: 0;
  transition: opacity 1s ease-in;
}

#navbar.show {
  opacity: 1;
}

.hidden {
  display: none;
}

/* Footer styles */
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: #8b4a43; /* Slightly darker red for contrast */
  color: #fff;
  padding: 8px 0;
  text-align: center;
  font-size: 14px;
  z-index: 10;
}

.footer p {
  padding: 0.2rem;
}

#parallax_cloud {
  animation: floatCloud 4s ease-in-out infinite alternate;
  z-index: 15; /* 確保雲朵在適當層級 */
  object-fit: cover;
  overflow: visible;
  width: 100%;
  top: -250px;
}

@keyframes floatCloud {
  0% {
    transform: translateX(-10px);
  }
  100% {
    transform: translateX(10px);
  }
}

#parallax_bird1,
#parallax_bird2 {
  position: absolute;
  width: 90px; /* 调整鸟的大小 */
  height: auto;
  top: -510px; /* 初始位置 */
  animation: flySmooth 40s ease-in-out infinite; /* 飞行动画 */
  z-index: 15; /* 确保鸟类显示在前面 */
  opacity: 0; /* 起始透明度 */
  transition: opacity 1s ease-out; /* 確保平滑過渡 */
}

#parallax_bird1 {
  width: 120px;
  left: -15%; /* 从屏幕左侧开始 */
  animation-delay: 0s; /* 无延迟 */
}

#parallax_bird2 {
  left: -50%; /* 从更远的左侧开始 */
  animation-delay: 9s; /* 延迟以错开动画 */
}

/* 飞行动画 */
@keyframes flySmooth {
  0% {
    transform: translateX(0) translateY(0) scale(1);
    opacity: 0; /* 开始时透明 */
  }
  20% {
    transform: translateX(20vw) translateY(-30px) scale(1.1); /* 稍微向上 */
    opacity: 1; /* 在刚开始时逐渐出现 */
  }
  40% {
    transform: translateX(40vw) translateY(20px) scale(0.9); /* 向下飛 */
  }
  60% {
    transform: translateX(60vw) translateY(-20px) scale(1.2); /* 再次向上 */
  }
  80% {
    transform: translateX(80vw) translateY(10px) scale(1); /* 平滑回落 */
    opacity: 1; /* 保持不透明直到接近结束 */
  }
  100% {
    transform: translateX(100vw) translateY(0) scale(1); /* 結束位置 */
    opacity: 0; /* 结束时完全透明 */
  }
}

#parallax_church {
  width: 80%;
  height: 100% !important;
  top: 55px;
  left: 9%;
  object-fit: cover;
  overflow: visible;
  z-index: 20;
  scale: 0.9;
}

#parallax_church:hover {
  filter: brightness(1.15);
  cursor: url(/imgs/click-cursor.png), auto !important;
  z-index: 20;
}

@media (max-width: 850px) {
  .header {
    top: 24px;
    font-size: 28px; /* 調整標題字體大小 */
    text-align: center;
  }

  #parallax_church {
    width: 120%;
    height: 100% !important;
    top: 45px; /* 相對於父容器的位置 */
    left: 0;
    object-fit: cover;
    overflow: visible;
  }
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .header {
    top: 24px;
    font-size: 28px; /* 調整標題字體大小 */
    text-align: center;
  }

  #parallax_church {
    width: 125%;
    height: 105% !important;
    top: 45px;
    object-fit: cover;
    overflow: visible;
  }

  #parallax_cloud {
    width: 125%; /* 確保寬度佔滿視窗 */
    height: 105%;
    background: transparent;
    transition: transform 0.1s ease-out;
    overflow: visible;
  }

  .parallax-layer {
    background-attachment: scroll !important; /* Fix background attachment issue on mobile */
  }
}

@media (max-width: 480px) {
  .header {
    top: 24px;
    font-size: 24px; /* 調整標題字體大小 */
    text-align: center;
  }

  .coming-soon-text {
    font-size: 2rem; /* 調整來臨標語字體 */
  }

  #parallax_church {
    height: 100% !important;
    top: 70px;
    object-fit: cover;
    overflow: visible;
  }

  #parallax_cloud {
    width: 135%; /* 確保寬度佔滿視窗 */
    height: 110%;
    background: transparent;
    transition: transform 0.1s ease-out;
    overflow: visible;
  }
}

#mobile-menu {
  transition: max-height 0.3s ease-in-out;
}

.social-feed iframe,
.social-feed .fb-page {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}