/* ============================================
   АНИМАЦИИ КАРТОЧЕК
   ============================================ */

/* ------------------------------------------------------------
   ОБЩИЕ СТИЛИ: ВСЕ ЭЛЕМЕНТЫ АНИМАЦИЙ СКРЫТЫ ПО УМОЛЧАНИЮ
   ------------------------------------------------------------ */
.car-wheel,
.military-tank-container,
.dino-ornaments,
.animals-container,
.starwars-spaceship-container,
.sea-waves,
.space-background,
.people-container,
.mechanisms-container,
.panda-container,
.competition-animation,
.insects-container,
.christmas-ornaments,
.owl-container,
.flower-container,
.wally-container,
.airplane-container,
.tractor-container,
.sport-container,
.train-container,
.walk-bot-container {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* ------------------------------------------------------------
   1. КОЛЕСО ДЛЯ КАРТОЧКИ "АВТОМОБИЛИ"
   ------------------------------------------------------------ */
.car-wheel {
  width: 60px;
  height: 60px;
  bottom: -60px;
  right: -60px;
}

.car-wheel-inner {
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at center,
    #333 0%,
    #333 35%,
    #666 35%,
    #666 65%,
    #333 65%,
    #333 100%
  );
  border-radius: 50%;
  position: relative;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.car-wheel-inner::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30%;
  height: 30%;
  background: #999;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.car-wheel-inner::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15%;
  height: 15%;
  background: #333;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

@keyframes wheelFallAndRoll {
  0% {
    bottom: -60px;
    right: -60px;
    opacity: 0;
    transform: rotate(0deg);
  }
  10% {
    opacity: 1;
  }
  30% {
    bottom: 10px;
    right: 20px;
    transform: rotate(180deg);
  }
  50% {
    bottom: 10px;
    right: 60px;
    transform: rotate(360deg);
  }
  70% {
    bottom: 10px;
    right: 100px;
    transform: rotate(540deg);
  }
  100% {
    bottom: 10px;
    right: calc(100% + 60px);
    opacity: 0;
    transform: rotate(720deg);
  }
}

#cars-card:hover .car-wheel {
  opacity: 1;
  animation: wheelFallAndRoll 1.5s ease-in-out;
}

/* ------------------------------------------------------------
   2. ТАНК ДЛЯ КАРТОЧКИ "ВОЕННАЯ ТЕХНИКА"
   ------------------------------------------------------------ */
.military-tank-container {
  bottom: -60px;
  left: -80px;
  width: 80px;
  height: 50px;
}

@keyframes tankDrive {
  0% {
    bottom: -60px;
    left: -80px;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    bottom: 10px;
    left: calc(50% - 40px);
    opacity: 1;
  }
}

#military-card:hover .military-tank-container {
  opacity: 1;
  animation: tankDrive 1.5s ease-out forwards;
}

.tank-body {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 25px;
  background: linear-gradient(180deg, #4a5d3a, #2d3a22);
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.tank-body::before,
.tank-body::after {
  content: "";
  position: absolute;
  bottom: -5px;
  width: 15px;
  height: 10px;
  background: #222;
  border-radius: 3px;
}

.tank-body::before {
  left: 8px;
}

.tank-body::after {
  right: 8px;
}

.tank-turret {
  position: absolute;
  bottom: 15px;
  left: 15px;
  width: 30px;
  height: 20px;
  background: linear-gradient(180deg, #5a6d4a, #3d4a32);
  border-radius: 10px 10px 5px 5px;
  transform-origin: bottom center;
  transform: rotate(0deg);
  transition: transform 0.8s ease 1.5s;
}

#military-card:hover .tank-turret {
  transform: rotate(-25deg);
}

.tank-cannon {
  position: absolute;
  top: 5px;
  right: -20px;
  width: 25px;
  height: 6px;
  background: linear-gradient(90deg, #3d4a32, #2d3a22);
  border-radius: 3px;
}

/* ------------------------------------------------------------
   ДИНОЗАВРЫ - СЛЕДЫ (ФИНАЛЬНОЕ РЕШЕНИЕ)
   ------------------------------------------------------------ */
#dino-card {
  position: relative;
  overflow: visible !important;
}

#dino-card .dino-ornaments {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 100;
}

#dino-card .dino-footprint {
  position: absolute;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  z-index: 101;
}

/* Скрываем иконки Font Awesome */
#dino-card .dino-footprint i {
  display: none !important;
}

/* Добавляем эмодзи через псевдоэлемент */
#dino-card .dino-footprint::before {
  content: "🐾";
  display: inline-block;
  font-size: 1.5rem;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

/* Разные цвета для разнообразия */
#dino-card .dino-footprint:nth-child(odd)::before {
  color: #a0522d;
}

#dino-card .dino-footprint:nth-child(even)::before {
  color: #8b4513;
}

/* Принудительно задаём позиции через nth-of-type или nth-child 
   так как nth-child не работает, используем комбинацию с разными селекторами */

/* Способ 1: Используем :nth-of-child с явными правилами */
#dino-card .dino-footprint:first-child {
  top: 15%;
  left: 10%;
  animation-delay: 0s;
}

/* Для остальных используем общий селектор с разными именами,
   но так как классы одинаковые, используем :nth-child с явным указанием позиции */

