/* ============================================
   LUXURY GRADIENT PATTERNS with SPARKLE ANIMATION
   使い方: class="navigation luxuary01" など
   ============================================ */

:root {
    /* Gold Variations */
    --luxuary01-gradient: linear-gradient(45deg, #8b6914, #cdaa3d, #e6cc00);
    --luxuary02-gradient: linear-gradient(45deg, #C5A059, #F7E7CE, #E8D1A7);
    --luxuary03-gradient: linear-gradient(45deg, #5d4b1f, #a28d44, #d4af37);
    --luxuary04-gradient: linear-gradient(45deg, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
    --luxuary05-gradient: linear-gradient(45deg, #b76e79, #e5b7b7, #df9c9d);
    --luxuary06-gradient: linear-gradient(45deg, #D1D1D1, #F5F5F5, #E2E2E2, #C0C0C0);
    
    /* Other Luxury Colors */
    --luxuary07-gradient: linear-gradient(45deg, #434343, #9a9a9a, #e0e0e0);
    --luxuary08-gradient: linear-gradient(45deg, #0f2027, #203a43, #2c5364);
    --luxuary09-gradient: linear-gradient(45deg, #4b0082, #800080, #ff00ff);
    --luxuary10-gradient: linear-gradient(45deg, #4b0000, #a52a2a, #ff4500);
}

/* ============================================
   キラキラドットアニメーション (左から右へ)
   ============================================ */

@keyframes sparkleMove {
    0% { transform: translateX(-100px); }
    100% { transform: translateX(100px); }
}

/* ============================================
   基本スタイル (navigationクラスに適用)
   ============================================ */

.luxuary01,
.luxuary02,
.luxuary03,
.luxuary04,
.luxuary05,
.luxuary06,
.luxuary07,
.luxuary08,
.luxuary09,
.luxuary10 {
    position: relative;
    overflow: hidden;
}

/* キラキラドットの共通スタイル */
.luxuary01::before,
.luxuary02::before,
.luxuary03::before,
.luxuary04::before,
.luxuary05::before,
.luxuary06::before,
.luxuary07::before,
.luxuary08::before,
.luxuary09::before,
.luxuary10::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100px;
    width: calc(100% + 200px);
    height: 100%;
    background-image: 
        radial-gradient(2px 2px at 20px 30px, #fff, transparent),
        radial-gradient(1px 1px at 35px 15px, rgba(255,255,255,0.7), transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 65px 50px, #fff, transparent),
        radial-gradient(1px 1px at 115px 20px, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 160px 30px, rgba(255,255,255,0.9), transparent),
        radial-gradient(2px 2px at 270px 65px, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 340px 25px, rgba(255,255,255,0.8), transparent),
        radial-gradient(2px 2px at 460px 85px, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 540px 60px, rgba(255,255,255,0.9), transparent);
    background-repeat: repeat;
    background-size: 600px 100px;
    animation: sparkleMove 8s linear infinite;
    opacity: 0.4;
    pointer-events: none;
}

/* ============================================
   グラデーション適用
   ============================================ */

/* Gold Variations */
.luxuary01 { background: var(--luxuary01-gradient); } /* Classic Gold */
.luxuary02 { background: var(--luxuary02-gradient); } /* Champagne Gold */
.luxuary03 { background: var(--luxuary03-gradient); } /* Antique Gold */
.luxuary04 { background: var(--luxuary04-gradient); } /* 24K Bright Gold */
.luxuary05 { background: var(--luxuary05-gradient); } /* Rose Gold */
.luxuary06 { background: var(--luxuary06-gradient); } /* White Gold */

/* Other Luxury Colors */
.luxuary07 { background: var(--luxuary07-gradient); } /* Platinum Silver */
.luxuary08 { background: var(--luxuary08-gradient); } /* Midnight Blue */
.luxuary09 { background: var(--luxuary09-gradient); } /* Rose Violet */
.luxuary10 { background: var(--luxuary10-gradient); } /* Luxury Red */

/* ============================================
   オプション: 名前付きクラス(お好みで)
   ============================================ */

.luxury-classic-gold { background: var(--luxuary01-gradient); }
.luxury-champagne-gold { background: var(--luxuary02-gradient); }
.luxury-antique-gold { background: var(--luxuary03-gradient); }
.luxury-24k-gold { background: var(--luxuary04-gradient); }
.luxury-rose-gold { background: var(--luxuary05-gradient); }
.luxury-white-gold { background: var(--luxuary06-gradient); }
.luxury-platinum-silver { background: var(--luxuary07-gradient); }
.luxury-midnight-blue { background: var(--luxuary08-gradient); }
.luxury-rose-violet { background: var(--luxuary09-gradient); }
.luxury-luxury-red { background: var(--luxuary10-gradient); }