/* asbsb-hero-slider.css — hero-slider の「部品が持つべき最小限の構造」＋ Ken Burns（じわっと拡大）。 * * 役割分担: * - ここ（部品CSS・全サイト共通）: cover を splide スライド内で正しく敷き詰める／画像・動画背景の object-fit ／ * 初期化前の縦積み無害化／Ken Burns の拡大アニメ。 * - サイト側 decorations.css: 見た目（ドットの形と位置・暗幕・縦書き英字・SCROLL 等）はサイト固有デザイン＝そちら。 * vendored の kadence-splide.css / kb-blocks-splide.css の後に載る（cssPost）＝これで打ち消し順が合う。 */ /* alignfull の cover を splide スライド内で二重にはみ出させない（ルート group が既に全幅を供給している） */ .c-hero-slider .wp-block-cover.alignfull { margin-left: 0; margin-right: 0; max-width: none; width: 100%; } /* 実行時に JS が差し込むトラックは常に全幅（constrained のコンテンツ幅制限や inner-container 経由でも縮まないように、子孫セレクタで確実に当てる）。 */ .c-hero-slider .splide__track { max-width: none; width: 100%; margin-left: 0; margin-right: 0; } /* 画像・動画の背景はスライドいっぱいに敷く（core 既定を再宣言＝テーマCSSの読み込み順に依存しない） */ .c-hero-slider .wp-block-cover__image-background, .c-hero-slider .wp-block-cover__video-background { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; } /* 初期化前（JS 前 / JS 無効）は全スライドが縦に見える＝プログレッシブ。二枚目以降の余白は 0 に */ .c-hero-slider:not(.is-initialized) .c-hero-slide + .c-hero-slide { margin-top: 0; } /* ===== Ken Burns: 表示中スライド（Splide が付ける .is-active）の画像背景をゆっくり拡大 ===== duration は JS が interval から算出して --asbsb-kb-dur に流す（無ければ 7s）。 fill-mode both で「表示中は拡大しきった状態を保持」→ 非表示化で baseline に戻る（フェード中なので段差は見えない）。 ★動画背景（__video-background）は対象外＝動画は自前の動きを持つので二重の動きにしない。 */ .c-hero-slider.is-kenburns .splide__slide.is-active .wp-block-cover__image-background { transform-origin: 50% 50%; will-change: transform; animation: asbsb-kenburns var(--asbsb-kb-dur, 7s) ease-out both; } @keyframes asbsb-kenburns { from { transform: scale(1.001); } to { transform: scale(1.12); } } /* モーション控えめ設定を尊重（拡大を止める）。 ★force-motion 語彙（オプトイン）: `:root { --asbsb-force-motion: 1 }` 宣言サイトでは JS が に .asbsb-force-motion を付ける＝ :not() で無効化ごと外れて通常アニメが正確に復活（値の二重管理なし）。 */ @media (prefers-reduced-motion: reduce) { html:not(.asbsb-force-motion) .c-hero-slider.is-kenburns .splide__slide.is-active .wp-block-cover__image-background { animation: none; } }