/* ============================================================
   KAGVYA v3 preloader — Perfume(perfume-web.jp) c-loading 移植
   ------------------------------------------------------------
   ★アニメーションは本家の実定数を【完全再生】(スキップ/短縮なし):
     ::before = blur-slide1 8000ms(ease)  … 右へ退いてロゴを左→右に露出(登場)
     ::after  = blur-slide2 8000ms(ease)  … 左→右にロゴを飲み込む(退場)
     __logo   = blur-in 2000ms(1300ms遅延) … 退場時にロゴが blur 0→3px
     全体      = opacity 1→0 (500ms / 2700ms遅延) … 退場の最終フェード
   本家との差分は【アニメーション以外】のみ:
     - ロゴ = KAGVYA ワードマーク(元のまま)
     - opacity は初回ペイントから 1 に固定(本家 is-show の 0→1 fade-in は FOUC 防止で省略。黒地なので等価)
     - 尺は --kgl(1拍=1000ms, 本家と一致)。responsive 尺も本家(8000/7000/6000ms)
     - ページ表示は opacity dissolve 完了後に kg-reveal(hbars) を collapse して露出
   ★調整用フック(アニメには影響しない“無アニメ時間”だけを触るためのもの。既定=0=本家フル再生):
     --kg-dark-skip    : 登場前の真っ黒(エッジがロゴに届く前)を負delayでスキップする拍数
     --kg-swallow-skip : 退場で幕がロゴに届く前の空掃きを負delayでスキップする拍数
   内部遷移(html.is-internal-nav)は .kxn カーテン担当 → 表示しない。
   ============================================================ */
.kg-load{
  --kgl: 1000ms;              /* 1拍 = 本家と完全一致(blur-slide1 8000ms)。アニメの速さは変えない */
  --kg-dark-skip: -1.8;      /* 登場ワイプ前の“真っ黒”(幕が空の左を掃くだけ=無アニメ)だけ前詰め。ロゴが出始める寸前まで=ワイプの頭は削らない。尺8000ms不変=速度は本家のまま */
  --kg-swallow-skip: -1.25;  /* 登場→退場の“待機”を約1.2sに: 幕がロゴに届くまでの空掃き(無ロゴ時間)を前詰め。飲み込みの速さ(尺8000ms)は不変 */
  --kg-blur: 66.7px;         /* 幕(blur-slide1/2, ::after)のブラー最大値。本家=100px → 2/3 に (ボス指示) */
  --kg-blur-logo: 2px;       /* ロゴ(blur-in)のブラー。本家=3px → 2/3 に */
  position: fixed;
  inset: 0;
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100000;           /* .kg-reveal(99999)/.kxn(250)/header より上 */
  opacity: 1;
}
/* narrow は本家の responsive 尺に一致(8000/7000/6000ms) */
@media only screen and (max-width: 1024px){ .kg-load{ --kgl: 875ms; } }
@media only screen and (max-width: 560px){  .kg-load{ --kgl: 750ms; } }

/* 内部遷移は .kxn 黒カーテン担当なのでプリローダは出さない(初回ペイントから) */
html.is-internal-nav .kg-load{ display: none !important; }

.kg-load__logo{ width: 300px; display: block; }
@media only screen and (max-width: 1024px){ .kg-load__logo{ width: 250px; } }
@media only screen and (max-width: 560px){  .kg-load__logo{ width: 200px; } }

/* 登場: 右端の“ぼけた黒幕”が右へ退いてロゴを露出 = 本家 blur-slide1 8000ms・ease(完全再生) */
.kg-load::before{
  content: "";
  display: block;
  position: absolute;
  top: 0; right: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  z-index: 1;
  animation: kg-blur-slide1 calc(var(--kgl) * 8) calc(var(--kgl) * var(--kg-dark-skip)) forwards;
}

/* 退場用: 左端の“ぼけた黒幕” = 本家 ::after(blur-slide2 の対象) */
.kg-load::after{
  content: "";
  display: block;
  position: absolute;
  top: 0; left: 0;
  width: 0;
  height: 100%;
  background-color: #000;
  filter: blur(var(--kg-blur));
  z-index: 1;
}

/* ---------- 退場 = 本家の実定数を完全再生:
   ::after が左→右にロゴを飲み込む(blur-slide2 8000ms) + ロゴが blur-in(2000ms,1300ms遅延)
   + 全体が opacity 1→0(500ms, 2700ms遅延)。opacity 完了で JS が loader 撤去 → 背後の hbars を collapse。 ---------- */
.kg-load.is-hide{
  opacity: 0;
  pointer-events: none;
  transition: opacity calc(var(--kgl) * 0.5) calc(var(--kgl) * 2.7);
}
.kg-load.is-hide::after{
  animation: kg-blur-slide2 calc(var(--kgl) * 8) calc(var(--kgl) * var(--kg-swallow-skip)) forwards;
}
.kg-load.is-hide .kg-load__logo{
  /* blur-in の“開始待ち”も待機短縮に合わせて前倒し(本家1.3拍→0.5拍)。blur の量(0→2px)・尺(2拍)は不変 */
  animation: kg-blur-in calc(var(--kgl) * 2) calc(var(--kgl) * 0.5) forwards;
}

@keyframes kg-blur-slide1{
  0%   { width: 100%; filter: blur(0); }
  100% { width: 0;    filter: blur(var(--kg-blur)); }
}
@keyframes kg-blur-slide2{
  0%   { width: 0;    filter: blur(var(--kg-blur)); }
  100% { width: 100%; filter: blur(0); }
}
@keyframes kg-blur-in{
  0%   { filter: blur(0); }
  100% { filter: blur(var(--kg-blur-logo)); }
}