body {
  background-color: #f8f9fa;
}

.serif {
  font-family: "Chiron Sung HK", serif, sans-serif;
}

.cicadabg {
  background: url(../i/cicada.png) no-repeat center center !important;
}

/* Text Carousel Styles */
#text-carousel {
  position: relative;
  min-height: 180px; /* Prevents content jumping */
  width: 100%;
}

.text-carousel-item {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  transition: opacity 1.2s ease-in-out;
  pointer-events: none; /* Hidden items are not interactive */
}

.text-carousel-item.active {
  opacity: 1;
  pointer-events: auto; /* Visible item is interactive */
}

.pedia {
  /*columns: 2; /* Number of columns */
  /*column-gap: 20px; /* Space between columns */
  width: 80%;
  height: 100vh;
  padding: 100px;
}

#map {
  height: 400px;
  width: 100%;
  border-radius: 0.375rem; /* Bootstrap's default border radius */
  border: 1px solid #dee2e6;
}

.navbar-brand img {
  margin-right: 10px;
}

@media (min-width: 992px) {
  .navbar-brand img {
    filter: invert(1); /* Makes the black icon white on desktop */
  }
}

.card {
  border: none;
  margin-bottom: 1rem; /* Add some space below cards */
}

/* Header Navigation Link Color */
header .nav-pills .nav-link:not(.active) {
  color: #333;
}

/* Nav Item Hover Effect: Underline and Glow */
header .nav-pills .nav-link {
  position: relative; /* 為偽元素定位 */
  transition: color 0.3s ease-in-out, text-shadow 0.3s ease-in-out;
  padding-bottom: 8px; /* 留出底線空間 */
}

/* 底線的偽元素 */
header .nav-pills .nav-link::after {
  content: "";
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #0d6efd; /* 使用 Bootstrap 的主要藍色，與 active 狀態一致 */
  transform-origin: bottom left;
  transition: transform 0.3s ease-out;
}

header .nav-pills .nav-link:not(.active):hover {
  color: #333; /* Hover 時文字也變色 */
  text-shadow: 0 0 8px rgba(13, 110, 253, 0.5); /* 光暈效果 */
}

header .nav-pills .nav-link:not(.active):hover::after {
  transform: scaleX(1);
}

header {
  background: rgba(255, 255, 255, 0.23);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

@media (max-width: 991.98px) {
  header {
    background: #fff; /* Pure white background for mobile/tablet */
    backdrop-filter: none; /* Remove blur for mobile/tablet */
    -webkit-backdrop-filter: none;
  }

  .navbar-brand img {
    filter: none; /* Remove invert filter for mobile/tablet */
  }
}

#slogan {
  position: relative;
  overflow: hidden; /* 隱藏超出範圍的影片內容 */
  /* 使用 Flexbox 將子元素置中 */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh; /* 維持全螢幕高度 */
  background: transparent; /* 讓背景透明，影片才能顯示 */
}

#volume-toggle {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 2;
}

/* 為影片加上半透明遮罩 */
#slogan::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #333;
  opacity: 0.25;
  z-index: 0; /* 確保在影片之上，但在內容之下 */
}

#slogan #bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 讓影片填滿整個區塊，可能會裁切 */
  z-index: -1; /* 將影片放在內容底層 */
}

/* 影片上方內容的樣式 */
.slogan-content {
  position: relative; /* 確保 z-index 生效 */
  z-index: 1; /* 確保內容在影片之上 */
  color: white;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7); /* 為文字加上陰影以提高可讀性 */
}

#chassing {
  position: relative;
  /* 設定一個合適的高度，讓區塊可見且可互動 */
  min-height: 70vh;
  /* 預設背景圖 */
  background-image: url("../i/cicada-main.png");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  /* 使用 flexbox 來垂直置中文字內容 */
  display: flex;
  align-items: center;
  color: white;
}

/* 使用偽元素來放置 hover 時的背景圖，以實現漸變效果 */
#chassing::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../i/cicada-hover.png");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  opacity: 0;
  /* 漸變動畫效果 */
  transition: opacity 0.5s ease-in-out;
}

#chassing:hover::after {
  opacity: 1;
}

/* 確保文字內容在背景圖之上 */
#chassing .container {
  position: relative;
  z-index: 2;
}

