/* === РЫБА: ЖИВОЕ ПЛАВАНИЕ СПРАВА → НАЛЕВО === */
.t396__elem[data-elem-id="1771197931835000010"] {
  will-change: transform;
  pointer-events: none;

  /* основное движение */
  animation-name: fishDrift;
  animation-duration: 55s;          /* медленно */
  animation-timing-function: linear;
  animation-iteration-count: infinite;

  /* КЛЮЧЕВОЕ: чтобы была видна сразу */
  animation-delay: -25s;
}

/* === ТЕЛО РЫБЫ: МЯГКОЕ "ПЛАВАНИЕ" === */
.t396__elem[data-elem-id="1771197931835000010"] .tn-atom__img {
  will-change: transform;
  transform-origin: 50% 50%;

  animation-name: fishWiggle;
  animation-duration: 7.5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
}

/* === ТРАЕКТОРИЯ: НЕ ПО ПРЯМОЙ, А КАК ЖИВАЯ РЫБА === */
@keyframes fishDrift {
  0%   { transform: translateX(120vw)  translateY(0px)   rotate(-1deg) scaleX(-1); }
  12%  { transform: translateX(90vw)   translateY(-16px) rotate(-2deg) scaleX(-1); }
  25%  { transform: translateX(60vw)   translateY(12px)  rotate(1deg)  scaleX(-1); }
  38%  { transform: translateX(30vw)   translateY(-24px) rotate(-2deg) scaleX(-1); }
  50%  { transform: translateX(0vw)    translateY(18px)  rotate(2deg)  scaleX(-1); }
  62%  { transform: translateX(-30vw)  translateY(-12px) rotate(-1deg) scaleX(-1); }
  75%  { transform: translateX(-60vw)  translateY(24px)  rotate(2deg)  scaleX(-1); }
  88%  { transform: translateX(-90vw)  translateY(-14px) rotate(-2deg) scaleX(-1); }
  100% { transform: translateX(-120vw) translateY(0px)   rotate(-1deg) scaleX(-1); }
}

/* === ЛЁГКОЕ ПОКАЧИВАНИЕ ТЕЛА === */
@keyframes fishWiggle {
  0%   { transform: translateY(0px) rotate(0deg); }
  50%  { transform: translateY(-8px) rotate(1.5deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

/* === МОБИЛКА: ЕЩЁ СПОКОЙНЕЕ === */
@media (max-width: 480px) {
  .t396__elem[data-elem-id="1771197931835000010"] {
    animation-duration: 70s;
    animation-delay: -35s;
  }
}


/* === МАЛЬЧИК: МАХАЕТ РУКОЙ 👋 === */
.t396__elem[data-elem-id="1767550172801000001"] {
  will-change: transform;
  transform-origin: 65% 30%; /* точка у плеча */
  animation: boyWave 3.5s ease-in-out infinite;
}

/* Анимация махания */
@keyframes boyWave {
  0%   { transform: rotate(0deg); }
  15%  { transform: rotate(4deg); }
  30%  { transform: rotate(-3deg); }
  45%  { transform: rotate(4deg); }
  60%  { transform: rotate(-2deg); }
  100% { transform: rotate(0deg); }
}

/* Мобилка — спокойнее */
@media (max-width: 480px) {
  .t396__elem[data-elem-id="1767550172801000001"] {
    animation-duration: 4.5s;
  }
}