#dino-card .dino-footprint:nth-child(1) {
  top: 15%;
  left: 10%;
  animation-delay: 0s;
}
#dino-card .dino-footprint:nth-child(2) {
  top: 55%;
  left: 35%;
  animation-delay: 0.1s;
  font-size: 1.8rem;
}
#dino-card .dino-footprint:nth-child(3) {
  top: 30%;
  left: 65%;
  animation-delay: 0.2s;
  font-size: 1.5rem;
}
#dino-card .dino-footprint:nth-child(4) {
  top: 75%;
  left: 20%;
  animation-delay: 0.3s;
  font-size: 1.3rem;
}
#dino-card .dino-footprint:nth-child(5) {
  top: 20%;
  left: 50%;
  animation-delay: 0.4s;
  font-size: 1.6rem;
}
#dino-card .dino-footprint:nth-child(6) {
  top: 45%;
  left: 80%;
  animation-delay: 0.5s;
  font-size: 1.4rem;
}
#dino-card .dino-footprint:nth-child(7) {
  top: 80%;
  left: 55%;
  animation-delay: 0.6s;
  font-size: 1.7rem;
}
#dino-card .dino-footprint:nth-child(8) {
  top: 10%;
  left: 80%;
  animation-delay: 0.7s;
  font-size: 1.3rem;
}
#dino-card .dino-footprint:nth-child(9) {
  top: 60%;
  left: 60%;
  animation-delay: 0.8s;
  font-size: 1.5rem;
}
#dino-card .dino-footprint:nth-child(10) {
  top: 40%;
  left: 15%;
  animation-delay: 0.9s;
  font-size: 1.6rem;
}
#dino-card .dino-footprint:nth-child(11) {
  top: 85%;
  left: 75%;
  animation-delay: 1s;
  font-size: 1.4rem;
}

@keyframes footprintPop {
  0% {
    opacity: 0;
    transform: scale(0) rotate(-30deg);
  }
  40% {
    opacity: 0.9;
    transform: scale(1.2) rotate(10deg);
  }
  100% {
    opacity: 0.8;
    transform: scale(1) rotate(0deg);
  }
}

#dino-card:hover .dino-footprint {
  animation: footprintPop 0.5s ease forwards;
}

/* ------------------------------------------------------------
   4. ЗВЁЗДНЫЙ КОРАБЛЬ
   ------------------------------------------------------------ */
.starwars-spaceship-container {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.starwars-spaceship {
  position: absolute;
  top: -80px;
  left: -80px;
  width: 80px;
  height: 80px;
  background: url("https://z-cdn-media.chatglm.cn/files/7be0b118-e9fa-4602-a0f3-a4b4eda9aae0.png?auth_key=1865913974-663a81a04c94423a8b4955db4f715b81-0-e240a74284ed036123aa42d2fe63c7bd")
    center/contain no-repeat;
  animation: spaceshipFly 6s linear infinite;
  animation-play-state: paused;
}

@keyframes spaceshipFly {
  0% {
    top: -80px;
    left: -80px;
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    top: calc(100% + 20px);
    left: calc(100% + 20px);
    opacity: 0;
  }
}

#starwars-card:hover .starwars-spaceship-container {
  opacity: 1;
}

#starwars-card:hover .starwars-spaceship {
  animation-play-state: running;
}

/* ------------------------------------------------------------
   5. МОРСКИЕ ВОЛНЫ
   ------------------------------------------------------------ */
.sea-waves {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40%;
  overflow: hidden;
}

.wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(0, 119, 190, 0.1) 0%,
    rgba(0, 150, 199, 0.2) 25%,
    rgba(72, 202, 228, 0.3) 50%,
    rgba(0, 150, 199, 0.2) 75%,
    rgba(0, 119, 190, 0.1) 100%
  );
  border-radius: 50% 50% 0 0;
  animation: waveMotion 8s ease-in-out infinite;
  animation-play-state: paused;
}

.wave:nth-child(2) {
  bottom: -5px;
  height: 90%;
  background: linear-gradient(
    180deg,
    rgba(0, 150, 199, 0.15) 0%,
    rgba(72, 202, 228, 0.25) 25%,
    rgba(144, 224, 239, 0.35) 50%,
    rgba(72, 202, 228, 0.25) 75%,
    rgba(0, 150, 199, 0.15) 100%
  );
  animation: waveMotion 10s ease-in-out infinite reverse;
  animation-delay: 1s;
  animation-play-state: paused;
}

.wave:nth-child(3) {
  bottom: -10px;
  height: 80%;
  background: linear-gradient(
    180deg,
    rgba(72, 202, 228, 0.2) 0%,
    rgba(144, 224, 239, 0.3) 25%,
    rgba(173, 232, 244, 0.4) 50%,
    rgba(144, 224, 239, 0.3) 75%,
    rgba(72, 202, 228, 0.2) 100%
  );
  animation: waveMotion 12s ease-in-out infinite;
  animation-delay: 2s;
  animation-play-state: paused;
}

.wave-foam {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 10px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 20%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0.3) 80%,
    transparent 100%
  );
  animation: foamMove 4s linear infinite;
  animation-play-state: paused;
}

