html, body { margin: 0; background: #f4f5fa; }
#boot { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; animation: boot-in .3s ease-out .45s forwards; }
#boot .card { background: #fff; border-radius: 16px; box-shadow: 0 20px 50px rgba(45,48,71,.18); padding: 28px 32px; }
#boot .grid { position: relative; width: 200px; height: 86px; }
#boot .grid i { position: absolute; background-image: url(/boot-logo.png); background-size: 200px 86px; animation: boot-tile 2.6s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes boot-in { to { opacity: 1; } }
@keyframes boot-tile {
  0%, 12% { transform: none; opacity: 1; }
  45%, 58% { transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(.8); opacity: .7; }
  88%, 100% { transform: none; opacity: 1; }
}