:root {
  --size: 320px;
}

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  background: #121212;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.shurikens {
  width: var(--size);
  aspect-ratio: 1;
  position: relative;
  filter: saturate(1.2) contrast(1.1);
  transition: transform 0.4s ease-in-out;
}

.shurikens:hover {
  transform: scale(1.05);
}

.shuriken {
  position: absolute;
  inset: 0;
  clip-path: polygon(
    50% 0%,
    64% 36%,
    100% 50%,
    64% 64%,
    50% 100%,
    36% 64%,
    0% 50%,
    36% 36%
  );
  mix-blend-mode: screen;
  overflow: hidden;
  will-change: transform, opacity, filter;
}

.shuriken .blade {
  position: absolute;
  inset: -20%;
  border-radius: 50%;
  background: conic-gradient(
    hsl(0 100% 60%),
    hsl(60 100% 60%),
    hsl(120 100% 55%),
    hsl(180 100% 55%),
    hsl(240 100% 60%),
    hsl(300 100% 60%),
    hsl(360 100% 60%)
  );
  animation: hueShift 20s linear infinite;
}

.shuriken.one   { transform: scale(1);   animation: rotate-fast 12s linear infinite, fade1 6s ease-in-out infinite; }
.shuriken.two   { transform: scale(.96) rotate(45deg);  animation: rotate-reverse 14s linear infinite, fade2 7s ease-in-out infinite; }
.shuriken.three { transform: scale(.92) rotate(90deg);  animation: rotate-fast 16s linear infinite, fade3 8s ease-in-out infinite; }
.shuriken.four  { transform: scale(.88) rotate(135deg); animation: rotate-reverse 18s linear infinite, fade4 9s ease-in-out infinite; }
.shuriken.five  { transform: scale(.84) rotate(180deg); animation: rotate-fast 20s linear infinite, fade5 10s ease-in-out infinite; }

.core {
  position: absolute;
  inset: 40%;
  border-radius: 50%;
  background: #121212;
  animation: core-pulse 6s ease-in-out infinite;
  pointer-events: none;
}

/* Rotation */
@keyframes rotate-fast { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes rotate-reverse { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } }

/* Core pulse */
@keyframes core-pulse { 0%,100% { transform: scale(.9); } 50% { transform: scale(1.15); } }

/* Blade opacity pulsation */
@keyframes fade1 { 0%,100% { opacity: 1; } 50% { opacity: .85; } }
@keyframes fade2 { 0%,100% { opacity: .95; } 50% { opacity: .8; } }
@keyframes fade3 { 0%,100% { opacity: .9; } 50% { opacity: .75; } }
@keyframes fade4 { 0%,100% { opacity: .85; } 50% { opacity: .7; } }
@keyframes fade5 { 0%,100% { opacity: .8; } 50% { opacity: .65; } }

/* Hue rotation for dynamic color shifting */
@keyframes hueShift { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } }

@media (min-width: 640px) {
  :root {
    --size: 400px;
  }
}

@media (min-width: 1024px) {
  :root {
    --size: 440px;
  }
}