@layer animations {

/* ╔═══════════════════════════════════════════════════════════════════╗
     @KEYFRAMES — 集約 (Tier 3 Step 2)
     styles.css から切出。 cascade 順序: tokens → animations → styles → dark → light
   ╚═══════════════════════════════════════════════════════════════════╝ */

@keyframes tier-s-pulse-light-mini {
  0%, 100% {
    box-shadow:
      0 0 24px rgba(200,60,43,0.85),
      0 0 42px rgba(200,60,43,0.45),
      inset 0 1px 0 rgba(255,230,210,0.55),
      inset 0 -1px 0 rgba(60,10,5,0.40);
  }
  50% {
    box-shadow:
      0 0 36px var(--vermilion),
      0 0 62px var(--vermilion-bright-glow),
      inset 0 1px 0 rgba(255,230,210,0.75),
      inset 0 -1px 0 rgba(60,10,5,0.40);
  }
}

@keyframes tier-ss-glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(200,60,43,0.6), 0 0 45px var(--vermilion-soft-2),
                inset 0 1px 0 rgba(240,210,138,0.28), inset 0 -1px 0 var(--overlay-soft-2);
  }
  50% {
    box-shadow: 0 0 32px rgba(200,60,43,0.85), 0 0 65px var(--gold-bright-soft),
                inset 0 1px 0 var(--gold-bright-mid), inset 0 -1px 0 var(--overlay-soft-2);
  }
}

@keyframes tier-ss-shimmer {
  0%   { background-position: -250% center; }
  100% { background-position: 250% center; }
}

@keyframes tier-s-pulse {
  0%, 100% {
    box-shadow: 0 0 18px var(--vermilion-strong), 0 0 40px var(--vermilion-soft),
                inset 0 1px 0 rgba(255,130,110,0.20), inset 0 -1px 0 var(--overlay-soft-mid);
  }
  50% {
    box-shadow: 0 0 30px rgba(200,60,43,0.84), 0 0 60px var(--vermilion-bright-soft),
                inset 0 1px 0 rgba(255,130,110,0.38), inset 0 -1px 0 var(--overlay-soft-mid);
  }
}

@keyframes tier-ss-glow-light {
  0%, 100% { box-shadow: 0 0 12px var(--vermilion-mid), inset 0 1px 0 rgba(255,200,180,0.3); }
  50%       { box-shadow: 0 0 22px var(--vermilion-strong), inset 0 1px 0 rgba(255,200,180,0.5); }
}

@keyframes tier-s-pulse-light {
  0%, 100% {
    box-shadow:
      0 0 18px rgba(200,60,43,0.65),
      0 0 32px var(--c-vermilion-glow-soft),
      inset 0 1px 0 rgba(255,230,210,0.45),
      inset 0 -1px 0 rgba(60,10,5,0.35);
  }
  50% {
    box-shadow:
      0 0 28px rgba(200,60,43,0.95),
      0 0 50px var(--vermilion-bright-soft-mid),
      inset 0 1px 0 rgba(255,230,210,0.65),
      inset 0 -1px 0 rgba(60,10,5,0.35);
  }
}

@keyframes flashpulse {
  0%   { text-shadow: var(--hero-num-shadow); }
  50%  { text-shadow: 0 0 60px var(--vermilion-bright-strong), 0 0 100px var(--gold-bright-mid), 0 2px 0 var(--overlay-mid); }
  100% { text-shadow: var(--hero-num-shadow); }
}

