/* style.css */

/* 1) Global font */
body {
  font-family: 'Noto Sans SC', sans-serif;
}

/* 2) Hero “skeleton-cut” text */
.bg {
  position: relative;
  padding-top: 40vh;
  /* let content dictate total height */
  background: url("../img/mountain.jpg") center/cover no-repeat;
  overflow: hidden;
  text-align: center;
}
.bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #F5F6FA;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}
.bg span {
  display: block;
  position: relative;
  z-index: 2;
  margin: 0.2em 0;
  /* fluid from 4rem up to 12rem, based on 10vw */
  font-size: clamp(4rem, 10vw, 12rem);
  font-weight: 900;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: inherit;
  background-size: cover;
  background-position: center;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.bg.scrolled::after { opacity: 1; }
.bg.scrolled span { opacity: 1; }

/* 3) Gradient text utility */
.gradient-text {
  background: linear-gradient(90deg, #6366f1, #a855f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 4) Floating animation */
.floating {
  animation: float 6s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-20px); }
}

/* 5) Custom page bg */
.bg-gradient-custom {
  background: linear-gradient(135deg, #f0f4ff 0%, #faf5ff 100%);
}

/* 6) Emoji hover bounce */
.tiao {
  display: inline-block;
  transition: transform 0.3s ease;
  cursor: pointer;
}
.tiao:hover {
  animation: bounce 0.5s ease infinite;
}
  #nav-menu{
    background-color: transparent;
  }
@keyframes bounce {
  0%,100% { transform: translateY(-5px); }
  50%     { transform: translateY(0); }
}

/* 7) Mobile adjustments */
@media (max-width: 640px) {
  .bg {
    padding-top: 20vh;
  }
  .bg span {
    font-size: 3rem;
  }
  #nav-menu{
    background-color: #fff;
  }
}