@charset "UTF-8";

@font-face {
  font-style: normal;
  font-weight: normal;
  font-family: "Work Sans";
  src:
    url("../fonts/WorkSans-Medium.woff2") format("woff2"),
    url("../fonts/WorkSans-Medium.woff") format("woff");
}

body {
  background-color: #f0efe0;
  margin: 0;
  padding: 0;
}

.year {
  position: fixed;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Basel Grotesk Mono", sans-serif;
  font-size: 0.8rem;
  color: black;
  z-index: 11;
}

.card {
  position: fixed;
  left: 50%;
  /* Départ hors de la page par le bas */
  top: 100%;
  transform: translate(-50%, 150vh);
  width: 45.75%;
  height: 45.75%;
  object-fit: contain;
  pointer-events: none;
  /* Animation: attendre 1s puis chaque image remonte avec un léger offset */
  animation-name: slideUpCenter;
  animation-duration: 0.8s;
  animation-timing-function: cubic-bezier(0.22, 0.9, 0.27, 1);
  animation-delay: calc(1s + var(--i) * 0.12s);
  animation-fill-mode: forwards;
}

@keyframes slideUpCenter {
  from {
    transform: translate(-50%, 150vh);
    top: 100%;
  }
  to {
    transform: translate(-50%, -50%);
    top: 50%;
  }
}

/* Règle responsive: image plus petite sur écrans <= 800px */
@media (max-width: 800px) {
  .card {
    width: 70%;
    height: 70%;
  }
}