/* WP Gacha Simulator - Premium Animation Styles */

/* Elegant Animation (Envelope) - Luxury Edition */
.wgs-envelope {
    width: 250px;
    height: 150px;
    margin: 0 auto;
    position: relative;
    transform-style: preserve-3d;
    animation: wgs-envelope-float 3s ease-in-out infinite;
}

@keyframes wgs-envelope-float {
    0%, 100% { 
        transform: translateY(0) rotateX(0) scale(1); 
        filter: drop-shadow(0 10px 20px rgba(255,215,0,0.3));
    }
    50% { 
        transform: translateY(-20px) rotateX(5deg) scale(1.05); 
        filter: drop-shadow(0 20px 40px rgba(255,215,0,0.5));
    }
}

.wgs-envelope-body {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FF6347 100%);
    border-radius: 15px;
    position: relative;
    box-shadow: 0 15px 40px rgba(255,165,0,0.4), inset 0 2px 10px rgba(255,255,255,0.5);
}

.wgs-envelope-body::after {
    content: '✉️';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3em;
    opacity: 0.3;
}

.wgs-envelope-flap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 75px;
    background: linear-gradient(135deg, #FFE4B5 0%, #FFD700 50%, #FFA500 100%);
    transform-origin: top;
    border-radius: 15px 15px 0 0;
    transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.wgs-envelope.opening .wgs-envelope-flap {
    transform: rotateX(-180deg);
}

.wgs-envelope-letter {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 120px;
    background: linear-gradient(145deg, #ffffff, #f0f0f0);
    border-radius: 10px;
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.wgs-envelope.opening .wgs-envelope-letter {
    opacity: 1;
    transform: translateX(-50%) translateY(-80px) rotate(5deg);
}

/* Premium Light Particles */
.wgs-particles {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    width: 400px;
    height: 400px;
}

.wgs-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    border-radius: 50%;
    opacity: 0;
    box-shadow: 0 0 10px rgba(255,215,0,0.8);
}

.wgs-particle.animate {
    animation: wgs-particle-burst 2.5s ease-out forwards;
}

@keyframes wgs-particle-burst {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(0);
        filter: blur(0);
    }
    50% {
        opacity: 1;
        transform: translate(var(--x), var(--y)) scale(1.5);
        filter: blur(0);
    }
    100% {
        opacity: 0;
        transform: translate(calc(var(--x) * 3), calc(var(--y) * 3)) scale(0.5);
        filter: blur(2px);
    }
}

/* Game Animation (Treasure Chest) - Epic Edition */
.wgs-chest {
    width: 280px;
    height: 200px;
    margin: 0 auto;
    position: relative;
    transform-style: preserve-3d;
    animation: wgs-chest-idle 4s ease-in-out infinite;
}

@keyframes wgs-chest-idle {
    0%, 100% { transform: scale(1) translateY(0); }
    25% { transform: scale(1.02) translateY(-5px); }
    75% { transform: scale(0.98) translateY(3px); }
}

.wgs-chest-body {
    width: 100%;
    height: 140px;
    background: linear-gradient(135deg, #8B4513 0%, #D2691E 25%, #FFD700 50%, #D2691E 75%, #8B4513 100%);
    border-radius: 15px;
    position: relative;
    box-shadow: 0 20px 50px rgba(139,69,19,0.5), inset 0 -5px 20px rgba(0,0,0,0.3);
}

.wgs-chest-body::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 40px;
    background: radial-gradient(ellipse, #FFD700 0%, #FFA500 50%, #FF8C00 100%);
    border-radius: 10px;
    box-shadow: 0 0 30px rgba(255,215,0,0.8), inset 0 0 10px rgba(255,255,255,0.5);
}

.wgs-chest-body::after {
    content: '🔒';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2em;
    filter: drop-shadow(0 0 10px rgba(0,0,0,0.5));
}

.wgs-chest-lid {
    position: absolute;
    top: -30px;
    left: 0;
    width: 100%;
    height: 60px;
    background: linear-gradient(135deg, #A0522D 0%, #CD853F 25%, #DEB887 50%, #CD853F 75%, #A0522D 100%);
    border-radius: 20px 20px 10px 10px;
    transform-origin: bottom left;
    transition: transform 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: 0 -10px 30px rgba(160,82,45,0.4), inset 0 2px 10px rgba(255,255,255,0.3);
}

.wgs-chest.opening .wgs-chest-lid {
    transform: rotateZ(-120deg);
}

.wgs-chest-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255,215,0,0.9) 0%, rgba(255,165,0,0.6) 30%, transparent 70%);
    opacity: 0;
    pointer-events: none;
    filter: blur(20px);
}

