/* ============================================
   JustClaw - Hero 动画独立样式表
   从 style.css 分离，减少首屏渲染阻塞
   ============================================ */

/* ---------- Logo 漂浮动画 ---------- */
@keyframes float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

.logo {
  width: 120px;
  height: 120px;
  max-width: 90%;
  animation: float 6s ease-in-out infinite;
}

/* ---------- Hero 渐变边框动画 ---------- */
.hero-header {
  position: relative;
  border-radius: 24px;
  padding: 2rem 2.5rem;
  margin: 1rem auto;
  max-width: 760px;
  background: var(--bg);
  text-align: center;
}

.hero-header::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, #6366f1, #8b5cf6, #a78bfa, #6366f1);
  background-size: 300% 300%;
  animation: heroGradientShift 6s ease infinite;
  z-index: -1;
}

@keyframes heroGradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ---------- 页面淡入 ---------- */
@keyframes pageFadeIn {
  to { opacity: 1; }
}

body {
  opacity: 0;
  animation: pageFadeIn 1s ease forwards 0.2s;
}

/* ---------- 无障碍：减少动画 ---------- */
@media (prefers-reduced-motion: reduce) {
  .logo { animation: none; }
  .hero-header::before { animation: none; }
  body { animation: none; opacity: 1; }
}