Template:Taro/taroeffect.css: Difference between revisions

Revision as of 18:53, 11 October 2026

.content {
  position: relative;
}

/* ---------- Layout: triangle behind the box ---------- */
.taro-wrap {
  position: relative;
  width: min(100%, 900px);
  aspect-ratio: 1640 / 1420;   /* matches the triangle image */
  margin: 1em auto;
}

.taro-triangle {
  position: absolute;
  inset: 0;
  z-index: 0;
  animation: taro-triangle-pulse 4s ease-in-out infinite;
}

.taro-triangle img {
  width: 100%;
  height: 100%;
  display: block;
}

/* Box sits over the lower middle so the apex and both base corners poke out */
.taro-glow {
  position: absolute;
  z-index: 1;
  left: 48.5%;
  bottom: 11%;
  width: 62%;
  transform: translateX(-50%);
  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;   /* inner shadow only; outer glow is on .taro-glow */
  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%);
  }
}

/* drop-shadow is applied AFTER the child's clip-path, so the glow follows the wavy edge */
@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) {
  .taro-glow { width: 76%; bottom: 9%; }
  .effect { font-size: 80%; }
}

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