.wgs-chest.opening .wgs-chest-glow {
    animation: wgs-epic-glow 2s ease-out;
}

@keyframes wgs-epic-glow {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
        filter: blur(20px);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
        filter: blur(10px);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2);
        filter: blur(40px);
    }
}

/* Capsule Toy Animation - Arcade Premium */
.wgs-capsule-machine {
    width: 300px;
    height: 400px;
    margin: 0 auto;
    position: relative;
    background: linear-gradient(135deg, #FF6B6B 0%, #4ECDC4 25%, #45B7D1 50%, #FF8E53 75%, #FE6B8B 100%);
    border-radius: 30px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3), inset 0 2px 20px rgba(255,255,255,0.3);
    overflow: visible;
}

.wgs-capsule-machine::before {
    content: '🎰';
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 3em;
    animation: wgs-icon-spin 3s linear infinite;
}

@keyframes wgs-icon-spin {
    0% { transform: translateX(-50%) rotate(0deg) scale(1); }
    50% { transform: translateX(-50%) rotate(180deg) scale(1.1); }
    100% { transform: translateX(-50%) rotate(360deg) scale(1); }
}

.wgs-capsule-dome {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 240px;
    height: 180px;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    border-radius: 120px 120px 15px 15px;
    border: 3px solid rgba(255,255,255,0.4);
    overflow: hidden;
    box-shadow: inset 0 0 30px rgba(255,255,255,0.2);
}

.wgs-capsules {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
}

.wgs-capsule {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3), inset 0 -2px 10px rgba(0,0,0,0.2);
    animation: wgs-capsule-dance 4s ease-in-out infinite;
}

.wgs-capsule:nth-child(1) {
    background: linear-gradient(135deg, #FF6B6B, #FF8E53);
    left: 20%;
    bottom: 10%;
    animation-delay: 0s;
}

.wgs-capsule:nth-child(2) {
    background: linear-gradient(135deg, #4ECDC4, #45B7D1);
    left: 50%;
    bottom: 20%;
    animation-delay: 0.5s;
}

.wgs-capsule:nth-child(3) {
    background: linear-gradient(135deg, #FFD93D, #FFA500);
    left: 70%;
    bottom: 15%;
    animation-delay: 1s;
}

.wgs-capsule:nth-child(4) {
    background: linear-gradient(135deg, #6C63FF, #B44BFF);
    left: 30%;
    bottom: 35%;
    animation-delay: 1.5s;
}

.wgs-capsule:nth-child(5) {
    background: linear-gradient(135deg, #2ECC71, #27AE60);
    left: 60%;
    bottom: 40%;
    animation-delay: 2s;
}

@keyframes wgs-capsule-dance {
    0%, 100% {
        transform: translateY(0) rotate(0deg) scale(1);
    }
    25% {
        transform: translateY(-15px) rotate(90deg) scale(1.1);
    }
    50% {
        transform: translateY(10px) rotate(180deg) scale(0.9);
    }
    75% {
        transform: translateY(-8px) rotate(270deg) scale(1.05);
    }
}

.wgs-capsule-handle {
    position: absolute;
    bottom: 120px;
    right: 25px;
    width: 80px;
    height: 80px;
    background: linear-gradient(145deg, #ffffff, #e0e0e0);
    border-radius: 50%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3), inset 0 -2px 10px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wgs-capsule-handle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #FF6B6B 0%, #FE6B8B 100%);
    border-radius: 50%;
    box-shadow: inset 0 2px 10px rgba(255,255,255,0.5);
}

.wgs-capsule-handle::after {
    content: '🎯';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5em;
}

.wgs-capsule-handle:hover {
    transform: scale(1.1);
    box-shadow: 0 15px 40px rgba(0,0,0,0.4);
}

.wgs-capsule-handle.turning {
    animation: wgs-handle-spin 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes wgs-handle-spin {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.1); }
    100% { transform: rotate(720deg) scale(1); }
}

.wgs-capsule-output {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 80px;
    background: rgba(0,0,0,0.3);
    border-radius: 15px;
    box-shadow: inset 0 5px 15px rgba(0,0,0,0.5);
}

.wgs-capsule-prize {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wgs-capsule-prize.show {
    opacity: 1;
    animation: wgs-prize-emerge 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes wgs-prize-emerge {
    0% {
        transform: translateX(-50%) translateY(-300px) rotate(0deg) scale(0);
        opacity: 0;
    }
    50% {
        transform: translateX(-50%) translateY(-50px) rotate(360deg) scale(1.2);
        opacity: 1;
    }
    100% {
        transform: translateX(-50%) translateY(0) rotate(720deg) scale(1);
        opacity: 1;
    }
}

/* Premium Rarity Effects */
.wgs-rarity-effect {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 100;
}

.wgs-rarity-effect.UR {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, 
        rgba(255,0,255,0.8) 0%, 
        rgba(0,255,255,0.6) 20%, 
        rgba(255,215,0,0.4) 40%, 
        rgba(255,20,147,0.2) 60%, 
        transparent 80%);
    animation: wgs-ur-explosion 3s ease-out;
    filter: blur(5px);
}

@keyframes wgs-ur-explosion {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0) rotate(0deg);
        filter: blur(20px);
    }
    30% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.8) rotate(180deg);
        filter: blur(0);
    }
    60% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2) rotate(360deg);
        filter: blur(5px);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2) rotate(720deg);
        filter: blur(20px);
    }
}

