:root {
  --ink: #171717;
  --stage-width: 375px;
  --stage-height: 667px;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  align-items: flex-start;
  background: #d4d4d4;
  display: flex;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  justify-content: center;
  margin: 0;
  min-height: 100vh;
}

.splash-shell {
  background: var(--ink);
  height: var(--stage-height);
  overflow: hidden;
  position: relative;
  width: var(--stage-width);
}

.fall-field {
  height: 388px;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: var(--stage-width);
}

.falling-pieces {
  inset: 0;
  position: absolute;
  z-index: 1;
}

.piece {
  --drop-extra: 0px;
  --fall-x: 0px;
  --x: 0px;
  --y: 0px;
  --r: 0deg;
  --delay: 0ms;
  --duration: 780ms;
  --w: 86px;
  --h: 75px;
  animation: pieceDrop var(--duration) cubic-bezier(0.16, 0.88, 0.24, 1.06) var(--delay) both;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.25));
  height: var(--h);
  left: 0;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  transform: translate3d(var(--fall-x), calc(-150px - var(--drop-extra)), 0) rotate(calc(var(--r) - 34deg)) scale(0.94);
  user-select: none;
  width: var(--w);
  will-change: transform, opacity;
}

.splash-shell.is-settled .piece {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.18));
}

.brand-logo {
  animation: logoEnter 720ms cubic-bezier(0.2, 0.8, 0.2, 1) 2800ms both;
  height: 90.77px;
  left: 50%;
  object-fit: contain;
  position: absolute;
  top: 495.23px;
  transform: translateX(-50%);
  width: 188.86px;
  z-index: 3;
}

@keyframes pieceDrop {
  0% {
    opacity: 0;
    transform: translate3d(var(--fall-x), calc(-150px - var(--drop-extra)), 0) rotate(calc(var(--r) - 34deg)) scale(0.94);
  }

  34% {
    opacity: 1;
  }

  62% {
    opacity: 1;
    transform: translate3d(var(--x), calc(var(--y) + 16px), 0) rotate(calc(var(--r) + 7deg)) scale(1.03);
  }

  82% {
    transform: translate3d(var(--x), calc(var(--y) - 5px), 0) rotate(calc(var(--r) - 2deg)) scale(0.99);
  }

  100% {
    opacity: 1;
    transform: translate3d(var(--x), var(--y), 0) rotate(var(--r)) scale(1);
  }
}

@keyframes logoEnter {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(18px) scale(0.96);
  }

  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

@media (max-width: 420px) {
  body {
    background: var(--ink);
  }
}

@media (prefers-reduced-motion: reduce) {
  .piece {
    animation: none;
    opacity: 1;
    transform: translate3d(var(--x), var(--y), 0) rotate(var(--r)) scale(1);
  }

  .brand-logo {
    animation: none;
    opacity: 1;
    transition: none;
  }
}