/* ============ 转场 ============ */
.transition-overlay { position: fixed; inset: 0; z-index: 999; pointer-events: none; display: none; }
.transition-overlay.active { display: block; }
.transition-overlay .tear { position: absolute; inset: 0; background: var(--wu-red); display: none; }
.transition-overlay.to-wu .tear { display: block; }
.transition-overlay.to-wu .tear-1 { clip-path: polygon(0 0, 100% 0, 0 100%); animation: tearLeft 0.7s forwards; }
.transition-overlay.to-wu .tear-2 { clip-path: polygon(100% 0, 100% 100%, 0 100%); animation: tearRight 0.7s forwards 0.05s; }
@keyframes tearLeft {
  0% { transform: translateX(0) skewY(0); }
  50% { transform: translateX(0) skewY(0); }
  100% { transform: translateX(-100%) skewY(-15deg); }
}
@keyframes tearRight {
  0% { transform: translateX(0) skewY(0); }
  50% { transform: translateX(0) skewY(0); }
  100% { transform: translateX(100%) skewY(15deg); }
}

.transition-overlay .ripple {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  background: radial-gradient(circle, var(--wen-silver) 0%, var(--wen-blue) 50%, var(--wen-blue-dark) 100%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  display: none;
}
.transition-overlay.to-wen .ripple { display: block; animation: rippleExpand 0.9s forwards; }
@keyframes rippleExpand {
  0% { width: 0; height: 0; opacity: 1; }
  60% { width: 250vmax; height: 250vmax; opacity: 1; }
  100% { width: 250vmax; height: 250vmax; opacity: 0; }
}

#app > * { animation: elementEnter 0.6s cubic-bezier(0.4, 0, 0.2, 1) backwards; }
#app > *:nth-child(1) { animation-delay: 0.4s; }
#app > *:nth-child(2) { animation-delay: 0.5s; }
#app > *:nth-child(3) { animation-delay: 0.55s; }
#app > *:nth-child(4) { animation-delay: 0.6s; }
#app > *:nth-child(5) { animation-delay: 0.65s; }
#app > *:nth-child(6) { animation-delay: 0.7s; }
#app > *:nth-child(7) { animation-delay: 0.75s; }
@keyframes elementEnter {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}