@keyframes waveMotion {
  0%,
  100% {
    transform: translateX(0) translateY(0);
  }
  25% {
    transform: translateX(-10%) translateY(-5px);
  }
  50% {
    transform: translateX(0) translateY(0);
  }
  75% {
    transform: translateX(10%) translateY(-3px);
  }
}

@keyframes foamMove {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

#ships-card:hover .sea-waves {
  opacity: 1;
}

#ships-card:hover .wave,
#ships-card:hover .wave-foam {
  animation-play-state: running;
}

/* ------------------------------------------------------------
   6. КОСМОС: ЗВЁЗДЫ И КОМЕТА
   ------------------------------------------------------------ */
.space-background {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  overflow: hidden;
}

.stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #000428 0%, #004e92 100%);
}

.star {
  position: absolute;
  background: white;
  border-radius: 50%;
  animation: starTwinkle 3s ease-in-out infinite;
  animation-play-state: paused;
}

.star:nth-child(1) {
  top: 10%;
  left: 15%;
  width: 2px;
  height: 2px;
  animation-delay: 0s;
}
.star:nth-child(2) {
  top: 20%;
  left: 30%;
  width: 1px;
  height: 1px;
  animation-delay: 0.5s;
}
.star:nth-child(3) {
  top: 15%;
  left: 50%;
  width: 3px;
  height: 3px;
  animation-delay: 1s;
}
.star:nth-child(4) {
  top: 30%;
  left: 70%;
  width: 2px;
  height: 2px;
  animation-delay: 1.5s;
}
.star:nth-child(5) {
  top: 25%;
  left: 85%;
  width: 1px;
  height: 1px;
  animation-delay: 2s;
}
.star:nth-child(6) {
  top: 40%;
  left: 10%;
  width: 2px;
  height: 2px;
  animation-delay: 2.5s;
}
.star:nth-child(7) {
  top: 35%;
  left: 25%;
  width: 1px;
  height: 1px;
  animation-delay: 0.3s;
}
.star:nth-child(8) {
  top: 45%;
  left: 40%;
  width: 3px;
  height: 3px;
  animation-delay: 0.8s;
}
.star:nth-child(9) {
  top: 50%;
  left: 60%;
  width: 2px;
  height: 2px;
  animation-delay: 1.3s;
}
.star:nth-child(10) {
  top: 55%;
  left: 75%;
  width: 1px;
  height: 1px;
  animation-delay: 1.8s;
}
.star:nth-child(11) {
  top: 60%;
  left: 20%;
  width: 2px;
  height: 2px;
  animation-delay: 2.3s;
}
.star:nth-child(12) {
  top: 65%;
  left: 35%;
  width: 1px;
  height: 1px;
  animation-delay: 0.7s;
}
.star:nth-child(13) {
  top: 70%;
  left: 50%;
  width: 3px;
  height: 3px;
  animation-delay: 1.2s;
}
.star:nth-child(14) {
  top: 75%;
  left: 65%;
  width: 2px;
  height: 2px;
  animation-delay: 1.7s;
}
.star:nth-child(15) {
  top: 80%;
  left: 80%;
  width: 1px;
  height: 1px;
  animation-delay: 2.2s;
}

@keyframes starTwinkle {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

.comet {
  position: absolute;
  top: 20%;
  left: -100px;
  width: 4px;
  height: 4px;
  background: white;
  border-radius: 50%;
  box-shadow:
    0 0 10px white,
    0 0 20px white,
    0 0 30px white;
  animation: cometFly 4s linear infinite;
  animation-play-state: paused;
}

.comet::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 80px;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.8),
    white
  );
  transform: translateY(-50%);
  border-radius: 2px;
}

@keyframes cometFly {
  0% {
    transform: translateX(0) translateY(0);
  }
  100% {
    transform: translateX(400px) translateY(60px);
  }
}

#space-card:hover .space-background {
  opacity: 1;
}

#space-card:hover .star,
#space-card:hover .comet {
  animation-play-state: running;
}

#space-card:hover .category-name,
#space-card:hover .category-count {
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* ------------------------------------------------------------
   7. ЛЮДИ: ХОДЯЩИЕ ЧЕЛОВЕЧКИ
   ------------------------------------------------------------ */
.people-container {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.person {
  position: absolute;
  font-size: 1.5rem;
  opacity: 0;
  animation: personWalk 8s linear infinite;
  animation-play-state: paused;
}

.person:nth-child(1) {
  bottom: 5px;
  left: -30px;
  animation-delay: 0s;
  color: #3d9970;
}
.person:nth-child(2) {
  bottom: 5px;
  left: -30px;
  animation-delay: 2s;
  color: #ff851b;
}
.person:nth-child(3) {
  bottom: 5px;
  left: -30px;
  animation-delay: 4s;
  color: #b10dc9;
}
.person:nth-child(4) {
  bottom: 5px;
  left: -30px;
  animation-delay: 6s;
  color: #0074d9;
}

@keyframes personWalk {
  0% {
    left: -30px;
    opacity: 0;
    transform: translateY(0);
  }
  5% {
    opacity: 1;
  }
  25% {
    transform: translateY(-5px);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-5px);
  }
  95% {
    opacity: 1;
  }
  100% {
    left: calc(100% + 30px);
    opacity: 0;
    transform: translateY(0);
  }
}