#chassing h2 {
  /* 增加文字陰影以提高可讀性 */
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}
.subtitle {
  font-size: 3rem;
}
#map-section {
  /* 為地圖區塊增加上下間距，避免黏在一起 */
  padding-top: 5rem;
  padding-bottom: 3rem; /* 減少地圖區塊底部的間距，讓它與頁尾的間距更協調 */
}

#map-section .flourish-embed {
  width: 50%;
  margin: 0 auto; /* 置中 */
}

/* "一起追追追" 區塊樣式 */
#letsupload {
  padding: 5rem 0; /* 上下 5rem, 左右 0 */
  background-color: rgba(25, 135, 84, 0.5); /* Bootstrap 成功綠色的半透明版本 */
  /* 移除固定的白色文字，讓文字繼承預設深色，以確保在淺色背景上的可讀性 */
}

/* Call to action section style */
#letsfind {
  padding: 100px 0;
  background: rgba(25, 135, 84, 0.2); /* 淡綠色毛玻璃效果 */
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

footer {
  /* 毛玻璃效果 */
  background: rgba(13, 110, 253, 0.9); /* 藍底 #0d6efd, 50% 透明度 */
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  /* 顏色與排版 */
  color: #eee;
  padding: 2rem 0;
}

footer .thanks {
  margin-top: 1rem;
  font-size: 0.8rem;
  color: rgba(238, 238, 238, 0.7);
}

/* Upload Modal Style */
.modal-content {
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.modal-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.modal-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

#cicadapedia {
  display: flex;
  align-items: center;
  font-family: "Huninn", sans-serif;
}

#game {
  background: #fff;
}

/* Styles for the #why section */
#why {
  background: #f0f8ff url(../i/cicada.png) no-repeat center center;
  background-size: cover; /* AliceBlue: a very light and soft blue */
  min-height: 80vh;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden; /* To contain elements during animation */
}

#why h2 {
  margin-bottom: 2.5rem;
}

#why h3 {
  opacity: 0;
  transform: translateY(30px); /* Start slightly lower */
  transition: opacity 1.2s ease-out, transform 1.2s ease-out; /* Smooth transition */
  margin-bottom: 1.5rem; /* Spacing between questions */
}

#why h3.visible {
  opacity: 1;
  transform: translateY(0); /* Move to original position */
}

/* Carousel Styles */
.carousel-container {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 20px 0; /* Add some vertical padding */
}

@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%); /* Scroll half the width to create infinite loop */
  }
}

@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%); /* Scroll half the width to create infinite loop */
  }
}

.carousel-track {
  display: flex;
  white-space: nowrap; /* Prevent items from wrapping */
  animation: scroll-left linear infinite; /* Apply animation */
}

.carousel-item-custom {
  flex-shrink: 0;
  width: 300px; /* Fixed width for each card */
  margin: 0 10px; /* Space between cards */
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease-in-out;
  display: inline-block; /* Ensure items are in a row */
  vertical-align: top;
}

.carousel-item-custom:hover {
  transform: translateY(-5px);
}

.carousel-item-custom .card-body {
  padding: 15px;
}

.carousel-item-custom .card-title {
  font-size: 1.1rem;
  margin-bottom: 5px;
}

.carousel-item-custom .card-subtitle {
  font-size: 0.9rem;
}

.carousel-item-custom .card-text {
  font-size: 0.85rem;
  color: #555;
}

.carousel-item-custom .text-muted {
  font-size: 0.75rem;
}

#cicadapedia .imgratio {
  aspect-ratio: 1600/1069;
  object-fit: cover;
  object-position: center;
}

#cicadapedia .imgratio img {
  margin: 0 auto;
}

.player-section {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(44, 62, 80, 0.08);
  margin: 0 auto 32px auto;
  padding: 32px 24px 24px 24px;
  max-width: 480px;
  transition: box-shadow 0.3s;
}
.player-section:hover {
  box-shadow: 0 8px 32px rgba(44, 62, 80, 0.16);
}

.player-section h2 {
  margin-top: 0;
  color: #3a5a7a;
  font-size: 1.4em;
  letter-spacing: 1px;
}

.player-section audio {
  width: 100%;
  margin-top: 18px;
  outline: none;
  border-radius: 6px;
  background: #f4f8fb;
  box-shadow: 0 2px 8px #e0eafc;
}

