/* 引入统一的CSS变量 */
@import url('./variables.css');

/* 首页样式 */
body{
  background-color:hsl(var(--color-bg-secondary));
  color:hsl(var(--color-text-primary));
  line-height:var(--leading-relaxed);
  padding:var(--space-5) 0;
  overflow-x:hidden;
  font-family:var(--font-family-sans);
  background-image: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
  background-size: 20px 20px;
}

.container{
  max-width:900px;
  margin:0 auto;
  padding:0 var(--space-5);
}

.section{
  background:hsl(var(--color-white));
  border-radius:var(--radius-lg);
  padding:var(--space-5);
  margin-bottom:var(--space-4);
  box-shadow:var(--shadow-lg);
  transition:all var(--transition-normal);
  border:var(--border-width) solid hsl(var(--color-gray-800));
  transform:rotate(-1deg);
  animation: bounceIn 0.8s ease-out;
}

.section:nth-child(2) {
  transform:rotate(1deg);
}

.section:hover{
  box-shadow:var(--shadow-xl);
  transform:rotate(0deg) translateY(-5px);
  animation: wiggle 0.3s ease-in-out;
}

.title{
  font-size:var(--text-2xl);
  color:hsl(var(--color-primary));
  margin-bottom:var(--space-4);
  padding-bottom:var(--space-2);
  border-bottom:var(--border-width) solid hsl(var(--color-primary));
  font-weight:bold;
  text-shadow:2px 2px 0px hsl(var(--color-gray-200));
  text-align:center;
}

.header{
  text-align:center;
  padding:var(--space-5) 0;
  margin-bottom:var(--space-4);
}

.header h1{
  font-size:var(--text-4xl);
  color:hsl(var(--color-primary));
  margin-bottom:var(--space-2);
  font-weight:bold;
  line-height:var(--leading-tight);
  text-shadow:3px 3px 0px hsl(var(--color-gray-200));
  animation: pulse 2s infinite;
}

.header p{
  color:hsl(var(--color-text-muted));
  font-size:var(--text-base);
  margin-bottom:0;
  font-weight:500;
}

.demo-info .info-row{
  display:flex;
  justify-content:space-between;
  padding:var(--space-3) 0;
  border-bottom:2px dashed hsl(var(--color-border-light));
  transition:all var(--transition-fast);
  font-size:var(--text-base);
}

.demo-info .info-row:hover{
  background-color:hsl(var(--color-primary), 0.1);
  padding-left:var(--space-2);
}

.demo-info .info-row:last-child{
  border-bottom:none;
}

.info-label{
  color:hsl(var(--color-text-primary));
  font-size:var(--text-base);
  font-weight:bold;
  text-transform:uppercase;
}

.info-value{
  font-size:var(--text-base);
  color:hsl(var(--color-primary));
  font-family:var(--font-family-sans);
  font-weight:bold;
  background:hsl(var(--color-primary), 0.1);
  padding:var(--space-1) var(--space-3);
  border-radius:var(--radius-full);
  border:2px solid hsl(var(--color-primary));
}

.copy-btn{
  color:hsl(var(--color-primary));
  font-size:var(--text-sm);
  cursor:pointer;
  margin-left:var(--space-2);
  border:none;
  background:transparent;
  padding:var(--space-1) var(--space-2);
  border-radius:var(--radius-sm);
  transition:all var(--transition-fast);
  font-weight:bold;
}

.copy-btn:hover{
  text-decoration:underline;
  background-color:hsl(var(--color-primary), 0.1);
  transform:scale(1.1);
}

.demo-btn-container{
  text-align:center;
  margin-top:var(--space-4);
}

.visit-demo-btn{
  display:inline-block;
  padding:var(--space-4) var(--space-8);
  background:hsl(var(--color-primary));
  color:hsl(var(--color-white));
  text-decoration:none;
  border-radius:var(--radius-full);
  font-size:var(--text-xl);
  font-weight:bold;
  transition:all var(--transition-normal);
  border:var(--border-width) solid hsl(var(--color-gray-800));
  box-shadow:var(--shadow-lg);
  transform:rotate(-2deg);
  text-shadow:1px 1px 0px hsl(var(--color-gray-800));
}

.visit-demo-btn:hover{
  background:hsl(var(--color-primary-dark));
  border-color:hsl(var(--color-gray-800));
  box-shadow:var(--shadow-xl);
  transform:rotate(0deg) translateY(-5px) scale(1.05);
  animation: bounce 0.5s ease-in-out;
}

.visit-demo-btn:active{
  transform:rotate(0deg) translateY(0) scale(0.98);
  box-shadow:var(--shadow-md);
}

.partners-list{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-3);
  margin-top:var(--space-2);
  justify-content:center;
}

.partner-item{
  padding:var(--space-3) var(--space-5);
  background:hsl(var(--color-primary));
  border-radius:var(--radius-full);
  font-size:var(--text-base);
  color:hsl(var(--color-white));
  text-decoration:none;
  transition:all var(--transition-normal);
  border:var(--border-width) solid hsl(var(--color-gray-800));
  box-shadow:var(--shadow-lg);
  transform:rotate(1deg);
  font-weight:bold;
  text-shadow:1px 1px 0px hsl(var(--color-gray-800));
}

.partner-item:hover{
  background:hsl(var(--color-primary-dark));
  border-color:hsl(var(--color-gray-800));
  transform:rotate(0deg) translateY(-3px) scale(1.05);
  box-shadow:var(--shadow-xl);
  animation: wiggle 0.3s ease-in-out;
}

.footer{
  text-align:center;
  font-size:var(--text-sm);
  color:hsl(var(--color-text-muted));
  padding:var(--space-4) 0;
  margin-top:var(--space-3);
  font-weight:bold;
}

/* 响应式设计 */
@media (max-width:576px){
  .container{
    padding:0 var(--space-3);
  }
  
  .demo-info .info-row{
    flex-direction:column;
    gap:var(--space-2);
    padding:var(--space-3) 0;
  }
  
  .info-label{
    color:hsl(var(--color-primary));
    font-weight:bold;
  }
  
  .partners-list{
    gap:var(--space-3);
  }
  
  .partner-item{
    padding:var(--space-2) var(--space-4);
    font-size:var(--text-sm);
    transform:rotate(0deg);
  }
  
  .visit-demo-btn{
    padding:var(--space-3) var(--space-6);
    font-size:var(--text-lg);
    transform:rotate(0deg);
  }
  
  .header h1 {
    font-size:var(--text-3xl);
  }
}

/* 动画效果 */
.section{
  animation: fadeInUp 0.8s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity:0;
    transform:translateY(30px) rotate(0deg);
  }
  to {
    opacity:1;
    transform:translateY(0) rotate(-1deg);
  }
}

@keyframes bounceIn {
  0% {
    opacity:0;
    transform:scale(0.3) rotate(-5deg);
  }
  50% {
    opacity:1;
    transform:scale(1.05) rotate(2deg);
  }
  70% {
    transform:scale(0.9) rotate(-1deg);
  }
  100% {
    transform:scale(1) rotate(-1deg);
  }
}

@keyframes wiggle {
  0%, 100% {
    transform:rotate(0deg);
  }
  25% {
    transform:rotate(2deg);
  }
  75% {
    transform:rotate(-2deg);
  }
}

@keyframes bounce {
  0%, 100% {
    transform:translateY(0);
  }
  50% {
    transform:translateY(-10px);
  }
}

@keyframes pulse {
  0%, 100% {
    transform:scale(1);
  }
  50% {
    transform:scale(1.05);
  }
}