#people-card:hover .people-container {
  opacity: 1;
}

#people-card:hover .person {
  animation-play-state: running;
}

/* ------------------------------------------------------------
   8. МЕХАНИЗМЫ: ШЕСТЕРЁНКИ
   ------------------------------------------------------------ */
.mechanisms-container {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.gear {
  position: absolute;
  font-size: 2rem;
  color: #6c757d;
  opacity: 0.8;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}

.gear:nth-child(1) {
  top: 5px;
  right: 5px;
  font-size: 2.5rem;
  color: #495057;
  animation: spinClockwise 8s linear infinite;
}
.gear:nth-child(2) {
  bottom: 5px;
  left: 5px;
  font-size: 2.2rem;
  color: #6c757d;
  animation: spinCounterClockwise 10s linear infinite;
}
.gear:nth-child(3) {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.8rem;
  color: #adb5bd;
  animation: spinClockwise 12s linear infinite;
}
.gear:nth-child(4) {
  top: 10px;
  left: 20px;
  font-size: 1.5rem;
  color: #868e96;
  animation: spinCounterClockwise 7s linear infinite;
}

@keyframes spinClockwise {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes spinCounterClockwise {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

#mechanisms-card:hover .mechanisms-container {
  opacity: 1;
}

#mechanisms-card:hover .gear {
  animation-play-state: running;
}

/* ------------------------------------------------------------
   9. МИНИ-МОДЕЛИ: ПАНДА
   ------------------------------------------------------------ */
.panda-container {
  bottom: -80px;
  right: 10px;
  width: 80px;
  height: 80px;
  transition: bottom 0.4s ease-out;
}

.panda-body {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
  border-radius: 50% 50% 45% 45%;
  position: relative;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  animation: pandaBreathe 3s ease-in-out infinite;
  animation-play-state: paused;
}

@keyframes pandaBreathe {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.panda-ear-left,
.panda-ear-right {
  position: absolute;
  top: -5px;
  width: 25px;
  height: 25px;
  background: #000;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.panda-ear-left {
  left: -8px;
}
.panda-ear-right {
  right: -8px;
}

.panda-eyes-container {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
}

.panda-eye {
  width: 10px;
  height: 12px;
  background: #000;
  border-radius: 50%;
  position: relative;
  animation: pandaBlink 4s infinite;
  animation-play-state: paused;
}

.panda-eye::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 1px;
  width: 3px;
  height: 3px;
  background: white;
  border-radius: 50%;
}

@keyframes pandaBlink {
  0%,
  90%,
  100% {
    transform: scaleY(1);
  }
  95% {
    transform: scaleY(0.1);
  }
}

.panda-nose {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 6px;
  background: #000;
  border-radius: 50%;
}

.panda-mouth {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 15px;
  height: 8px;
  border: 2px solid #000;
  border-top: none;
  border-radius: 0 0 50% 50%;
}

.panda-hand-left,
.panda-hand-right {
  position: absolute;
  top: 25px;
  width: 15px;
  height: 20px;
  background: #000;
  border-radius: 50% 50% 40% 40%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  animation: pandaWave 2s ease-in-out infinite;
  animation-play-state: paused;
}

.panda-hand-left {
  left: -12px;
  transform-origin: right center;
  animation-delay: 0.5s;
}

.panda-hand-right {
  right: -12px;
  transform-origin: left center;
}

@keyframes pandaWave {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-15deg);
  }
  75% {
    transform: rotate(15deg);
  }
}

#mini-modeli-card:hover .panda-container {
  opacity: 1;
  bottom: 10px;
}

#mini-modeli-card:hover .panda-body,
#mini-modeli-card:hover .panda-eye,
#mini-modeli-card:hover .panda-hand-left,
#mini-modeli-card:hover .panda-hand-right {
  animation-play-state: running;
}

/* ------------------------------------------------------------
   10. СОРЕВНОВАНИЯ
   ------------------------------------------------------------ */
.competition-animation {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  overflow: hidden;
}

.competition-team {
  position: absolute;
  width: 50%;
  height: 100%;
  top: 0;
}

.team-red {
  left: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 0, 0, 0.7),
    rgba(255, 0, 0, 0.3)
  );
  animation: teamRedPush 3s ease-in-out infinite;
  animation-play-state: paused;
}

.team-blue {
  right: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 255, 0.3),
    rgba(0, 0, 255, 0.7)
  );
  animation: teamBluePush 3s ease-in-out infinite;
  animation-play-state: paused;
}

@keyframes teamRedPush {
  0%,
  100% {
    width: 50%;
  }
  50% {
    width: 60%;
  }
}

@keyframes teamBluePush {
  0%,
  100% {
    width: 50%;
  }
  50% {
    width: 60%;
  }
}

.competition-line {
  position: absolute;
  top: 0;
  left: 50%;
  width: 4px;
  height: 100%;
  background: white;
  transform: translateX(-50%);
  z-index: 2;
  animation: lineMove 3s ease-in-out infinite;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
  animation-play-state: paused;
}

@keyframes lineMove {
  0%,
  100% {
    left: 50%;
  }
  50% {
    left: 45%;
  }
}

.competition-trophy {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  z-index: 3;
  opacity: 0;
  animation: trophyAppear 3s ease-in-out infinite;
  animation-play-state: paused;
}

