@charset "UTF-8";
/* KBF 2026 – 中止の告知（登場の演出）

   オープニングのロゴが消えたあと、赤い幕が上下に開いて知らせを大きく出す。
   知らせそのものはページ上部に残り続けるので、幕は数秒で引く。

   幕が出ているあいだページを触れなくなるため、退場はCSSだけで完結させる。
   JSが止まっても画面が覆われたままにならない。

   公式サイトと公式アプリの両方から読み込む。
   同じものを2か所に書くと、必ず片方が古くなるため1つにまとめてある。
   色は読み込んだ側の :root（--accent）に従う。 */
.cancel-stage {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  animation: cancel-stage-out 0.6s ease 4.2s forwards;
}
.cancel-stage__sheet {
  position: absolute;
  inset: 0;
  background-color: var(--accent);
  transform: scaleY(0);
  animation: cancel-sheet 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.cancel-stage__body {
  position: relative;
  /* 「KBF 2026 は中止となりました」が折り返さずに収まる幅。
     途中で折ると「中／止」のように語の真ん中で切れて読みにくい。 */
  max-width: min(46rem, 100%);
  text-align: center;
  color: #FFFFFF;
}
.cancel-stage__label {
  margin: 0 0 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.35em;
  animation: cancel-rise 0.5s ease 0.5s both;
}
.cancel-stage__headline {
  margin: 0;
  font-size: clamp(1.35rem, 5.8vw, 2.75rem);
  font-weight: 900;
  line-height: 1.4;
  text-wrap: balance;
  animation: cancel-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.7s both;
}
.cancel-stage__rule {
  display: block;
  width: 3.5rem;
  height: 3px;
  margin: 1.25rem auto 0;
  background-color: #FFFFFF;
  animation: cancel-rule 0.5s cubic-bezier(0.22, 1, 0.36, 1) 1.05s both;
}
.cancel-stage__message {
  margin: 1.25rem 0 0;
  font-size: clamp(0.9rem, 3.4vw, 1.05rem);
  line-height: 1.9;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  animation: cancel-rise 0.5s ease 1.2s both;
}
.cancel-stage__time {
  margin: 1rem 0 0;
  font-size: 0.78rem;
  opacity: 0.85;
  font-variant-numeric: tabular-nums;
  animation: cancel-rise 0.5s ease 1.4s both;
}
.cancel-stage__hint {
  margin: 2.25rem 0 0;
  font-size: 0.72rem;
  animation: cancel-fade 0.6s ease 2.2s both;
}

@keyframes cancel-sheet {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
@keyframes cancel-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes cancel-rule {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes cancel-fade {
  from { opacity: 0; }
  to   { opacity: 0.7; }
}
@keyframes cancel-stage-out {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* 幕が出ているあいだは背後を動かさない */
.cancel-stage-open,
.cancel-stage-open body { overflow: hidden; }

/* 動きを抑える設定のときは演出しない（知らせは上部に出たままになる） */
@media (prefers-reduced-motion: reduce) {
  .cancel-stage { display: none; }
}