/* styles.css */
.page {
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 90vh;
    display: flex;
    gap: 1rem;
    font-family: system-ui, sans-serif;
}

.text-group {
    display: flex;
    justify-content: center;
    flex-direction: column;

    p {
        font-size: 1.5em;
    }

    h1 {
        font-size: 3.5em;
    }
}

.bin-mascot { 
    width: 100%; 
    height: auto; 
}

.bob {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: bob 2.6s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

.dot { animation: pulse 1.4s ease-in-out infinite; }
.d2  { animation-delay: 0.2s; }
.d3  { animation-delay: 0.4s; }
@keyframes pulse {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .bob, .dot { animation: none; }
}