Перерисовать байкальскую нерпу и анимацию ластов

assets/site.css

@@ -4127,87 +4127,21 @@ body.menu-open{overflow:hidden}
 .baikal-nav a:after,.baikal-nav a:before{display:none!important}
 .baikal-nav a:hover{color:#e2b36d!important}
 
-/* Нерпа отдыхает на камне в нижней части шапки. */
-.baikal-header .free-seal{
-  display:block!important;
-  left:auto!important;
-  right:9%!important;
-  bottom:8%!important;
-  width:190px!important;
-  height:142px!important;
-  z-index:8!important;
-  opacity:.88!important;
-  animation:sealResting 5.4s ease-in-out infinite!important;
-}
-.baikal-header .free-seal-inner{
-  position:absolute!important;
-  left:10px!important;
-  bottom:27px!important;
-  width:150px!important;
-  height:125px!important;
-  z-index:2!important;
-  animation:sealBob 5.4s ease-in-out infinite!important;
-  filter:drop-shadow(0 5px 7px rgba(0,11,35,.3));
-}
-.baikal-header .seal-rock{
+/* Самостоятельный SVG: старые стили плавающих нерп не влияют на рисунок. */
+.baikal-header .hero-nerpa{
   position:absolute;
-  left:0;
-  bottom:0;
-  width:190px;
-  height:52px;
-  z-index:1;
-  border:1px solid rgba(218,178,121,.42);
-  border-radius:52% 45% 28% 32%;
-  background:linear-gradient(160deg,#8193a1 0%,#4f6375 48%,#263d55 100%);
-  box-shadow:inset 12px 8px 18px rgba(255,255,255,.13),0 10px 18px rgba(0,9,30,.28);
-  transform:rotate(-3deg);
-}
-.baikal-header .seal-rock:after{
-  content:"";
-  position:absolute;
-  left:24px;
-  top:10px;
-  width:72px;
-  height:5px;
-  border-radius:50%;
-  background:rgba(221,218,199,.24);
-  transform:rotate(-8deg);
-}
-.baikal-header .free-seal .seal-flipper{
-  transform-box:fill-box;
-  transform-origin:center top;
-  animation:sealFlipperClap 1.15s ease-in-out infinite;
-}
-.baikal-header .free-seal .seal-flipper-right{animation-delay:-.58s}
-.baikal-header .free-seal .seal-eye{fill:#f7e5cf;stroke:currentColor;stroke-width:1.2}
-.baikal-header .free-seal .seal-pupil{fill:#081a35;stroke:none}
-.baikal-header .free-seal .seal-nose{fill:#2a1930;stroke:none}
-.baikal-header .free-seal .seal-flipper{stroke-width:1.6}
-.baikal-header .free-seal .seal-smile,
-.baikal-header .free-seal .seal-whiskers{stroke-width:1.35}
-@keyframes sealResting{
-  0%,100%{transform:translateY(0) rotate(-1deg)}
-  50%{transform:translateY(-4px) rotate(1deg)}
-}
-@keyframes sealFlipperClap{
-  0%,100%{transform:rotate(-12deg)}
-  50%{transform:rotate(22deg) translateY(3px)}
+  right:8%;
+  bottom:7%;
+  display:block;
+  width:clamp(200px,19vw,290px);
+  height:auto;
+  z-index:8;
+  pointer-events:none;
 }
 @media(max-width:620px){
-  .baikal-header .free-seal{
-    right:3%!important;
-    bottom:4%!important;
-    width:132px!important;
-    height:100px!important;
-    opacity:.72!important;
+  .baikal-header .hero-nerpa{
+    right:2%;
+    bottom:5%;
+    width:clamp(145px,42vw,185px);
   }
-  .baikal-header .free-seal-inner{width:108px!important;height:90px!important;left:8px!important;bottom:19px!important}
-  .baikal-header .seal-rock{width:132px;height:37px}
-  .baikal-header .seal-rock:after{left:16px;top:7px;width:50px;height:3px}
-}
-@media(prefers-reduced-motion:reduce){
-  .baikal-header .free-seal,
-  .baikal-header .free-seal-inner,
-  .baikal-header .free-seal .seal-flipper,
-  .baikal-header .free-seal .seal-tail{animation:none!important}
 }