@keyframes trophyAppear {
  0%,
  40%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }
  50%,
  90% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
  }
}

#competition-card:hover .competition-animation {
  opacity: 1;
}

#competition-card:hover .competition-team,
#competition-card:hover .competition-line,
#competition-card:hover .competition-trophy {
  animation-play-state: running;
}

/* ------------------------------------------------------------
   11. НАСЕКОМЫЕ
   ------------------------------------------------------------ */
.insects-container {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
}

.insect {
  position: absolute;
  font-size: 1.5rem;
  opacity: 0;
  animation-play-state: paused;
}

.insect:nth-child(1) {
  top: 20%;
  left: -30px;
  animation: flyAcross 8s linear infinite;
  font-size: 1.8rem;
}

.insect:nth-child(2) {
  top: 60%;
  right: -30px;
  animation: crawlAcross 10s linear infinite;
  font-size: 1.6rem;
  transform: scaleX(-1);
}

.insect:nth-child(3) {
  top: 40%;
  left: 50%;
  animation: butterflyFloat 12s ease-in-out infinite;
  font-size: 2rem;
}

@keyframes flyAcross {
  0% {
    left: -30px;
    opacity: 0;
    transform: translateY(0) rotate(0deg);
  }
  5% {
    opacity: 1;
  }
  25% {
    transform: translateY(-10px) rotate(5deg);
  }
  50% {
    transform: translateY(0) rotate(-5deg);
  }
  75% {
    transform: translateY(-5px) rotate(3deg);
  }
  95% {
    opacity: 1;
  }
  100% {
    left: calc(100% + 30px);
    opacity: 0;
    transform: translateY(0) rotate(0deg);
  }
}

@keyframes crawlAcross {
  0% {
    right: -30px;
    opacity: 0;
    transform: scaleX(-1) translateY(0) rotate(0deg);
  }
  5% {
    opacity: 1;
  }
  25% {
    transform: scaleX(-1) translateY(-3px) rotate(3deg);
  }
  50% {
    transform: scaleX(-1) translateY(0) rotate(-3deg);
  }
  75% {
    transform: scaleX(-1) translateY(-2px) rotate(2deg);
  }
  95% {
    opacity: 1;
  }
  100% {
    right: calc(100% + 30px);
    opacity: 0;
    transform: scaleX(-1) translateY(0) rotate(0deg);
  }
}

@keyframes butterflyFloat {
  0% {
    left: 50%;
    top: 40%;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(0deg) scale(0.8);
  }
  10% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(5deg) scale(1);
  }
  25% {
    left: 30%;
    top: 20%;
    transform: translate(-50%, -50%) rotate(-5deg) scale(1.1);
  }
  40% {
    left: 70%;
    top: 60%;
    transform: translate(-50%, -50%) rotate(8deg) scale(0.9);
  }
  60% {
    left: 20%;
    top: 70%;
    transform: translate(-50%, -50%) rotate(-8deg) scale(1.2);
  }
  75% {
    left: 80%;
    top: 30%;
    transform: translate(-50%, -50%) rotate(5deg) scale(0.8);
  }
  90% {
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
    opacity: 1;
  }
  100% {
    left: 50%;
    top: 40%;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(0deg) scale(0.8);
  }
}

#insects-card:hover .insects-container {
  opacity: 1;
}

#insects-card:hover .insect {
  animation-play-state: running;
}

/* ------------------------------------------------------------
   12. НОВОГОДНИЕ УКРАШЕНИЯ
   ------------------------------------------------------------ */
.christmas-ornaments {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.christmas-garland {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.garland-light {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: 0 0 6px currentColor;
  animation: garlandTwinkle 1.5s ease-in-out infinite;
  animation-play-state: paused;
}

.garland-light:nth-child(3n + 1) {
  color: #ff0000;
  background-color: #ff0000;
}
.garland-light:nth-child(3n + 2) {
  color: #00ff00;
  background-color: #00ff00;
}
.garland-light:nth-child(3n + 3) {
  color: #ffff00;
  background-color: #ffff00;
}
.garland-light:nth-child(3n + 4) {
  color: #0080ff;
  background-color: #0080ff;
}
.garland-light:nth-child(3n + 5) {
  color: #ff00ff;
  background-color: #ff00ff;
}

.snowflake {
  position: absolute;
  color: white;
  font-size: 18px;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
  z-index: 19;
  animation-play-state: paused;
}

.snowflake.flake1 {
  top: -20px;
  left: 15%;
}
.snowflake.flake2 {
  top: -20px;
  left: 30%;
  font-size: 22px;
}
.snowflake.flake3 {
  top: -20px;
  left: 45%;
  font-size: 16px;
}
.snowflake.flake4 {
  top: -20px;
  left: 60%;
  font-size: 20px;
}
.snowflake.flake5 {
  top: -20px;
  left: 75%;
  font-size: 18px;
}
.snowflake.flake6 {
  top: -20px;
  left: 85%;
  font-size: 24px;
}

@keyframes garlandAppear {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes garlandTwinkle {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.8);
  }
}

@keyframes snowfall {
  0% {
    top: -20px;
    opacity: 0;
    transform: translateX(0) rotate(0deg);
  }
  10% {
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
    transform: translateX(30px) rotate(360deg);
  }
}

#newyear-card:hover .christmas-ornaments {
  opacity: 1;
}

