/* 基础样式 */
body {
  margin: 0;
  background-color: #1a1a1a; /* primary-bg */
  color: white; /* text-main */
  font-family: "Roboto", sans-serif;
  overflow-x: hidden;
  overflow-y: auto; /* 允许垂直滚动 */
}

/* 犀牛动画部分样式 */
#rhino-animation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background-color: black;
  transition: opacity 1s ease-out;
}

#matrixCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mask-image: url("rhino.svg");
  -webkit-mask-image: url("rhino.svg"); /* 兼容 WebKit 内核浏览器 */
  mask-size: 50vw auto; /* 调整大小，保持宽高比 */
  -webkit-mask-size: 50vw auto;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
}

/* 网站部分样式 */
#full-website {
  opacity: 0;
  transition: opacity 1s ease-in;
}

/* 导入高保真图的样式 */

/* Cyberpunk Glow Effects & Accents */
.text-accent {
  color: #00ffff; /* accent */
  text-shadow: 0 0 30px #49ffff;
}

.text-primary-bg {
  color: #191e1e;
}
.bg-accent {
  background-color: #00ffff; /* accent */
}

.border-accent {
  border-color: #00ffff; /* accent */
  box-shadow: 0 0 5px #00ffff;
}

/* 修复hover样式问题 */
a:hover.hover\:text-accent,
.hover\:text-accent:hover {
  color: #00ffff !important;
}

.hover\:bg-primary-bg:hover {
  background-color: #1a1a1a !important;
}

.hover\:border-accent:hover {
  border-color: #00ffff !important;
}

/* 确保登录按钮的hover效果 */
.bg-accent:hover {
  background-color: #1a1a1a;
  color: #00ffff;
  border-color: #00ffff;
}

.border-accent:hover {
  border-color: #00ffff;
  box-shadow: 0 0 10px #00ffff;
}

/* Subtle Borders and Dividers */
.border-subtle-border {
  border-color: #2a2a2a; /* subtle-border */
}

hr.border-divider-line {
  border-color: #333333; /* divider-line */
}

/* Product Card Enhancements */
.product-card {
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out,
    border-color 0.3s ease-out;
}

.product-card:hover {
  box-shadow: 0 10px 30px rgba(0, 255, 255, 0.2),
    0 0 15px rgba(0, 255, 255, 0.1);
}

.product-media .carousel-item {
  transition: opacity 1s ease-in-out, transform 0.5s ease;
}
.product-media .carousel-item.active {
  opacity: 1;
}
.product-media .carousel-item:not(.active) {
  opacity: 0;
}

/* Animation Keyframes for Anime.js */
.animate-fadeInUp {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s ease-out forwards;
}

.animation-delay-300 {
  animation-delay: 0.3s;
}
.animation-delay-600 {
  animation-delay: 0.6s;
}
.animation-delay-900 {
  animation-delay: 0.9s;
}

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

/* Ensure Three.js canvas is behind content but visible */
.three-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0; /* Behind content which should have z-index > 0 */
}

/* Ensure content on top of Three.js canvas is interactive */
.content-on-canvas {
  position: relative;
  z-index: 10; /* Or any value higher than canvas z-index */
}

/* Contact Section Icon Animations */
.contact-info-card .group:hover .fa-phone-alt,
.contact-info-card .group:hover .fa-envelope,
.contact-info-card .group:hover .fa-map-marker-alt {
  animation: pulse-accent 1.5s infinite;
}

@keyframes pulse-accent {
  0%,
  100% {
    transform: scale(1);
    text-shadow: 0 0 5px #00ffff, 0 0 10px #00ffff;
  }
  50% {
    transform: scale(1.1);
    text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 30px #00ffff;
  }
}

/* 特定登录按钮的hover效果 */
.login-button {
  transition: all 0.3s ease;
}

.login-button:hover {
  background-color: #1a1a1a !important;
  color: #00ffff !important;
  border-color: #00ffff !important;
}

.login-button:hover a {
  color: #00ffff !important;
}

/* 统一按钮hover效果 */
.accent-button {
  transition: all 0.3s ease;
}

.accent-button:hover {
  background-color: #1a1a1a !important;
  color: #00ffff !important;
  border-color: #00ffff !important;
}

/* 第二种样式的accent按钮(从边框到背景) */
.border-accent.accent-button:hover {
  background-color: #00ffff !important;
  color: #1a1a1a !important;
}