/* 商標透明穿透效果選項 */

/* 選項 1: Screen 混合模式 - 適合深色背景 */
.logo-transparent-screen {
    mix-blend-mode: screen;
    opacity: 0.9;
}

/* 選項 2: Multiply 混合模式 - 適合淺色背景 */
.logo-transparent-multiply {
    mix-blend-mode: multiply;
    opacity: 0.85;
}

/* 選項 3: Overlay 混合模式 - 高對比度效果 */
.logo-transparent-overlay {
    mix-blend-mode: overlay;
    opacity: 0.95;
}

/* 選項 4: Soft Light 混合模式 - 柔和效果 */
.logo-transparent-softlight {
    mix-blend-mode: soft-light;
    opacity: 0.9;
}

/* 選項 5: 自定義透明效果 - 使用 CSS 遮罩 */
.logo-transparent-mask {
    mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="45" fill="white"/></svg>') center/contain no-repeat;
    -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="45" fill="white"/></svg>') center/contain no-repeat;
    opacity: 0.9;
}

/* 選項 6: 漸變透明效果 */
.logo-transparent-gradient {
    background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0.9;
}

/* 選項 7: 動態透明效果 */
.logo-transparent-animated {
    mix-blend-mode: screen;
    opacity: 0.8;
    animation: transparencyPulse 3s ease-in-out infinite;
}

@keyframes transparencyPulse {
    0%, 100% {
        opacity: 0.8;
        filter: brightness(1);
    }
    50% {
        opacity: 1;
        filter: brightness(1.2);
    }
}

/* 選項 8: 玻璃效果 */
.logo-glass-effect {
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 20px;
    mix-blend-mode: screen;
    opacity: 0.9;
}

/* 選項 9: 霓虹效果 */
.logo-neon-effect {
    filter: drop-shadow(0 0 10px rgba(255,255,255,0.5)) 
            drop-shadow(0 0 20px rgba(255,255,255,0.3))
            drop-shadow(0 0 30px rgba(255,255,255,0.1));
    mix-blend-mode: screen;
    opacity: 0.95;
}

/* 選項 10: 全透明效果 */
.logo-fully-transparent {
    mix-blend-mode: screen;
    opacity: 0.7;
    filter: contrast(1.2) brightness(1.1);
}

/* 響應式適配 */
@media (max-width: 768px) {
    .logo-glass-effect {
        padding: 15px;
        backdrop-filter: blur(5px);
    }
}

@media (max-width: 480px) {
    .logo-glass-effect {
        padding: 10px;
        backdrop-filter: blur(3px);
    }
}