/* GQLite.com - 英文Index按钮 动感海报风格 */

/* 导入Google字体以获得更优雅的排版 */
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Poppins:wght@800&family=Bebas+Neue&display=swap');

/* 英文Index按钮基础样式 */
.dynamic-button-en {
  font-family: 'Fredoka One', 'Bebas Neue', 'Poppins', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  position: relative;
  padding: 12px 24px;
  background: #0066CC;
  color: #FFFFFF;
  border: 3px solid #000000;
  border-radius: 4px;
  box-shadow: 5px 5px 0px #000000;
  cursor: pointer;
  transform: rotate(1deg);
  transition: all 0.3s ease;
  letter-spacing: 1px;
  text-transform: uppercase;
  overflow: hidden;
}

/* 宣传海报效果元素 */
.dynamic-button-en::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  background: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.1) 10px,
    rgba(255, 255, 255, 0.2) 10px,
    rgba(255, 255, 255, 0.2) 20px
  );
  pointer-events: none;
}

/* 星星元素装饰 */
.dynamic-button-en::after {
  content: '☆';
  position: absolute;
  top: -5px;
  left: 8px;
  font-size: 24px;
  color: #FFFF00;
  text-shadow: 2px 2px 0px #000000;
  transform: rotate(-15deg);
  z-index: 10;
}

/* 按钮文字的阴影效果 */
.dynamic-button-en span {
  display: inline-block;
  text-shadow: 
    2px 2px 0px #000000,
    -2px -2px 0px #000000,
    2px -2px 0px #000000,
    -2px 2px 0px #000000;
  transition: all 0.3s ease;
  animation: button-vibrate-en 6s ease-in-out infinite;
}

/* 悬停效果 */
.dynamic-button-en:hover {
  transform: rotate(0deg) scale(1.05);
  box-shadow: 7px 7px 0px #000000;
}

.dynamic-button-en:hover span {
  animation: button-shake-en 0.4s ease-in-out infinite;
  text-shadow: 
    3px 3px 0px #000000,
    -3px -3px 0px #000000,
    3px -3px 0px #000000,
    -3px 3px 0px #000000;
}

.dynamic-button-en:hover::after {
  animation: button-spin-en 2.5s linear infinite;
}

/* 按钮激活效果 */
.dynamic-button-en:active {
  transform: translate(5px, 5px) rotate(0deg) scale(1);
  box-shadow: 0px 0px 0px #000000;
}

/* 动画关键帧 - 英文按钮专用 */
@keyframes button-vibrate-en {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-1px); }
  75% { transform: translateY(1px); }
}

@keyframes button-shake-en {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(1px); }
  75% { transform: translateX(-1px); }
}

@keyframes button-spin-en {
  0% { transform: rotate(-15deg); }
  100% { transform: rotate(-375deg); }
}

/* 响应式调整 */
@media (max-width: 1024px) {
  .dynamic-button-en {
    font-size: 1.3rem;
    padding: 10px 20px;
    border-width: 2px;
    box-shadow: 4px 4px 0px #000000;
  }
  
  .dynamic-button-en span {
    text-shadow: 
      1.5px 1.5px 0px #000000,
      -1.5px -1.5px 0px #000000,
      1.5px -1.5px 0px #000000,
      -1.5px 1.5px 0px #000000;
  }
}

@media (max-width: 768px) {
  .dynamic-button-en {
    font-size: 1.2rem;
    padding: 8px 16px;
    border-width: 2px;
    box-shadow: 3px 3px 0px #000000;
  }
  
  .dynamic-button-en span {
    text-shadow: 
      1px 1px 0px #000000,
      -1px -1px 0px #000000,
      1px -1px 0px #000000,
      -1px 1px 0px #000000;
  }
  
  .dynamic-button-en::after {
    font-size: 16px;
    top: -8px;
    left: -8px;
  }
}

@media (max-width: 480px) {
  .dynamic-button-en {
    font-size: 1rem;
    padding: 6px 12px;
    border-width: 1.5px;
    box-shadow: 2px 2px 0px #000000;
  }
  
  .dynamic-button-en::before {
    display: none;
  }
  
  .dynamic-button-en::after {
    font-size: 14px;
    top: -6px;
    left: -6px;
  }
}