/* ============================================================
   icon-animations.css — CSS アイコンアニメーション集
   ============================================================ */

.icon-anim {
  --icon-duration: 1s;
  --icon-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

/* --- Spin --- */
.icon-anim-spin::before {
  content: '';
  width: 32px; height: 32px;
  border: 3px solid var(--accent-soft);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: icon-spin 0.9s linear infinite;
}
@keyframes icon-spin {
  to { transform: rotate(360deg); }
}

/* --- Pulse Ring --- */
.icon-anim-pulse-ring::before {
  content: '';
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--accent);
}
.icon-anim-pulse-ring::after {
  content: '';
  position: absolute;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  animation: icon-pulse-ring 1.5s ease-out infinite;
}
@keyframes icon-pulse-ring {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* --- Bounce --- */
.icon-anim-bounce::before {
  content: '';
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--accent);
  animation: icon-bounce 0.6s cubic-bezier(0.36, 0, 0.66, -0.56) infinite alternate;
}
@keyframes icon-bounce {
  from { transform: translateY(-10px); }
  to { transform: translateY(10px); }
}

/* --- Bell Shake --- */
.icon-anim-bell-shake::before {
  content: '';
  display: block;
  width: 24px; height: 22px;
  border-radius: 12px 12px 0 0;
  background: var(--accent);
  position: relative;
  animation: icon-bell-shake 0.5s ease both;
}
.icon-anim-bell-shake::after {
  content: '';
  position: absolute;
  bottom: 2px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
@keyframes icon-bell-shake {
  0%,100% { transform: rotate(0deg); }
  20% { transform: rotate(-15deg); }
  40% { transform: rotate(15deg); }
  60% { transform: rotate(-10deg); }
  80% { transform: rotate(10deg); }
}

/* --- Heart Beat --- */
.icon-anim-heart-beat::before {
  content: '♥';
  font-size: 28px;
  color: #ef4444;
  animation: icon-heartbeat 1.2s ease-in-out infinite;
}
@keyframes icon-heartbeat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.25); }
  28% { transform: scale(1); }
  42% { transform: scale(1.15); }
  70% { transform: scale(1); }
}

/* --- Check Draw --- */
.icon-anim-check-draw::before {
  content: '';
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 3px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: icon-check-circle 0.4s var(--icon-ease) both;
}
.icon-anim-check-draw::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  margin-top: -2px; margin-left: -1px;
  width: 12px; height: 7px;
  border-left: 3px solid var(--accent);
  border-bottom: 3px solid var(--accent);
  transform: rotate(-45deg);
  transform-origin: left bottom;
  animation: icon-check-mark 0.3s var(--icon-ease) 0.2s both;
}
@keyframes icon-check-circle {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes icon-check-mark {
  from { transform: rotate(-45deg) scaleX(0); }
  to   { transform: rotate(-45deg) scaleX(1); }
}

/* --- Loading Dots --- */
.icon-anim-loading-dots {
  gap: 6px;
}
.icon-anim-loading-dots span {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: icon-loading-dot 1.2s ease-in-out infinite;
}
.icon-anim-loading-dots span:nth-child(1) { animation-delay: 0s; }
.icon-anim-loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.icon-anim-loading-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes icon-loading-dot {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-10px); opacity: 1; }
}

/* --- Star Burst --- */
.icon-anim-star-burst::before {
  content: '★';
  font-size: 32px;
  color: var(--accent);
  animation: icon-star-burst 0.6s var(--icon-ease) both;
}
@keyframes icon-star-burst {
  from { transform: scale(0) rotate(-30deg); opacity: 0; }
  to { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* --- Arrow Bounce --- */
.icon-anim-arrow-bounce::before {
  content: '';
  width: 12px; height: 12px;
  border-right: 3px solid var(--accent);
  border-bottom: 3px solid var(--accent);
  transform: rotate(45deg);
  animation: icon-arrow-bounce 0.7s ease-in-out infinite alternate;
}
@keyframes icon-arrow-bounce {
  from { transform: rotate(45deg) translate(-3px, -3px); }
  to { transform: rotate(45deg) translate(3px, 3px); }
}

/* --- WiFi Signal --- */
.icon-anim-wifi-signal::before,
.icon-anim-wifi-signal::after {
  content: '';
  position: absolute;
  border: 3px solid var(--accent);
  border-radius: 50%;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
  animation: icon-wifi-blink 1.5s ease-in-out infinite;
}
.icon-anim-wifi-signal::before {
  width: 36px; height: 36px;
  animation-delay: 0.3s;
  border-top-color: var(--accent);
  transform: rotate(-45deg);
}
.icon-anim-wifi-signal::after {
  width: 20px; height: 20px;
  border-top-color: var(--accent);
  transform: rotate(-45deg);
}
@keyframes icon-wifi-blink {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 1; }
}

/* --- Ping --- */
.icon-anim-ping {
  position: relative;
}
.icon-anim-ping::before {
  content: '';
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--accent);
  position: relative;
  z-index: 1;
}
.icon-anim-ping::after {
  content: '';
  position: absolute;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--accent);
  animation: icon-ping 1s cubic-bezier(0,0,0.2,1) infinite;
}
@keyframes icon-ping {
  75%, 100% { transform: scale(2.5); opacity: 0; }
}

