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:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user