/* ============================================================
   animations.css — 关键帧与动效工具类
   ============================================================ */

@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

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

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes bob {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  46%      { transform: translateY(-9px) scale(0.995, 1.008); }
  70%      { transform: translateY(-3px) scale(1.005, 0.995); }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pop-in {
  0%   { opacity: 0; transform: scale(0.7) rotate(-6deg); }
  62%  { opacity: 1; transform: scale(1.06) rotate(1.5deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes stamp-in {
  0%   { opacity: 0; transform: scale(2.4) rotate(-34deg); }
  55%  { opacity: 1; transform: scale(0.92) rotate(-11deg); }
  72%  { opacity: 1; transform: scale(1.04) rotate(-16deg); }
  100% { opacity: 0.92; transform: scale(1) rotate(-14deg); }
}

@keyframes shake {
  0%, 100% { transform: translate3d(0, 0, 0); }
  20% { transform: translate3d(-3px, 2px, 0) rotate(-0.2deg); }
  40% { transform: translate3d(3px, -2px, 0) rotate(0.2deg); }
  60% { transform: translate3d(-2px, 1px, 0); }
  80% { transform: translate3d(2px, -1px, 0); }
}

@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes float-drift {
  0%   { transform: translate3d(-12vw, 0, 0) rotate(-6deg); }
  25%  { transform: translate3d(20vw, -18px, 0) rotate(5deg); }
  50%  { transform: translate3d(52vw, 10px, 0) rotate(-3deg); }
  75%  { transform: translate3d(84vw, -14px, 0) rotate(7deg); }
  100% { transform: translate3d(116vw, 6px, 0) rotate(-5deg); }
}

@keyframes scan-beam {
  0%   { transform: translateY(-8%); opacity: 0.15; }
  12%  { opacity: 0.9; }
  88%  { opacity: 0.9; }
  100% { transform: translateY(108%); opacity: 0.15; }
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toast-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(10px) scale(0.97); }
}

@keyframes egg-in {
  0%   { opacity: 0; transform: translateY(40px) rotate(6deg) scale(0.9); }
  60%  { opacity: 1; transform: translateY(-6px) rotate(-1deg) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
}

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

@keyframes sheen {
  from { background-position: -160% 0; }
  to   { background-position: 260% 0; }
}

/* 工具类 */
.anim-fade-up { animation: fade-up 0.7s var(--ease-out) both; }
.anim-pop     { animation: pop-in 0.55s var(--ease-spring) both; }
.is-shaking   { animation: shake 0.32s ease-in-out; }

/* ---------- v1.1 新动效 ---------- */

@keyframes drift-soft {
  0%, 100% { translate: 0 0; rotate: var(--r, 0deg); }
  35%      { translate: 6px -14px; }
  70%      { translate: -8px 8px; }
}

@keyframes card-pop {
  0%   { opacity: 0; transform: translateY(20px) scale(0.94) rotate(-2deg); }
  60%  { opacity: 1; transform: translateY(-4px) scale(1.02) rotate(0.6deg); }
  100% { opacity: 1; transform: none; }
}

@keyframes enter-up {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes enter-side {
  from { opacity: 0; transform: translateX(34px) rotate(2deg); }
  to   { opacity: 1; transform: translateX(0) rotate(0); }
}

@keyframes glow-breathe {
  0%, 100% { opacity: 0.42; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(1.07); }
}

@keyframes status-blink {
  0%, 60%, 100% { opacity: 1; }
  61%, 90% { opacity: 0.25; }
}

/* Hero 入场编排 */
[data-enter] {
  opacity: 0;
  animation: enter-up 0.8s var(--ease-out) both;
}

[data-enter="1"] { animation-delay: 0.05s; }
[data-enter="2"] { animation-delay: 0.14s; }
[data-enter="3"] { animation-delay: 0.24s; }
[data-enter="4"] { animation-delay: 0.34s; }
[data-enter="5"] { animation-delay: 0.44s; }
[data-enter="6"] { animation-delay: 0.54s; }

.hero__stage[data-enter] {
  animation-name: enter-side;
  animation-duration: 0.95s;
}

.bg-deco__glow {
  animation: glow-breathe 9s ease-in-out infinite;
}

.bg-deco__glow--b { animation-delay: -3s; }
.bg-deco__glow--c { animation-delay: -6s; }

.monitor__head em {
  animation: status-blink 2.4s steps(1) infinite;
}

@media (prefers-reduced-motion: reduce) {
  [data-enter] {
    opacity: 1;
    animation: none !important;
  }

  .bg-deco__float {
    animation: none !important;
  }
}