/* =============================================================
   Hero Ken Burns（公用修饰）
   ─────────────────────────────────────────────────────────────
   修饰类：.heroKenBurns
   动画名：storiesHeroKenBurns（不另写一套；Stories 页沿用此名）

   【用途】
     满幅 Hero 主图进入页面即播的慢推拉（scale 1→1.2 + 微平移，
     16s ease-in-out infinite alternate）。
     不是 Hover zoom（悬停放大一次），不是 Hover breathe（悬停循环起伏）。

   【怎么用】
     加在 overflow:hidden 的媒体容器上；真正做 transform 的是内部层：
       · .heroKenBurns__el — Hub 中栏 CSS 背景铺满层；也可挂在 img/video 上
       · .heroKenBurns > picture > img — 窄屏 Hub 轮播当前张
       · Stories 壳 .stories-hero-kb 内的 picture / .stories-hero-kb__el
     铺满层须 position:absolute; inset:0，否则 height:auto + 轻微 scale
     在视口裁切下几乎看不出推拉。

   【接入】
     · Stories 着陆 Hero：Origins / Ritual / Stone Care / Stone Vessels
       视图 hero_landing/_stories_hero_ken_burns.html
     · Hub 三栏中栏主图：桌面 .mega-hub-hero-stage__media + 窄屏当前轮播张
       catalog_base 在 catalog_three_col_hero 时加载本文件

   【不加】首页 Banner；Partnership CTA；正文分栏图；Hub 右栏缩略；
           产品卡 / Header Mega 卡

   加载：hero_landing_base · catalog_base（三栏）
         → ND_FRONT_CSS_STORIES_HERO_KEN_BURNS
   禁止写 :root（令牌用 lp_tokens / 页级变量）
   与 Hover zoom / Hover breathe 的分工见 Nadulite网站设计.md §4.0.3
============================================================= */

/*
 * Ken Burns：起 1.0 居中 → 终 1.2 并向左上微移。
 * 父级 overflow:hidden，边缘裁切后推拉更明显（旧版仅 1→1.12 偏弱）。
 * 名称保留 storiesHeroKenBurns：Stories 与 Hub 共用这一套，不复制 keyframes。
 */
@keyframes storiesHeroKenBurns {
    from {
        transform: scale(1) translate(0, 0);
    }
    to {
        transform: scale(1.2) translate(-2.5%, -1.8%);
    }
}

/* 公用修饰：容器只裁切，自己不做 transform */
.heroKenBurns {
    overflow: hidden;
}

/* 真正推拉的层。Stories 原选择器并入同一条，避免复制动画声明 */
.heroKenBurns .heroKenBurns__el,
.heroKenBurns > picture > img,
.stories-hero-kb .stories-hero-kb__picture,
.stories-hero-kb .stories-hero-kb__el {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    object-fit: cover;
    object-position: center center;
    transform-origin: center center;
    will-change: transform;
    animation: storiesHeroKenBurns 16s ease-in-out infinite alternate;
}

/* Hub 中栏 / Stories 铺满层：absolute 才能看见推拉 */
.heroKenBurns .heroKenBurns__el,
.stories-hero-kb .stories-hero-kb__picture,
.stories-hero-kb .stories-hero-kb__el {
    position: absolute;
    inset: 0;
}

/* 窄屏 Hub 轮播 img 走文档流（aspect-ratio 撑高），不要 absolute，否则 slide 塌高 */
.heroKenBurns > picture > img {
    height: auto;
}

/* ── Stories 壳层布局（页级 header 内铺满；Hub 不用这些类） ── */

.stories-hero-kb {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.stories-hero-kb__media {
    position: absolute;
    inset: 0;
}

.stories-hero-kb__el--image {
    object-position: center center;
}

/* Ritual 页可在页 CSS 覆写 object-position；此处不锁死 lifestyle 构图 */

.stories-hero-kb__veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* 白字压浅图：对齐 --lp-hero-overlay-stories */
.stories-hero-kb__veil--stories {
    background: var(--lp-hero-overlay-stories);
}

/* Ritual：浅罩 + 深色字（lifestyle）；故意不用 stories 深罩 */
.stories-hero-kb__veil--ritual {
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.55) 0%,
            rgba(255, 255, 255, 0.18) 38%,
            rgba(251, 250, 248, 0.72) 100%
        );
}

@media (prefers-reduced-motion: reduce) {
    .heroKenBurns .heroKenBurns__el,
    .heroKenBurns > picture > img,
    .stories-hero-kb .stories-hero-kb__picture,
    .stories-hero-kb .stories-hero-kb__el {
        animation: none !important;
        transform: none;
    }
}