@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(48px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes coupleFloat {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-14px); }
}

@keyframes glowPulse {
  0%   { transform: scale(1);   opacity: 0.65; }
  100% { transform: scale(1.18); opacity: 1; }
}

@keyframes pulseOrb {
  0%   { transform: scale(1);   opacity: 0.12; }
  100% { transform: scale(1.20); opacity: 0.22; }
}

@keyframes orbitSpin {
  from { transform: translateX(-50%) rotate(0deg); }
  to   { transform: translateX(-50%) rotate(360deg); }
}

@keyframes badgeFloat1 {
  0%, 100% { transform: translate(0, 0) rotate(-2deg); }
  50%      { transform: translate(-12px, -16px) rotate(2deg); }
}
@keyframes badgeFloat2 {
  0%, 100% { transform: translate(0, 0) rotate(1deg); }
  50%      { transform: translate(14px, -16px) rotate(-2deg); }
}
@keyframes badgeFloat3 {
  0%, 100% { transform: translate(0, 0) rotate(-1deg); }
  50%      { transform: translate(-10px, -20px) rotate(3deg); }
}

@keyframes heartRise {
  0%   { transform: translateY(0)   scale(0.5)  rotate(-10deg); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 0.6; }
  100% { transform: translateY(-200px) scale(1.2)  rotate(15deg); opacity: 0; }
}

@keyframes heartFloat {
  0%   { transform: translateY(0)    scale(0.5)  rotate(-10deg); opacity: 0; }
  10%  { opacity: 0.7; }
  50%  { opacity: 0.5; }
  100% { transform: translateY(-520px) scale(1.1)  rotate(15deg); opacity: 0; }
}

@keyframes cardGlow {
  0%, 100% { box-shadow: 0 10px 15px -3px rgba(143, 31, 208, 0.30), 0 4px 6px -4px rgba(143, 31, 208, 0.20); }
  50%      { box-shadow: 0 10px 15px -3px rgba(143, 31, 208, 0.30), 0 4px 6px -4px rgba(143, 31, 208, 0.20), 0 0 40px rgba(169, 50, 238, 0.25); }
}

@keyframes avatarBounce {
  0%, 100% { transform: translateY(0); }
  40%      { transform: translateY(-8px); }
  60%      { transform: translateY(-4px); }
}

@keyframes scorePop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

@keyframes trophyFloat {
  0%, 100% { transform: translateY(0)   rotate(-5deg); }
  50%      { transform: translateY(-6px) rotate(5deg); }
}

@keyframes confettiFall {
  0%   { transform: translateY(0)    rotate(0deg);  opacity: 0; }
  15%  { opacity: 0.6; }
  85%  { opacity: 0.6; }
  100% { transform: translateY(200px) rotate(360deg); opacity: 0; }
}

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

@keyframes auraPulse {
  0%   { transform: scale(1);    opacity: 0; }
  50%  { opacity: 0.7; }
  100% { transform: scale(1.35); opacity: 0; }
}

@keyframes sparklePop {
  0%   { transform: scale(0)  translateY(0);     opacity: 0; }
  50%  { transform: scale(1.2) translateY(-8px); opacity: 0.9; }
  100% { transform: scale(0)  translateY(-16px); opacity: 0; }
}

@keyframes lineGlow {
  0%   { opacity: 0.30; }
  100% { opacity: 0.85; }
}

@keyframes flowDot {
  0%   { left: -6%;  opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

@keyframes travelAcross {
  0%   { left: -2%;  opacity: 0; }
  15%  { opacity: 0.9; }
  85%  { opacity: 0.9; }
  100% { left: 102%; opacity: 0; }
}

@keyframes hubPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    box-shadow: 0 0 24px rgba(250, 58, 127, 0.4), 0 0 48px rgba(0, 202, 253, 0.25); }
  50%      { transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 0 36px rgba(250, 58, 127, 0.7), 0 0 64px rgba(0, 202, 253, 0.45); }
}

@keyframes bgFloat {
  0%   { transform: translateY(40px)  translateX(0)   rotate(0deg);   opacity: 0; }
  10%  { opacity: 0.25; }
  50%  { opacity: 0.35; }
  90%  { opacity: 0.25; }
  100% { transform: translateY(-120px) translateX(30px) rotate(360deg); opacity: 0; }
}

@keyframes bgFloatEmoji {
  0%   { transform: translateY(30px)  scale(0.8) rotate(-10deg); opacity: 0; }
  15%  { opacity: 0.3; }
  50%  { opacity: 0.4; }
  85%  { opacity: 0.3; }
  100% { transform: translateY(-150px) scale(1.1) rotate(15deg);   opacity: 0; }
}

@keyframes bgFloatShape {
  0%   { transform: translateY(50px)  scale(0.5); opacity: 0; }
  15%  { opacity: 0.2; }
  50%  { opacity: 0.3; transform: translateY(-20px) scale(1); }
  85%  { opacity: 0.2; }
  100% { transform: translateY(-100px) scale(0.8); opacity: 0; }
}

@keyframes bgFloatRing {
  0%   { transform: translateY(40px)  scale(0.8); opacity: 0; }
  20%  { opacity: 0.15; }
  50%  { opacity: 0.25; transform: translateY(-30px) scale(1.1); }
  80%  { opacity: 0.15; }
  100% { transform: translateY(-120px) scale(0.9); opacity: 0; }
}

@keyframes footerReveal {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scan {
  0%   { left: 0;   opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

@keyframes progressGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .glass,
  [class*="glass"] {
    background: var(--surface-solid) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}