/**
 * WP Letter Gacha - 最高品質レアリティ演出
 * Version: 1.0.0
 * 女性向け最高級ガチャエフェクト
 */

/* ================================================================
   共通エフェクト設定
   ================================================================ */
.wlg-effect-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 10000;
}

/* ================================================================
   SR - スペシャルレア（銀色の優雅な輝き）
   ================================================================ */
.wlg-sr-effect {
    display: none;
}

.wlg-sr-effect.active {
    display: block;
    animation: srFadeIn 0.5s ease-out;
}

/* SR背景グラデーション */
.wlg-sr-background {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        circle at center,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(192, 192, 192, 0.6) 20%,
        rgba(220, 220, 220, 0.4) 40%,
        rgba(240, 240, 240, 0.2) 60%,
        transparent 80%
    );
    animation: srBackgroundPulse 2s ease-in-out;
}

/* SR光線エフェクト */
.wlg-sr-rays {
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    background: repeating-conic-gradient(
        from 0deg at center,
        transparent 0deg,
        rgba(255, 255, 255, 0.3) 1deg,
        transparent 2deg,
        transparent 10deg
    );
    animation: srRaysRotate 8s linear infinite;
}

/* SRシルバーパーティクル */
.wlg-sr-particles {
    position: absolute;
    width: 100%;
    height: 100%;
}

.wlg-sr-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: radial-gradient(
        circle,
        #ffffff 0%,
        #e0e0e0 40%,
        transparent 70%
    );
    border-radius: 50%;
    box-shadow: 
        0 0 10px rgba(255, 255, 255, 0.8),
        0 0 20px rgba(192, 192, 192, 0.6);
    animation: srParticleFloat 3s ease-out forwards;
}

/* SRキラキラエフェクト */
.wlg-sr-sparkles {
    position: absolute;
    width: 100%;
    height: 100%;
}

.wlg-sr-sparkle {
    position: absolute;
    color: #c0c0c0;
    font-size: 20px;
    animation: srSparkleShine 2s ease-out forwards;
    text-shadow: 0 0 10px rgba(192, 192, 192, 0.8);
}

/* SRアニメーション定義 */
@keyframes srFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes srBackgroundPulse {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0.8;
    }
}

@keyframes srRaysRotate {
    0% {
        transform: rotate(0deg);
        opacity: 0.5;
    }
    50% {
        opacity: 0.8;
    }
    100% {
        transform: rotate(360deg);
        opacity: 0.5;
    }
}

@keyframes srParticleFloat {
    0% {
        transform: translateY(100vh) scale(0);
        opacity: 0;
    }
    20% {
        transform: translateY(80vh) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(-100px) scale(0.5);
        opacity: 0;
    }
}

@keyframes srSparkleShine {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.5) rotate(180deg);
        opacity: 1;
    }
    100% {
        transform: scale(0.8) rotate(360deg);
        opacity: 0;
    }
}

/* ================================================================
   SSR - スーパースペシャルレア（黄金の豪華な輝き）
   ================================================================ */
.wlg-ssr-effect {
    display: none;
}

.wlg-ssr-effect.active {
    display: block;
    animation: ssrGoldFlash 0.8s ease-out;
}

/* SSR黄金背景 */
.wlg-ssr-background {
    position: absolute;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(
            circle at center,
            rgba(255, 215, 0, 0.9) 0%,
            rgba(255, 193, 37, 0.6) 25%,
            rgba(255, 223, 0, 0.4) 50%,
            rgba(255, 236, 139, 0.2) 75%,
            transparent 100%
        );
    animation: ssrGoldPulse 2.5s ease-in-out;
}

/* SSR光のバースト */
.wlg-ssr-burst {
    position: absolute;
    width: 300%;
    height: 300%;
    top: -100%;
    left: -100%;
    background: repeating-conic-gradient(
        from 0deg at center,
        transparent 0deg,
        rgba(255, 215, 0, 0.6) 0.5deg,
        transparent 1deg,
        transparent 5deg
    );
    animation: ssrBurstRotate 5s linear infinite;
}

/* SSRゴールドパーティクル */
.wlg-ssr-particles {
    position: absolute;
    width: 100%;
    height: 100%;
}

.wlg-ssr-particle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: radial-gradient(
        circle,
        #fff8dc 0%,
        #ffd700 30%,
        #ffed4e 60%,
        transparent 100%
    );
    border-radius: 50%;
    box-shadow: 
        0 0 15px #ffd700,
        0 0 30px rgba(255, 215, 0, 0.8),
        0 0 45px rgba(255, 215, 0, 0.6);
    animation: ssrParticleFall 2.5s ease-out forwards;
}

/* SSRスター演出 */
.wlg-ssr-stars {
    position: absolute;
    width: 100%;
    height: 100%;
}

