<template>
  <div class="shield-illustration-content">
    <svg
      class="shield"
      viewBox="0 0 460 459"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M229.887 295.008C229.184 294.999 228.488 294.874 227.826 294.639C207.836 285.756 191.114 270.844 179.991 251.985C168.868 233.126 163.899 211.259 165.778 189.436C165.843 188.204 166.321 187.031 167.137 186.108C167.952 185.184 169.056 184.564 170.268 184.349C190.169 181.331 209.5 175.316 227.605 166.508C228.322 166.182 229.1 166.013 229.887 166.013C230.674 166.013 231.452 166.182 232.169 166.508C250.274 175.316 269.604 181.331 289.506 184.349C290.718 184.564 291.821 185.184 292.637 186.108C293.452 187.031 293.931 188.204 293.995 189.436C295.874 211.259 290.906 233.126 279.783 251.985C268.66 270.844 251.937 285.756 231.948 294.639C231.286 294.874 230.589 294.999 229.887 295.008Z"
        fill="url(#paint0_linear_8967_100357)"
      />
      <path
        class="ring ring-8"
        d="M227.022 313.081L227.042 313.09L227.062 313.097C227.967 313.419 228.919 313.589 229.88 313.601L229.894 313.601C230.855 313.589 231.807 313.419 232.712 313.097L232.732 313.09L232.752 313.081C258.437 301.667 279.924 282.507 294.216 258.274C308.507 234.044 314.891 205.951 312.479 177.914C312.388 176.215 311.726 174.597 310.601 173.322C309.474 172.045 307.948 171.188 306.271 170.891L306.271 170.891L306.258 170.888C280.849 167.036 256.168 159.356 233.052 148.11L233.046 148.107L233.039 148.104C232.049 147.653 230.974 147.421 229.887 147.421C228.8 147.421 227.725 147.653 226.735 148.104L226.728 148.107L226.722 148.11C203.606 159.356 178.925 167.036 153.516 170.888L153.516 170.888L153.503 170.891C151.826 171.188 150.3 172.045 149.173 173.322C148.048 174.597 147.386 176.215 147.295 177.914C144.883 205.951 151.267 234.044 165.558 258.274C179.85 282.507 201.337 301.667 227.022 313.081Z"
        stroke="#F97316"
        stroke-width="1.12317"
      />
      <path
        class="ring ring-7"
        d="M226.446 331.009L226.466 331.018L226.486 331.025C227.576 331.412 228.723 331.618 229.88 331.632L229.894 331.632C231.051 331.618 232.198 331.412 233.288 331.025L233.309 331.018L233.328 331.009C264.602 317.111 290.764 293.782 308.166 264.277C325.566 234.775 333.339 200.569 330.402 166.431C330.293 164.388 329.497 162.441 328.144 160.908C326.789 159.373 324.954 158.342 322.939 157.985L322.939 157.985L322.925 157.983C291.953 153.287 261.868 143.925 233.69 130.216L233.684 130.213L233.677 130.21C232.487 129.669 231.195 129.389 229.887 129.389C228.58 129.389 227.288 129.669 226.097 130.21L226.091 130.213L226.084 130.216C197.907 143.925 167.822 153.287 136.849 157.983L136.849 157.983L136.835 157.985C134.82 158.342 132.985 159.373 131.63 160.908C130.277 162.441 129.482 164.387 129.373 166.43C126.435 200.569 134.208 234.775 151.608 264.277C169.01 293.782 195.172 317.111 226.446 331.009Z"
        stroke="#F97316"
        stroke-width="1.12317"
      />
      <path
        class="ring ring-6"
        d="M225.914 351.187L225.934 351.196L225.954 351.203C227.252 351.664 228.616 351.908 229.993 351.925L230.007 351.925C231.384 351.908 232.749 351.664 234.046 351.203L234.067 351.196L234.086 351.187C271.614 334.509 303.009 306.515 323.891 271.109C344.771 235.706 354.099 194.659 350.574 153.692C350.445 151.263 349.499 148.95 347.891 147.128C346.281 145.303 344.101 144.079 341.706 143.654L341.706 143.654L341.692 143.652C304.493 138.012 268.359 126.768 234.517 110.303L234.511 110.3L234.504 110.297C233.089 109.654 231.554 109.321 230 109.321C228.447 109.321 226.911 109.654 225.496 110.297L225.49 110.3L225.483 110.303C191.641 126.768 155.507 138.012 118.308 143.652L118.308 143.652L118.294 143.654C115.9 144.079 113.72 145.303 112.109 147.128C110.501 148.95 109.556 151.263 109.427 153.691C105.901 194.658 115.229 235.706 136.109 271.109C156.991 306.515 188.386 334.509 225.914 351.187Z"
        stroke="#F97316"
        stroke-width="1.12317"
      />
      <path
        class="ring ring-5"
        d="M225.161 371.003L225.181 371.012L225.201 371.019C226.704 371.553 228.285 371.836 229.881 371.856L229.895 371.856C231.49 371.836 233.071 371.553 234.574 371.019L234.594 371.012L234.614 371.003C278.354 351.565 314.946 318.937 339.285 277.67C363.621 236.406 374.493 188.563 370.384 140.814C370.235 138.003 369.141 135.325 367.279 133.216C365.415 131.104 362.892 129.687 360.121 129.196L360.107 129.194C316.723 122.616 274.582 109.503 235.114 90.3006L235.107 90.2974L235.101 90.2943C233.463 89.5499 231.686 89.1647 229.888 89.1647C228.089 89.1647 226.312 89.5499 224.675 90.2943L224.668 90.2974L224.661 90.3006C185.193 109.503 143.052 122.616 99.6678 129.194L99.6678 129.194L99.654 129.196C96.8828 129.687 94.3598 131.104 92.4961 133.216C90.6345 135.325 89.5404 138.003 89.3914 140.814C85.2818 188.563 96.1537 236.406 120.491 277.67C144.829 318.937 181.421 351.565 225.161 371.003Z"
        stroke="#F97316"
        stroke-width="1.12317"
      />
      <path
        class="ring ring-4"
        d="M224.585 388.932L224.604 388.94L224.625 388.948C226.313 389.548 228.089 389.865 229.88 389.888L229.894 389.888C231.686 389.865 233.462 389.548 235.15 388.948L235.17 388.94L235.19 388.932C284.519 367.01 325.785 330.213 353.234 283.674C380.681 237.137 392.941 183.18 388.306 129.33C388.139 126.175 386.911 123.17 384.822 120.802C382.73 118.433 379.899 116.842 376.789 116.291L376.775 116.288C327.827 108.867 280.282 94.0725 235.751 72.4075L235.745 72.4043L235.738 72.4013C233.9 71.5658 231.906 71.1335 229.887 71.1335C227.869 71.1335 225.874 71.5658 224.036 72.4013L224.03 72.4043L224.023 72.4075C179.493 94.0725 131.948 108.867 82.9999 116.288L82.9999 116.288L82.9861 116.291C79.8761 116.842 77.0445 118.433 74.9528 120.802C72.8632 123.17 71.6352 126.176 71.4682 129.331C66.8334 183.181 79.0943 237.137 106.541 283.674C133.989 330.213 175.256 367.01 224.585 388.932Z"
        stroke="#F97316"
        stroke-width="1.12317"
      />
      <path
        class="ring ring-3"
        d="M224.191 403.667L224.211 403.676L224.231 403.683C226.083 404.341 228.029 404.689 229.993 404.714L230.007 404.714C231.971 404.689 233.918 404.341 235.769 403.683L235.789 403.676L235.809 403.667C290.046 379.565 335.419 339.106 365.598 287.936C395.776 236.769 409.257 177.443 404.161 118.235C403.978 114.777 402.632 111.483 400.343 108.889C398.051 106.292 394.948 104.55 391.541 103.945L391.527 103.943C337.692 95.7804 285.4 79.5091 236.425 55.6813L236.418 55.6781L236.411 55.675C234.398 54.7595 232.212 54.2858 230 54.2858C227.789 54.2858 225.603 54.7595 223.589 55.675L223.582 55.6781L223.576 55.6813C174.6 79.5091 122.308 95.7804 68.4737 103.943L68.4736 103.943L68.4598 103.945C65.0522 104.55 61.9495 106.292 59.6577 108.889C57.3679 111.483 56.0223 114.777 55.8395 118.234C50.7432 177.443 64.2241 236.769 94.402 287.936C124.581 339.106 169.955 379.565 224.191 403.667Z"
        stroke="#F97316"
        stroke-width="1.12317"
      />
      <path
        class="ring ring-2"
        d="M223.653 420.419L223.673 420.427L223.693 420.435C225.717 421.154 227.845 421.535 229.993 421.562L230.007 421.562C232.155 421.535 234.283 421.154 236.307 420.435L236.327 420.427L236.347 420.419C295.806 393.995 345.547 349.642 378.632 293.546C411.715 237.452 426.494 172.414 420.907 107.504C420.707 103.726 419.236 100.126 416.734 97.2902C414.229 94.4522 410.838 92.5477 407.114 91.8872L407.1 91.8851C348.067 82.9342 290.725 65.0917 237.02 38.963L237.014 38.9598L237.007 38.9568C234.806 37.9561 232.417 37.4384 230 37.4384C227.583 37.4384 225.194 37.9561 222.993 38.9568L222.986 38.9598L222.98 38.963C169.275 65.0917 111.933 82.9342 52.9003 91.8851L52.9003 91.8849L52.8864 91.8874C49.1622 92.5477 45.7712 94.4522 43.2664 97.2902C40.7636 100.126 39.293 103.726 39.0934 107.505C33.5062 172.414 48.285 237.452 81.3683 293.546C114.453 349.642 164.195 393.995 223.653 420.419Z"
        stroke="#F97316"
        stroke-width="1.12317"
      />
      <path
        class="ring ring-1"
        d="M223.206 434.339L223.225 434.347L223.246 434.355C225.413 435.125 227.693 435.533 229.993 435.562L230.007 435.562C232.307 435.533 234.587 435.125 236.754 434.355L236.775 434.347L236.794 434.339C300.592 405.987 353.963 358.397 389.462 298.207C424.96 238.02 440.817 168.236 434.822 98.5895C434.609 94.5431 433.034 90.688 430.354 87.6519C427.673 84.6134 424.042 82.5743 420.055 81.8672L420.041 81.8651C356.688 72.2592 295.151 53.1111 237.516 25.0703L237.509 25.0671L237.502 25.0641C235.146 23.9927 232.588 23.4384 230 23.4384C227.412 23.4384 224.854 23.9927 222.498 25.0641L222.491 25.0671L222.484 25.0703C164.849 53.1111 103.312 72.2592 39.9592 81.8651L39.9592 81.8649L39.9454 81.8673C35.958 82.5743 32.3274 84.6134 29.6456 87.6519C26.9659 90.688 25.3913 94.543 25.1777 98.5893C19.1827 168.236 35.0399 238.02 70.5377 298.207C106.037 358.397 159.408 405.987 223.206 434.339Z"
        stroke="#F97316"
        stroke-width="1.12317"
      />
      <defs>
        <linearGradient
          id="paint0_linear_8967_100357"
          x1="147.146"
          y1="156.595"
          x2="298.838"
          y2="297.806"
          gradientUnits="userSpaceOnUse"
        >
          <stop class="stop-color-1" />
          <stop
            class="stop-color-2"
            offset="1"
          />
        </linearGradient>
      </defs>
    </svg>
  </div>
