# AIFO 区块光影（Section Glow）

从 `special-offer-50` **复制**出的公共左右光晕模块，供新页面/区块复用。

> **注意**：`special-offer-50.html` / `special-offer-50.css` **保持原样**，仍使用页面内自带的 `.so-welcome__glow` 与 `#special-offer-50::before`，无需改原页。

## 文件

| 文件 | 说明 |
|------|------|
| `assets/css/aifo-section-glow.css` | 光影样式（新页面必引） |
| `pages/modules/aifo-section-glow.fragment.html` | HTML 片段参考 |

## 图片资源

| 变量 | 默认图片 | 用途 |
|------|----------|------|
| `--aifo-glow-right-image` | `assets/images/backgrounds/new-user-promo-welcome-side-glow.png` | 右侧竖条光晕（同 `.so-welcome__glow`） |
| `--aifo-glow-left-image` | `assets/images/backgrounds/new-user-promo-corner-glow.png` | 左上角光晕（同 `#special-offer-50::before`） |

## 快速使用

### 1. 引入 CSS

```html
<link type="text/css" href="../assets/css/aifo-section-glow.css" rel="stylesheet">
```

或在模块 CSS 中：

```css
@import url("../aifo-section-glow.css");
```

### 2. 区块级 — 光晕只在某个 section 内

父级加 `aifo-section-glow-host`，内部放光影 div，正文会自动叠在光晕之上。

```html
<section class="my-section aifo-section-glow-host">
  <!-- 右侧（可选） -->
  <div class="aifo-glow-right" aria-hidden="true"></div>

  <!-- 左侧（可选） -->
  <div class="left_bg_light" aria-hidden="true"></div>

  <h2>标题</h2>
  <p>正文...</p>
</section>
```

### 3. 页面级 — 左侧光晕贴整页左上角

```html
<main class="aifo-page-glow-host">
  <div class="left_bg_light" aria-hidden="true"></div>
  <section>...</section>
</main>
```

## 类名对照（与 special-offer-50 原实现）

| 公共类名 | 原 special-offer-50 | 说明 |
|----------|---------------------|------|
| `.aifo-glow-right` | `.so-welcome__glow` | 右侧全高竖条光，`mix-blend-mode: screen` |
| `.left_bg_light` | `#special-offer-50::before` | 左上角光晕 |
| `.aifo-section-glow-host` | `.so-welcome` 等相对定位容器 | 区块宿主 |
| `.aifo-page-glow-host` | 页面根 `main` | 整页宿主 |

## 自定义（CSS 变量）

```css
#my-page .my-section {
  --aifo-glow-right-width: 640px;
  --aifo-glow-left-top: 80px;
  --aifo-glow-left-offset: -1vw;
  --aifo-glow-right-image: url("../images/custom/right-glow.png");
  --aifo-glow-left-image: url("../images/custom/left-glow.png");
}
```

## 已接入示例

### `promo-compare.section.html`

对比表区块使用右侧光晕（原 `special-offer-50` 未改动）：

```html
<section class="promo-section promo-section--compare aifo-section-glow-host">
  <div class="aifo-glow-right" aria-hidden="true"></div>
  ...
</section>
```

引入 `promo-compare.css` 时会自动 `@import` `aifo-section-glow.css`。

## 注意事项

1. 宿主需 `position: relative`（`.aifo-section-glow-host` 已包含）。
2. 光晕超出容器时，宿主设 `overflow: visible`（默认已是）。
3. 右侧光晕 `right: calc((100% - 100vw) / 2)` 可在居中 `max-width` 布局下贴齐视口右缘。
4. 装饰元素务必加 `aria-hidden="true"`。

## 最小示例

```html
<link href="../assets/css/aifo-section-glow.css" rel="stylesheet">

<section class="aifo-section-glow-host" style="min-height:60vh;background:#080808;color:#fff;padding:80px 24px;">
  <div class="aifo-glow-right" aria-hidden="true"></div>
  <h2 style="text-align:center;">Demo</h2>
</section>
```