@charset "utf-8";
/* ============================================================================
   いくらや 京成臼井駅前店 ── オープニング（幕開け）

   黒の幕 → 金のヘアライン → 英字が上下から寄る → 幕が上下に引き抜ける。
   ロゴ画像は使わない（レギュレーション上NG）。文字・線・面だけで構成する。

   色は :root の --kk-* を借りる。単体で読み込まれた場合も崩れないよう、
   var() には既存値と同じ既定値を書いておく。

   1. 表示の門（JSが付けたクラスがある時だけ出す）
   2. 幕（上下2枚）
   3. 金のヘアライン
   4. 英字
   5. 引き抜き
   6. MVの着地
   7. 保険（JSが途中で死んでも必ず消える）
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. 表示の門
   幕が居座る事故を根から断つため、「JSが .ik-op-on を付けた時だけ見える」
   という向きにしておく。JSが1行も走らなければ幕は最初から display:none。
   ------------------------------------------------------------------------ */
.ik-op{ display:none; }

html.ik-op-on .ik-op{
  display:block;
  position:fixed; inset:0;
  z-index:2147483000;              /* #fixed-contact-bar(99990) より確実に前 */
  overscroll-behavior:none;        /* 幕の上で慣性スクロールを起こさせない */
  contain:layout paint;            /* 画面全面の再描画を幕の中に閉じ込める */
}

/* ---------------------------------------------------------------------------
   2. 幕（上下2枚）
   1枚の面を割るのではなく最初から2枚重ねる。中央は 1px ずつ重ねて、
   ビューポート高が奇数のときに継ぎ目の線が出るのを防ぐ。
   ------------------------------------------------------------------------ */
