@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 --glow { syntax: '<color>'; inherits: false; initial-value: #ffffff; }

.cluster {
  flex-wrap: nowrap;
  overflow-x: hidden;
}

.shape {
  position: relative;
  width: 40vw;
  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;
}

.gradient, .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),
    --glow 1.5s cubic-bezier(.45, 0, .2, 1);
}

.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);
}

.glow-blur {
  position: absolute;
  inset: 0;
  filter: blur(1.6vw);
  transform: scale(1);
  transition: transform 1.5s cubic-bezier(.45, 0, .2, 1);
}
.glow {
  background: var(--glow);
  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--1 {
  aspect-ratio: 820 / 849;
  --mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 820 849' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M751.597 460.175C734.236 441.806 711.566 430.855 685.886 426.886C714 424.716 739.305 414.455 759.004 395.471C820.079 336.599 800.802 219.459 715.115 128.814C629.43 38.1576 514.469 13.2666 453.394 72.1388C435.534 89.3576 424.547 111.576 420.091 136.643C416.044 114.838 406.715 95.2825 391.754 79.4545C334.07 18.4234 217.81 39.1181 127.1 126.57C36.3788 214.021 10.5057 330.331 68.1999 391.362C83.161 407.19 102.074 417.509 123.448 422.606C98.4393 425.944 75.953 435.988 58.0925 453.207C-2.98232 512.079 16.2956 629.209 101.981 719.865C187.667 810.521 302.628 835.412 363.702 776.54C383.402 757.556 394.726 732.5 398.178 704.244C400.91 730.331 410.692 753.714 428.053 772.084C485.737 833.115 601.986 812.42 692.707 724.968C783.428 637.517 809.302 521.208 751.618 460.177L751.597 460.175ZM459.534 546.762C441.485 526.266 422.955 514.782 404.427 512.596C385.749 512.793 365.904 522.225 345.407 540.66C327.477 556.787 300.146 555.326 284.358 537.396C268.569 519.466 270.305 491.862 288.235 475.735C308.732 457.3 320.305 438.474 322.665 419.758C322.667 400.906 313.532 380.973 295.483 360.477C279.695 342.547 281.43 314.943 299.361 298.816C317.291 282.689 344.622 284.15 360.411 302.08C378.459 322.576 396.989 334.059 415.517 336.245C434.195 336.048 454.041 326.617 474.537 308.181C492.468 292.054 519.798 293.516 535.587 311.445C551.376 329.375 549.64 356.979 531.71 373.106C511.213 391.542 499.64 410.368 497.279 429.094C497.277 447.946 506.412 467.88 524.461 488.365C540.25 506.295 538.514 533.899 520.584 550.026C502.653 566.153 475.323 564.692 459.534 546.762Z' fill='black'/%3E%3C/svg%3E");
}
.shape--1 .gradient { --c1: #FC4785; --c2: #FFDCA9; --c3: #FFDCA9; --o1: 26%; --o2: 100%; --o3: 100%; }
.shape--1:hover .gradient { --c1: #F3FAFA; --c2: #8EB8FF; --c3: #8EB8FF; --o1: 30%; --o2: 83%; --o3: 100%; }

.shape--2 {
  aspect-ratio: 806 / 786;
  --mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 806 786' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M662.079 178.671C638.622 178.671 616.65 186.656 597.301 200.928C608.679 183.273 614.972 163.666 614.972 142.882C614.972 62.7603 521.663 0 402.549 0C283.435 0 190.126 62.7603 190.126 142.882C190.126 163.666 196.419 183.273 207.797 200.928C188.448 186.666 166.476 178.671 143.019 178.671C62.8262 178.671 0 271.897 0 390.906C0 509.915 62.816 603.141 143.019 603.141C168.885 603.141 192.932 593.429 213.654 576.302C198.585 596.03 190.126 618.572 190.126 642.689C190.126 722.81 283.435 785.57 402.549 785.581C521.663 785.581 614.972 722.82 614.972 642.689C614.972 618.572 606.513 596.04 591.444 576.302C612.166 593.429 636.213 603.141 662.079 603.141C742.272 603.141 805.098 509.915 805.098 390.906C805.098 271.897 742.282 178.671 662.079 178.671ZM399.245 499.807C332.88 499.807 274.711 520.094 236.846 552.317C266.536 513.684 285.051 456.175 285.051 390.916C285.051 330.543 269.2 276.804 243.323 238.505C281.177 267.671 336.561 285.774 399.255 285.774C461.949 285.774 517.322 267.671 555.176 238.505C529.299 276.804 513.448 330.533 513.448 390.906C513.448 456.175 531.963 513.673 561.653 552.307C523.789 520.084 465.609 499.807 399.255 499.807H399.245Z' fill='black'/%3E%3C/svg%3E");
}
.shape--2 .gradient { --c1: #F04824; --c2: #76A2FF; --c3: #A1B5E7; --o1: 23%; --o2: 74%; --o3: 88%; }
.shape--2:hover .gradient { --c1: #F4484A; --c2: #FC9969; --c3: #FC9969; --o1: 61%; --o2: 93%; --o3: 100%; }

.shape--3 {
  aspect-ratio: 850 / 850;
  --mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 850 850' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M849.012 424.511C849.012 388.676 812.348 358.03 760.514 345.622C759.242 345.315 758.637 343.872 759.314 342.753C786.729 297.578 790.79 250.409 765.604 225.223C742.304 201.923 700.18 203.655 658.227 225.755C656.531 226.649 654.717 224.763 655.674 223.102L669.661 198.665C679.822 180.924 660.032 161.134 642.282 171.286L630.055 178.289C628.457 179.2 626.634 177.576 627.329 175.879C642.49 139.106 641.407 103.948 620.868 83.4096C596.151 58.6926 550.255 62.1398 505.857 88.2013C504.747 88.8511 503.322 88.2555 503.015 87.0011C490.381 35.961 459.998 0 424.506 0C389.015 0 358.027 36.6648 345.619 88.4991C345.312 89.7715 343.868 90.3762 342.749 89.6993C297.575 62.2842 250.407 58.2234 225.221 83.4096C205.079 103.551 203.644 137.744 217.893 173.741C218.561 175.437 216.747 177.034 215.159 176.123L212.858 174.805C193.411 163.679 171.726 185.364 182.862 204.801L193.339 223.102C194.295 224.763 192.482 226.649 190.785 225.755C148.842 203.655 106.718 201.923 83.4087 225.223C58.692 249.94 62.1391 295.836 88.2004 340.235C88.8501 341.345 88.2546 342.771 87.0002 343.077C35.9606 355.72 0 386.104 0 421.596C0 457.088 36.6644 488.076 88.4982 500.484C89.7706 500.791 90.3752 502.235 89.6984 503.354C62.2835 548.529 58.2227 595.698 83.4087 620.884C104.786 642.262 142.019 642.569 180.416 625.396C182.113 624.638 183.782 626.497 182.862 628.103C171.735 647.55 193.42 669.235 212.858 658.099L225.834 650.672C227.522 649.707 229.417 651.584 228.46 653.28C203.825 696.839 201 741.391 225.221 765.612C249.937 790.329 295.833 786.882 340.231 760.82C341.341 760.17 342.767 760.766 343.074 762.02C355.716 813.051 386.109 849.012 421.591 849.012C457.074 849.012 488.071 812.348 500.479 760.513C500.786 759.241 502.23 758.636 503.349 759.313C548.523 786.728 595.691 790.789 620.877 765.603C645.558 740.922 642.165 695.143 616.221 650.808C615.228 649.111 617.132 647.207 618.838 648.182L636.155 658.099C655.601 669.226 677.286 647.541 666.15 628.103C665.23 626.497 666.899 624.638 668.596 625.396C706.993 642.569 744.217 642.262 765.604 620.884C790.32 596.167 786.873 550.27 760.812 505.872C760.162 504.762 760.758 503.336 762.012 503.029C813.043 490.386 849.003 459.993 849.003 424.511H849.012Z' fill='black'/%3E%3C/svg%3E");
}
.shape--3 .gradient { --c1: #F4484A; --c2: #FC9969; --c3: #FC9969; --o1: 43%; --o2: 77%; --o3: 100%; }
.shape--3 .glow {
  --glow: #B5FFC3;
  --glow-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 850 850' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M575.767 429.387C575.767 416.206 562.281 404.934 543.216 400.371C542.748 400.258 542.525 399.727 542.774 399.315C552.858 382.699 554.351 365.35 545.088 356.086C536.518 347.516 521.024 348.153 505.593 356.282C504.969 356.61 504.302 355.916 504.654 355.306L509.798 346.317C513.536 339.792 506.257 332.513 499.728 336.247L495.23 338.823C494.643 339.158 493.973 338.56 494.228 337.936C499.804 324.411 499.406 311.479 491.852 303.924C482.76 294.833 465.879 296.101 449.549 305.687C449.141 305.926 448.616 305.707 448.503 305.246C443.856 286.472 432.681 273.245 419.627 273.245C406.572 273.245 395.174 286.731 390.61 305.797C390.498 306.265 389.966 306.487 389.555 306.238C372.939 296.154 355.59 294.661 346.326 303.924C338.918 311.333 338.39 323.909 343.631 337.15C343.877 337.774 343.209 338.361 342.625 338.026L341.779 337.541C334.626 333.449 326.65 341.425 330.746 348.574L334.599 355.306C334.951 355.916 334.284 356.61 333.66 356.282C318.233 348.153 302.739 347.516 294.165 356.086C285.074 365.177 286.342 382.058 295.928 398.389C296.167 398.797 295.948 399.322 295.486 399.435C276.713 404.085 263.486 415.26 263.486 428.315C263.486 441.369 276.972 452.767 296.037 457.331C296.505 457.444 296.728 457.975 296.479 458.387C286.395 475.003 284.902 492.352 294.165 501.616C302.028 509.479 315.723 509.592 329.846 503.276C330.47 502.997 331.084 503.681 330.746 504.271C326.653 511.424 334.629 519.4 341.779 515.305L346.552 512.573C347.172 512.218 347.869 512.908 347.518 513.532C338.456 529.554 337.417 545.941 346.326 554.849C355.417 563.941 372.299 562.673 388.629 553.087C389.037 552.848 389.562 553.067 389.674 553.528C394.325 572.299 405.503 585.526 418.554 585.526C431.605 585.526 443.007 572.04 447.571 552.974C447.683 552.506 448.215 552.284 448.626 552.533C465.242 562.616 482.591 564.11 491.855 554.846C500.933 545.768 499.685 528.93 490.142 512.623C489.777 511.999 490.477 511.298 491.105 511.657L497.474 515.305C504.627 519.397 512.603 511.421 508.507 504.271C508.169 503.681 508.783 502.997 509.407 503.276C523.53 509.592 537.221 509.479 545.088 501.616C554.179 492.525 552.911 475.643 543.325 459.313C543.086 458.905 543.305 458.38 543.767 458.267C562.537 453.617 575.763 442.438 575.763 429.387H575.767Z' fill='black'/%3E%3C/svg%3E");
}
.shape--3:hover .gradient { --c1: #CFE1FF; --c2: #D3B1A1; --c3: #FF4799; --o1: 25%; --o2: 40%; --o3: 76%; }
.shape--3:hover .glow { --glow: #E2FA8A; }
.shape--3:hover .glow-blur { transform: scale(1.32); }