/* --- Global Settings --- */
body {
    background-color: #050505;
    color: #f4f4f5;
    overflow-x: hidden;
    cursor: auto; 
}

/* --- Responsive Cursor Settings --- */
@media (min-width: 768px) {
    body {
        cursor: none;
    }
    a, button, input, textarea, .hoverable {
        cursor: none;
    }
}

/* --- Visual Effect: Noise Overlay (Optimized) --- */
.noise-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9998;
    opacity: 0.05; /* 稍微調高一點因為 PNG 比較細緻 */
    /* 性能優化：使用靜態 PNG 圖片代替 SVG 濾鏡，大幅減少運算 */
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyBAMAAADsEZWCAAAAGFBMVEUAAAA5OTkAAABMTExERERmZmYzMzMyMjJ43I3xAAAACHRSTlMAM8AzMzMzM3PU7wcAAABnSURBVDjLxZFBCgAhDMX8/y/0eCqe3SI5S8l0g0I9kF5rL7eWp2c53t5PJ/XJ8Wp/M61b7x7Zp8e7/c20br17ZJ8e7/Y307r17pF9erzb30zr1rtH9unxbn8zrVvvHtmna30z7V/vHw/yB94V8qCJAAAAAElFTkSuQmCC");
    /* 強制開啟 GPU 加速圖層 */
    transform: translate3d(0, 0, 0);
    /* 避免重複渲染 */
    backface-visibility: hidden;
}

/* --- Custom Cursor: Difference Circle (Optimized) --- */
.cursor-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    pointer-events: none;
    mix-blend-mode: difference;
    display: none;
    /* 告知瀏覽器這個元素會經常變動 */
    will-change: transform;
}

@media (min-width: 768px) {
    .cursor-wrapper {
        display: block;
    }
}

.cursor-main {
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
    transform: translate(-50%, -50%); /* 保持置中 */
    /* 優化過渡效果 */
    transition: width 0.3s cubic-bezier(0.19, 1, 0.22, 1), 
                height 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    /* 防止邊緣鋸齒 */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Hover State */
body.hovering .cursor-main {
    width: 60px;
    height: 60px;
}

/* --- Navigation Blur --- */
nav {
    /* 確保模糊層也有獨立圖層 */
    transform: translate3d(0,0,0); 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* --- Glassmorphism Cards --- */
.glass-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.4s ease;
    /* 優化懸浮動畫效能 */
    transform: translateZ(0); 
    will-change: transform;
}

.glass-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-5px);
}

/* --- Image Container & Loader --- */
.image-container {
    overflow: hidden;
    position: relative;
    background-color: #111;
    /* 解決 Safari 圓角溢出問題 */
    transform: translate3d(0,0,0);
}

.image-container img {
    transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    animation: fadeInImage 0.5s ease forwards;
    will-change: transform;
}

@keyframes fadeInImage {
    to { opacity: 1; }
}

.image-container:hover img {
    transform: scale(1.05);
}

.image-placeholder {
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, #1a1a1a, #2a2a2a);
    z-index: -1;
}

/* --- Marquee Animation (Optimized) --- */
@keyframes marquee { 
    0% { transform: translateX(0); } 
    100% { transform: translateX(-50%); } 
}

.animate-marquee { 
    animation: marquee 20s linear infinite;
    /* 關鍵：跑馬燈必須使用 GPU 加速，否則會抖動 */
    transform: translate3d(0, 0, 0); 
    will-change: transform;
}