/* 自定义补充样式 —— Go 版特有（动画还原层），叠加在 Tailwind 产物之上 */

[x-cloak] { display: none !important; }

/* 卡片入场动画（还原 framer-motion initial={opacity:0,y:16} animate={opacity:1,y:0}） */
@keyframes cardIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.bento-card { animation: cardIn 0.35s ease-out both; }
.bento-card:nth-child(2) { animation-delay: 0.02s; }
.bento-card:nth-child(3) { animation-delay: 0.04s; }
.bento-card:nth-child(4) { animation-delay: 0.06s; }
.bento-card:nth-child(n+5) { animation-delay: 0.08s; }

/* Logo 呼吸光晕（还原 framer-motion 循环透明度动画） */
@keyframes logoGlow {
  0%, 100% { opacity: 0.4; box-shadow: 0 0 24px 3px rgba(217, 70, 239, 0.55); }
  50% { opacity: 0.8; box-shadow: 0 0 28px 5px rgba(217, 70, 239, 0.65); }
}
.logo-glow { animation: logoGlow 2.4s ease-in-out infinite; }

/* Hero 入场动画（还原 framer-motion initial/animate 序列） */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.anim-in   { animation: fadeUp 0.5s ease both; }
.anim-in-d1 { animation: fadeUp 0.6s 0.1s ease both; }
.anim-in-d2 { animation: fadeUp 0.6s 0.2s ease both; }
.anim-in-d3 { animation: fadeUp 0.6s 0.3s ease both; }
.anim-in-d5 { animation: fadeUp 0.6s 0.5s ease both; }

/* Hero 右侧漂浮晶片（还原三块玻璃碎片的循环漂浮） */
.shard { backdrop-filter: blur(40px); }
.shard-1 { left: 0%;  top: 10%; width: 60%; height: 75%; transform: rotate(8deg);  animation: floatShard1 6s ease-in-out infinite; }
.shard-2 { left: 38%; top: 30%; width: 55%; height: 60%; transform: rotate(-6deg); animation: floatShard2 7s ease-in-out infinite; }
.shard-3 { left: 20%; top: 60%; width: 45%; height: 35%; transform: rotate(-14deg); animation: floatShard3 8s ease-in-out infinite; }
@keyframes floatShard1 {
  0%, 100% { transform: rotate(8deg) translateY(0); }
  50% { transform: rotate(10deg) translateY(-10px); }
}
@keyframes floatShard2 {
  0%, 100% { transform: rotate(-6deg) translateY(0); }
  50% { transform: rotate(-4deg) translateY(-10px); }
}
@keyframes floatShard3 {
  0%, 100% { transform: rotate(-14deg) translateY(0); }
  50% { transform: rotate(-12deg) translateY(-10px); }
}

@media (prefers-reduced-motion: reduce) {
  .anim-in, .anim-in-d1, .anim-in-d2, .anim-in-d3, .anim-in-d5,
  .logo-glow, .shard-1, .shard-2, .shard-3 { animation: none; }
}

/* 滚动显现（还原 framer-motion whileInView once） */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }