/* ============================================================
   KEYFRAMES
============================================================ */

@keyframes fadeUp {
  from { opacity: 0; filter: blur(8px);  transform: translateY(16px); }
  to   { opacity: 1; filter: blur(0);    transform: translateY(0); }
}

@keyframes blurIn {
  from { opacity: 0; filter: blur(10px); transform: translateY(16px); }
  to   { opacity: 1; filter: blur(0);    transform: translateY(0); }
}

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

@keyframes wordIn {
  0%   { opacity: 0;   filter: blur(10px); transform: translateY(50px); }
  60%  { opacity: 0.5; filter: blur(5px);  transform: translateY(-5px); }
  100% { opacity: 1;   filter: blur(0);    transform: translateY(0); }
}

/* ============================================================
   ANIMATION UTILITY CLASSES
   Sequence: badge → wordmark (JS) → tagline → explore bar
============================================================ */

.anim-badge   { opacity: 0; animation: fadeUp  0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.05s forwards; }
.anim-sub     { opacity: 0; animation: blurIn  0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.8s  forwards; }
.anim-explore { opacity: 0; animation: slideUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 1.3s  forwards; }