Add scene fade transitions, gacha pull reveal, and modal/hover animations

Menu <-> combat scene loads now fade through black instead of hard-cutting,
gacha pulls reveal reward cards with a staggered stagger-in and a rarity
flash instead of a static text block, starter selection and root-credit
exchange modals fade+scale in/out instead of popping via display:none, and
menu/collection/gacha rows now transition on hover/select instead of
snapping. All new motion respects the existing reduced-motion setting.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_015hiJi3irEg1RegCXRaQDcu
This commit is contained in:
Claude
2026-07-08 06:52:58 +00:00
parent 131eedb626
commit 7d2d0a1152
7 changed files with 329 additions and 20 deletions
+31
View File
@@ -46,6 +46,37 @@
background-color: var(--kp-bg);
color: var(--kp-text);
font-size: 13px;
opacity: 1;
transition-property: opacity;
transition-duration: 220ms;
}
.combat-root.scene-fade-hidden {
opacity: 0;
}
.combat-root.reduced-motion {
transition-duration: 0ms;
}
.scene-fade-curtain {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgb(0, 0, 0);
opacity: 0;
transition-property: opacity;
transition-duration: 200ms;
}
.scene-fade-curtain.scene-fade-visible {
opacity: 1;
}
.reduced-motion .scene-fade-curtain {
transition-duration: 0ms;
}
.combat-status-bar {