Template:Taro/taroeffect.css

.content {
  position: relative;
}

/* ---------- Layout: triangle sized relative to the box ---------- */
.taro-wrap {
  position: relative;
  width: 440px;
  max-width: 100%;
  /* 458px = 1.2 (triangle ratio) x 440px x 0.867, minus 9em for the box height */
  margin: calc(458px - 9em) auto 1.5em;
}

.taro-triangle {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 100%;
  width: 154.2%;                       /* 1.2 x 128.5% */
  aspect-ratio: 1640 / 1420;
  transform: translate(-48.2%, -87%);
}

.taro-triangle img {
  width: 100%;
  height: 100%;
  display: block;
  animation: taro-triangle-pulse 4s ease-in-out infinite;
}

.taro-glow {
  position: relative;
  z-index: 1;
  animation: taro-glow-pulse 4s ease-in-out infinite;
}

/* ---------- The box itself ---------- */
.effect {
  width: 100%;
  margin: 0;
  color: #fff;
  background: linear-gradient(135deg, #0066FF, #00008B);
  font-size: 95%;
  text-align: center;
  padding: .5em;
  overflow: hidden;
  border: 2px solid #00FF66;
  border-radius: 12px;
  box-shadow: inset 0 0 12px #003300;
  text-shadow: 0 0 8px #00FF66;
  animation: taroanimate 4s ease-in-out infinite,
             taro-text-pulse 4s ease-in-out infinite;
}

/* ---------- Animations ---------- */
@keyframes taroanimate {
  0%, 100% {
    clip-path: polygon(0% 5%, 16% 10%, 33% 5%, 54% 9%, 70% 7%, 84% 6.2%, 100% 7%, 100% 100%, 0% 100%);
  }
  50% {
    clip-path: polygon(0% 8%, 16% 7%, 34% 11.6%, 51% 11.2%, 67% 12%, 84% 12.5%, 100% 10.6%, 100% 100%, 0% 100%);
  }
}

@keyframes taro-glow-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 4px #00FF66) drop-shadow(0 0 12px #00CC55);
  }
  50% {
    filter: drop-shadow(0 0 8px #00FF88) drop-shadow(0 0 22px #00FF66) drop-shadow(0 0 44px rgba(0,255,102,.55));
  }
}

@keyframes taro-text-pulse {
  0%, 100% { text-shadow: 0 0 6px #00FF66; }
  50%      { text-shadow: 0 0 10px #00FF88, 0 0 22px #00FF66; }
}

@keyframes taro-triangle-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 10px rgba(255,215,0,.5)) brightness(1);
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 28px rgba(255,215,0,.9)) brightness(1.12);
    transform: scale(1.015);
  }
}

/* ---------- Small screens / accessibility ---------- */
@media (max-width: 600px) {
  .effect { font-size: 80%; }
}

@media (prefers-reduced-motion: reduce) {
  .taro-triangle img, .taro-glow, .effect { animation: none; }
}