/* =========================================
   Apple Glassmorphism - Immersive Edition V2.0
   优化内容：全屏沉浸、导航栏回归、触感反馈、暗色评论联动
========================================= */

/* --- 1. 彻底抹除主题容器限制 --- */
/* 针对 gate 页面，强制去掉原本包裹内容的白色大卡片，让流光背景能透出来 */
[data-path="gate/"] #content-inner, 
[data-path="gate/"] .layout {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 隐藏主题可能残留的背景卡片框 */
[data-path="gate/"] #page {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* --- 2. 核心：子容器全屏占领 (本地图片版) --- */
#apple-gate-mount {
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1; /* 保持低层级，确保导航栏可见 */
    overflow: hidden;
    background-color: #000; /* 图片未加载时的底色 */
    
    /* 👈 关键改动：设置本地背景图 */
    background-image: url('/img/aurora_bg.jpg'); /* 请确保图片放在 source/img/ 文件夹下 */
    background-size: cover;
    background-position: center;
}

/* --- 3. 背景增强：为本地图片增加动态呼吸感 --- */
#apple-gate-mount::before {
    content: "";
    position: absolute;
    width: 110%; height: 110%; /* 稍微放大，为漂浮动画留出空间 */
    top: -5%; left: -5%;
    
    /* 👈 这里也指向同一张图片，用于叠加动画 */
    background-image: url('/img/aurora_bg.jpg'); 
    background-size: cover;
    background-position: center;
    
    /* 组合动画：轻微漂浮 + 呼吸脉冲，让静态图“活”起来 */
    animation: gate-bg-float 20s ease-in-out infinite alternate,
               gate-bg-pulse 8s ease-in-out infinite;
    z-index: -1;
    filter: brightness(1.1); /* 稍微提亮一点图片 */
}

/* 漂浮动画：让图片有极其轻微的位移 */
@keyframes gate-bg-float {
    0% { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.05) translate(-1%, 1%); }
}

/* 呼吸动画：模拟极光明暗变化 */
@keyframes gate-bg-pulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

/* 4. 浮动卡片：极致毛玻璃 */
.apple-floating-card {
    background: rgba(30, 30, 40, 0.5);
    backdrop-filter: blur(50px) saturate(200%);
    -webkit-backdrop-filter: blur(50px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 42px;
    padding: 55px 40px;
    width: 95%;
    max-width: 360px;
    text-align: center;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.4);
    animation: apple-q-bounce 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --- 5. 波浪质感优化：增加外发光 --- */
.wave-wheel-container {
    position: relative;
    width: 100%;
    height: 30px;
    margin: 15px 0 35px 0;
    overflow: hidden;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4)); 
}

.wave-wheel {
    position: absolute;
    width: 200%; height: 100%;
    background: radial-gradient(circle at 50% -15px, transparent 55%, rgba(255,255,255,0.3) 60%, transparent 65%);
    background-size: 60px 100%;
    animation: wave-move 4s linear infinite;
}

.wave-wheel.second {
    opacity: 0.15;
    top: 4px;
    animation: wave-move 6s linear infinite reverse;
}

@keyframes wave-move {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* --- 6. 交互补全：压感缩放 --- */
.apple-gate-title { color: #ffffff; font-size: 32px; font-weight: 700; letter-spacing: 1px; margin-bottom: 0; }

.capsule-input { 
    width: 100%; height: 56px; 
    background: rgba(255, 255, 255, 0.1); 
    border: 1px solid rgba(255, 255, 255, 0.2); 
    border-radius: 28px; 
    color: #fff; font-size: 18px; text-align: center; 
    outline: none; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    margin-bottom: 20px; 
}

.capsule-input:focus {
    transform: scale(0.98);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
}

.capsule-btn { 
    width: 100%; height: 56px; 
    background: #ffffff; color: #000; 
    border: none; border-radius: 28px; 
    font-size: 18px; font-weight: 600; 
    cursor: pointer; transition: all 0.2s ease; 
}

.capsule-btn:hover { transform: scale(1.04); box-shadow: 0 0 25px rgba(255, 255, 255, 0.4); }
.capsule-btn:active { transform: scale(0.96); }

.apple-hint { color: rgba(255,255,255,0.4); font-size: 12px; margin-top: 35px; letter-spacing: 1px; }

@keyframes apple-q-bounce { 0% { opacity: 0; transform: scale(0.5) translateY(40px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }
.apple-deny { animation: apple-deny 0.4s ease-in-out; }
@keyframes apple-deny { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-10px); } 75% { transform: translateX(10px); } }

/* --- 7. 暗色评论联动：磨砂玻璃覆盖 --- */
[data-path="gate/"] #twikoo .tk-input, 
[data-path="gate/"] #twikoo .tk-comment {
    background: rgba(30, 30, 40, 0.6) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
}

[data-path="gate/"] #twikoo .tk-main .tk-content { color: #e1e1e1 !important; }
[data-path="gate/"] #twikoo .tk-meta-input .el-input__inner { background-color: rgba(255, 255, 255, 0.05) !important; color: #fff !important; }
[data-path="gate/"] #twikoo .el-textarea__inner { background-color: rgba(0, 0, 0, 0.2) !important; color: #fff !important; }


/* =========================================
   彻底抹除评论区顶部的剪刀与虚线
========================================= */

/* 1. 针对 gate 页面，抹除评论区头部所有边框和伪元素线条 */
[data-path="gate/"] #post-comment .comment-head,
[data-path="gate/"] #post-comment .comment-head::before {
    border-top: none !important;
    background: none !important;
    display: none !important; /* 如果只想留标题，可以删掉这行，只留 border-top */
}

/* 2. 强制隐藏剪刀图标 (FontAwesome 图标) */
[data-path="gate/"] #post-comment .comment-headline i,
[data-path="gate/"] #post-comment .comment-headline i.fa-cut,
[data-path="gate/"] #post-comment .comment-headline i.fa-scissors {
    display: none !important;
}

/* 3. 去掉评论区标题上方的多余间距，让视觉更紧凑 */
[data-path="gate/"] #post-comment {
    margin-top: 0 !important;
    padding-top: 20px !important;
}