:root {
  --brand-red: #ff373c;
  --content-black: #333333;
  --brand-font: "Smiley Sans Oblique";
}

html {
  background-image: url(../assets/background.png);
  background-size: 100% 100%;
}

a {
  color: var(--content-black);
  text-decoration: none;
  border-radius: 9px;
  padding: 8px;
}

a:hover {
  color: var(--brand-red);
  background-color: #ff373a0a;
  box-shadow: inset 0px 0px 0px 1.5px #ff373ab4, 0px 0px 5px 2px #ff373a3b;
}

a:active {
  box-shadow: inset 0px 0px 0px 1.5px #ff373a8e, 0px 0px 5px 6px #ff373a3b;
}

/* 保留动画相关的样式 */

.zaoxin::before {
  content: "「";
  animation: twinkle-left 3.6s infinite;
}

.zaoxin::after {
  content: "」";
  animation: twinkle-right 3.6s infinite;
}

@keyframes twinkle-left {
  0% {
    opacity: 0.8;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 0.8;
  }
}

@keyframes twinkle-right {
  0% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.2;
  }
}

/* Hover effects for intro section */
.intro:hover .name-en {
  opacity: 1 !important;
}

.intro-content {
  animation: textResize 3.6s infinite;
}

.intro:hover .intro-content {
  font-size: 48px !important;
  opacity: 0.1 !important;
}

@keyframes textResize {
  0% {
    font-size: 2.5vw;
  }
  70% {
    font-size: 2.6vw;
  }
  100% {
    font-size: 2.5vw;
  }
}

/* 移动端响应式 */
@media screen and (max-width: 480px) {
  .product-list {
    display: none;
  }

  @keyframes textResize {
    0% {
      font-size: 16px;
    }
    70% {
      font-size: 15px;
    }
    100% {
      font-size: 16px;
    }
  }
}

/* 产品项目特殊交互效果已移除 */