/* --- Tada --- */
.icon-anim-tada::before {
  content: '🎉';
  font-size: 28px;
  display: block;
  animation: icon-tada 0.8s ease both;
}
@keyframes icon-tada {
  0%   { transform: scale(1) rotate(0deg); }
  10%  { transform: scale(0.9) rotate(-3deg); }
  20%  { transform: scale(0.9) rotate(-3deg); }
  30%  { transform: scale(1.1) rotate(3deg); }
  40%  { transform: scale(1.1) rotate(-3deg); }
  50%  { transform: scale(1.1) rotate(3deg); }
  60%  { transform: scale(1.1) rotate(-3deg); }
  70%  { transform: scale(1.1) rotate(3deg); }
  80%  { transform: scale(1.1) rotate(-3deg); }
  90%  { transform: scale(1.1) rotate(3deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* --- Draw X --- */
.icon-anim-draw-x::before {
  content: '';
  position: absolute;
  width: 30px; height: 3px;
  border-radius: 2px;
  background: #ef4444;
  transform: rotate(45deg) scaleX(0);
  transform-origin: left;
  animation: icon-draw-x1 0.25s var(--icon-ease) both;
}
.icon-anim-draw-x::after {
  content: '';
  position: absolute;
  width: 30px; height: 3px;
  border-radius: 2px;
  background: #ef4444;
  transform: rotate(-45deg) scaleX(0);
  transform-origin: left;
  animation: icon-draw-x2 0.25s var(--icon-ease) 0.2s both;
}
@keyframes icon-draw-x1 { to { transform: rotate(45deg) scaleX(1); } }
@keyframes icon-draw-x2 { to { transform: rotate(-45deg) scaleX(1); } }

/* --- Ripple --- */
.icon-anim-ripple-icon::before,
.icon-anim-ripple-icon::after {
  content: '';
  position: absolute;
  border: 2px solid var(--accent);
  border-radius: 50%;
  opacity: 0;
}
.icon-anim-ripple-icon::before {
  width: 20px; height: 20px;
  animation: icon-ripple 2s ease-out infinite;
}
.icon-anim-ripple-icon::after {
  width: 20px; height: 20px;
  animation: icon-ripple 2s ease-out 0.6s infinite;
}
@keyframes icon-ripple {
  0%   { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(3); opacity: 0; }
}

/* --- Blink --- */
.icon-anim-blink::before {
  content: '';
  width: 3px; height: 28px;
  border-radius: 2px;
  background: var(--accent);
  display: block;
  animation: icon-blink 1s step-end infinite;
}
@keyframes icon-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* --- Rotate Once --- */
.icon-anim-rotate-once::before {
  content: '⚙';
  font-size: 28px;
  color: var(--accent);
  display: block;
  animation: icon-rotate-once 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes icon-rotate-once {
  from { transform: rotate(-180deg) scale(0.5); opacity: 0; }
  to   { transform: rotate(0deg) scale(1); opacity: 1; }
}

/* --- Flame --- */
.icon-anim-flame::before {
  content: '';
  width: 22px;
  height: 28px;
  background: linear-gradient(to top, #f97316, #fb923c, #fbbf24);
  border-radius: 50% 50% 30% 30% / 60% 60% 40% 40%;
  display: block;
  animation: icon-flame 0.8s ease-in-out infinite alternate;
  box-shadow: 0 0 12px 4px rgba(251,146,36,0.5);
  transform-origin: bottom center;
}
.icon-anim-flame::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 16px;
  background: linear-gradient(to top, #fde68a, #fbbf24);
  border-radius: 50% 50% 30% 30% / 60% 60% 40% 40%;
  bottom: 10px;
  animation: icon-flame-inner 0.6s ease-in-out infinite alternate-reverse;
  transform-origin: bottom center;
}
@keyframes icon-flame {
  0%  { transform: scaleX(1) scaleY(1) rotate(-2deg); filter: brightness(1); }
  50% { transform: scaleX(0.9) scaleY(1.08) rotate(2deg); filter: brightness(1.2); }
  100%{ transform: scaleX(1.05) scaleY(0.95) rotate(-1deg); filter: brightness(0.9); }
}
@keyframes icon-flame-inner {
  0%  { transform: scaleX(1) scaleY(1); opacity: 0.9; }
  100%{ transform: scaleX(0.8) scaleY(1.1); opacity: 0.6; }
}

/* --- Battery Fill --- */
.icon-anim-battery-fill {
  --bat-w: 36px;
  --bat-h: 18px;
}
.icon-anim-battery-fill::before {
  content: '';
  width: var(--bat-w);
  height: var(--bat-h);
  border: 2.5px solid var(--accent);
  border-radius: 3px;
  display: block;
  position: relative;
  box-shadow: inset 0 0 0 0 var(--accent);
}
.icon-anim-battery-fill::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 50%;
  margin-top: calc(var(--bat-h) / -2 + 2.5px);
  height: calc(var(--bat-h) - 5px);
  width: 2px;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
  animation: icon-battery-tip 2.4s ease-in-out infinite;
  box-shadow: 3px 0 0 var(--accent);
}
/* Use a layered box-shadow trick for the fill */
.icon-anim-battery-fill::before {
  overflow: hidden;
  animation: icon-battery-fill 2.4s ease-in-out infinite;
}
@keyframes icon-battery-fill {
  0%  { box-shadow: inset 0 0 0 0 rgba(124,108,255,0.2); }
  10% { box-shadow: inset -31px 0 0 0 rgba(124,108,255,0.15); }
  80% { box-shadow: inset 0 0 0 12px rgba(124,108,255,0.8); }
  90% { box-shadow: inset 0 0 0 12px rgba(124,255,180,0.9); }
  100%{ box-shadow: inset 0 0 0 12px rgba(124,108,255,0.2); }
}
@keyframes icon-battery-tip {
  0%,100%{ opacity: 1; }
  90%    { opacity: 0.3; }
}

/* --- Eye Blink --- */
.icon-anim-eye-blink::before {
  content: '';
  width: 30px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  display: block;
  animation: icon-eye-blink 2.5s ease-in-out infinite;
}
.icon-anim-eye-blink::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  animation: icon-eye-pupil 2.5s ease-in-out infinite;
}
@keyframes icon-eye-blink {
  0%, 45%, 55%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.05); }
}
@keyframes icon-eye-pupil {
  0%, 45%, 55%, 100% { transform: scaleY(1); opacity: 1; }
  50% { transform: scaleY(0); opacity: 0; }
}

/* --- Download Arrow --- */
.icon-anim-download-arrow {
  flex-direction: column;
  gap: 2px;
}
.icon-anim-download-arrow::before {
  content: '';
  width: 14px;
  height: 14px;
  border-right: 3px solid var(--accent);
  border-bottom: 3px solid var(--accent);
  transform: rotate(45deg);
  animation: icon-dl-arrow 1.2s ease-in-out infinite;
  margin-top: -4px;
}
.icon-anim-download-arrow::after {
  content: '';
  width: 24px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
  animation: icon-dl-bar 1.2s ease-in-out infinite;
}
@keyframes icon-dl-arrow {
  0%, 100% { transform: rotate(45deg) translate(-2px,-2px); opacity: 0.4; }
  50%       { transform: rotate(45deg) translate(3px,3px);  opacity: 1; }
}
@keyframes icon-dl-bar {
  0%, 100% { transform: scaleX(0.6); opacity: 0.4; }
  50%       { transform: scaleX(1);   opacity: 1; }
}

/* --- Lock / Unlock --- */
.icon-anim-lock-unlock {
  flex-direction: column;
  gap: 1px;
}
.icon-anim-lock-unlock::before {
  content: '';
  width: 20px;
  height: 10px;
  border: 3px solid var(--accent);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  transform-origin: right bottom;
  animation: icon-lock-shackle 1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}
.icon-anim-lock-unlock::after {
  content: '';
  width: 26px;
  height: 18px;
  background: var(--accent);
  border-radius: 3px;
  animation: icon-lock-body 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes icon-lock-shackle {
  0%  { transform: rotate(0deg); }
  60% { transform: rotate(-55deg) translateX(-4px); }
  100%{ transform: rotate(-55deg) translateX(-4px); }
}
@keyframes icon-lock-body {
  0%  { transform: translateY(0); box-shadow: none; }
  60% { transform: translateY(2px); box-shadow: 0 0 8px rgba(124,108,255,0.6); }
  100%{ transform: translateY(0); box-shadow: 0 0 8px rgba(124,108,255,0.6); }
}

/* --- Volume Bars --- */
.icon-anim-volume-bars {
  align-items: flex-end;
  gap: 4px;
  padding-bottom: 8px;
}
.icon-anim-volume-bars span {
  display: block;
  width: 8px;
  border-radius: 3px 3px 0 0;
  background: var(--accent);
}
.icon-anim-volume-bars span:nth-child(1) {
  height: 20px;
  animation: icon-vbar 1s ease-in-out infinite;
  animation-delay: 0s;
}
.icon-anim-volume-bars span:nth-child(2) {
  height: 36px;
  animation: icon-vbar 1s ease-in-out infinite;
  animation-delay: 0.15s;
}
.icon-anim-volume-bars span:nth-child(3) {
  height: 28px;
  animation: icon-vbar 1s ease-in-out infinite;
  animation-delay: 0.3s;
}
.icon-anim-volume-bars span:nth-child(4) {
  height: 16px;
  animation: icon-vbar 1s ease-in-out infinite;
  animation-delay: 0.45s;
}
@keyframes icon-vbar {
  0%, 100% { transform: scaleY(0.4); opacity: 0.5; }
  50%       { transform: scaleY(1.2); opacity: 1; }
}

/* --- Compass --- */
.icon-anim-compass {
  width: 50px;
  height: 50px;
  border: 3px solid var(--accent);
  border-radius: 50%;
  position: relative;
}
.icon-anim-compass::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 20px;
  background: linear-gradient(to bottom, #ff4d4d 50%, var(--accent) 50%);
  border-radius: 2px;
  transform-origin: center bottom;
  transform: translate(-50%, -100%) rotate(0deg);
  animation: icon-compass-needle 2s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
}
.icon-anim-compass::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
@keyframes icon-compass-needle {
  0%   { transform: translate(-50%, -100%) rotate(-180deg); }
  60%  { transform: translate(-50%, -100%) rotate(55deg); }
  80%  { transform: translate(-50%, -100%) rotate(40deg); }
  100% { transform: translate(-50%, -100%) rotate(45deg); }
}

/* --- Hourglass --- */
.icon-anim-hourglass {
  animation: icon-hg-flip 3s ease-in-out infinite;
}
.icon-anim-hourglass::before {
  content: '';
  width: 32px;
  height: 16px;
  background: var(--accent);
  border-radius: 0 0 16px 16px;
  animation: icon-hg-top 3s ease-in-out infinite;
}
.icon-anim-hourglass::after {
  content: '';
  width: 32px;
  height: 16px;
  background: var(--accent);
  border-radius: 16px 16px 0 0;
  opacity: 0.35;
  animation: icon-hg-bottom 3s ease-in-out infinite;
}
@keyframes icon-hg-top {
  0%, 20%  { transform: scaleX(1); opacity: 1; }
  45%, 55% { transform: scaleX(0.1); opacity: 0.2; }
  80%, 100%{ transform: scaleX(1); opacity: 1; }
}
@keyframes icon-hg-bottom {
  0%, 20%  { transform: scaleX(0.1); opacity: 0.2; }
  45%, 55% { transform: scaleX(1); opacity: 1; }
  80%, 100%{ transform: scaleX(0.1); opacity: 0.2; }
}
@keyframes icon-hg-flip {
  0%, 45%  { transform: rotate(0deg); }
  55%, 100%{ transform: rotate(180deg); }
}

/* --- Cursor Blink --- */
.icon-anim-cursor-blink {
  width: 3px;
  height: 36px;
  background: var(--accent);
  border-radius: 2px;
  animation: icon-cursor 1s step-end infinite;
}
@keyframes icon-cursor {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* --- Expand / Collapse --- */
.icon-anim-expand-collapse {
  position: relative;
  width: 32px;
  height: 32px;
}
.icon-anim-expand-collapse::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 32px;
  height: 4px;
  background: var(--accent);
  border-radius: 2px;
  transform: translateY(-50%);
}
.icon-anim-expand-collapse::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 4px;
  height: 32px;
  background: var(--accent);
  border-radius: 2px;
  transform: translateX(-50%);
  transform-origin: center center;
  animation: icon-expand-v 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both;
}
@keyframes icon-expand-v {
  0%   { transform: translateX(-50%) scaleY(1); }
  100% { transform: translateX(-50%) scaleY(0); }
}

/* --- Rocket Launch --- */
.icon-anim-rocket-launch {
  overflow: hidden;
}
.icon-anim-rocket-launch::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 22px solid var(--accent);
  filter: drop-shadow(0 0 6px var(--accent));
  animation: icon-rocket 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.icon-anim-rocket-launch::after {
  content: '';
  position: absolute;
  bottom: 6px;
  width: 12px;
  height: 10px;
  background: linear-gradient(to top, #f97316, #fbbf24, transparent);
  border-radius: 0 0 6px 6px;
  filter: blur(2px);
  animation: icon-rocket-flame 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes icon-rocket {
  0%   { transform: translateY(20px); opacity: 0; }
  15%  { opacity: 1; }
  70%  { transform: translateY(-4px); opacity: 1; }
  85%  { transform: translateY(-36px); opacity: 0; }
  86%  { transform: translateY(20px); opacity: 0; }
  100% { transform: translateY(20px); opacity: 0; }
}
@keyframes icon-rocket-flame {
  0%   { transform: translateY(20px) scaleX(1); opacity: 0; }
  15%  { opacity: 1; }
  70%  { transform: translateY(-4px) scaleX(1); opacity: 0.9; }
  85%  { transform: translateY(-36px) scaleX(1.3); opacity: 0; }
  86%  { transform: translateY(20px); opacity: 0; }
  100% { transform: translateY(20px); opacity: 0; }
}

/* --- Shield Check --- */
.icon-anim-shield-check::before {
  content: '';
  position: absolute;
  width: 28px;
  height: 32px;
  background: var(--accent);
  border-radius: 4px 4px 50% 50% / 4px 4px 40% 40%;
  clip-path: polygon(50% 0%, 100% 18%, 100% 55%, 50% 100%, 0% 55%, 0% 18%);
  animation: icon-shield-in 0.5s var(--icon-ease) both;
}
.icon-anim-shield-check::after {
  content: '';
  position: absolute;
  width: 13px;
  height: 8px;
  border-left: 3px solid #fff;
  border-bottom: 3px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
  transform-origin: left bottom;
  animation: icon-shield-check-mark 0.35s var(--icon-ease) 0.45s both;
}
@keyframes icon-shield-in {
  from { transform: scale(0) rotate(-15deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg);  opacity: 1; }
}
@keyframes icon-shield-check-mark {
  from { transform: rotate(-45deg) translateY(-1px) scaleX(0); }
  to   { transform: rotate(-45deg) translateY(-1px) scaleX(1); }
}

/* --- Chart Bars --- */
.icon-anim-chart-bars {
  align-items: flex-end;
  gap: 5px;
  padding-bottom: 4px;
}
.icon-anim-chart-bars span {
  display: block;
  width: 8px;
  border-radius: 3px 3px 0 0;
  background: var(--accent);
  transform-origin: bottom;
  transform: scaleY(0);
}
.icon-anim-chart-bars span:nth-child(1) {
  height: 18px;
  animation: icon-bar-grow 0.5s var(--icon-ease) 0s both;
}
.icon-anim-chart-bars span:nth-child(2) {
  height: 30px;
  animation: icon-bar-grow 0.5s var(--icon-ease) 0.1s both;
}
.icon-anim-chart-bars span:nth-child(3) {
  height: 24px;
  animation: icon-bar-grow 0.5s var(--icon-ease) 0.2s both;
}
.icon-anim-chart-bars span:nth-child(4) {
  height: 36px;
  animation: icon-bar-grow 0.5s var(--icon-ease) 0.3s both;
  background: #a78bfa;
}
@keyframes icon-bar-grow {
  from { transform: scaleY(0); opacity: 0.4; }
  to   { transform: scaleY(1); opacity: 1; }
}

/* --- Notification Pop --- */
.icon-anim-notification-pop::before {
  content: '';
  display: block;
  width: 22px;
  height: 20px;
  border-radius: 10px 10px 0 0;
  background: var(--accent);
  position: relative;
  animation: icon-notif-bell-shake 0.5s ease 0.6s both;
}
.icon-anim-notification-pop::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 2px var(--bg, #0d0d1a);
  animation: icon-notif-dot 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both;
}
@keyframes icon-notif-dot {
  from { transform: scale(0) translate(8px, -8px); opacity: 0; }
  to   { transform: scale(1) translate(0, 0);      opacity: 1; }
}
@keyframes icon-notif-bell-shake {
  0%,100% { transform: rotate(0deg); }
  20%     { transform: rotate(-12deg); }
  40%     { transform: rotate(12deg); }
  60%     { transform: rotate(-8deg); }
  80%     { transform: rotate(8deg); }
}

/* --- Sync Rotate --- */
.icon-anim-sync-rotate {
  position: relative;
  width: 36px;
  height: 36px;
}
.icon-anim-sync-rotate::before,
.icon-anim-sync-rotate::after {
  content: '';
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid transparent;
  top: 4px;
  left: 4px;
}
.icon-anim-sync-rotate::before {
  border-top-color: var(--accent);
  border-right-color: var(--accent);
  animation: icon-sync-cw 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.icon-anim-sync-rotate::after {
  border-bottom-color: #a78bfa;
  border-left-color: #a78bfa;
  animation: icon-sync-ccw 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}
@keyframes icon-sync-cw {
  0%   { transform: rotate(0deg); }
  60%  { transform: rotate(220deg); }
  80%  { transform: rotate(190deg); }
  100% { transform: rotate(200deg); }
}
@keyframes icon-sync-ccw {
  0%   { transform: rotate(0deg); }
  60%  { transform: rotate(-220deg); }
  80%  { transform: rotate(-190deg); }
  100% { transform: rotate(-200deg); }
}

/* --- Moon / Sun Toggle --- */
.icon-anim-moon-sun {
  position: relative;
  width: 36px;
  height: 36px;
  animation: icon-moon-sun-spin 3s ease-in-out infinite;
}
.icon-anim-moon-sun::before {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent, #a78bfa);
  top: 7px;
  left: 7px;
  box-shadow: 0 0 8px rgba(167,139,250,0.6);
  animation: icon-moon-sun-morph 3s ease-in-out infinite;
}
.icon-anim-moon-sun::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg, #0d0d1a);
  top: 4px;
  left: 14px;
  animation: icon-moon-sun-mask 3s ease-in-out infinite;
}
@keyframes icon-moon-sun-spin {
  0%,40%  { transform: rotate(0deg); }
  50%     { transform: rotate(180deg); }
  90%,100%{ transform: rotate(360deg); }
}
@keyframes icon-moon-sun-morph {
  0%,40%  { box-shadow: 0 0 8px rgba(167,139,250,0.5); background: #a78bfa; }
  50%     { box-shadow: 0 0 14px rgba(251,191,36,0.8), 0 0 28px rgba(251,191,36,0.3); background: #fbbf24; }
  90%,100%{ box-shadow: 0 0 8px rgba(167,139,250,0.5); background: #a78bfa; }
}
@keyframes icon-moon-sun-mask {
  0%,40%  { opacity: 1; transform: translate(0,0); }
  50%     { opacity: 0; transform: translate(-8px, 0); }
  90%,100%{ opacity: 1; transform: translate(0,0); }
}

/* --- Typing Cursor --- */
.icon-anim-typing-cursor {
  position: relative;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-anim-typing-cursor::before {
  content: '...';
  font-family: monospace;
  font-size: 18px;
  font-weight: 700;
  color: var(--accent, #a78bfa);
  letter-spacing: 2px;
  clip-path: inset(0 100% 0 0);
  animation: icon-typing-reveal 2s steps(3, end) infinite;
}
.icon-anim-typing-cursor::after {
  content: '';
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 18px;
  background: var(--accent, #a78bfa);
  animation: icon-cursor-blink 0.8s step-end infinite;
}
@keyframes icon-typing-reveal {
  0%      { clip-path: inset(0 100% 0 0); }
  33%     { clip-path: inset(0 67% 0 0); }
  66%     { clip-path: inset(0 33% 0 0); }
  100%    { clip-path: inset(0 0% 0 0); }
}
@keyframes icon-cursor-blink {
  0%,100% { opacity: 1; }
  50%     { opacity: 0; }
}

/* --- Cloud Upload --- */
.icon-anim-cloud-upload {
  position: relative;
  width: 48px;
  height: 48px;
}
.icon-anim-cloud-upload::before,
.icon-anim-cloud-upload::after {
  display: none;
}
.icon-anim-cloud-upload .cu-svg {
  width: 100%; height: 100%;
  overflow: visible;
}
.icon-anim-cloud-upload .cu-cloud {
  opacity: 0.9;
}
.icon-anim-cloud-upload .cu-arrow {
  animation: icon-cloud-arrow 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes icon-cloud-arrow {
  0%   { transform: translateY(6px); opacity: 0; }
  20%  { opacity: 1; }
  70%  { transform: translateY(-4px); opacity: 1; }
  100% { transform: translateY(-12px); opacity: 0; }
}

/* --- Signal Bars --- */
.icon-anim-signal-bars {
  position: relative;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  padding-bottom: 4px;
}
.icon-anim-signal-bars::before,
.icon-anim-signal-bars::after {
  display: none;
}
.icon-anim-signal-bars .bar {
  width: 5px;
  border-radius: 2px 2px 0 0;
  background: var(--accent, #a78bfa);
  transform-origin: bottom;
  transform: scaleY(0);
  opacity: 0.35;
}
.icon-anim-signal-bars .bar:nth-child(1) { height: 8px;  animation: icon-bar-fill 0.4s cubic-bezier(0.34,1.56,0.64,1) 0.1s both; }
.icon-anim-signal-bars .bar:nth-child(2) { height: 13px; animation: icon-bar-fill 0.4s cubic-bezier(0.34,1.56,0.64,1) 0.25s both; }
.icon-anim-signal-bars .bar:nth-child(3) { height: 19px; animation: icon-bar-fill 0.4s cubic-bezier(0.34,1.56,0.64,1) 0.4s both; }
.icon-anim-signal-bars .bar:nth-child(4) { height: 26px; animation: icon-bar-fill 0.4s cubic-bezier(0.34,1.56,0.64,1) 0.55s both; }
.icon-anim-signal-bars .bar:nth-child(1),
.icon-anim-signal-bars .bar:nth-child(2),
.icon-anim-signal-bars .bar:nth-child(3) { opacity: 0.35; }
.icon-anim-signal-bars .bar:nth-child(4) { opacity: 1; }
@keyframes icon-bar-fill {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* --- Power Toggle --- */
.icon-anim-toggle-power {
  position: relative;
  width: 36px;
  height: 36px;
}
.icon-anim-toggle-power::before {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--accent, #a78bfa);
  border-right-color: var(--accent, #a78bfa);
  border-bottom-color: var(--accent, #a78bfa);
  top: 7px;
  left: 7px;
  animation: icon-power-arc 0.7s cubic-bezier(0.22,1,0.36,1) 0.1s both;
  box-shadow: 0 0 8px rgba(167,139,250,0.5);
}
.icon-anim-toggle-power::after {
  content: '';
  position: absolute;
  width: 3px;
  height: 10px;
  background: var(--accent, #a78bfa);
  border-radius: 2px;
  top: 7px;
  left: 16px;
  animation: icon-power-line 0.35s cubic-bezier(0.22,1,0.36,1) both;
  box-shadow: 0 0 6px rgba(167,139,250,0.6);
}
@keyframes icon-power-arc {
  0%   { clip-path: inset(0 0 50% 50%); opacity: 0; transform: rotate(-90deg); }
  40%  { opacity: 1; }
  100% { clip-path: inset(0 0 0 0); opacity: 1; transform: rotate(0deg); }
}
@keyframes icon-power-line {
  from { transform: scaleY(0); opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}

/* --- equalizer --- */
.icon-anim-equalizer {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  height: 40px;
}
.icon-anim-equalizer .bar {
  width: 6px;
  border-radius: 3px 3px 0 0;
  background: var(--accent);
  animation: icon-eq-bar 1.2s ease-in-out infinite;
}
.icon-anim-equalizer .bar:nth-child(1) { animation-duration: 0.9s; }
.icon-anim-equalizer .bar:nth-child(2) { animation-duration: 1.1s; animation-delay: 0.1s; }
.icon-anim-equalizer .bar:nth-child(3) { animation-duration: 0.7s; animation-delay: 0.2s; }
.icon-anim-equalizer .bar:nth-child(4) { animation-duration: 1.3s; animation-delay: 0.05s; }
.icon-anim-equalizer .bar:nth-child(5) { animation-duration: 0.85s; animation-delay: 0.15s; }
@keyframes icon-eq-bar {
  0%,100% { height: 8px; }
  50%     { height: 30px; }
}

/* --- neon-flicker --- */
.icon-anim-neon-flicker {
  color: var(--accent);
  filter: drop-shadow(0 0 4px currentColor);
  animation: icon-neon-flicker 3s steps(1) infinite;
}
@keyframes icon-neon-flicker {
  0%,92%,94%,96%,100% { opacity: 1; filter: drop-shadow(0 0 8px currentColor) drop-shadow(0 0 20px currentColor); }
  93%,95% { opacity: 0.3; filter: none; }
}

/* --- orbit-dot --- */
.icon-anim-orbit-dot svg {
  overflow: visible;
}
.icon-anim-orbit-dot .icon-anim__orbit {
  transform-origin: 40px 40px;
  animation: icon-orbit 2s linear infinite;
}
@keyframes icon-orbit {
  from { transform: rotate(0deg) translateY(-22px); }
  to   { transform: rotate(360deg) translateY(-22px); }
}

/* --- pixel-build --- */
.icon-anim-pixel-build {
  display: grid;
  grid-template-columns: repeat(3, 12px);
  grid-template-rows: repeat(3, 12px);
  gap: 2px;
  justify-content: center;
  align-content: center;
}
.icon-anim-pixel-build .px {
  display: block;
  width: 100%; height: 100%;
  border-radius: 2px;
  background: var(--accent);
  animation: icon-pixel-pop 2.4s ease-in-out infinite;
}
.icon-anim-pixel-build .px:nth-child(1)  { animation-delay: 0.0s; }
.icon-anim-pixel-build .px:nth-child(2)  { animation-delay: 0.3s; }
.icon-anim-pixel-build .px:nth-child(3)  { animation-delay: 0.6s; }
.icon-anim-pixel-build .px:nth-child(4)  { animation-delay: 0.9s; }
.icon-anim-pixel-build .px:nth-child(5)  { animation-delay: 1.2s; }
.icon-anim-pixel-build .px:nth-child(6)  { animation-delay: 1.5s; }
.icon-anim-pixel-build .px:nth-child(7)  { animation-delay: 1.8s; }
.icon-anim-pixel-build .px:nth-child(8)  { animation-delay: 2.1s; }
.icon-anim-pixel-build .px:nth-child(9)  { animation-delay: 0.15s; }
@keyframes icon-pixel-pop {
  0%, 8%   { opacity: 0.2; transform: scale(0.7); }
  25%, 55% { opacity: 1;   transform: scale(1); }
  75%,100% { opacity: 0.2; transform: scale(0.7); }
}

/* --- weather-morph --- */
.icon-anim-weather-morph .icon-anim__sun {
  animation: icon-weather-sun 3s ease-in-out infinite;
  transform-origin: 40px 40px;
}
.icon-anim-weather-morph .icon-anim__cloud {
  animation: icon-weather-cloud 3s ease-in-out infinite;
}
@keyframes icon-weather-sun {
  0%,40%  { opacity: 1; transform: scale(1) translateX(0); }
  70%,100%{ opacity: 0; transform: scale(0.6) translateX(-8px); }
}
@keyframes icon-weather-cloud {
  0%,40%  { opacity: 0; transform: translateX(8px); }
  70%,100%{ opacity: 1; transform: translateX(0); }
}

/* --- fingerprint --- */
.icon-anim-fingerprint .fp-line {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: icon-fp-draw 1s ease both;
}
.icon-anim-fingerprint .fp-line--1 { animation-delay: 0s; }
.icon-anim-fingerprint .fp-line--2 { animation-delay: 0.2s; }
.icon-anim-fingerprint .fp-line--3 { animation-delay: 0.4s; }
@keyframes icon-fp-draw {
  from { stroke-dashoffset: 60; opacity: 0.3; }
  to   { stroke-dashoffset: 0;  opacity: 1; }
}

/* --- radio-wave --- */
.icon-anim-radio-wave .rw {
  transform-origin: 40px 40px;
  animation: icon-rw-pulse 1.8s ease-out infinite;
}
.icon-anim-radio-wave .rw--1 { animation-delay: 0s; }
.icon-anim-radio-wave .rw--2 { animation-delay: 0.4s; }
.icon-anim-radio-wave .rw--3 { animation-delay: 0.8s; }
@keyframes icon-rw-pulse {
  from { opacity: 1; transform: scale(0.6); }
  to   { opacity: 0; transform: scale(1.4); }
}

/* --- gear-spin --- */
.icon-anim-gear-spin .gear-big {
  transform-origin: 34px 40px;
  animation: icon-gear-big 3s linear infinite;
}
.icon-anim-gear-spin .gear-small {
  transform-origin: 54px 40px;
  animation: icon-gear-small 2s linear infinite reverse;
}
@keyframes icon-gear-big   { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes icon-gear-small { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* --- liquid-fill-icon --- */
.icon-anim-liquid-fill-icon .liq-fill {
  animation: icon-liq-rise 2.5s ease-in-out infinite alternate;
  transform-origin: bottom;
  rx: 0;
}
@keyframes icon-liq-rise {
  from { y: 52; height: 14; opacity: 0.35; }
  to   { y: 22; height: 44; opacity: 0.7; }
}

/* --- confetti-burst --- */
.icon-anim-confetti-burst .cb {
  transform-origin: 40px 40px;
  animation: icon-confetti 0.7s cubic-bezier(0.22,1,0.36,1) both;
}
.icon-anim-confetti-burst .cb--1 { animation-delay: 0s;    --angle: 0deg;   --dist: 22px; }
.icon-anim-confetti-burst .cb--2 { animation-delay: 0.05s; --angle: 60deg;  --dist: 20px; }
.icon-anim-confetti-burst .cb--3 { animation-delay: 0.1s;  --angle: 120deg; --dist: 24px; }
.icon-anim-confetti-burst .cb--4 { animation-delay: 0.08s; --angle: 180deg; --dist: 21px; }
.icon-anim-confetti-burst .cb--5 { animation-delay: 0.12s; --angle: 240deg; --dist: 23px; }
.icon-anim-confetti-burst .cb--6 { animation-delay: 0.04s; --angle: 300deg; --dist: 20px; }
@keyframes icon-confetti {
  from { opacity: 0; transform: rotate(var(--angle)) translateY(0); }
  60%  { opacity: 1; transform: rotate(var(--angle)) translateY(calc(var(--dist) * -1)); }
  100% { opacity: 0.6; transform: rotate(var(--angle)) translateY(calc(var(--dist) * -0.8)); }
}

/* --- morph-shapes --- */
.icon-anim-morph-shapes .icon-anim__shape {
  width: 40px; height: 40px;
  background: var(--accent);
  animation: icon-morph-shape 3s ease-in-out infinite;
  transform-origin: center;
}
@keyframes icon-morph-shape {
  0%   { border-radius: 4px; transform: rotate(0deg); }
  25%  { border-radius: 50%; transform: rotate(90deg); }
  50%  { border-radius: 0 50% 0 50%; transform: rotate(180deg) scale(1.1); }
  75%  { border-radius: 50% 0 50% 0; transform: rotate(270deg) scale(0.9); }
  100% { border-radius: 4px; transform: rotate(360deg); }
}

/* --- electric-spark --- */
.icon-anim-electric-spark .icon-anim__bolt {
  display: inline-block;
  font-style: normal;
  animation: icon-electric 0.1s steps(1) infinite;
  transform-origin: center;
}
@keyframes icon-electric {
  0%   { transform: translate(0,0);       color: var(--accent); filter: brightness(1); }
  10%  { transform: translate(-3px, 2px); color: #fbbf24; filter: brightness(2); }
  20%  { transform: translate(3px, -2px); color: #60a5fa; filter: brightness(1.5); }
  30%  { transform: translate(-2px, -3px); color: #f0f; filter: brightness(2.5); }
  40%  { transform: translate(0, 0);      color: var(--accent); filter: brightness(1); }
  50%  { transform: translate(2px, 2px);  color: #fbbf24; filter: brightness(2); }
  60%  { transform: translate(-3px, 0);   color: #60a5fa; filter: brightness(1.5); }
  70%  { transform: translate(0, 0);      color: var(--accent); filter: brightness(1); }
  80%  { transform: translate(0, 0);      color: var(--accent); filter: brightness(1); }
  90%  { transform: translate(0, 0);      color: var(--accent); filter: brightness(1); }
  100% { transform: translate(0, 0);      color: var(--accent); filter: brightness(1); }
}

/* --- fill-up --- */
.icon-anim-fill-up {
  position: relative;
  overflow: visible;
}
.icon-anim-fill-up .icon-anim__vessel {
  position: relative;
  width: 28px; height: 48px;
  border: 3px solid var(--accent);
  border-radius: 3px 3px 6px 6px;
  overflow: hidden;
}
.icon-anim-fill-up .icon-anim__vessel::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: var(--accent);
  opacity: 0.7;
  animation: icon-fill-rise 2.5s ease-in-out infinite alternate;
}
.icon-anim-fill-up .icon-anim__vessel::after {
  content: '';
  position: absolute;
  top: -8px; left: 50%;
  transform: translateX(-50%);
  width: 10px; height: 8px;
  border: 3px solid var(--accent);
  border-bottom: none;
  border-radius: 3px 3px 0 0;
}
@keyframes icon-fill-rise {
  from { height: 5%; }
  to   { height: 90%; }
}

/* --- orbit-icon --- */
.icon-anim-orbit-icon {
  position: relative;
  width: 60px; height: 60px;
}
.icon-anim-orbit-icon .icon-anim__core {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.4rem;
  line-height: 1;
}
.icon-anim-orbit-icon .icon-anim__dot {
  position: absolute;
  top: 50%; left: 50%;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  margin: -4px 0 0 -4px;
  transform-origin: 0 0;
  animation: icon-orbit 2s linear infinite;
}
.icon-anim-orbit-icon .icon-anim__dot--1 {
  animation-duration: 2s;
  animation-delay: 0s;
  --orbit-r: 26px;
  background: var(--accent);
}
.icon-anim-orbit-icon .icon-anim__dot--2 {
  animation-duration: 3s;
  animation-delay: -1s;
  --orbit-r: 22px;
  background: #ec4899;
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
}
.icon-anim-orbit-icon .icon-anim__dot--3 {
  animation-duration: 2.5s;
  animation-delay: -0.5s;
  --orbit-r: 20px;
  background: #22c55e;
  width: 5px; height: 5px;
  margin: -2.5px 0 0 -2.5px;
}
@keyframes icon-orbit {
  from { transform: rotate(0deg) translateX(var(--orbit-r, 24px)) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(var(--orbit-r, 24px)) rotate(-360deg); }
}

/* ============================================================
   power-glow
   ============================================================ */
.icon-anim-power-glow {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.icon-anim-power-glow .icon-anim__icon {
  font-size: 2rem;
  display: inline-block;
  color: var(--fg-muted, #888);
  animation: icon-power-on 1.2s cubic-bezier(0.22,1,0.36,1) forwards,
             icon-power-breathe 2s ease-in-out 1.3s infinite;
}
.icon-anim-power-glow .icon-anim__ring {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #22c55e;
  opacity: 0;
  animation: icon-power-ring 0.6s ease-out 0.8s both;
}
@keyframes icon-power-on {
  0%   { color: var(--fg-muted, #888); filter: drop-shadow(0 0 0px transparent); }
  60%  { color: #22c55e; filter: drop-shadow(0 0 12px #22c55e); }
  100% { color: #22c55e; filter: drop-shadow(0 0 6px #22c55e); }
}
@keyframes icon-power-breathe {
  0%, 100% { filter: drop-shadow(0 0 4px #22c55e); }
  50%       { filter: drop-shadow(0 0 12px #22c55e); }
}
@keyframes icon-power-ring {
  0%   { opacity: 0.9; transform: scale(0.8); }
  100% { opacity: 0;   transform: scale(1.8); }
}

/* ============================================================
   loading-to-check
   ============================================================ */
.icon-anim-loading-to-check {
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-anim-loading-to-check .icon-anim__ring {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid var(--border, #e5e7eb);
  border-top-color: var(--accent, #6366f1);
  position: relative;
  animation: icon-ltc-spin 1.5s linear 0s 3,
             icon-ltc-morph 0.4s ease-in-out 4.5s forwards;
}
.icon-anim-loading-to-check .icon-anim__ring::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 10px;
  border-left: 3px solid var(--accent, #6366f1);
  border-bottom: 3px solid var(--accent, #6366f1);
  transform: translate(-50%, -60%) rotate(-45deg) scale(0);
  opacity: 0;
  animation: icon-ltc-check 0.4s cubic-bezier(0.22,1,0.36,1) 5.0s forwards;
}
@keyframes icon-ltc-spin {
  to { transform: rotate(360deg); }
}
@keyframes icon-ltc-morph {
  0%   { border-radius: 50%; border-color: var(--accent, #6366f1); }
  50%  { border-radius: 8px; border-color: #22c55e; transform: rotate(360deg); }
  100% { border-radius: 8px; border-color: #22c55e; transform: rotate(360deg); }
}
@keyframes icon-ltc-check {
  0%   { opacity: 0; transform: translate(-50%, -60%) rotate(-45deg) scale(0); }
  100% { opacity: 1; transform: translate(-50%, -60%) rotate(-45deg) scale(1); }
}

/* ============================================================
   heart-fill
   ============================================================ */
.icon-anim-heart-fill {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.icon-anim-heart-fill .icon-anim__heart-bg {
  font-size: 2.5rem;
  color: var(--fg-muted, #ccc);
  position: absolute;
  user-select: none;
}
.icon-anim-heart-fill .icon-anim__heart-fg {
  font-size: 2.5rem;
  color: #ef4444;
  position: absolute;
  user-select: none;
  clip-path: inset(100% 0 0 0);
  animation: icon-heart-fill 0.7s cubic-bezier(0.22,1,0.36,1) 0.3s forwards,
             icon-heart-pulse 0.25s ease-out 1.1s;
}
@keyframes icon-heart-fill {
  0%   { clip-path: inset(100% 0 0 0); }
  100% { clip-path: inset(0% 0 0 0); }
}
@keyframes icon-heart-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* ============================================================
   wifi-connect
   ============================================================ */
.icon-anim-wifi-connect {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  padding-bottom: 4px;
  height: 48px;
}
.icon-anim-wifi-connect .icon-anim__bar {
  width: 8px;
  border-radius: 2px 2px 0 0;
  background: var(--accent, #6366f1);
  transform: scaleY(0);
  transform-origin: bottom center;
  opacity: 0;
}
.icon-anim-wifi-connect .icon-anim__bar--1 { height: 12px; animation: icon-wifi-bar 0.3s cubic-bezier(0.34,1.56,0.64,1) 0.0s forwards; }
.icon-anim-wifi-connect .icon-anim__bar--2 { height: 22px; animation: icon-wifi-bar 0.3s cubic-bezier(0.34,1.56,0.64,1) 0.15s forwards; }
.icon-anim-wifi-connect .icon-anim__bar--3 { height: 32px; animation: icon-wifi-bar 0.3s cubic-bezier(0.34,1.56,0.64,1) 0.30s forwards; }
.icon-anim-wifi-connect .icon-anim__bar--4 { height: 42px; animation: icon-wifi-bar 0.3s cubic-bezier(0.34,1.56,0.64,1) 0.45s forwards; }
.icon-anim-wifi-connect .icon-anim__bar--1,
.icon-anim-wifi-connect .icon-anim__bar--2,
.icon-anim-wifi-connect .icon-anim__bar--3,
.icon-anim-wifi-connect .icon-anim__bar--4 {
  animation-fill-mode: forwards;
}
/* pulse after all bars appear */
.icon-anim-wifi-connect.icon-anim--running .icon-anim__bar {
  animation-name: icon-wifi-bar, icon-wifi-pulse;
  animation-duration: 0.3s, 0.4s;
  animation-delay: var(--bar-delay, 0s), 0.9s;
  animation-timing-function: cubic-bezier(0.34,1.56,0.64,1), ease-in-out;
  animation-fill-mode: forwards, none;
  animation-iteration-count: 1, 1;
}
@keyframes icon-wifi-bar {
  0%   { transform: scaleY(0); opacity: 0; }
  60%  { transform: scaleY(1.1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 1; }
}
@keyframes icon-wifi-pulse {
  0%   { filter: brightness(1); }
  50%  { filter: brightness(1.6) drop-shadow(0 0 4px var(--accent, #6366f1)); }
  100% { filter: brightness(1); }
}

/* ── trail-spin ─────────────────────────────────────────── */
.icon-anim-trail-spin {
  animation: icon-trail-spin 1.5s linear infinite;
  position:relative;
}
.icon-anim-trail-spin::before {
  content: attr(data-icon);
  position:absolute; inset:0;
  animation: icon-trail-fade 1.5s linear infinite;
  opacity:0.3;
  filter:blur(2px);
}
@keyframes icon-trail-spin {
  to { transform: rotate(360deg); }
}
@keyframes icon-trail-fade {
  0%   { transform: rotate(0deg); opacity:0.3; }
  100% { transform: rotate(360deg); opacity:0; }
}

/* ── elastic-zoom ───────────────────────────────────────── */
.icon-anim-elastic-zoom {
  animation: icon-elastic-zoom 0.8s cubic-bezier(0.34,1.8,0.64,1) both;
  display:inline-block;
}
@keyframes icon-elastic-zoom {
  0%   { transform: scale(0); opacity:0; }
  50%  { transform: scale(1.5); opacity:1; }
  75%  { transform: scale(0.85); }
  100% { transform: scale(1); }
}

/* ── checkmark-circle ── */
.icon-anim-checkmark-circle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  animation: icon-check-appear 0.3s cubic-bezier(0.34,1.56,0.64,1) 0.4s both;
}
.icon-anim-checkmark-circle::before {
  content: '';
  position: absolute;
  inset: -4px;
  border: 2px solid #22c55e;
  border-radius: 50%;
  animation: icon-circle-draw 0.5s ease-out both;
}
@keyframes icon-circle-draw {
  from { transform: scale(0) rotate(-90deg); opacity: 0; }
  60%  { transform: scale(1.15) rotate(5deg); opacity: 1; }
  to   { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes icon-check-appear {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* ── star-sparkle ── */
.icon-anim-star-sparkle {
  display: inline-block;
  animation: icon-star-pulse 2s ease-in-out infinite;
  position: relative;
}
@keyframes icon-star-pulse {
  0%,100% { filter: drop-shadow(0 0 0 rgba(251,191,36,0)); transform: scale(1); }
  50%     { filter: drop-shadow(0 0 6px rgba(251,191,36,0.8)); transform: scale(1.15); }
}

/* ── magnet-pull ── */
.icon-anim-magnet-pull {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  position: relative;
}
.icon-anim__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  animation: icon-magnet-attract 1.5s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 0.2s);
}
@keyframes icon-magnet-attract {
  0%,100% { transform: translateY(16px); opacity: 0; }
  60%     { transform: translateY(0); opacity: 1; }
  80%     { transform: translateY(-2px); opacity: 1; }
  90%     { transform: translateY(0); opacity: 0; }
}

/* ── pop-scale-icon ── */
.icon-anim-pop-scale-icon {
  display: inline-block;
  animation: icon-pop-scale 0.6s cubic-bezier(0.34,2.2,0.64,1) both;
}
@keyframes icon-pop-scale {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* ============================================================
   21st.dev インスパイア Icon 新着 (2026-06)
   ============================================================ */

/* --- send-whoosh ---
   Paper plane launches diagonally then a new one slides in. */
.icon-anim-send-whoosh {
  animation: icon-send-whoosh 1.8s cubic-bezier(0.4,0,0.2,1) var(--anim-delay) both;
}
.icon-anim-send-whoosh span {
  display: inline-block;
  animation: icon-send-whoosh-inner 1.8s cubic-bezier(0.4,0,0.2,1) var(--anim-delay) both;
}
@keyframes icon-send-whoosh {
  0%   { opacity:1; }
  35%  { opacity:0; transform: translate(30px,-30px) scale(0.5); }
  36%  { opacity:0; transform: translate(-20px,20px) scale(0.5); }
  70%  { opacity:1; transform: none; }
  100% { transform: none; }
}
@keyframes icon-send-whoosh-inner {
  0%,36% { transform: rotate(-45deg); }
  70%,100%{ transform: rotate(0deg); }
}

/* --- ai-sparkle ---
   Stars appear around an icon in sequence (AI magic effect). */
.icon-anim-ai-sparkle {
  position: relative; display: inline-grid; place-items: center;
  animation: icon-ai-main 0.5s cubic-bezier(0.34,1.56,0.64,1) var(--anim-delay) both;
}
.icon-anim-ai-sparkle span { display: inline-block; }
.icon-anim-ai-sparkle::before,
.icon-anim-ai-sparkle::after {
  content: '✦';
  position: absolute;
  font-size: 0.5em;
  color: var(--accent);
  animation: icon-sparkle-orbit 2s ease-in-out infinite;
}
.icon-anim-ai-sparkle::before { top: -4px; right: -4px; animation-delay: 0s; }
.icon-anim-ai-sparkle::after  { bottom: -4px; left: -4px; animation-delay: 0.6s; font-size: 0.4em; }
@keyframes icon-ai-main {
  0%  { transform: scale(0) rotate(-30deg); opacity:0; }
  70% { transform: scale(1.2) rotate(5deg); }
  100%{ transform: scale(1) rotate(0deg); opacity:1; }
}
@keyframes icon-sparkle-orbit {
  0%,100% { opacity:0; transform: scale(0.5); }
  50%     { opacity:1; transform: scale(1.3) rotate(90deg); }
}

/* --- battery-charge ---
   Battery fills up with animated charge indicator. */
.icon-anim-battery-charge {
  display: inline-flex; align-items: center;
  animation: icon-batt-in 0.4s ease var(--anim-delay) both;
}
.icon-anim-battery-charge .icon-anim__batt-body {
  width: 32px; height: 16px;
  border: 2px solid currentColor; border-radius: 3px;
  position: relative; overflow: hidden;
  margin-right: 2px;
}
.icon-anim-battery-charge .icon-anim__batt-fill {
  position: absolute; left:0; top:0; bottom:0;
  background: #10b981;
  border-radius: 1px;
  animation: icon-batt-fill 2s cubic-bezier(0.4,0,0.2,1) var(--anim-delay) forwards;
}
.icon-anim-battery-charge .icon-anim__batt-tip {
  width: 4px; height: 8px;
  background: currentColor; border-radius: 0 2px 2px 0;
}
.icon-anim-battery-charge .icon-anim__batt-bolt {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 0.6em; color: #fff;
  animation: icon-batt-bolt 1.2s ease-in-out infinite;
}
@keyframes icon-batt-in {
  from { opacity:0; transform: scale(0.7); }
  to   { opacity:1; transform: none; }
}
@keyframes icon-batt-fill {
  from { width: 15%; }
  to   { width: 85%; }
}
@keyframes icon-batt-bolt {
  0%,100% { opacity:1; }
  50%     { opacity:0.4; }
}

/* --- bell-ring ---
   Bell swings and emits notification dots. */
.icon-anim-bell-ring {
  position: relative; display: inline-grid; place-items: center;
}
.icon-anim-bell-ring span {
  display: inline-block;
  transform-origin: top center;
  animation: icon-bell-swing 0.6s cubic-bezier(0.34,1.56,0.64,1) var(--anim-delay) both,
             icon-bell-idle 3s ease-in-out calc(var(--anim-delay) + 0.6s) infinite;
}
.icon-anim-bell-ring::before {
  content: '';
  position: absolute; top: -3px; right: -2px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #ef4444;
  animation: icon-bell-dot 0.4s cubic-bezier(0.34,1.56,0.64,1) calc(var(--anim-delay) + 0.4s) both;
}
@keyframes icon-bell-swing {
  0%  { transform: rotate(0deg); }
  20% { transform: rotate(18deg); }
  40% { transform: rotate(-14deg); }
  60% { transform: rotate(10deg); }
  80% { transform: rotate(-6deg); }
  100%{ transform: rotate(0deg); }
}
@keyframes icon-bell-idle {
  0%,90%,100%{ transform: rotate(0deg); }
  93% { transform: rotate(8deg); }
  96% { transform: rotate(-6deg); }
}
@keyframes icon-bell-dot {
  from { transform: scale(0); opacity:0; }
  to   { transform: scale(1); opacity:1; }
}