@keyframes cmp-ratio-rainbow {
  0%   { background-color: hsl(  0, 80%, 55%); box-shadow: 0 0 9px hsla(  0, 90%, 60%, 0.55), inset 0 1px 0 var(--hover-mid); }
  17%  { background-color: hsl( 45, 90%, 55%); box-shadow: 0 0 9px hsla( 45, 90%, 60%, 0.55), inset 0 1px 0 var(--hover-mid); }
  33%  { background-color: hsl(120, 65%, 48%); box-shadow: 0 0 9px hsla(120, 75%, 55%, 0.55), inset 0 1px 0 var(--hover-mid); }
  50%  { background-color: hsl(180, 70%, 50%); box-shadow: 0 0 9px hsla(180, 80%, 55%, 0.55), inset 0 1px 0 var(--hover-mid); }
  67%  { background-color: hsl(220, 75%, 58%); box-shadow: 0 0 9px hsla(220, 85%, 62%, 0.55), inset 0 1px 0 var(--hover-mid); }
  83%  { background-color: hsl(285, 70%, 58%); box-shadow: 0 0 9px hsla(285, 80%, 62%, 0.55), inset 0 1px 0 var(--hover-mid); }
  100% { background-color: hsl(360, 80%, 55%); box-shadow: 0 0 9px hsla(360, 90%, 60%, 0.55), inset 0 1px 0 var(--hover-mid); }
}

@keyframes wwm-opt-loading-pulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

@keyframes tier-ss-shimmer-light {
  0%   { transform: translateX(-200%); }
  100% { transform: translateX(200%); }
}

@keyframes wwm-hint-bounce {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-8px); }
}

@keyframes wwm-hint-in {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-12px); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes wwm-hint-out {
  to { opacity: 0; transform: translateX(-50%) translateY(-8px); }
}

@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes wwm-banner-in {
  0%   { opacity: 0; transform: translateY(-100%); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes wwm-banner-glow {
  0%,100% { box-shadow: 0 0 0 rgba(232,81,58,0); }
  50%     { box-shadow: 0 2px 18px var(--vermilion-bright-mid); }
}

@keyframes wwm-banner-icon-pulse {
  0%,100% { transform: scale(1);   opacity: .8; }
  50%     { transform: scale(1.2); opacity: 1; }
}

@keyframes wwm-banner-btn-pulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.06); }
}

@keyframes wwm-banner-arrow-bounce {
  0%,100% { transform: translateX(0); }
  50%     { transform: translateX(5px); }
}

@keyframes wwm-tier-shake {
  0%, 100% { transform: translate(0, 0)   rotate(0deg); }
  20%      { transform: translate(-1px,-1px) rotate(-3deg); }
  40%      { transform: translate(1px, 0)  rotate(2deg); }
  60%      { transform: translate(-1px, 1px) rotate(-2deg); }
  80%      { transform: translate(1px, 0)  rotate(3deg); }
}

@keyframes wwm-tier-rainbow-glow {
  0%   { box-shadow: 0 0 14px rgba(255, 80, 80,.95), 0 0 30px rgba(255, 80, 80,.55), inset 0 0 8px var(--amber-glow); }
  16%  { box-shadow: 0 0 14px rgba(255,180, 60,.95), 0 0 30px rgba(255,180, 60,.55), inset 0 0 8px var(--amber-glow); }
  33%  { box-shadow: 0 0 14px rgba(255,240, 80,.95), 0 0 30px rgba(255,240, 80,.55), inset 0 0 8px var(--amber-glow); }
  50%  { box-shadow: 0 0 14px rgba( 80,255,120,.95), 0 0 30px rgba( 80,255,120,.55), inset 0 0 8px var(--amber-glow); }
  66%  { box-shadow: 0 0 14px rgba( 80,200,255,.95), 0 0 30px rgba( 80,200,255,.55), inset 0 0 8px var(--amber-glow); }
  83%  { box-shadow: 0 0 14px rgba(180, 80,255,.95), 0 0 30px rgba(180, 80,255,.55), inset 0 0 8px var(--amber-glow); }
  100% { box-shadow: 0 0 14px rgba(255, 80, 80,.95), 0 0 30px rgba(255, 80, 80,.55), inset 0 0 8px var(--amber-glow); }
}

} /* end @layer animations */