/* css/style.css */

/* 定义动态背景 - 示例：使用渐变和动画 */
/* 定义背景渐变和动画 */
body.dynamic-bg {
    /* 中文注释：定义一个从深灰到黑色的径向渐变作为基础背景 */
    background: radial-gradient(circle, #4a4a4a, #1a1a1a);
    /* 中文注释：应用名为 'pulse' 的动画，持续 10 秒，无限循环，使用 ease-in-out 时间函数 */
    animation: pulse 10s infinite ease-in-out;
    /* 中文注释：确保背景尺寸覆盖整个视口 */
    background-size: 200% 200%;
}

/* 中文注释：定义 'pulse' 动画的关键帧 */
@keyframes pulse {
    /* 中文注释：动画开始和结束时，背景位置在左上角 */
    0%, 100% {
        background-position: 0% 0%;
    }
    /* 中文注释：动画进行到 50% 时，背景位置移动到右下角，产生动态效果 */
    50% {
        background-position: 100% 100%;
    }
}


/* 3D 闪光 Logo 效果 - 基础版 */
/* 定义 Logo 样式 */
.logo-3d {
    /* 中文注释：设置字体颜色为浅灰色 */
    color: #d1d5db; /* Tailwind gray-300 */
    /* 中文注释：应用多层文本阴影来创建伪 3D 效果 */
    text-shadow:
        1px 1px 0px #b91c1c, /* 暗红色 */
        2px 2px 0px #991b1b, /* 更深的暗红色 */
        3px 3px 0px #7f1d1d, /* 最深的暗红色 */
        4px 4px 8px rgba(0, 0, 0, 0.5); /* 黑色模糊阴影，增加深度感 */
    /* 中文注释：添加过渡效果，使鼠标悬停时的变化更平滑 */
    transition: all 0.3s ease;
}

/* 中文注释：鼠标悬停时增强 Logo 效果 */
.logo-3d:hover {
    /* 中文注释：稍微改变文本颜色 */
    color: #f3f4f6; /* Tailwind gray-100 */
    /* 中文注释：增强阴影效果，使其更突出 */
     text-shadow:
        1px 1px 0px #dc2626, /* 亮红色 */
        2px 2px 0px #b91c1c, /* 暗红色 */
        3px 3px 0px #991b1b, /* 更深的暗红色 */
        4px 4px 0px #7f1d1d, /* 最深的暗红色 */
        5px 5px 10px rgba(0, 0, 0, 0.6); /* 更强的黑色模糊阴影 */
    /* 中文注释：稍微向上移动，增加立体感 */
    transform: translateY(-1px);
}

/* 确保 iframe 容器响应式 */
/* 父容器相对定位 */
.relative {
    position: relative;
}
/* 保持 16:9 宽高比的技巧 */
.aspect-ratio-16-9 {
    padding-bottom: 56.25%; /* 9 / 16 = 0.5625 */
    height: 0;
    overflow: hidden;
}
/* iframe 绝对定位填充容器 */
.iframe-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 添加中文注释：为 H2 标题添加左边框样式 (Tailwind 中已实现，这里只是作为 CSS 示例) */
/*
h2 {
    border-left: 4px solid #ef4444; // 对应 Tailwind 的 border-l-4 border-red-500
    padding-left: 0.75rem; // 对应 Tailwind 的 pl-3
}
*/

/* 添加中文注释：为用户评论引用块添加样式 (Tailwind 中已实现，这里只是作为 CSS 示例) */
/*
blockquote {
    border-left: 4px solid #6b7280; // 对应 Tailwind 的 border-l-4 border-gray-500
    padding-left: 1rem; // 对应 Tailwind 的 pl-4
    font-style: italic; // 对应 Tailwind 的 italic
}
*/