.wlg-ssr-star {
    position: absolute;
    color: #ffd700;
    font-size: 30px;
    animation: ssrStarRotate 2s ease-out forwards;
    text-shadow: 
        0 0 20px #ffd700,
        0 0 40px rgba(255, 215, 0, 0.8);
}

/* SSR輝くリング */
.wlg-ssr-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    border: 3px solid #ffd700;
    border-radius: 50%;
    box-shadow: 
        0 0 30px #ffd700,
        inset 0 0 30px #ffd700;
    animation: ssrRingExpand 1.5s ease-out forwards;
}

/* SSRアニメーション定義 */
@keyframes ssrGoldFlash {
    0% {
        background-color: rgba(255, 255, 255, 0);
    }
    30% {
        background-color: rgba(255, 215, 0, 1);
    }
    100% {
        background-color: rgba(255, 255, 255, 0);
    }
}

@keyframes ssrGoldPulse {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    40% {
        transform: scale(1.2);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0.9;
    }
}

@keyframes ssrBurstRotate {
    0% {
        transform: rotate(0deg) scale(1);
        opacity: 0.8;
    }
    50% {
        transform: rotate(180deg) scale(1.1);
        opacity: 1;
    }
    100% {
        transform: rotate(360deg) scale(1);
        opacity: 0.8;
    }
}

@keyframes ssrParticleFall {
    0% {
        transform: translateY(-100px) translateX(0) scale(0);
        opacity: 0;
    }
    20% {
        transform: translateY(20vh) translateX(10px) scale(1.2);
        opacity: 1;
    }
    100% {
        transform: translateY(110vh) translateX(30px) scale(0.8);
        opacity: 0;
    }
}

@keyframes ssrStarRotate {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.5) rotate(180deg);
        opacity: 1;
    }
    100% {
        transform: scale(1) rotate(360deg);
        opacity: 0.5;
    }
}

@keyframes ssrRingExpand {
    0% {
        width: 50px;
        height: 50px;
        opacity: 1;
    }
    100% {
        width: 500px;
        height: 500px;
        opacity: 0;
    }
}

/* ================================================================
   UR - ウルトラレア（虹色の感動的な輝き）
   ================================================================ */
.wlg-ur-effect {
    display: none;
}

.wlg-ur-effect.active {
    display: block;
    animation: urMegaFlash 1s ease-out;
}

/* UR虹色オーロラ背景 */
.wlg-ur-background {
    position: absolute;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(
            45deg,
            rgba(255, 0, 150, 0.4),
            rgba(255, 0, 255, 0.4),
            rgba(150, 0, 255, 0.4),
            rgba(0, 150, 255, 0.4),
            rgba(0, 255, 255, 0.4),
            rgba(0, 255, 150, 0.4),
            rgba(150, 255, 0, 0.4),
            rgba(255, 255, 0, 0.4),
            rgba(255, 150, 0, 0.4),
            rgba(255, 0, 150, 0.4)
        );
    background-size: 400% 400%;
    animation: urAuroraFlow 3s ease-in-out infinite;
    filter: blur(20px);
}

/* URプリズム効果 */
.wlg-ur-prism {
    position: absolute;
    width: 100%;
    height: 100%;
    background: 
        conic-gradient(
            from 0deg at center,
            transparent,
            rgba(255, 0, 0, 0.3),
            rgba(255, 127, 0, 0.3),
            rgba(255, 255, 0, 0.3),
            rgba(0, 255, 0, 0.3),
            rgba(0, 0, 255, 0.3),
            rgba(75, 0, 130, 0.3),
            rgba(148, 0, 211, 0.3),
            transparent
        );
    animation: urPrismRotate 4s linear infinite;
}

/* UR虹色パーティクル */
.wlg-ur-particles {
    position: absolute;
    width: 100%;
    height: 100%;
}

.wlg-ur-particle {
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    animation: urParticleBurst 3s ease-out forwards;
}

/* URダイヤモンドエフェクト */
.wlg-ur-diamonds {
    position: absolute;
    width: 100%;
    height: 100%;
}

.wlg-ur-diamond {
    position: absolute;
    width: 20px;
    height: 20px;
    background: linear-gradient(
        45deg,
        #ff00ff,
        #00ffff,
        #ffff00,
        #ff00ff
    );
    transform: rotate(45deg);
    animation: urDiamondFloat 4s ease-in-out infinite;
    box-shadow: 
        0 0 30px rgba(255, 255, 255, 0.9),
        0 0 60px rgba(255, 0, 255, 0.6);
}

/* UR虹色スター */
.wlg-ur-stars {
    position: absolute;
    width: 100%;
    height: 100%;
}

.wlg-ur-star {
    position: absolute;
    font-size: 40px;
    background: linear-gradient(
        45deg,
        #ff0080,
        #ff8000,
        #ffff00,
        #00ff00,
        #0080ff,
        #8000ff
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: urStarBurst 2.5s ease-out forwards;
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.9));
}