.player-section .desc {
  color: #5a6a7a;
  margin-top: 18px;
  font-size: 1em;
  line-height: 1.7;
  background: #f7fafc;
  border-left: 4px solid #a3c9e2;
  padding: 12px 18px;
  border-radius: 6px;
}
@keyframes move {
  to {
    /* Move horizontally so that right edge is aligned against the viewport */
    transform: translateX(calc(-100% + 100vw));
  }
}

.sectionPin {
  /* Stretch it out, so that we create room for the horizontal scroll animation */
  height: 500vh;
  /* Adjusted for 5 slides */
  overflow: visible;
  /* To make position sticky work … */

  view-timeline-name: --section-pin-tl;
  view-timeline-axis: block;
}

.pin-wrap-sticky {
  /* Stick to Top */
  height: 100vh;
  width: 100%;
  position: sticky;
  top: 70px;
  overflow-x: hidden;
}

.pin-wrap {
  height: 100vh;
  /* 5 articles * 100vw */
  display: flex;
  align-items: center;
  /* No gap or padding for seamless scroll */

  /* Hook animation */
  will-change: transform;
  animation: linear move forwards;

  /* Link animation to view-timeline */
  animation-timeline: --section-pin-tl;
  animation-range: contain 0% contain 100%;
}

.pin-wrap > article {
  width: 50vw;
  flex-shrink: 0;
  height: 100vh;
  /* Full viewport height */
  overflow-y: auto;
  /* For long content */
  padding: 3rem;
  /* Give content some space */
  /*background: rgba(255, 255, 255, 0.9);*/
  backdrop-filter: blur(10px);
  /* No border-radius for seamless edges */
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  /* Add a subtle separator */
  align-items: flex-start;
  display: flex;
}


.pin-wrap article p {
  font-size: 1rem;
  line-height: 1.75;
}

.pin-wrap > article.wide {
  width: 100vw;
  text-align: center;
}

.pin-wrap > article.wide > img {
  height: 100%;
}

.pin-wrap > article:nth-child(odd) {
  background: #ffe7d5;
}

.pin-wrap > article:nth-child(even) {
  background: #ebf6e8;
}

#cicadapedia .pin-wrap article:nth-child(2) div {
    width: 100%;
}

#cicadapedia .pin-wrap article:nth-child(2) iframe {
    width: 100%;
    aspect-ratio: 16/9;
}

.pin-wrap > article:first-child {
  background: #efefef;
}

.pin-wrap > article h4 {
  margin: 25px 0;
}

.pin-wrap > article:last-child {
  border-right: none;
}

.pin-wrap > article.title-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.pin-wrap > article.title-slide h2 {
  font-size: 5rem;
  font-weight: bold;
}

.pin-wrap > article img,
.pin-wrap > article video {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
}

.imgcontainer {
  width: 100%;
  object-fit: cover;
  margin: 0 auto;
}

#cicadapedia .pin-wrap > article:nth-child(5) .imgcontainer img {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

#cicadapedia .pin-wrap > article:nth-child(4):hover + article:nth-child(5) .imgcontainer img {
  opacity: 1;
}

@media (orientation: portrait) {
  #chassing .container,
  #whereiscicada .carousel-video-caption {
    display: none;
  }
}

@media (max-width: 767.98px) {
  #chassing .container,
  #whereiscicada .carousel-video-caption {
    display: none;
  }
}

@media (max-width: 768px) {
  .sectionPin {
    height: auto;
    /* Remove fixed height */
    overflow: auto;
    /* Reset overflow */
    view-timeline-name: none;
    /* Disable animation timeline */
  }

  .pin-wrap-sticky {
    position: static;
    /* Remove sticky positioning */
    height: auto;
  }

  .pin-wrap {
    animation: none;
    /* Disable horizontal scroll animation */
    display: block;
    /* Stack articles vertically */
    width: 100%;
    height: auto;
  }

  .pin-wrap > article {
    width: 100%;
    /* Full width for each article */
    height: auto;
    /* Auto height based on content */
    min-height: 50vh;
    /* Give some minimum height */
    padding: 2rem 1rem;
    /* Adjust padding for smaller screens */
    border-right: none;
    /* Remove right border */
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    /* Add bottom border */
    margin-bottom: 1rem;
    /* Add space between articles */
  }

  .pin-wrap > article > p {
    word-break: break-all;
    word-wrap: break-word;
  }

  .pin-wrap > article.title-slide h2 {
    font-size: 3rem;
    /* Smaller font size for titles on mobile */
  }

  .pin-wrap > article.wide > img {
    height: auto;
    /* Let image height be natural */
    max-width: 100%;
  }

  #cicadapedia .pin-wrap,
  #cicadaincolture .pin-wrap {
    display: block;
    width: 100%;
  }

  #cicadapedia .pin-wrap > article,
  #cicadaincolture .pin-wrap > article {
    width: 100vw;
  }
}

