@charset "UTF-8";
/* ==========================================================
   奥飛騨冬物語 TOP — animation.css
   STARTローディング／FVクロスフェード／フェードアップリビール／
   控えめパララックス（朴の木平方式・animationスキル数値規範）
   初期非表示は html.js 配下限定（no-JSフォールバック）
   ========================================================== */

:root {
  --ease-sig: cubic-bezier(0.3, 0.015, 0.12, 1); /* 参考サイト署名イージング（全演出共通） */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
}

html { scroll-behavior: smooth; }
/* Lenis稼働中はCSSスムーズ必ず無効化（Lenis公式推奨）:
   毎フレームのscrollToがブラウザ側スムーズアニメに包まれて上書きされ続け、
   ホイール入力中スクロールが凍る実バグの打ち消し。アンカーはJSがlenis.scrollToへ委譲。
   セレクタは .lenis（稼働中の恒久クラス）: .lenis-smooth はタッチ1回で剥がれて
   smooth が復活しアンカーが約1.2s固まる（実測済みの罠） */
html.lenis { scroll-behavior: auto !important; }

/* ==========================================================
   1. STARTローディング（紺 #004c86 全面＋ロゴフェードイン）
   html.js 時のみ表示（no-JSでは存在しないのと同じ）
   ========================================================== */
.loading { display: none; }
.js .loading {
  display: block; /* 既定の .loading{display:none}（no-JS用）を打ち消す。外すと丸ごと消える */
  position: fixed;
  inset: 0;
  z-index: 100;
  /* 2026-08-09 市岡さん指示: 新デザインの基調青に統一（旧は--color-navy-deep #004c86） */
  background: var(--color-blue);
  opacity: 1;
}
/* ロゴの台座 ＝ .fv と同じ箱（設計幅1365px・原点左上・同じ等比スケール）。
   これでFV本体のロゴと画素単位で一致し、青が消えてもロゴが1pxも動かない。
   座標・寸法は css/sections/fv.css の .fv__emblem / .fv__script が単一の正
   （ここで width/height を書くと二重管理になるので書かない）。2026-08-11 */
.js .loading__stage {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--canvas);
  height: var(--fv-h, 100vh);
  transform: scale(var(--scale, 1));
  transform-origin: 0 0;
}
/* 登場「ふわん」: ゆっくり滲み出て柔らかく着地する。
   --ease-out-quint は前倒しが強く「パッと出て止まる」ため、立ち上がりの穏やかな
   cubic-bezier(0.33,0.05,0.2,1) を使う。移動量もロゴ高の3.8%(12px)では動いて見えないので
   20px＋わずかな拡大に。着地は translateY(0) scale(1) ＝完全な恒等変換なので、
   FV本体ロゴとの画素一致（0.00px）は保たれる。筆記体だけ0.2s遅らせて板っぽさを消す。2026-08-11 */
