font-face {
  font-family: 'StampingNico';
  src: url('fonts/StampingNico.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* --- Layout base --- */
body {
  margin: 0;
  padding: 0;
  background-color: #fff;
  font-family: Helvetica, Arial, sans-serif;
  overflow-x: hidden;
}

/* --- Container centrale --- */
.container {
  text-align: center;
  padding-top: 60px;
  position: relative;
  z-index: 50; /* Sopra foglie */
}

h1 {
  font-family: 'StampingNico', Helvetica, sans-serif;
  font-size: 2em;
  margin-bottom: 20px;
}

.center-image {
  width: 400px;
  height: auto;
  margin-bottom: 30px;
}

nav {
  display: flex;
  justify-content: center;
  gap: 30px;
  font-size: 1.2em;
  position: relative;
  z-index: 50; /* Sopra foglie */
}

a {
  color: #111;
  text-decoration: none;
  position: relative;
}

a:hover {
  text-decoration: underline;
}

/* --- Contenitore foglie --- */
.leaf-container {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  overflow: visible;
  z-index: 100; /* Sopra tutto */
}

/* --- Foglie che cadono --- */
.falling-leaf {
  position: absolute;
  top: -80px;
  pointer-events: none;
  animation-name: fall-sway;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  z-index: 101;
  will-change: transform;
}

/* Animazione unica che combina caduta e oscillazione */
@keyframes fall-sway {
  0% {
    transform: translateX(0) translateY(0) rotate(0deg);
  }
  25% {
    transform: translateX(15px) translateY(25vh) rotate(90deg);
  }
  50% {
    transform: translateX(-15px) translateY(50vh) rotate(180deg);
  }
  75% {
    transform: translateX(15px) translateY(75vh) rotate(270deg);
  }
  100% {
    transform: translateX(0) translateY(calc(100vh - 90px)) rotate(360deg);
  }
}