:root {
    --apple-green: #76ba1b;
    --light-apple: #f1f8e9;
    --leaf-green: #4caf50;
    --transition-time: 0.5s;
}

* {
    box-sizing: border-box;
}

body, html {
    margin: 0;
    height: 100%;
    overflow: hidden;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

/* 动态斜向移动背景 */
.bg-animation {
    position: fixed;
    inset: -100px; /* 稍微溢出防止边缘空白 */
    z-index: -1;
    background-color: var(--light-apple);
    background-image: url('asset/image/background/apple.png');
    background-repeat: repeat;
    background-size: 100px 100px; /* 控制图标大小和间隔 */
    opacity: 0.4;
    animation: moveBg 20s linear infinite;
}

@keyframes moveBg {
    from { background-position: 0 0; }
    to { background-position: 500px 500px; } /* 斜向移动 */
}

/* 初始高斯模糊效果 */
#app.blur-effect {
    filter: blur(20px);
    transform: scale(1.1);
    opacity: 0;
    pointer-events: none;
}

#app {
    transition: filter 1s ease, transform 1s ease, opacity 1s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

/* 加载层 */
#loader {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.9);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
    transition: 0.8s ease;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(118, 186, 27, 0.1); /* 稍微改下颜色更协调 */
    border-top-color: var(--apple-green);
    border-radius: 50%;
    animation: spin 1s infinite linear;
    flex-shrink: 0; 
    aspect-ratio: 1 / 1; 
}

@keyframes spin { to { transform: rotate(360deg); } }

/* 玻璃拟态容器 */
.glass-container {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(15px);
    border: 2px solid white;
    border-radius: 40px;
    padding: 40px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
    width: 80%;
    max-width: 550px;
}

/* 卡片逻辑（保持之前的切换逻辑） */
.card-area {
    height: 420px;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1000px;
}

.card {
    background: white;
    padding: 10px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    
    /* --- 修复逻辑 --- */
    opacity: 0;
    visibility: hidden;    /* 彻底隐藏，不可选中，不可点击 */
    pointer-events: none;  /* 额外保险，防止鼠标触发事件 */
    user-select: none;     /* 禁止选中文字 */
    /* ---------------- */

    transform: rotateX(10deg) translateY(20px);
    /* 确保 visibility 也能平滑过渡 */
    transition: 
        opacity var(--transition-time) ease, 
        transform var(--transition-time) ease,
        visibility var(--transition-time); 
}

.card.active {
    opacity: 1;
    visibility: visible;   /* 激活时恢复显示 */
    pointer-events: auto;  /* 恢复交互 */
    user-select: text;     /* 允许选中图片名称 */
    transform: rotateX(0) translateY(0);
}

.card img {
    max-width: 100%;
    max-height: 350px;
    border-radius: 15px;
    display: block;
}

.img-name {
    margin-top: 15px;
    color: var(--leaf-green);
    font-weight: bold;
}

.controls {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}

.btn {
    padding: 12px 25px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-weight: bold;
    transition: 0.3s;
}

.btn.primary { background: var(--apple-green); color: white; }
.btn.danger { background: transparent; color: #ff7675; }
.btn:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(118, 186, 27, 0.3); }

/* --- 加载层深度美化 --- */
#loader {
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, #ffffff 0%, var(--light-apple) 100%);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 1s cubic-bezier(0.65, 0, 0.35, 1);
}

.loader-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 苹果图标浮动动画 */
.apple-hero {
    position: relative;
    width: 120px;
    height: 120px;
    margin-bottom: 30px;
}

.floating-apple {
    width: 100%;
    animation: appleFloat 3s ease-in-out infinite;
    filter: drop-shadow(0 10px 15px rgba(118, 186, 27, 0.2));
}

.apple-shadow {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 10px;
    background: rgba(0,0,0,0.05);
    border-radius: 50%;
    animation: shadowResize 3s ease-in-out infinite;
}

@keyframes appleFloat {
    0%, 100% { transform: translateY(0) rotate(-45deg); }
    50% { transform: translateY(-20px) rotate(-24deg); }
}

@keyframes shadowResize {
    0%, 100% { width: 60px; opacity: 1; }
    50% { width: 40px; opacity: 0.3; }
}

/* 文字与状态 */
.loader-title {
    font-size: 2rem;
    color: var(--leaf-green);
    margin: 0 0 20px 0;
    letter-spacing: 4px;
    font-weight: 800;
}

.status-box {
    min-height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

#loader-text {
    color: #888;
    font-size: 0.9rem;
    margin-top: 10px;
}

/* 欢迎按钮深度定制 */
.welcome-btn {
    display: none;
    padding: 15px 40px;
    font-size: 1.1rem;
    font-weight: bold;
    color: white;
    background: linear-gradient(135deg, var(--apple-green), var(--leaf-green));
    border: none;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(118, 186, 27, 0.4);
    animation: btnPulse 2s infinite;
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.welcome-btn:hover {
    transform: scale(1.05) translateY(-3px);
    box-shadow: 0 15px 30px rgba(118, 186, 27, 0.6);
}

@keyframes btnPulse {
    0% { box-shadow: 0 0 0 0 rgba(118, 186, 27, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(118, 186, 27, 0); }
    100% { box-shadow: 0 0 0 0 rgba(118, 186, 27, 0); }
}

/* 退出动画 */
.loader-fade-out {
    opacity: 0;
    transform: scale(1.5);
    pointer-events: none;
}