.js .loading__logo,
.js .loading__script {
  opacity: 0;
  animation: loading-logo-in 1.7s cubic-bezier(0.33, 0.05, 0.2, 1) 0.25s forwards;
}
.js .loading__script { animation-delay: 0.45s; }
@keyframes loading-logo-in {
  from { opacity: 0; transform: translateY(20px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* 退場: 青幕が雪煙（霧マスク）でワイプアウトして晴れる（2026-08-18 市岡さん指示:
   素のフェードは味気ない→FVスライダーと同じ mask_fog.png の雪イメージを挟む）。
   ロゴはFV本体の同位置・同寸のロゴ（fv__emblem/fv__scriptは登場ディレイなし）へ
   そのまま重なるので「ロゴは動かず、青の靄だけが雪煙で消える」見え方は維持。
   マスク形状・寸法はFVワイプ（fv-fog-wipe）と同一。署名イージングが前倒しのため
   1.8sでは体感0.5s程度で晴れてしまい味気ない→2.6sでFVワイプ相当の体感に合わせた */
.js .loading.is-done {
  -webkit-mask-image: url(../img/mask_fog.png);
  mask-image: url(../img/mask_fog.png);
  -webkit-mask-size: 300% 450%;
  mask-size: 300% 450%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: splash-fog-wipe 2.6s var(--ease-sig) forwards;
  pointer-events: none;
}
@keyframes splash-fog-wipe {
  from { -webkit-mask-position: 100% 0%; mask-position: 100% 0%; }
  to   { -webkit-mask-position: 0% 70%;  mask-position: 0% 70%; }
}
/* 降雪レイヤー（2026-08-18）: スプラッシュの青幕〜霧ワイプ〜FV露出まで降り続け、
   ワイプ後にふわっと消える。マスク対象の .loading と分離した前面固定レイヤー */
.loading-snow { display: none; }
.js .loading-snow {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 101;
  pointer-events: none;
}
.js .loading-snow.is-fading {
  opacity: 0;
  transition: opacity 1.2s var(--ease-sig);
}

body.is-loading { overflow: hidden; }
/* htmlはoverflow-x:clipのためbody側hiddenはビューポートへ伝播しない＝
   キーボード/スクロールバー経由の裏スクロールはhtml側で塞ぐ（JSがクラスを付け外し） */
html.is-splash { overflow: hidden; }

/* ==========================================================
   2. FVスライダー（クロスフェード1.8s＋ゆるズーム）
   静的規則（fv.css: --2/--3透過）はno-JS用。js配下はis-activeで制御
   ========================================================== */
.js .fv__slide { opacity: 0; }
.js .fv__slide.is-active { opacity: 1; z-index: 1; }
/* 退場スライドが霧マスクでワイプアウトし、下のis-activeを露出（参考サイト方式・自作mask_fog.png） */
.js .fv__slide.is-prev {
  opacity: 1;
  z-index: 2;
  -webkit-mask-image: url(../img/mask_fog.png);
  mask-image: url(../img/mask_fog.png);
  -webkit-mask-size: 300% 450%;
  mask-size: 300% 450%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: fv-fog-wipe 3s var(--ease-sig) forwards;
}
@keyframes fv-fog-wipe {
  from { -webkit-mask-position: 100% 0%; mask-position: 100% 0%; }
  to   { -webkit-mask-position: 0% 70%;  mask-position: 0% 70%; }
}
/* ゆるズーム（Ken Burns）は写真がプレースホルダー（ロゴ・キャッチ焼き込み）の間は
   実テキストと二重に流れるため停止。実写真差し替え後に解禁検討:
   .js .fv__slide.is-active img { animation: fv-kenburns 7s linear forwards; }
   @keyframes fv-kenburns { from { transform: scale(1); } to { transform: scale(1.045); } } */
/* FVロード演出: ローディング明けに合わせてオーバーレイが順に現れる。
   --splash-end ＝ 青の退場が始まる時刻。2回目以降の訪問（スプラッシュをスキップする時）は
   main.js が 0s に書き換える（旧実装は固定2.7〜3.2s遅延のままで、スキップ時に
   ヘッダー・キャッチが3秒以上出てこない＝未完成のFVが表示され続けるバグがあった）。
   .fv__header へ掛けると子の .fv__logo の指定を親のopacityが飲むため、中身を個別に動かす。
   2026-08-11 */
.js .fv__logo  { animation: fv-fade-in 1.1s var(--ease-out-quint) calc(var(--splash-end, 2.2s) + 0.15s) both; }
.js .fv__catch { animation: fv-fade-in 1.3s var(--ease-out-quint) calc(var(--splash-end, 2.2s) + 0.3s) both; }
/* 2026-09-10: .fv__burger をこのセレクタ群から外した。fill-mode `both` で opacity:1 が
   永続保持され、sp.css の初期状態 opacity:0（＝TOPではハンバーガーを出さない）が
   効かなくなるため。ハンバーガーの出入りは sp.css の .is-stuck が持つ。 */
.js .fv__nav { animation: fv-fade-in 1.1s var(--ease-out-quint) calc(var(--splash-end, 2.2s) + 0.45s) both; }
@keyframes fv-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ==========================================================
   3. スクロールリビール（fadeup 28px / 1.1s / stagger 0.1s）
   ========================================================== */
.js .js-reveal,
.js .js-reveal-group > * {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 1.1s var(--ease-sig),
    transform 1.1s var(--ease-sig);
  transition-delay: var(--reveal-delay, 0s);
}
.js .js-reveal.is-inview,
.js .js-reveal-group.is-inview > * {
  opacity: 1;
  transform: none;
}
/* パララックス対象はJSがtransformを書くため、リビールはフェードのみ。
   transition-propertyからtransformを外す（残すとJSの毎フレームtransformが
   CSS遷移で1.1〜1.8s減衰し、スクロール停止後も写真が漂う実測バグ） */
.js .js-reveal--fade { transform: none; transition-property: opacity; }

/* news上端・footer上端は霧なし=普通の区切り（2026-07-16市岡さん指示。
   色境界・カード端は参考サイトも直線＝カンプ通り） */

/* 全幅写真帯（banner×2・notice）: 参考サイト②-A方式の通過スクラブ霧。
   fog_band.png = 透明|霧境界A|不透明|霧境界B|透明 の1枚を500%幅で敷き、
   帯がビューポートを通過する進行度T(0〜1)をそのままmask-position xへ:
   入場時=境界Aが横切って現れ、定位置=全開（霧なし）、退場時=境界Bが横切って溶ける */
.js .js-fogreveal {
  -webkit-mask-image: url(../img/fog_band.png);
  mask-image: url(../img/fog_band.png);
  -webkit-mask-size: 500% 200%;
  mask-size: 500% 200%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 0% 0%;
  mask-position: 0% 0%;
  /* will-change: mask-position は付けない（2026-08-25）: 全画面レイヤーが毎フレーム
     再描画され、スクラブ中のスクロールが詰まる。実測 FV帯 p90 32.9ms→17.5ms・
     33ms超フレーム 48/498→2/514（Chrome cpu6倍スロットリング）。見た目は同一 */
}

/* 筆記体スクリプト: ゆっくり順番に現れる（This→is→Okuhida→Winter） */
.js .concept__script {
  transition-duration: 1.8s, 1.8s;
}
.js .concept__script--this    { transition-delay: 0.1s; }
.js .concept__script--is      { transition-delay: 0.55s; } /* Thisに続いて2番目 */
.js .concept__script--okuhida { transition-delay: 0.15s; }
.js .concept__script--winter  { transition-delay: 0.35s; }

/* ==========================================================
   4. reduced-motion: 全アニメ無効＋初期状態を完成形に
   （pw-captureはreducedMotion:reduceで撮影＝静的完成形で照合）
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .loading { display: none; }
  .js .js-reveal,
  .js .js-reveal-group > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .js .fv__slide { transition: none; }
  .js .fv__slide.is-prev { animation: none; -webkit-mask-image: none; mask-image: none; opacity: 0; }
  .js .js-fogreveal { -webkit-mask-image: none; mask-image: none; animation: none; }
  .js .fv__slide.is-active img { animation: none; }
  .js .fv__logo,
  .js .fv__catch,
  .js .fv__nav,
  .js .fv__burger { animation: none; }
}

/* ==========================================================
   【2026-10-07 FV 写真5枚のフェード】横山さん依頼（冬物語ルーム 10/7）。
   霧マスクのワイプ（上の is-prev ＋ fv-fog-wipe）はやめ、opacity だけのフェードにする
   （市岡さん判断「フェード」＝合成だけで動き、全面の再描画が起きない。Windows のカクつき対策と両立）。
   切替: 次の写真（is-active）が前面で 0→1 にフェードイン、前の写真（is-prev）は下で表示したまま待ち、
   フェードが終わったら JS が is-prev を外す（2枚の不透明度が同時に下がらない＝途中で暗くならない）。
   2〜5枚目は .is-ready が付くまで display:none（loading="lazy" の画像は描画されるまで取得されない
   ＝1枚目と本文の読み込みを先に済ませる）。no-JS・動きを減らす設定では1枚目だけ
   ========================================================== */
.fv__slide:not(.fv__slide--1):not(.is-ready) { display: none; }
.js .fv__slide.is-active {
  z-index: 2;
  transition: opacity 2s cubic-bezier(0.45, 0, 0.55, 1);
}
.js .fv__slide.is-prev {
  z-index: 1;
  opacity: 1;
  -webkit-mask-image: none;
  mask-image: none;
  animation: none;
}
/* フェード中の写真だけ合成レイヤーに上げる（常時付けると5枚ぶんのレイヤーを抱え続ける） */
.js .fv__slide.is-active.is-fading { will-change: opacity; }
@media (prefers-reduced-motion: reduce) {
  .js .fv__slide.is-active { transition: none; }
}

/* ==========================================================
   【2026-10-12 ローディング短縮】HEROU定例 10/12（横山さん［11:05:58］「ローディングをもう少し早く」）。
   青幕の表示 2.2s→1.5s（main.js SPLASH_MS）に合わせ、ロゴの登場と霧ワイプも詰める:
   ロゴ 0.25s遅れ+1.7s → 0.15s遅れ+1.2s（筆記体 0.45s→0.3s遅れ）／霧ワイプ 2.6s → 2.0s。
   全体（読み込み〜FVが晴れるまで）約4.8s → 約3.5s。戻す時はこのブロックを消し、main.js の SPLASH_MS と
   done() 内の 2300/1900/3200 を 2200 と 2900/2400/3700 に戻す
   ========================================================== */
.js .loading__logo,
.js .loading__script { animation-duration: 1.2s; animation-delay: 0.15s; }
.js .loading__script { animation-delay: 0.3s; }
.js .loading.is-done { animation-duration: 2s; }

/* ==========================================================
   【2026-10-14 HEROU定例「シークレットモードで、たまに一瞬青い画面が出る」①】青幕の晴れ方の予備
   .loading.is-done の霧のマスク（img/mask_fog.png）は is-done が付いて初めて取りにいくため、キャッシュが空（シークレット）だと
   届くまで青幕が消えて FV が素で見え、届いた瞬間に青幕が全面で戻ってから霧で晴れていた（本番実測 SP390: 約70ms・遅い回線では1秒前後）。
   main.js §1 がスプラッシュ開始時に画像を取りにいき、晴らす時点で届いていなければ .is-done-fade（この不透明度フェード）にする。
   届いていれば従来どおり霧ワイプ。戻す時はこのブロックと main.js §1 の fogImg を消す
   ========================================================== */
.js .loading.is-done-fade {
  opacity: 0;
  transition: opacity 0.9s var(--ease-sig);
  pointer-events: none;
}

/* ==========================================================
   【2026-10-14 HEROU定例「たまに一瞬青い画面」②】2回目以降の訪問・戻る操作で、ロゴの無い青一色を一瞬出さない
   再訪（sessionStorage）と「動きを減らす」設定では、index.html / en.html の head のインラインスクリプトが html に .no-splash を付ける
   （最初の1枚を描く前）。main.js（defer）が後から .loading を消すまでの間に青一色が描かれていた（遅い回線の再訪・戻る操作で実測）。
   戻す時はこのブロックと head の1行（no-splash の try 文）を消す
   ========================================================== */
html.no-splash { --splash-end: 0s; }
.js.no-splash .loading,
.js.no-splash .loading-snow { display: none; }