.fade-in-1 { opacity: 0; transform: translateY(16px); animation: fadeIn .7s ease forwards; animation-delay: .05s; }
.fade-in-2 { opacity: 0; transform: translateY(16px); animation: fadeIn .7s ease forwards; animation-delay: .15s; }
.fade-in-3 { opacity: 0; transform: translateY(16px); animation: fadeIn .7s ease forwards; animation-delay: .25s; }
.fade-in-4 { opacity: 0; transform: translateY(16px); animation: fadeIn .7s ease forwards; animation-delay: .35s; }
@keyframes fadeIn { to { opacity: 1; transform: translateY(0); } }
 .shape { --amp: 10px; animation: drift 16s ease-in-out infinite; }
 .circle-a { --amp: 14px; animation-duration: 18s; animation-delay: .2s; }
 .circle-b { --amp: 12px; animation-duration: 20s; animation-delay: .6s; }
 .pill-a { --amp: 16px; animation-duration: 22s; animation-delay: .3s; }
 .pill-b { --amp: 14px; animation-duration: 24s; animation-delay: .9s; }
 @keyframes drift {
   0%   { transform: translate(0, 0) rotate(var(--rot, 0deg)); }
   25%  { transform: translate(calc(var(--amp) * .35), calc(var(--amp) * -.45)) rotate(var(--rot, 0deg)); }
   50%  { transform: translate(calc(var(--amp) * .6), 0) rotate(var(--rot, 0deg)); }
   75%  { transform: translate(calc(var(--amp) * -.3), calc(var(--amp) * .5)) rotate(var(--rot, 0deg)); }
   100% { transform: translate(0, 0) rotate(var(--rot, 0deg)); }
 }
@media (prefers-reduced-motion: reduce) { .btn, .logo-card { transition: none; } .fade-in-1, .fade-in-2, .fade-in-3, .fade-in-4 { opacity: 1; transform: none; animation: none; } }