#newyear-card:hover .christmas-garland {
  animation: garlandAppear 0.5s ease-in forwards;
}

#newyear-card:hover .garland-light {
  animation-play-state: running;
}

#newyear-card:hover .snowflake {
  animation-play-state: running;
}

#newyear-card:hover .snowflake.flake1 {
  animation: snowfall 3s linear infinite;
}
#newyear-card:hover .snowflake.flake2 {
  animation: snowfall 3.5s linear infinite;
}
#newyear-card:hover .snowflake.flake3 {
  animation: snowfall 2.8s linear infinite;
}
#newyear-card:hover .snowflake.flake4 {
  animation: snowfall 3.2s linear infinite;
}
#newyear-card:hover .snowflake.flake5 {
  animation: snowfall 2.5s linear infinite;
}
#newyear-card:hover .snowflake.flake6 {
  animation: snowfall 3.8s linear infinite;
}

/* ------------------------------------------------------------
   13. ОФИЦИАЛЬНЫЕ ИНСТРУКЦИИ LEGO - 3D СЛОВО
   ------------------------------------------------------------ */
#lego-instructions-card {
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  perspective: 1000px;
}

.lego-word {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateZ(-200px);
  font-family: "Luckiest Guy", cursive;
  font-size: 3.5rem;
  font-weight: 800;
  transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  text-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  z-index: 1;
  white-space: nowrap;
  background: linear-gradient(
    90deg,
    #e32227 0%,
    #ffd700 20%,
    #0079c1 40%,
    #00a651 60%,
    #ff6900 80%,
    #e32227 100%
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: legoGradientShift 8s ease infinite;
  animation-play-state: paused;
}

@keyframes legoGradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

#lego-instructions-card:hover .lego-word {
  opacity: 1;
  transform: translate(-50%, -50%) translateZ(100px) scale(1.1);
  animation-play-state: running;
}

/* ------------------------------------------------------------
   14. ПТИЦЫ - СОВА
   ------------------------------------------------------------ */
.owl-container {
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100px;
  height: 100px;
}

.owl-image {
  width: 100%;
  height: 100%;
  background: url("https://z-cdn-media.chatglm.cn/files/83470a82-9217-4aa1-8e77-a07de6b7173a.png?auth_key=1866002062-a6bc72e894a84e30b21069b448f40fba-0-e60e21a39de985f94c3be6102d3644d8")
    center/contain no-repeat;
  animation: owlFloat 3s ease-in-out infinite;
  animation-play-state: paused;
}

@keyframes owlFloat {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-10px) rotate(2deg);
  }
}

#birds-card:hover .owl-container {
  opacity: 1;
}

#birds-card:hover .owl-image {
  animation-play-state: running;
}

/* ------------------------------------------------------------
   15. РАСТЕНИЯ - ЦВЕТОК
   ------------------------------------------------------------ */
.flower-container {
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 80px;
  height: 80px;
}

.flower-image {
  width: 100%;
  height: 100%;
  background: url("https://z-cdn-media.chatglm.cn/files/f3cdae3d-2aea-45af-b3a8-e83e864c9bc7.png?auth_key=1866047214-0089d6c6e7a04a9bab7ea2650123effd-0-5bcc9220ecc53ad2ac1c30859346948e")
    center/contain no-repeat;
  animation: flowerGrow 0.8s ease-out;
  animation-play-state: paused;
}

@keyframes flowerGrow {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  70% {
    transform: scale(1.1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

#plants-card:hover .flower-container {
  opacity: 1;
}

#plants-card:hover .flower-image {
  animation-play-state: running;
}

/* ------------------------------------------------------------
   16. РОБОТЫ - ВАЛЛИ
   ------------------------------------------------------------ */
.wally-container {
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 80px;
  height: 80px;
}

.wally-image {
  width: 100%;
  height: 100%;
  background: url("https://z-cdn-media.chatglm.cn/files/9ad75a24-ed23-44df-8bf4-207e4e3f43e5.png?auth_key=1866145634-aaea65b10b5b42a4ac3326b6afe56d50-0-4bc8f5b867c21c527991331eb3430225")
    center/contain no-repeat;
  animation: wallyAppear 0.8s ease-out;
  animation-play-state: paused;
}

@keyframes wallyAppear {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.1) rotate(5deg);
    opacity: 0.8;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

#robots-card:hover .wally-container {
  opacity: 1;
}

#robots-card:hover .wally-image {
  animation-play-state: running;
}

/* ------------------------------------------------------------
   17. САМОЛЁТЫ
   ------------------------------------------------------------ */