.wgs-rarity-effect.SSR {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, 
        rgba(255,215,0,0.9) 0%, 
        rgba(255,165,0,0.6) 30%, 
        rgba(255,140,0,0.3) 60%, 
        transparent 80%);
    animation: wgs-ssr-shine 2s ease-out;
}

@keyframes wgs-ssr-shine {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotate(180deg);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.5) rotate(360deg);
    }
}

.wgs-rarity-effect.SR {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, 
        rgba(192,192,192,0.8) 0%, 
        rgba(169,169,169,0.5) 40%, 
        transparent 70%);
    animation: wgs-sr-gleam 1.5s ease-out;
}

@keyframes wgs-sr-gleam {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.3);
    }
}

/* Epic Sparkle Animation */
.wgs-sparkle {
    position: absolute;
    width: 20px;
    height: 20px;
    opacity: 0;
}

.wgs-sparkle::before,
.wgs-sparkle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #FFD700, transparent);
    box-shadow: 0 0 10px rgba(255,215,0,0.8);
}

.wgs-sparkle::before {
    transform: translate(-50%, -50%) rotate(0deg);
}

.wgs-sparkle::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.wgs-sparkle.animate {
    animation: wgs-sparkle-burst 1.5s ease-out;
}

@keyframes wgs-sparkle-burst {
    0% {
        opacity: 0;
        transform: scale(0) rotate(0deg);
        filter: blur(5px);
    }
    30% {
        opacity: 1;
        transform: scale(0.8) rotate(90deg);
        filter: blur(0);
    }
    60% {
        opacity: 1;
        transform: scale(1.2) rotate(180deg);
        filter: blur(0);
    }
    100% {
        opacity: 0;
        transform: scale(0.5) rotate(360deg);
        filter: blur(10px);
    }
}

/* Rainbow Streak Effect for UR */
.wgs-rainbow-streak {
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255,0,0,0.8) 10%, 
        rgba(255,127,0,0.8) 20%, 
        rgba(255,255,0,0.8) 30%, 
        rgba(0,255,0,0.8) 40%, 
        rgba(0,0,255,0.8) 50%, 
        rgba(75,0,130,0.8) 60%, 
        rgba(148,0,211,0.8) 70%, 
        transparent 80%);
    animation: wgs-rainbow-sweep 2s ease-out;
    filter: blur(10px);
    mix-blend-mode: screen;
}

@keyframes wgs-rainbow-sweep {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Confetti Effect */
.wgs-confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    background: linear-gradient(135deg, var(--color1), var(--color2));
    opacity: 0;
    animation: wgs-confetti-fall 3s ease-out forwards;
}

@keyframes wgs-confetti-fall {
    0% {
        transform: translateY(-100px) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(400px) rotate(720deg);
        opacity: 0;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .wgs-envelope,
    .wgs-chest,
    .wgs-capsule-machine,
    .wgs-capsule,
    .wgs-particle,
    .wgs-sparkle,
    .wgs-rarity-effect {
        animation: none !important;
        transition: opacity 0.3s ease !important;
    }
    
    .wgs-envelope-flap,
    .wgs-chest-lid,
    .wgs-capsule-handle {
        transition: transform 0.3s ease !important;
    }
}