#cicadapedia .pin-wrap {
  width: 1270vw;
}

#cicadaincolture .pin-wrap {
  width: 400vw;
}

/* Scroll-linked fade-in for cicadaincolture */
#cicadaincolture {
  view-timeline-name: --cicada-culture-timeline;
  view-timeline-axis: block;
}

#cicadaincolture article {
  display: flex;
  line-height: 2;
}

#cicadaincolture .pin-wrap article:nth-child(2) h4 {
    font-size: 1.5rem;
}

#cicadaincolture .pin-wrap > article:nth-child(6) .clearfix.row img {
    width: 85%;
    height: auto;
    margin: 0 auto;
}

#cicadaincolture .pin-wrap > article:nth-child(6) .clearfix.row img {
    width: 85%;
    height: auto;
    margin: 0 auto;
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#cicadaincolture article span {
  opacity: 0;
  animation: fade-in-up forwards;
  animation-timeline: --cicada-culture-timeline;
  animation-range: entry 0% cover 30%;
  /* Adjust range as needed */
}

#cicadaincolture article h4:nth-child(1) {
  animation-range: entry 0% cover 30%;
}

#cicadaincolture article h4:nth-child(2) {
  animation-range: entry 10% cover 40%;
}

#cicadaincolture article h4:nth-child(3) {
  animation-range: entry 20% cover 50%;
}

#cicadaincolture article h4:nth-child(4) {
  animation-range: entry 30% cover 60%;
}

#cicadaincolture article h4:nth-child(5) {
  animation-range: entry 40% cover 70%;
}

#solution {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradient-animation 15s ease infinite;
}

@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
  #chassing:(display:none;)
}

.carousel-video-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(33, 33, 33, 0.75);
  color: #eee;
  padding: 1.75rem 1rem;
  height: 200px;
  width: 50%;
  text-align: left;
  line-height: 2;
  font-size: 1.2rem;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
  pointer-events: all;
}

.carousel-video-caption.fade-out {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 768px) {
  .carousel-video-caption {
    width: 100%;
    height: auto;
    font-size: 1rem;
  }
}

.carousel-caption-close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
}

.article-display-flex {
  display: flex;
}

.media-container-styles {
  position: relative;
  cursor: pointer;
}

.video-overlay-styles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.media-container-styles:hover .video-overlay-styles {
  opacity: 0.7;
}

.is-hidden {
  display: none;
}

.carousel-container-styles {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

.carousel-track-styles {
  display: inline-block;
}

.carousel-item-custom-styles {
  display: inline-block;
  width: 300px;
  vertical-align: top;
}

.media-element-full-width {
  width: 100%;
}

.video-display-block {
  display: block;
}

.video-display-none {
  display: none;
}

.iframe-full-width {
  width: 100%;
}

.iframe-height-300 {
  height: 300px;
}

.iframe-height-80vh {
  height: 80vh;
}

.iframe-no-border {
  border: none;
}

.noscript-width-95 {
  width: 95%;
}

.noscript-no-border {
  border: none;
}

/* Skeleton Loader Styles */
.skeleton {
  background-color: #e0e0e0;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.skeleton::before {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  height: 100%;
  width: 150%;
  background: linear-gradient(to right, transparent 0%, #f0f0f0 50%, transparent 100%);
  animation: breathing 1.5s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes breathing {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

#slogan.loading,
#whereiscicada.loading {
    background: #ccc; /* Simple background for loading state */
}

#slogan .skeleton,
#whereiscicada .skeleton {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
}