.airplane-container {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.airplane {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 40px;
  height: 40px;
  background: url("https://z-cdn-media.chatglm.cn/files/2556e1a3-800c-4df4-93a8-4ae482c55f83.png?auth_key=1866154037-c0c58f6559d34f35bb6c22b525dbcf0b-0-589c79fdba371ca419781934724552d6")
    center/contain no-repeat;
  animation: airplaneFly 4s ease-in-out infinite;
  animation-play-state: paused;
}

@keyframes airplaneFly {
  0% {
    top: -40px;
    right: -40px;
    opacity: 0;
    transform: rotate(45deg);
  }
  5% {
    opacity: 1;
  }
  25% {
    top: 20%;
    right: 75%;
    transform: rotate(30deg);
  }
  50% {
    top: 50%;
    right: 50%;
    transform: rotate(15deg);
  }
  75% {
    top: 75%;
    right: 25%;
    transform: rotate(0deg);
  }
  95% {
    opacity: 1;
  }
  100% {
    top: calc(100% + 20px);
    right: -20px;
    opacity: 0;
    transform: rotate(-15deg);
  }
}

#airplanes-card:hover .airplane-container {
  opacity: 1;
}

#airplanes-card:hover .airplane {
  animation-play-state: running;
}

/* ------------------------------------------------------------
   18. СПЕЦТЕХНИКА - ТРАКТОР
   ------------------------------------------------------------ */
.tractor-container {
  bottom: 5px;
  right: -80px;
  width: 70px;
  height: 50px;
  transition: right 1.5s ease-out;
}

.tractor-body {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 25px;
  background: linear-gradient(180deg, #2e7d32, #1b5e20);
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.tractor-cabin {
  position: absolute;
  bottom: 25px;
  left: 15px;
  width: 25px;
  height: 20px;
  background: linear-gradient(180deg, #4caf50, #2e7d32);
  border-radius: 5px 5px 0 0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.tractor-cabin::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  width: 15px;
  height: 10px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 2px;
}

.tractor-wheel {
  position: absolute;
  bottom: -5px;
  width: 15px;
  height: 15px;
  background: #333;
  border-radius: 50%;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
}

.tractor-wheel.front {
  left: 5px;
}
.tractor-wheel.rear {
  left: 30px;
}

.tractor-wheel::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  background: #666;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.tractor-exhaust {
  position: absolute;
  top: 15px;
  right: 5px;
  width: 5px;
  height: 10px;
  background: #666;
  border-radius: 2px;
}

.tractor-smoke {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 10px;
  height: 10px;
  background: rgba(200, 200, 200, 0.7);
  border-radius: 50%;
  opacity: 0;
  animation: smokeRise 2s infinite;
  animation-play-state: paused;
}

@keyframes smokeRise {
  0% {
    transform: translateY(0) scale(0.5);
    opacity: 0;
  }
  50% {
    transform: translateY(-10px) scale(1);
    opacity: 0.7;
  }
  100% {
    transform: translateY(-20px) scale(1.5);
    opacity: 0;
  }
}

#special-equipment-card:hover .tractor-container {
  opacity: 1;
  right: 10px;
}

#special-equipment-card:hover .tractor-smoke {
  animation-play-state: running;
}

/* ------------------------------------------------------------
   19. СПОРТ
   ------------------------------------------------------------ */
.sport-container {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
}

.sport-runner {
  position: absolute;
  bottom: 10px;
  left: -30px;
  font-size: 1.5rem;
  opacity: 0;
  animation: runnerMove 5s linear infinite;
  animation-play-state: paused;
}

.sport-runner:nth-child(1) {
  animation-delay: 0s;
  color: #3d9970;
}
.sport-runner:nth-child(2) {
  animation-delay: 1.67s;
  color: #ff851b;
}
.sport-runner:nth-child(3) {
  animation-delay: 3.33s;
  color: #b10dc9;
}

@keyframes runnerMove {
  0% {
    left: -30px;
    opacity: 0;
    transform: translateY(0) scaleX(1);
  }
  10% {
    opacity: 1;
  }
  25% {
    transform: translateY(-5px) scaleX(1);
  }
  50% {
    transform: translateY(0) scaleX(-1);
  }
  75% {
    transform: translateY(-5px) scaleX(-1);
  }
  90% {
    opacity: 1;
  }
  100% {
    left: calc(100% + 30px);
    opacity: 0;
    transform: translateY(0) scaleX(1);
  }
}

#sport-card:hover .sport-container {
  opacity: 1;
}

#sport-card:hover .sport-runner {
  animation-play-state: running;
}

/* ------------------------------------------------------------
   20. ТРАНСПОРТ - ПАРОВОЗ
   ------------------------------------------------------------ */
.train-container {
  bottom: 0;
  left: -120px;
  width: 100px;
  height: 50px;
  transition: left 3s linear;
}