.ik-op__panel{
  position:absolute; left:0; right:0;
  height:calc(50% + 1px);
  background:var(--kk-bg, #080706);
  will-change:transform;
  transform:translate3d(0,0,0);
}
.ik-op__panel--t{ top:0; }
.ik-op__panel--b{ bottom:0; }

/* 単なる黒だと面が死んで見えるので、中央（線のきわ）だけごく薄く金を差す。
   高級感は「光がどこから来ているか」が分かると出る。 */
.ik-op__panel::after{
  content:""; position:absolute; left:0; right:0; height:38%;
  pointer-events:none;
}
.ik-op__panel--t::after{
  bottom:0;
  background:linear-gradient(to top, rgba(229,201,130,.085), rgba(229,201,130,0));
}
.ik-op__panel--b::after{
  top:0;
  background:linear-gradient(to bottom, rgba(229,201,130,.085), rgba(229,201,130,0));
}

/* ---------------------------------------------------------------------------
   3. 金のヘアライン
   幕と同じ z 面ではなく一段上に置く。継ぎ目の重なりを隠す役目も兼ねる。
   ------------------------------------------------------------------------ */
.ik-op__line{
  position:absolute; left:50%; top:50%;
  width:min(620px, 74vw); height:1px;
  margin:-1px 0 0 calc(min(620px, 74vw) / -2);
  background:linear-gradient(90deg,
              rgba(229,201,130,0) 0%,
              var(--kk-accent, #E5C982) 22%,
              #FFF3D2 50%,
              var(--kk-accent, #E5C982) 78%,
              rgba(229,201,130,0) 100%);
  transform:scaleX(0);
  will-change:transform;
}
html.ik-op-draw .ik-op__line{
  transform:scaleX(1);
  transition:transform .42s cubic-bezier(.22,.68,.16,1);
}
/* 引き抜きに入ったら線は素早く消す。線が残ると幕だけが動いて見え、
   「割れた」ではなく「ずれた」に見えてしまう。 */
html.ik-op-wipe .ik-op__line{
  transform:scaleX(1.06);
  opacity:0;
  transition:transform .34s ease-out, opacity .22s ease-out;
}

/* ---------------------------------------------------------------------------
   4. 英字
   幕そのものの子にしているので、幕が抜ければ文字も一緒に去る。
   別レイヤーに置くと、幕だけ抜けて文字が宙に残る。
   ------------------------------------------------------------------------ */
.ik-op__txt{
  position:absolute; left:0; right:0;
  text-align:center;
  color:var(--kk-accent, #E5C982);
  white-space:nowrap;
  opacity:0;
  will-change:transform, opacity;
}
/* 字間を詰める分だけ左に寄るので、同量の padding-left で中心を保つ */
.ik-op__txt--sub{
  bottom:22px;
  font-family:"DM Mono","Roboto Mono","SFMono-Regular",Consolas,monospace;
  font-size:clamp(9.5px, 1.15vw, 12px);
  letter-spacing:.62em; padding-left:.62em;
  color:var(--kk-mute, #C9BEA8);
  transform:translate3d(0,-14px,0);
}
.ik-op__txt--main{
  top:20px;
  font-family:"Noto Serif JP","Yu Mincho",YuMincho,"Hiragino Mincho ProN",serif;
  font-weight:500;
  font-size:clamp(28px, 5.6vw, 62px);
  line-height:1.05;
  letter-spacing:.5em; padding-left:.5em;
  transform:translate3d(0,16px,0);
  /* 金は単色より、上から下へ明るさが落ちる方が金属に見える */
  background:linear-gradient(180deg, #FFF0CE 0%, var(--kk-accent,#E5C982) 46%, #B8944F 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

html.ik-op-draw .ik-op__txt{
  opacity:1;
  transform:translate3d(0,0,0);
}
html.ik-op-draw .ik-op__txt--sub{
  letter-spacing:.42em; padding-left:.42em;
  transition:opacity .34s ease-out .12s,
             transform .46s cubic-bezier(.18,.8,.24,1) .12s,
             letter-spacing .46s cubic-bezier(.18,.8,.24,1) .12s,
             padding-left .46s cubic-bezier(.18,.8,.24,1) .12s;
}
html.ik-op-draw .ik-op__txt--main{
  letter-spacing:.24em; padding-left:.24em;
  transition:opacity .34s ease-out .16s,
             transform .48s cubic-bezier(.18,.8,.24,1) .16s,
             letter-spacing .48s cubic-bezier(.18,.8,.24,1) .16s,
             padding-left .48s cubic-bezier(.18,.8,.24,1) .16s;
}

/* ---------------------------------------------------------------------------
   5. 引き抜き
   加速して抜ける（ease-in 寄り）。等速や ease-out だと幕が「止まりながら
   消える」ように見えて、いつまでも待たされた印象になる。
   ------------------------------------------------------------------------ */
html.ik-op-wipe .ik-op__panel{
  transition:transform .52s cubic-bezier(.62,.02,.34,1);
}
html.ik-op-wipe .ik-op__panel--t{ transform:translate3d(0,-100.5%,0); }
html.ik-op-wipe .ik-op__panel--b{ transform:translate3d(0, 100.5%,0); }

/* ---------------------------------------------------------------------------
   6. MVの着地
   幕の下でわずかに拡大しておき、幕が抜けるのと同時に等倍へ戻す。
   1.0 に戻したあとクラスを外すので transform は none に戻り、
   ページ本来のレイアウト（position:fixed の包含ブロック等）に影響を残さない。
   ------------------------------------------------------------------------ */
html.ik-op-on .ik-op-rise{
  transform:scale(1.045);
  transform-origin:50% 38%;
  will-change:transform;
}
html.ik-op-wipe .ik-op-rise{
  transform:scale(1);
  transition:transform .54s cubic-bezier(.2,.72,.24,1);
}

/* ---------------------------------------------------------------------------
   7. 保険
   JSが例外で止まりタイマーごと死んだ場合でも、CSSだけで幕を無効化する。
   演出は 1.4秒以内に終わる設計なので、3秒はどう転んでも異常事態。
   ------------------------------------------------------------------------ */
html.ik-op-on .ik-op{
  animation:ik-op-failsafe .3s ease-out 2.9s forwards;
}
/* 一瞬で消すと 1ms の間に discrete なプロパティ（visibility）が確定しないことが
   あるので、0.3秒かけて抜く。異常時にしか走らないので長さは見た目に影響しない。 */
@keyframes ik-op-failsafe{
  to{ opacity:0; visibility:hidden; pointer-events:none; }
}

/* ---------------------------------------------------------------------------
   動きを減らす設定では演出そのものを出さない（JS側でも出さないが、
   CSSだけ読まれた場合の二重の歯止め）。
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  html.ik-op-on .ik-op{ display:none; }
  html.ik-op-on .ik-op-rise{ transform:none; }
}