/* UR中心の爆発 */
.wlg-ur-explosion {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0.8) 20%,
        transparent 70%
    );
    animation: urExplosion 2s ease-out forwards;
}

/* UR光の波紋 */
.wlg-ur-ripple {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    border: 3px solid;
    border-image: linear-gradient(
        45deg,
        #ff0080,
        #ff8000,
        #ffff00,
        #00ff00,
        #0080ff,
        #8000ff
    ) 1;
    border-radius: 50%;
    animation: urRippleExpand 2s ease-out infinite;
}

/* URアニメーション定義 */
@keyframes urMegaFlash {
    0% {
        background-color: rgba(255, 255, 255, 0);
    }
    20% {
        background-color: rgba(255, 255, 255, 1);
    }
    100% {
        background-color: rgba(255, 255, 255, 0);
    }
}

@keyframes urAuroraFlow {
    0% {
        background-position: 0% 50%;
        filter: blur(20px) hue-rotate(0deg);
    }
    50% {
        background-position: 100% 50%;
        filter: blur(20px) hue-rotate(180deg);
    }
    100% {
        background-position: 0% 50%;
        filter: blur(20px) hue-rotate(360deg);
    }
}

@keyframes urPrismRotate {
    0% {
        transform: rotate(0deg) scale(1);
        opacity: 0.6;
    }
    50% {
        transform: rotate(180deg) scale(1.2);
        opacity: 0.8;
    }
    100% {
        transform: rotate(360deg) scale(1);
        opacity: 0.6;
    }
}

@keyframes urParticleBurst {
    0% {
        transform: translate(0, 0) scale(0);
        opacity: 0;
    }
    20% {
        transform: translate(var(--x), var(--y)) scale(1.5);
        opacity: 1;
    }
    100% {
        transform: translate(calc(var(--x) * 3), calc(var(--y) * 3)) scale(0.5);
        opacity: 0;
    }
}

@keyframes urDiamondFloat {
    0%, 100% {
        transform: translateY(0) rotate(45deg) scale(1);
        opacity: 0.8;
    }
    25% {
        transform: translateY(-30px) rotate(90deg) scale(1.2);
        opacity: 1;
    }
    50% {
        transform: translateY(-50px) rotate(135deg) scale(1.1);
        opacity: 0.9;
    }
    75% {
        transform: translateY(-30px) rotate(180deg) scale(1.2);
        opacity: 1;
    }
}

@keyframes urStarBurst {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 0;
    }
    50% {
        transform: scale(2) rotate(180deg);
        opacity: 1;
    }
    100% {
        transform: scale(1.5) rotate(360deg);
        opacity: 0.7;
    }
}

@keyframes urExplosion {
    0% {
        width: 0;
        height: 0;
        opacity: 1;
    }
    100% {
        width: 800px;
        height: 800px;
        opacity: 0;
    }
}

@keyframes urRippleExpand {
    0% {
        width: 100px;
        height: 100px;
        opacity: 1;
    }
    100% {
        width: 600px;
        height: 600px;
        opacity: 0;
    }
}

/* ================================================================
   キラキラオーバーレイ（女性向け共通エフェクト）
   ================================================================ */
.wlg-sparkle-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 9998;
}

.wlg-sparkle {
    position: absolute;
    color: #fff;
    animation: sparkleFloat 4s ease-in-out infinite;
}

@keyframes sparkleFloat {
    0%, 100% {
        transform: translateY(0) scale(0);
        opacity: 0;
    }
    50% {
        transform: translateY(-20px) scale(1);
        opacity: 1;
    }
}

/* ハートエフェクト */
.wlg-heart {
    position: absolute;
    color: #ff69b4;
    font-size: 20px;
    animation: heartFloat 3s ease-out forwards;
}

@keyframes heartFloat {
    0% {
        transform: translateY(100vh) scale(0) rotate(0deg);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100px) scale(1) rotate(360deg);
        opacity: 0;
    }
}

/* フェアリーダスト */
.wlg-fairy-dust {
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, #fff, transparent);
    border-radius: 50%;
    animation: fairyDustFloat 5s ease-out infinite;
}

@keyframes fairyDustFloat {
    0% {
        transform: translate(0, 0) scale(0);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    100% {
        transform: translate(100px, -200px) scale(1);
        opacity: 0;
    }
}

/* ================================================================
   レスポンシブ対応
   ================================================================ */
@media (max-width: 768px) {
    .wlg-ur-star,
    .wlg-ssr-star {
        font-size: 24px;
    }
    
    .wlg-ur-diamond,
    .wlg-ssr-particle,
    .wlg-sr-particle {
        width: 10px;
        height: 10px;
    }
    
    @keyframes urRippleExpand {
        100% {
            width: 400px;
            height: 400px;
        }
    }
    
    @keyframes ssrRingExpand {
        100% {
            width: 350px;
            height: 350px;
        }
    }
}