.train-body {
  position: absolute;
  bottom: 15px;
  left: 0;
  width: 70px;
  height: 30px;
  background: linear-gradient(180deg, #8b0000, #5c0000);
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.train-cabin {
  position: absolute;
  bottom: 30px;
  left: 10px;
  width: 30px;
  height: 20px;
  background: linear-gradient(180deg, #a52a2a, #8b0000);
  border-radius: 5px 5px 0 0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.train-cabin::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  width: 20px;
  height: 10px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 2px;
}

.train-chimney {
  position: absolute;
  bottom: 45px;
  left: 35px;
  width: 10px;
  height: 15px;
  background: #333;
  border-radius: 2px;
}

.train-smoke {
  position: absolute;
  bottom: 60px;
  left: 35px;
  width: 12px;
  height: 12px;
  background: rgba(150, 150, 150, 0.7);
  border-radius: 50%;
  opacity: 0;
  animation: smokeRise 2s infinite;
  animation-play-state: paused;
}

.train-wheel {
  position: absolute;
  bottom: 5px;
  width: 12px;
  height: 12px;
  background: #333;
  border-radius: 50%;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
  animation: wheelRotate 1s linear infinite;
  animation-play-state: paused;
}

.train-wheel.front {
  left: 10px;
}
.train-wheel.middle {
  left: 30px;
}
.train-wheel.rear {
  left: 50px;
}

.train-wheel::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: #666;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

@keyframes wheelRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

#transport-card:hover .train-container {
  opacity: 1;
  left: calc(100% + 20px);
}

#transport-card:hover .train-smoke,
#transport-card:hover .train-wheel {
  animation-play-state: running;
}

/* ------------------------------------------------------------
   21. ШАГАЮЩИЕ РОБОТЫ
   ------------------------------------------------------------ */
.walk-bot-container {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
}

.walk-bot-wrapper {
  position: absolute;
  bottom: 5px;
  left: -60px;
  width: 50px;
  height: 60px;
  animation: walkAcross 3.5s linear infinite;
  animation-play-state: paused;
}

@keyframes walkAcross {
  0% {
    left: -60px;
    opacity: 0;
    transform: scaleX(1);
  }
  5% {
    opacity: 1;
  }
  45% {
    transform: scaleX(1);
  }
  50% {
    transform: scaleX(-1);
  }
  95% {
    opacity: 1;
    transform: scaleX(-1);
  }
  100% {
    left: calc(100% + 60px);
    opacity: 0;
    transform: scaleX(-1);
  }
}

.walk-bot-head {
  position: absolute;
  top: 0;
  left: 10px;
  width: 30px;
  height: 25px;
  background: linear-gradient(135deg, #e0e0e0, #bdbdbd);
  border-radius: 8px;
  border: 2px solid #757575;
  z-index: 2;
  animation: headBob 0.6s ease-in-out infinite alternate;
  animation-play-state: paused;
}

@keyframes headBob {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(2px);
  }
}

.walk-bot-eye {
  position: absolute;
  top: 8px;
  width: 6px;
  height: 6px;
  background: #333;
  border-radius: 50%;
}

.walk-bot-eye.left {
  left: 6px;
}
.walk-bot-eye.right {
  right: 6px;
}

.walk-bot-antenna {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 8px;
  background: #757575;
}

.walk-bot-antenna::after {
  content: "";
  position: absolute;
  top: -4px;
  left: -2px;
  width: 6px;
  height: 6px;
  background: #ff5252;
  border-radius: 50%;
}

.walk-bot-body {
  position: absolute;
  top: 22px;
  left: 5px;
  width: 40px;
  height: 20px;
  background: linear-gradient(135deg, #42a5f5, #1e88e5);
  border-radius: 6px;
  border: 2px solid #1565c0;
  z-index: 1;
}

.walk-bot-leg {
  position: absolute;
  bottom: 0;
  width: 10px;
  height: 25px;
  background: #757575;
  border-radius: 4px;
  transform-origin: top center;
}

.walk-bot-leg.front-left {
  left: 5px;
  animation: legWalkFrontLeft 0.6s ease-in-out infinite;
  animation-play-state: paused;
}

.walk-bot-leg.front-right {
  left: 20px;
  animation: legWalkFrontRight 0.6s ease-in-out infinite;
  animation-play-state: paused;
}

@keyframes legWalkFrontLeft {
  0% {
    transform: rotate(20deg);
    height: 25px;
  }
  50% {
    transform: rotate(-20deg);
    height: 22px;
  }
  100% {
    transform: rotate(20deg);
    height: 25px;
  }
}

@keyframes legWalkFrontRight {
  0% {
    transform: rotate(-20deg);
    height: 22px;
  }
  50% {
    transform: rotate(20deg);
    height: 25px;
  }
  100% {
    transform: rotate(-20deg);
    height: 22px;
  }
}

#walking-card:hover .walk-bot-container {
  opacity: 1;
}

#walking-card:hover .walk-bot-wrapper,
#walking-card:hover .walk-bot-head,
#walking-card:hover .walk-bot-leg.front-left,
#walking-card:hover .walk-bot-leg.front-right {
  animation-play-state: running;
}

/* ------------------------------------------------------------
   22. ЖИВОТНЫЕ
   ------------------------------------------------------------ */
.animals-container {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
}

.animal {
  position: absolute;
  font-size: 2rem;
  opacity: 0;
  animation: animalAppear 4s ease-in-out infinite;
  animation-play-state: paused;
}

.animal:nth-child(1) {
  top: 20%;
  left: 10%;
  animation-delay: 0s;
  font-size: 2.5rem;
}
.animal:nth-child(2) {
  top: 60%;
  left: 70%;
  animation-delay: 1s;
  font-size: 2rem;
}
.animal:nth-child(3) {
  top: 30%;
  left: 50%;
  animation-delay: 2s;
  font-size: 1.8rem;
}
.animal:nth-child(4) {
  top: 70%;
  left: 20%;
  animation-delay: 3s;
  font-size: 2.2rem;
}

@keyframes animalAppear {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.5) rotate(-10deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.1) rotate(5deg);
  }
}

#animals-card:hover .animals-container {
  opacity: 1;
}

#animals-card:hover .animal {
  animation-play-state: running;
}