Complete toast rewrite — carbon copy of the CodePen with per-rarity colors
The entire toast system has been rebuilt from scratch to exactly match the standalone HTML animation demos we perfected from the Uenify CodePen. This is NOT a tweak — it's a full replacement of the CSS and HTML structure.
What's new:
- Exact CodePen DOM structure: circle (75x75 with sphere gradient + pulse rings) → banner-outer → banner (355px pill with shimmer sweep)
- Xbox logo → trophy swap: Xbox logo visible at idle inside the circle, fades out at 23% as the trophy SVG fades in and starts rotating (rotateY 3D flip). Trophy fades out at 92%, Xbox returns at 95%.
- Trophy SVGs: actual CodePen trophy images (full trophy + no-handles version for 3D depth during rotation), inlined as base64
- Both sounds: regular Xbox 360 chime for common/uncommon, rare Xbox One achievement chime for rare/epic/legendary/mythic — both inlined as base64
- All original keyframes: circle_grow_move, scale_circle_1, banner_animate, textSlide, rotate, shimmerSweep — exact CodePen timings, not approximations
Per-rarity colors (6 palettes via CSS custom properties):
| Rarity | Circle/Banner |
|---|---|
| Common | Steel blue |
| Uncommon | Emerald |
| Rare | Sky blue |
| Epic | Purple |
| Legendary | Gold |
| Mythic | Crimson |
Test all six from the browser console:
abAchievementTestToast('mythic')