/* 彻底清除浏览器默认边距 */
html, body {
    margin: 0 !important; /* 强制清除 body 的 8px 边距 */
    padding: 0 !important;
}


/*确保背景容器全屏*/
.life-index-container {
    width: 100vw;
    height: 100dvh;/* 动态视口高度，适配手机浏览器工具栏 */
    top: 0;
    left: 0;

    /*改变层级，放在最底层*/
    /*z-index: -1;*/
    /*超出的部分裁切掉*/
    overflow: hidden;

    position: fixed;/* 只有单屏图片时，relative 或 fixed 均可 */
}

.full-screen-link {
    display: block;
    width: 100%;
    height: 100%;

    -webkit-tap-highlight-color: transparent;
}

.bg-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}

/*!* 3. 底部按钮样式 【新增】 *!*/
.enter-murakamiradio {
    /* A. 绝对定位：底部居中 */
    position: absolute;
    bottom: 30px; /* 距离底部 30px */
    left: 50%;
    transform: translateX(-50%); /* 完美的水平居中修正 */

    /* B. 字体设置 */
    color: rgba(255, 255, 255, 0.78);
    /*先使用系统字体*/
    font-family: Arial, sans-serif;
    font-size: 24px; /* 字号稍微大一点 */
    font-weight: 600; /* 加粗一点，显得有质感 */
    text-decoration: none; /* 去掉下划线 */
    letter-spacing: 0;
    opacity: 0.78;

    /* D. 交互效果 */
    transition: color 500ms ease, opacity 500ms ease, letter-spacing 500ms ease;
    z-index: 10; /* 保证浮在图片上面 */
    -webkit-tap-highlight-color: transparent;

    /*!* 3. 绑定呼吸动画 *!*/
    /*animation: gentle-breath 3s infinite ease-in-out;*/

    /*!* 4. 增强体验：平滑的点击过渡 *!*/
    /*transition: all 0.3s ease;*/

    overflow: hidden; /* 必须加，裁剪光影 */
}


/* 页面加载完成后的字体和颜色 */
.enter-murakamiradio.is-ready {
    color: #000;
    font-family: "Caveat", cursive, sans-serif;
    letter-spacing: 1px;
    opacity: 1;
}

.enter-murakamiradio::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
            45deg,
            transparent,
            rgba(255, 255, 255, 0.3),
            transparent
    );
    transform: rotate(45deg);
    /*扫描光线的动画效果*/
}

.enter-murakamiradio.is-ready::before {
    animation: shine-sweep 3s infinite;
}
@keyframes shine-sweep {
    0% { left: -100%; }
    100% { left: 100%; }
}

.enter-murakamiradio:after {
    content: "♪"; /* 增加一个小图标 */
    display: inline-block;
    opacity: 0;
}

.enter-murakamiradio.is-ready:after {
    animation: note-float 2s infinite;
}
@keyframes note-float {
    0%, 100% { transform: translateY(0); opacity: 0.5; }
    50% { transform: translateY(-5px); opacity: 1; }
}


@media (prefers-reduced-motion: reduce) {
    .enter-murakamiradio {
        transition: none;
    }

    .enter-murakamiradio::before,
    .enter-murakamiradio::after {
        animation: none !important;
    }
}


/*!* 呼吸动画核心 *!*/
/*@keyframes gentle-breath {*/
/*    0%, 100% {*/
/*        !* 初始状态：正常大小，淡淡的光影 *!*/
/*        transform: translateX(-50%) scale(1);*/
/*        box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);*/
/*        background: rgba(255, 255, 255, 0.15);*/
/*    }*/
/*    50% {*/
/*        !* 呼气状态：轻微放大 4%，光影向外柔和扩散 *!*/
/*        transform: translateX(-50%) scale(1.04);*/
/*        box-shadow: 0 0 25px rgba(255, 255, 255, 0.4);*/
/*        background: rgba(255, 255, 255, 0.25); !* 稍微变亮 *!*/
/*        border-color: rgba(255, 255, 255, 0.7);*/
/*    }*/
/*}*/