/* 時尚字體樣式 - 多種選項 */

/* 導入Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;400;500;600;700&family=Exo+2:wght@100;200;300;400;500;600;700;800;900&family=Chakra+Petch:wght@300;400;500;600;700&family=Syncopate:wght@400;700&display=swap');

/* 測試樣式 - 確保CSS載入 */
/* 選項1: 未來科技感 - Orbitron (保持大小寫) */
.fashion-title-orbitron {
    /* 基本樣式 */
    font-family: 'Orbitron', monospace !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    /* 移除 text-transform: uppercase，保持原始大小寫 */
    
    /* 漸變背景 */
    background: linear-gradient(45deg, #00d4ff, #ffffff, #00d4ff) !important;
    background-size: 200% 200% !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    
    /* 動畫效果 */
    animation: gradientShift 3s ease-in-out infinite, glowPulse 2s ease-in-out infinite !important;
    
    /* 發光效果 */
    text-shadow: 0 0 20px rgba(0, 212, 255, 0.5) !important;
    
    /* 確保可見性 */
    display: block !important;
    position: relative !important;
    z-index: 10 !important;
    
    /* 對齊和間距 */
    text-align: center !important;
    margin: 20px auto !important;
    padding: 10px 20px !important;
}

/* Hover 時不改變狀態（維持與常態相同的外觀） */
.fashion-title-orbitron:hover {
    background: linear-gradient(45deg, #00d4ff, #ffffff, #00d4ff) !important;
    background-size: 200% 200% !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    animation: gradientShift 3s ease-in-out infinite, glowPulse 2s ease-in-out infinite !important;
    text-shadow: 0 0 20px rgba(0, 212, 255, 0.5) !important;
    transform: none !important;
    filter: none !important;
    border: none !important;
    backdrop-filter: none !important;
}

/* 選項1b: 未來科技感 - Orbitron (全大寫版本) */
.fashion-title-orbitron-uppercase {
    /* 基本樣式 */
    font-family: 'Orbitron', monospace !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important; /* 全大寫版本 */
    
    /* 漸變背景 */
    background: linear-gradient(45deg, #00d4ff, #ffffff, #00d4ff) !important;
    background-size: 200% 200% !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    
    /* 動畫效果 */
    animation: gradientShift 3s ease-in-out infinite, glowPulse 2s ease-in-out infinite !important;
    
    /* 發光效果 */
    text-shadow: 0 0 20px rgba(0, 212, 255, 0.5) !important;
    
    /* 確保可見性 */
    display: block !important;
    position: relative !important;
    z-index: 10 !important;
    
    /* 對齊和間距 */
    text-align: center !important;
    margin: 20px auto !important;
    padding: 10px 20px !important;
}

/* 選項2: 現代商務感 - Rajdhani */
.fashion-title-rajdhani {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 32px !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    color: #ffffff !important;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.8) !important;
    animation: textShine 4s ease-in-out infinite !important;
    position: relative !important;
}

.fashion-title-rajdhani::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent) !important;
    animation: shine 3s ease-in-out infinite !important;
}

/* 選項3: 優雅現代感 - Exo 2 */
.fashion-title-exo {
    font-family: 'Exo 2', sans-serif !important;
    font-size: 30px !important;
    font-weight: 300 !important;
    letter-spacing: 1.5px !important;
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
    animation: elegantFloat 5s ease-in-out infinite !important;
    position: relative !important;
}

.fashion-title-exo::after {
    content: '' !important;
    position: absolute !important;
    bottom: -5px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg, #00d4ff, #ffffff, #00d4ff) !important;
    animation: lineExpand 4s ease-in-out infinite !important;
}

/* 選項4: 科技感 - Chakra Petch */
.fashion-title-chakra {
    font-family: 'Chakra Petch', sans-serif !important;
    font-size: 26px !important;
    font-weight: 600 !important;
    letter-spacing: 1.2px !important;
    color: #00d4ff !important;
    text-shadow: 0 0 25px rgba(0, 212, 255, 0.8) !important;
    animation: techGlow 3s ease-in-out infinite !important;
    border: 2px solid transparent !important;
    background: linear-gradient(45deg, rgba(0, 212, 255, 0.1), rgba(255, 255, 255, 0.1)) !important;
    padding: 15px 25px !important;
    border-radius: 8px !important;
    backdrop-filter: blur(10px) !important;
}

/* 選項5: 極簡現代感 - Syncopate */
.fashion-title-syncopate {
    font-family: 'Syncopate', sans-serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    letter-spacing: 3px !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    animation: minimalPulse 4s ease-in-out infinite !important;
    position: relative !important;
}

.fashion-title-syncopate::before,
.fashion-title-syncopate::after {
    content: '◆' !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #00d4ff !important;
    font-size: 16px !important;
    animation: diamondGlow 2s ease-in-out infinite alternate !important;
}

.fashion-title-syncopate::before {
    left: -30px !important;
}

.fashion-title-syncopate::after {
    right: -30px !important;
}

/* 動畫效果 */
@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes glowPulse {
    0%, 100% { text-shadow: 0 0 20px rgba(0, 212, 255, 0.5); }
    50% { text-shadow: 0 0 30px rgba(0, 212, 255, 0.8), 0 0 40px rgba(0, 212, 255, 0.6); }
}

@keyframes textShine {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

@keyframes shine {
    0% { left: -100%; }
    100% { left: 100%; }
}

@keyframes elegantFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

@keyframes lineExpand {
    0% { width: 0; }
    50% { width: 80%; }
    100% { width: 0; }
}

@keyframes techGlow {
    0%, 100% { 
        text-shadow: 0 0 25px rgba(0, 212, 255, 0.8);
        border-color: rgba(0, 212, 255, 0.3);
    }
    50% { 
        text-shadow: 0 0 35px rgba(0, 212, 255, 1);
        border-color: rgba(0, 212, 255, 0.8);
    }
}

@keyframes minimalPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

@keyframes diamondGlow {
    0% { opacity: 0.5; transform: translateY(-50%) scale(1); }
    100% { opacity: 1; transform: translateY(-50%) scale(1.2); }
}

/* 響應式設計 */
@media (max-width: 768px) {
    .fashion-title-orbitron { font-size: 24px !important; letter-spacing: 1.5px !important; }
    .fashion-title-rajdhani { font-size: 28px !important; }
    .fashion-title-exo { font-size: 26px !important; letter-spacing: 1px !important; }
    .fashion-title-chakra { font-size: 22px !important; padding: 12px 20px !important; }
    .fashion-title-syncopate { font-size: 20px !important; letter-spacing: 2px !important; }
}

@media (max-width: 480px) {
    .fashion-title-orbitron { font-size: 20px !important; letter-spacing: 1px !important; }
    .fashion-title-rajdhani { font-size: 24px !important; }
    .fashion-title-exo { font-size: 22px !important; }
    .fashion-title-chakra { font-size: 18px !important; padding: 10px 15px !important; }
    .fashion-title-syncopate { font-size: 16px !important; letter-spacing: 1.5px !important; }
}