/* Diamond color palette — uses customer color when --diamond-base is overridden
   via the dynamic style tag, falls back to teal (#4EE2EC) by default. */
:root {
  --diamond-base: #4EE2EC;
  --diamond-light: color-mix(in srgb, var(--diamond-base) 50%, #fff);
  --diamond-lighter: color-mix(in srgb, var(--diamond-base) 30%, #fff);
  --diamond-dark: color-mix(in srgb, var(--diamond-base) 70%, #000);
}

.diamond-wrap {
  filter: drop-shadow(0 0 20px var(--diamond-base)) drop-shadow(0 0 0 var(--diamond-base));
  animation: diamond-shiny 1s infinite alternate;
}

@keyframes diamond-shiny {
  to {
    filter: drop-shadow(0 0 50px var(--diamond-base)) drop-shadow(0 0 20px var(--diamond-base));
  }
}

.diamond {
  width: 400px;
  height: 350px;
  clip-path: polygon(0 100px, 70px 0, 330px 0, 400px 100px, 200px 350px);
  transform: scale(0.25);
}

.diamond-side-top {
  animation: diamond-side-top 1s linear infinite;
  display: flex;
}

@keyframes diamond-side-top {
  to {
    margin-left: -133.3333333333px;
  }
}

.diamond-top-sharp {
  width: 133.3333333333px;
  height: 100px;
  background-color: var(--color-start);
  animation: color-shine 1s linear infinite;
  flex: 0 0 auto;
}

.diamond-top-sharp + .diamond-top-sharp {
  margin-left: calc(-400px / 6);
}

.diamond-top-sharp:nth-child(even) {
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.diamond-top-sharp:nth-child(1) { --color-start: var(--diamond-base); }
.diamond-top-sharp:nth-child(2) { --color-start: #FFF; --color-middle: var(--diamond-base); --color-end: #FFF; }
.diamond-top-sharp:nth-child(3) { --color-start: var(--diamond-light); --color-middle: #FFF; --color-end: var(--diamond-base); }
.diamond-top-sharp:nth-child(4) { --color-start: var(--diamond-dark); --color-middle: var(--diamond-light); --color-end: #FFF; }
.diamond-top-sharp:nth-child(5) { --color-start: var(--diamond-base); --color-middle: var(--diamond-dark); --color-end: var(--diamond-light); }
.diamond-top-sharp:nth-child(6) { --color-start: var(--diamond-light); --color-middle: var(--diamond-lighter); --color-end: var(--diamond-dark); }
.diamond-top-sharp:nth-child(7) { --color-start: var(--diamond-lighter); --color-middle: #FFF; --color-end: var(--diamond-light); }
.diamond-top-sharp:nth-child(8) { --color-start: var(--diamond-base); --color-middle: var(--diamond-lighter); --color-end: #FFF; }

.diamond-side-bottom {
  display: flex;
}

.diamond-bottom-sharp {
  width: 400px;
  height: 250px;
  flex: 0 0 auto;
}

.diamond-bottom-sharp:nth-child(1) {
  clip-path: polygon(0% 0, 33.3333333333% 0, 50% 100%);
  animation: diamond-bottom-sharp-0 1s linear infinite;
}
@keyframes diamond-bottom-sharp-0 {
  to { clip-path: polygon(-33.3333333333% 0, 0% 0, 50% 100%); }
}

.diamond-bottom-sharp:nth-child(2) {
  clip-path: polygon(33.3333333333% 0, 66.6666666667% 0, 50% 100%);
  animation: diamond-bottom-sharp-1 1s linear infinite;
}
@keyframes diamond-bottom-sharp-1 {
  to { clip-path: polygon(0% 0, 33.3333333333% 0, 50% 100%); }
}

.diamond-bottom-sharp:nth-child(3) {
  clip-path: polygon(66.6666666667% 0, 100% 0, 50% 100%);
  animation: diamond-bottom-sharp-2 1s linear infinite;
}
@keyframes diamond-bottom-sharp-2 {
  to { clip-path: polygon(33.3333333333% 0, 66.6666666667% 0, 50% 100%); }
}

.diamond-bottom-sharp:nth-child(4) {
  clip-path: polygon(100% 0, 133.3333333333% 0, 50% 100%);
  animation: diamond-bottom-sharp-3 1s linear infinite;
}
@keyframes diamond-bottom-sharp-3 {
  to { clip-path: polygon(66.6666666667% 0, 100% 0, 50% 100%); }
}

.diamond-bottom-sharp + .diamond-bottom-sharp {
  margin-left: -400px;
}

.diamond-bottom-sharp-color {
  width: 100%;
  height: 100%;
  background-color: var(--color-start);
  animation: color-shine 1s linear infinite;
}

.diamond-bottom-sharp:nth-child(1) .diamond-bottom-sharp-color { --color-start: #FFF; --color-middle: var(--diamond-light); --color-end: #FFF; }
.diamond-bottom-sharp:nth-child(2) .diamond-bottom-sharp-color { --color-start: var(--diamond-dark); --color-end: #FFF; }
.diamond-bottom-sharp:nth-child(3) .diamond-bottom-sharp-color { --color-start: var(--diamond-light); --color-middle: #FFF; --color-end: var(--diamond-dark); }
.diamond-bottom-sharp:nth-child(4) .diamond-bottom-sharp-color { --color-start: var(--diamond-base); --color-middle: var(--diamond-dark); --color-end: var(--diamond-light); }

@keyframes color-shine {
  50% { background-color: var(--color-middle, var(--color-start)); }
  to { background-color: var(--color-end, var(--color-start)); }
}

.shine {
  margin: var(--offsetY, 0) 0 0 var(--offsetX, 0);
  transform: scale(var(--scale, 1));
  position: absolute;
}

.shine:nth-child(1) { --offsetX: 80px; --offsetY: -100px; }
.shine:nth-child(2) { --offsetX: 50px; --offsetY: 100px; --delay: 0.58721384s; }
.shine:nth-child(3) { --offsetX: -75px; --scale: 1.5; --delay: 1.5318943s; }
.shine:nth-child(4) { --offsetX: -100px; --offsetY: 50px; --delay: 1.55671289767s; }
.shine:nth-child(5) { --offsetX: -150px; --offsetY: -50px; --scale: 0.75; --delay: 2.78632786123s; }
.shine:nth-child(6) { --offsetX: 50px; --scale: 1.25; --delay: 2.584384531587s; }
.shine:nth-child(7) { --offsetX: 150px; --offsetY: 50px; --scale: 0.5; --delay: 3.12738954s; }
.shine:nth-child(8) { --offsetX: -25px; --offsetY: 25px; --delay: 3.5296732197s; }
.shine:nth-child(9) { --offsetY: -100px; --delay: 4.19782464s; }
.shine:nth-child(10) { --offsetX: -50px; --offsetY: 100px; --scale: 0.5; --delay: 4.541272397s; }

.shine-flare {
  width: 8px;
  height: 24px;
  margin: -24px 0 0 -4px;
  background-color: #FFF;
  border-radius: 4px;
  animation: shine-flare 2.4348764s ease-out infinite both;
  animation-delay: var(--delay, 0s);
  transform: rotate(var(--angle, 0deg)) translateY(0);
  transform-origin: center bottom;
  visibility: hidden;
  position: absolute;
}

.shine-flare:nth-child(1) { --angle: 0deg; }
.shine-flare:nth-child(2) { --angle: 72deg; }
.shine-flare:nth-child(3) { --angle: 144deg; }
.shine-flare:nth-child(4) { --angle: 216deg; }
.shine-flare:nth-child(5) { --angle: 288deg; }
.shine-flare:nth-child(6) { --angle: 360deg; }

@keyframes shine-flare {
  1% { visibility: visible; }
  8% { width: 8px; transform: rotate(var(--angle, 0deg)) translateY(-42px); }
  16% { width: 0; height: 0; transform: rotate(var(--angle, 0deg)) translateY(-54px); visibility: hidden; }
}