.animation1 {
        /* position: relative; */
        width: 100vw;
        min-width: 800px;
        height: 100vh;
        min-height: 600px;
      
        background: linear-gradient(-45deg, #8691b3, #edeef3);
      }
      .animation1 *, .animation1 *:before, b.animation1 *:after {
          content: '';
          position: absolute;
          top: 50%; left: 50%;
        }
        .s{
          margin-left:-500px;
          position:absolute;
          display:inline-block
        }
      
      
     
     
      
    
      @keyframes pupilAnimationSize {
        0%, 30%, 100% { transform: translate(-50%, -50%) scale(0.85); }
        40%, 90% 			{ transform: translate(-50%, -50%) scale(0.5); }
      }
      @keyframes pupilAnimationView {
        0%, 30%, 100% {
          box-shadow: inset -50px -20px 30px 0px #e7e2f5, inset 100px 10px 20px -27px #2f2c4c, 0px 0px 10px 7px rgba(231, 226, 245, 1);
        }
        60%, 66% {
          box-shadow: inset -50px -20px 30px 0px rgba(231, 226, 245, 0), inset 10px 10px 70px -27px rgba(47, 44, 76, 0), 0px 0px 10px 7px hsla(256, 49%, 92%, 0);
        }
        90% {
          box-shadow: inset -50px -20px 30px 0px #e7e2f5, inset 100px 10px 20px -27px #2f2c4c, 0px 0px 10px 7px rgba(231, 226, 245, 1);
        }
      }
      
      
      .circle-1 {
        width: 475px; height: 475px;
        border-radius: 50%;
        border: 1px solid transparent;
        border-right-color: rgba(223, 228, 255, 0.6);
      
        animation: circle1AnimationOpacity 4s ease infinite,
                   circle1AnimationMove 4s ease infinite;
      }
      @keyframes circle1AnimationMove {
        00%, 100% 		{ transform: translate(-50%, -50%) rotate(49deg); }
        07% 					{ transform: translate(-50%, -50%) rotate(38deg); }
        12%, 19%, 68% { transform: translate(-50%, -50%) rotate(42deg); }
        26%, 30% 			{ transform: translate(-50%, -50%) rotate(82deg); }
        73% 					{ transform: translate(-50%, -50%) rotate(34deg); }
        87%, 92% 			{ transform: translate(-50%, -50%) rotate(69deg); }
        94% 					{ transform: translate(-50%, -50%) rotate(65deg); }
      }
      @keyframes circle1AnimationOpacity {
        00%, 27%, 73%, 100% { opacity: 1; }
        30%, 70% 						{ opacity: 0; }
      }
      
      
      .circle-2 {
        width: 475px; height: 475px;
        border-radius: 50%;
        border: 1px solid transparent;
        border-right-color: rgba(223, 228, 255, 0.6);
      
        animation: circle2AnimationOpacity 4s ease infinite,
                   circle2AnimationMove 4s ease infinite;
      }
      @keyframes circle2AnimationMove {
        0%, 100% { transform: translate(-50%, -50%) rotate(229deg); }
        9% 			 { transform: translate(-50%, -50%) rotate(220deg); }
        14%, 21% { transform: translate(-50%, -50%) rotate(225deg); }
        29%, 67% { transform: translate(-50%, -50%) rotate(262deg); }
        82% 		 { transform: translate(-50%, -50%) rotate(241deg); }
        90%, 94% { transform: translate(-50%, -50%) rotate(249deg); }
        99% 		 { transform: translate(-50%, -50%) rotate(245deg); }
      }
      @keyframes circle2AnimationOpacity {
        0%, 27%, 79%, 100% { opacity: 1; }
        30%, 76% 					 { opacity: 0; }
      }
      
      
      .circle-3 {
        left: calc(50% + 93px);
        top: calc(50% - 189px);
        width: 106px; height: 280px;
        overflow: hidden;
      }
        .circle-3::before {
          left: -275%;
          top: -4%;
          width: 393px;
          height: 393px;
          border-radius: 50%;
          border: 1px solid transparent;
          border-right-color: rgba(223, 228, 255, 0.6);
      
          animation: circle3Animation 4s ease infinite;
        }
      @keyframes circle3Animation {
        0%   { transform: rotate(-3deg); }
        20%  { transform: rotate(-107deg); }
        79%  { transform: rotate(-286deg); }
        100% { transform: rotate(-364deg); }
      }
      
      
      .circle-4 {
        width: 295px; height: 295px;
        border-radius: 50%;
        border: 1px solid transparent;
        border-right-color: rgb(251, 251, 251);
        border-left-color: rgba(251, 251, 251, 0.2);
      
        animation: circle4AnimationMove 4s cubic-bezier(1, 0, 1, 1) infinite,
                   circle4AnimationOpacity 4s ease infinite;
      }
      @keyframes circle4AnimationMove {
        0%, 100% { transform: translate(-50%, -50%) rotate(219deg) scale(1); }
        6% 			 { transform: translate(-50%, -50%) rotate(221deg) scale(0.9); }
        16% 		 { transform: translate(-50%, -50%) rotate(302deg) scale(0.9); }
        22% 		 { transform: translate(-50%, -50%) rotate(307deg) scale(0.9); }
        29% 		 { transform: translate(-50%, -50%) rotate(312deg) scale(0.93); }
        33% 		 { transform: translate(-50%, -50%) rotate(310deg) scale(0.93); }
        36% 		 { transform: translate(-50%, -50%) rotate(300deg) scale(0.7); }
        39% 		 { transform: translate(-50%, -50%) rotate(220deg) scale(0.92); }
        50%, 57% { transform: translate(-50%, -50%) rotate(248deg) scale(0.92); }
        66% 		 { transform: translate(-50%, -50%) rotate(225deg) scale(0.92); }
        73%, 81% { transform: translate(-50%, -50%) rotate(243deg) scale(0.92); }
        93% 		 { transform: translate(-50%, -50%) rotate(215deg) scale(1); }
      }
      @keyframes circle4AnimationOpacity {
        00%, 33%, 50%, 100% { opacity: 1; }
        36%, 39% { opacity: 0; }
      }
      
      
      .circle-5 {
        width: 100px; height: 100px;
        transform: translate(-50%, -50%);
        
        animation: circle5AnimationSize 4s cubic-bezier(1, 0, 1, 1) infinite,
                   circle5AnimationView 4s ease infinite;
      }
        .circle-5::before {
          width: 173px; height: 173px;
          border-radius: 50%;
          border: 1px solid rgb(251, 251, 251);
          transform: translate(-50%, -50%);
        }
        .circle-5::after {
          width: 177px; height: 177px;
          border-radius: 50%;
          border: 1px solid rgb(251, 251, 251);
          transform: translate(-50%, -50%);
        }
      @keyframes circle5AnimationSize {
        0%, 38%, 82.82%, 100% { transform: translate(-50%, -50%) scale(1); }
        45%, 75.44% 					{ transform: translate(-50%, -50%) scale(0.7); }
      }
      @keyframes circle5AnimationView {
        0%, 5.7%, 7.4%, 9.8%, 11.5%, 14%, 15.6%, 18.9%, 21.3%, 23.8%, 25.4%, 28.7%, 35.3%, 42%, 77.9%, 82.7%, 83.6%, 85.2%, 86.1%, 91.8%, 93.5%, 97.6%, 100% { opacity: 1; }
        2.5%, 6.6%, 8.2%, 10.7%, 14.8%, 18%, 20.5%, 22.1%, 24.6%, 27.9%, 36%, 88.6% { opacity: 0.5; }
        47%, 77.8%, 82.8%, 83.5%, 85.3%, 86%, 90.2%, 92.7%, 96.8%, 99.2% { opacity: 0; }
      }
      
      
      .circle-6 {
        top: 50%; left: 50%;
        width: 190px; height: 190px;
        background: repeating-conic-gradient(from 0deg, rgba(179, 221, 255, 0.4) 0deg 1deg, transparent 1deg 2deg);
        clip-path: url(#bagel1);
        border-radius: 50%;
      
        animation: circle6Animation 4s cubic-bezier(1, 0, 1, 1) infinite;
      }
      @keyframes circle6Animation {
        0% {
          transform: translate(-50%, -50%) scale(1);
        }
        8%, 35% {
          transform: translate(-50%, -50%) scale(0.93);
          opacity: 1;
        }
        40%, 90% {
          transform: translate(-50%, -50%) scale(0.2);
          opacity: 0;
        }
        95%, 100% {
          transform: translate(-50%, -50%) scale(1);
          opacity: 1;
        }
      }
      
      .circle-7 {
        top: 50%; left: 50%;
        width: 142px; height: 142px;
        filter: blur(1px);
      
        animation: circle6Animation 4s -0.1s cubic-bezier(1, 0, 1, 1) infinite;
      }
        .circle-7::before {
          top: 0; left: 0;
          width: 100%; height: 100%;
          background: repeating-conic-gradient(from 0deg, rgba(251, 251, 251, 0.2) 0deg 2deg, transparent 2deg 8deg);
          clip-path: url(#bagel2);
          border-radius: 50%;
        }
      
      
      .circle-8 {
        top: 50%; left: 50%;
        width: 120px; height: 120px;
        background: repeating-conic-gradient(from 0deg, rgba(236, 247, 255, 0.68) 0deg 1deg, transparent 1deg 2deg);
        clip-path: url(#bagel3);
        border-radius: 50%;
      
        animation: circle6Animation 4s -0.13s cubic-bezier(1, 0, 1, 1) infinite;
      }
      
      
      .circle-9 {
        top: 50%; left: 50%;
        width: 76px; height: 76px;
        background: repeating-conic-gradient(from 0deg, rgba(236, 247, 255, 0.68) 0deg 1deg, transparent 1deg 2deg);
        clip-path: url(#bagel4);
        border-radius: 50%;
      
        animation: circle6Animation 4s -0.16s cubic-bezier(1, 0, 1, 1) infinite;
      }
      
      
      .circle-10 {
        top: 50%; left: 50%;
        width: 190px; height: 190px;
        background: radial-gradient(rgba(230, 245, 255, 0.6), rgba(201, 243, 255, 0.5), rgba(74, 105, 160, 0.3), transparent 70%);
        clip-path: url(#bagel1);
        border-radius: 50%;
      
        animation: circle10Animation 4s cubic-bezier(1, 0, 1, 1) infinite;
      }
      @keyframes circle10Animation {
        0% {
          transform: translate(-50%, -50%) scale(1);
        }
        4%, 30% {
          transform: translate(-50%, -50%) scale(0.93);
          opacity: 1;
        }
        35%, 93% {
          transform: translate(-50%, -50%) scale(0);
          opacity: 0;
        }
        98%, 100% {
          transform: translate(-50%, -50%) scale(1);
          opacity: 1;
        }
      }
      
      
      .circle-11 {
        top: 50%; left: 50%;
        width: 190px; height: 190px;
        background: repeating-conic-gradient(from 0deg, rgba(229, 243, 255, 0.1) 0deg 1deg, transparent 1deg 8deg, rgba(229, 243, 255, 0.3) 8deg 9deg, transparent 9deg 10deg, rgba(229, 243, 255, 0.1) 10deg 11deg, transparent 11deg 72deg);
        clip-path: url(#bagel1);
        border-radius: 50%;
      
        animation: circle11Animation 4s cubic-bezier(1, 0, 1, 1) infinite;
      }
      @keyframes circle11Animation {
        0%, 98%, 100% {
          transform: translate(-50%, -50%) rotate(0deg);
          opacity: 1;
        }
        15% {
          transform: translate(-50%, -50%) rotate(45deg);
        }
        25% {
          transform: translate(-50%, -50%) rotate(-10deg);
        }
        30% {
          opacity: 1;
        }
        35% {
          transform: translate(-50%, -50%) rotate(-20deg);
          opacity: 0;
        }
        93% {
          transform: translate(-50%, -50%) rotate(80deg);
          opacity: 0;
        }
      }
      
      
      .circle-12 {
        top: 50%; left: 50%;
        width: 190px; height: 190px;
        background: repeating-conic-gradient(from 0deg, rgba(208, 233, 255, 0.2) 20deg 21deg, transparent 21deg 40deg, rgba(192, 223, 249, 0.25) 40deg 41deg, transparent 41deg 43deg, rgba(179, 220, 255, 0.15) 43deg 44deg, transparent 44deg 76deg);
        clip-path: url(#bagel1);
        border-radius: 50%;
      
        animation: circle12Animation 4s cubic-bezier(1, 0, 1, 1) infinite;
      }
      @keyframes circle12Animation {
        0%, 96%, 100% {
          transform: translate(-50%, -50%) rotate(0deg);
          opacity: 1;
        }
        10% {
          transform: translate(-50%, -50%) rotate(45deg);
        }
        25% {
          transform: translate(-50%, -50%) rotate(-45deg);
        }
        30% {
          opacity: 1;
        }
        35% {
          transform: translate(-50%, -50%) rotate(50deg);
          opacity: 0;
        }
        93% {
          transform: translate(-50%, -50%) rotate(-90deg);
          opacity: 0;
        }
      }
      
      
      .circle-13 {
        width: 100px; height: 100px;
        transform: translate(-50%, -50%);
        animation: circle13AnimationSize 4s cubic-bezier(1, 0, 1, 1) infinite,
                   circle13AnimationView 4s ease infinite;
      }
        .circle-13::before {
          width: 110px; height: 110px;
          border-radius: 50%;
          border: 1px solid rgb(251, 251, 251);
          transform: translate(-50%, -50%);
        }
        .circle-13::after {
          width: 120px; height: 120px;
          border-radius: 50%;
          border: 1px solid rgba(251, 251, 251, 0.5);
          transform: translate(-50%, -50%);
        }
      @keyframes circle13AnimationSize {
        0%, 32%, 86%, 100% { transform: translate(-50%, -50%) scale(1); }
        38%, 82% { transform: translate(-50%, -50%) scale(0.2); }
      }
      @keyframes circle13AnimationView {
        /* подвигать */
        0% { opacity: 1; }
        2.5% { opacity: 0.5; }
        5.7% { opacity: 1; }
        6.6% { opacity: 0.5; }
        7.4% { opacity: 1; }
        8.2% { opacity: 0.5; }
        9.8% { opacity: 1; }
        10.7% { opacity: 0.5; }
        11.5%, 14% { opacity: 1; }
        14.8% { opacity: 0.5; }
        15.6% { opacity: 1; }
        18% { opacity: 0.5; }
        18.9% { opacity: 1; }
        20.5% { opacity: 0.5; }
        21.3% { opacity: 1; }
        22.1% { opacity: 0.5; }
        23.8% { opacity: 1; }
        24.6% { opacity: 0.5; }
        25.4% { opacity: 1; }
        27.9% { opacity: 0.5; }
        28.7%, 32% { opacity: 1; }
        38% { opacity: 0; }
        82% { opacity: 0; }
        86% { opacity: 1; }
        88.6% { opacity: 0.5; }
        90.2% { opacity: 0; }
        91.8% { opacity: 1; }
        92.7% { opacity: 0; }
        93.5% { opacity: 1; }
        96.8% { opacity: 0; }
        97.6% { opacity: 1; }
        99.2% { opacity: 0; }
        100% { opacity: 1; }
      }
      
      .circle-14 {
        width: 100px; height: 100px;
        transform: translate(-50%, -50%);
        animation: circle13AnimationSize 4s -0.15s cubic-bezier(1, 0, 1, 1) infinite,
                   circle14AnimationView 4s ease infinite;
      }
        .circle-14::before {
          width: 70px; height: 70px;
          border-radius: 50%;
          border: 1px solid rgba(251, 251, 251, 0.5);
          transform: translate(-50%, -50%);
        }
        .circle-14::after {
          width: 95px; height: 95px;
          border-radius: 50%;
          border: 1px solid rgba(251, 251, 251, 0.3);
          transform: translate(-50%, -50%);
        }
      
      @keyframes circle14AnimationView {
        /* подвигать */
        0% { opacity: 1; }
        2.5% { opacity: 0.5; }
        5.7% { opacity: 1; }
        6.6% { opacity: 0.5; }
        7.4% { opacity: 1; }
        8.2% { opacity: 0.5; }
        9.8% { opacity: 1; }
        10.7% { opacity: 0.5; }
        11.5%, 14% { opacity: 1; }
        14.8% { opacity: 0.5; }
        15.6% { opacity: 1; }
        18% { opacity: 0.5; }
        18.9% { opacity: 1; }
        20.5% { opacity: 0.5; }
        21.3% { opacity: 1; }
        22.1% { opacity: 0.5; }
        23.8% { opacity: 1; }
        24.6% { opacity: 0.5; }
        25.4% { opacity: 1; }
        27.9% { opacity: 0.5; }
        28.7%, 32% { opacity: 1; }
        38% { opacity: 0; }
        82% { opacity: 0; }
        86% { opacity: 1; }
        88.6% { opacity: 0.5; }
        90.2% { opacity: 0; }
        91.8% { opacity: 1; }
        92.7% { opacity: 0; }
        93.5% { opacity: 1; }
        96.8% { opacity: 0; }
        97.6% { opacity: 1; }
        99.2% { opacity: 0; }
        100% { opacity: 1; }
      }