@property --c1 { syntax: '<color>'; inherits: false; initial-value: #ffffff; }
@property --c2 { syntax: '<color>'; inherits: false; initial-value: #ffffff; }
@property --c3 { syntax: '<color>'; inherits: false; initial-value: #ffffff; }
@property --o1 { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --o2 { syntax: '<percentage>'; inherits: false; initial-value: 50%; }
@property --o3 { syntax: '<percentage>'; inherits: false; initial-value: 100%; }
@property --glow1 { syntax: '<color>'; inherits: false; initial-value: #ffffff; }
@property --glow2 { syntax: '<color>'; inherits: false; initial-value: #ffffff; }

.hero-about .shape {
  position: relative;
  width: 30%;
  flex-shrink: 0;
  mask-image: var(--mask);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: var(--mask);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.hero-about .gradient, .hero-about .glow {
  position: absolute;
  inset: 0;
  transition:
    --c1 1.5s cubic-bezier(.45, 0, .2, 1),
    --c2 1.5s cubic-bezier(.45, 0, .2, 1),
    --c3 1.5s cubic-bezier(.45, 0, .2, 1),
    --o1 1.5s cubic-bezier(.45, 0, .2, 1),
    --o2 1.5s cubic-bezier(.45, 0, .2, 1),
    --o3 1.5s cubic-bezier(.45, 0, .2, 1),
    --glow1 1.5s cubic-bezier(.45, 0, .2, 1),
    --glow2 1.5s cubic-bezier(.45, 0, .2, 1);
}

.hero-about .gradient {
  background: radial-gradient(
    circle farthest-side at 50% 50%,
    /* background: linear-gradient(
    to bottom, */
    var(--c1) var(--o1),
    var(--c2) var(--o2),
    var(--c3) var(--o3)
  );
  background-color: var(--c3);
}

.hero-about .glow-blur {
  position: absolute;
  inset: 0;
  filter: blur(2vw);
  transform: scale(1);
  transition: transform .9s cubic-bezier(.45, 0, .2, 1);
  pointer-events: none;
}

.hero-about .glow {
  /* background: radial-gradient(
    circle farthest-side at 50% 50%, */
    background: linear-gradient(
    to bottom,
    var(--glow1),
    var(--glow2)
  );
  mask-image: var(--glow-mask);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: var(--glow-mask);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.shape--ab {
  aspect-ratio: 1 / 1;
  --mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 356 356' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M334.904 168.718L283.849 154.837C275.215 152.49 266.992 149.2 259.284 145.082C261.839 136.517 265.387 128.177 269.934 120.234L296.221 74.3187C301.088 65.8129 291.605 56.3302 283.1 61.1976L237.184 87.4848C229.068 92.1312 220.535 95.7317 211.777 98.2966C207.255 90.136 203.668 81.3712 201.159 72.144L187.278 21.0884C184.706 11.6333 171.292 11.6333 168.72 21.0884L154.839 72.144C152.368 81.2332 148.847 89.8736 144.421 97.9306C136.091 95.3934 127.976 91.9138 120.236 87.4848L74.3207 61.1976C65.8149 56.3302 56.3287 65.8129 61.1995 74.3187L87.4867 120.234C91.9157 127.97 95.3953 136.086 97.9326 144.419C89.8755 148.845 81.2351 152.366 72.1459 154.837L21.0904 168.718C11.6352 171.29 11.6352 184.704 21.0904 187.276L72.1459 201.157C81.3732 203.666 90.1379 207.253 98.2985 211.775C95.7337 220.536 92.1332 229.066 87.4867 237.186L61.1995 283.101C56.3322 291.607 65.8149 301.09 74.3207 296.222L120.236 269.935C128.179 265.389 136.519 261.84 145.084 259.286C149.199 266.994 152.492 275.217 154.839 283.85L168.72 334.906C171.292 344.361 184.706 344.361 187.278 334.906L201.159 283.85C203.541 275.085 206.896 266.738 211.104 258.927C220.1 261.502 228.865 265.168 237.188 269.935L283.103 296.222C291.609 301.09 301.095 291.607 296.224 283.101L269.937 237.186C265.173 228.863 261.504 220.098 258.928 211.102C266.737 206.897 275.087 203.542 283.852 201.157L334.908 187.276C344.363 184.704 344.363 171.29 334.908 168.718H334.904Z' fill='black'/%3E%3C/svg%3E");
}

.shape--ab .gradient {
  --c1: #A7C0E8;
  --c2: #FF4799;
  --c3: #FF4799;
  --o1: 23%;
  --o2: 100%;
  --o3: 100%;
}

.shape--ab .glow {
  --glow1: #B5FFC3;
  --glow2: #AE93AB;
  --glow-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 356 356' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M297.593 170.926L258.678 160.346C252.098 158.557 245.831 156.05 239.955 152.911C241.902 146.383 244.607 140.026 248.072 133.972L268.109 98.9746C271.819 92.4914 264.591 85.2636 258.108 88.9735L223.11 109.01C216.925 112.551 210.42 115.296 203.745 117.251C200.298 111.031 197.564 104.35 195.652 97.3169L185.072 58.402C183.111 51.1953 172.887 51.1953 170.927 58.402L160.347 97.3169C158.463 104.245 155.779 110.831 152.406 116.972C146.057 115.038 139.871 112.386 133.972 109.01L98.9747 88.9735C92.4915 85.2636 85.2611 92.4914 88.9736 98.9746L109.01 133.972C112.386 139.868 115.038 146.054 116.972 152.406C110.831 155.779 104.245 158.463 97.3171 160.346L58.4021 170.926C51.1954 172.887 51.1954 183.111 58.4021 185.072L97.3171 195.651C104.35 197.564 111.031 200.298 117.251 203.745C115.296 210.423 112.552 216.924 109.01 223.113L88.9736 258.11C85.2637 264.593 92.4915 271.821 98.9747 268.111L133.972 248.075C140.026 244.61 146.383 241.905 152.911 239.958C156.047 245.833 158.557 252.1 160.347 258.681L170.927 297.596C172.887 304.803 183.111 304.803 185.072 297.596L195.652 258.681C197.467 252 200.025 245.638 203.232 239.684C210.089 241.647 216.769 244.441 223.113 248.075L258.11 268.111C264.593 271.821 271.824 264.593 268.111 258.11L248.075 223.113C244.444 216.769 241.647 210.089 239.684 203.232C245.636 200.027 252.001 197.47 258.681 195.651L297.596 185.072C304.803 183.111 304.803 172.887 297.596 170.926H297.593Z' fill='black'/%3E%3C/svg%3E");
}

.shape--ab:hover .gradient {
  --c1: #F4484A;
  --c2: #FC9969;
  --c3: #FC9969;
  --o1: 43%;
  --o2: 77%;
  --o3: 100%;
}

.shape--ab:hover .glow {
  --glow1: #F3FAFA;
  --glow2: #8EB8FF;
}

.shape--ab:hover .glow-blur {
  transform: scale(1.1);
}