@charset "UTF-8";

/* =========================================================
   wi1297「ラ・グラフィ スコープ」= wi1293 の MV 展開
   ---------------------------------------------------------
   レイアウト・アニメーション・本文セクションはシリーズ共通。
   リポジトリ既存の派生展開（wi1294-wi1296 -> wi1293）と同じく
   基準ファイルを @import し、MV ジオメトリだけを上書きする。

   ★ 本品番だけ frame.png（くりぬき枠）を使わない。
     wi1293-wi1296 は透過PNGの枠で顧客写真を有機的なシェイプに切り抜くが、
     スコープは顧客写真そのものを CSS で「正円」に整形して見せる仕様。
     → 枠画像は存在せず、シリーズ共通側の __frame 指定は要素が無いので効かない。

   ★ 表紙の顧客写真は「同じ直径の正円が2つ、縦に重なる」構成。
     上の円が前面（z2）、下の円が背面（z1）。枠が無いので z2 が空いている。
     写真スロット: image1 = 上の円 / image2 = 下の円 / image3 = 本文のカウントダウン帯
     （シリーズ他品番は image1=表紙 / image2=帯 だが、本品番だけ表紙が2枚なので繰り下げ）

   MV ジオメトリ（800x1200 キャンバス上の px）
     Lottie の帯が開ききった後に見える白窓は y 202..894（高さ 692）。
       band_top    最終 y = -306、高さ 508  -> 下端 202
       band_bottom 最終 y =  894            -> 上端 894

     2円の寸法は Figma のスコープ平坦コンプ（2045:37 / 2731x4096 = 800x1200 相当）を
     800x1200 で描画して画素走査し、シルエット（2円の和）から採寸した:
       上端 y=244 / くびれ y≈558 で幅365 / 下端 y=872 / 最大幅 419-420 / 中心 x=399〜400
     ここから
       直径 420、中心 x=400
       上の円 中心 y=454（上端 244 / 下端 664）
       下の円 中心 y=662（上端 452 / 下端 872）
       中心間距離 208
     検算: 半径210・中心間208 の2円の交点における幅
           = 2*sqrt(210^2 - 104^2) = 365 -> 実測のくびれ 365 と一致。
     重なり順の判定: 下の円の内側 y=500(x=400) が明るい夕景（＝上の円の絵）なので
                    上の円が前面で確定。

     ※ 写真の白飛びは紙と同じ白になるため、単純な「非白」判定では上の円の空が
       検出できない（閾値235では下の星空の円しか出ない）。閾値を 252 まで上げて
       ごく薄い空も拾うこと。
   ========================================================= */

@import url("/web_invitation/design_resource/wi1293/design.css");

.c-invitationPage--wi1297 {
    /* 2円の共通ジオメトリ（800x1200 キャンバス上の px） */
    --lg-scope-d: 420;    /* 直径 */
    --lg-scope-x: 190;    /* 左端 = 400 - 210（中心 x=400） */
    --lg-scope-y1: 244;   /* 上の円の上端（中心 y=454） */
    --lg-scope-y2: 452;   /* 下の円の上端（中心 y=662） */

    /* シリーズ共通の --lg-photo-* / --lg-frame-h は本品番では未使用。
       写真の配置は下の __photo 指定で完全に上書きする */
}

/* ---- z1/z2 顧客写真（正円 x2） ----
   シリーズ共通の .c-invitationSec--title__photo（--lg-photo-* 基準）を
   同詳細度・後勝ちで上書きする。@import は先頭に展開されるので後勝ちが成立する。 */
.c-invitationPage--wi1297 .c-invitationSec--title__photo {
    position: absolute;
    inset-inline-start: calc(var(--lg-scope-x) * var(--lg-u));
    width: calc(var(--lg-scope-d) * var(--lg-u));
    height: calc(var(--lg-scope-d) * var(--lg-u));
    border-radius: 50%;
    object-fit: cover;
}
/* 上の円（前面）。枠を使わないので z2 が空いている */
.c-invitationPage--wi1297 .c-invitationSec--title__photo--upper {
    inset-block-start: calc(var(--lg-scope-y1) * var(--lg-u));
    z-index: 2;
}
/* 下の円（背面）。重なった部分は上の円に隠れる */
.c-invitationPage--wi1297 .c-invitationSec--title__photo--lower {
    inset-block-start: calc(var(--lg-scope-y2) * var(--lg-u));
    z-index: 1;
}