</template>

<style lang="scss">
  .shield-illustration-content {
    // max-width: 600px;

    .shield {
      .ring {
        transition: opacity 1s ease-in-out;
      }
    }

    .ring-8 {
      opacity: 0.7;
    }
    .ring-7 {
      opacity: 0.6;
    }
    .ring-6 {
      opacity: 0.5;
    }
    .ring-5 {
      opacity: 0.4;
    }
    .ring-4 {
      opacity: 0.3;
    }

    .ring-1,
    .ring-2,
    .ring-3 {
      opacity: 0;
    }
  }

  .group:hover,
  .shield-illustration-content:hover {
    .ring-8 {
      opacity: 1;
    }
    .ring-7 {
      opacity: 0.9;
    }
    .ring-6 {
      opacity: 0.8;
    }
    .ring-5 {
      opacity: 0.7;
    }
    .ring-4 {
      opacity: 0.4;
    }
    .ring-3 {
      opacity: 0.3;
    }
    .ring-2 {
      opacity: 0.2;
    }
    .ring-1 {
      opacity: 0.1;
    }
  }

  .azion {
    &.azion-dark {
      .shield-illustration-content {
        .stop-color-1 {
          stop-color: var(--surface-700) !important;
        }
        .stop-color-2 {
          stop-color: var(--surface-0) !important;
        }
      }
    }

    &.azion-light {
      .shield-illustration-content {
        .stop-color-1 {
          stop-color: var(--surface-50) !important;
        }
        .stop-color-2 {
          stop-color: var(--surface-0) !important;
        }
      }
    }
  }
</style>
