body {
    /* background: #e5e2ce; */
    background-color: #dad0c1;
    /* 取自 app icon 的背景色 */
}

/* section.hero {
    background-image: linear-gradient(rgb(var(--ut-dark-gray-rgb), 0.8), rgb(var(--ut-dark-gray-rgb), 0.8)), url('assets/hero-bg.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    backdrop-filter: blur(40px);
} */

/* 主容器：设置基础环境 */
section.hero {
    position: relative;  /* 为绝对定位的子元素创建定位上下文 */
    overflow: hidden;    /* 防止旋转的背景图溢出 */
    background-color: black;  /* 基础背景色，防止图片加载前或透明时的背景 */
}

/* 背景图容器：定位和层级管理 */
.hero-bg {
    position: absolute;  /* 脱离文档流，不影响其他内容布局 */
    inset: 0;           /* 等同于 top/right/bottom/left: 0，填满父容器 */
    pointer-events: none;  /* 防止背景图捕获鼠标事件 */
    z-index: 1;         /* 设置层级，确保在基础背景之上 */
}

/* 背景图：具体的图片样式和效果 */
.hero-bg img {
    position: absolute;
    width: auto;
    height: auto;
    min-width: 100%;    /* 确保图片至少覆盖容器宽度 */
    min-height: 100%;   /* 确保图片至少覆盖容器高度 */
    top: 50%;
    left: 50%;
    transform-origin: center;
    transform: translate(-50%, -50%) rotate(-13deg);  /* 居中并旋转 */
    filter: /* blur(2px) */ brightness(0.7);  /* 视觉效果 */

    @media (max-width: 1200px) {
        min-height: 115%;
        transform: translate(-50%, -50%) rotate(-9deg);  /* 居中并旋转 */
    }
}

/* 遮罩层：调整整体氛围 */
section.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgb(var(--ut-dark-gray-rgb), 0.8);  /* 半透明遮罩 */
    z-index: 2;         /* 在背景图之上 */
}

/* 内容层：确保实际内容在最上层 */
section.hero > *:not(.hero-bg) {
    position: relative;  /* 创建层叠上下文 */
    z-index: 3;         /* 确保内容在最上层 */
}

section.hero .block.hero-image {
    flex: 0 0 560px;
}