/* Filmtekercs figura */
.filmstrip-figure {
  position: fixed;
  top: 50%; /* A képernyő közepére helyezés */
  left: 50%;
  transform: translate(-50%, -50%); /* A figura pontos középre igazítása */
  z-index: 9999;
  width: 100px; /* Általános szélesség a figura egészére */
}

/* Body elem - a középpontból építkezve */
#body {
  position: absolute;
  width: 130px;
  height: 15vh; /* 15% a viewport magasságából */
  left: 50%;
  top: 5%; /* A középponttól eltolva */
  transform: translateX(-50%);
  z-index: 1; /* Body a legalsó rétegben */
}

/* Lábak */
@keyframes walk-cycle-left {
  0% { transform: rotate(10deg) translateY(0); }
  25% { transform: rotate(5deg) translateY(-10px); }
  50% { transform: rotate(-10deg) translateY(0); }
  75% { transform: rotate(-5deg) translateY(10px); }
  100% { transform: rotate(10deg) translateY(0); }
}

@keyframes walk-cycle-right {
  0% { transform: rotate(-10deg) translateY(0); }
  25% { transform: rotate(-5deg) translateY(10px); }
  50% { transform: rotate(10deg) translateY(0); }
  75% { transform: rotate(5deg) translateY(-10px); }
  100% { transform: rotate(-10deg) translateY(0); }
}

/* Bal láb mozgása */
#leftfoot {
  position: absolute;
  width: 80px;
  height: auto;
  bottom: -170px;
  left: -10px;
  animation: walk-cycle-left 0.6s infinite ease-in-out;
}

/* Jobb láb mozgása - eltolt fázissal */
#rightfoot {
  position: absolute;
  width: 80px;
  height: auto;
  bottom: -170px;
  right: -30px;
  animation: walk-cycle-right 0.6s infinite ease-in-out;
}

/* Kezek */
#righthand {
  position: absolute;
  width: 60px;
  height: auto;
  top: -10px; /* A body fölött */
  left: -70px; /* A body bal oldalán */
  z-index: 2; /* A kéz felette legyen a testnek */
  opacity: 0; /* Kezdetben rejtve */
}

#lefthand {
  position: absolute;
  width: 60px;
  height: auto;
  top: -10px; /* A body fölött */
  right: -70px; /* A body jobb oldalán */
  z-index: 2; /* A kéz felette legyen a testnek */
  opacity: 0; /* Kezdetben rejtve */
}

/* Wave animáció a kezek integetéséhez */
@keyframes wave {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px); /* Nagyobb mozgás felfelé */
  }
  100% {
    transform: translateY(0px);
  }
}

/* Kéz mozgás beállítása */
#lefthand, #righthand {
  animation: wave 1.5s linear infinite;
  animation-play-state: paused; /* Kezdetben szüneteltetve */
}

/* Szemek */
#openeye, #closeeye {
  position: absolute !important; /* biztosan felülírja a többi szabályt */
  width: 60px;
  height: auto;
  top: -30%; /* A body teteje fölé helyezés */
  left: 50%;
  transform: translateX(-50%);
  z-index: 10; /* Magasabb z-index érték */
}

#closeeye {
  opacity: 1; /* Mindig látható */
}

#openeye {
  opacity: 0; /* Alapértelmezetten rejtve van */
}

/* Pislogás animáció - openeye megjelenése */
@keyframes blink {
  0%, 100% {
    opacity: 0; /* Nyitott szem rejtve */
  }
  10%, 90% {
    opacity: 1; /* Nyitott szem látható */
  }
}

#openeye {
  animation: blink 1s infinite; /* Az animáció 1 másodperces időtartamban ismétlődik */
  animation-timing-function: ease-in-out; /* Zökkenőmentes átmenet */
}