@charset "UTF-8";

/* =========================================================
   オープニング演出（以前のサイトから復元）
   幕（白）→ ロゴ → LEGAL VIBES を1文字ずつ → 罫線 → タグライン
   → 幕が2枚、時間差で上へ抜けて本編が現れる

   theme-exam.css の変数だけを参照する独立ファイルです。
   尺は下の3つの変数で調整できます（js/splash.js がこの値を読みます）。
   ========================================================= */

:root {
  --splash-bg:   #ffffff;   /* 手前の幕の色 */
  --splash-in:   1.5s;      /* ロゴと文字が出そろうまで */
  --splash-hold:  .45s;     /* 見せる時間 */
  --splash-out:   .9s;      /* 幕が上がる時間 */
}

/* JS無効時は幕を出さない（本編が隠れたままになるのを防ぐ） */
.splash { display: none; }

.js .splash {
  display: grid;
  position: fixed;
  inset: 0;
  z-index: 1000;
  place-items: center;
  overflow: hidden;
}

body.is-splashing { overflow: hidden; }

/* 二枚重ねの幕。時間差で上へ抜けることで奥行きを出す */
.splash__curtain {
  position: absolute;
  inset: 0;
  transform: translateY(0);
  transition: transform var(--splash-out) cubic-bezier(.76, 0, .24, 1);
}
.splash__curtain--back  { background: var(--ink); }
.splash__curtain--front { background: var(--splash-bg); }

.splash__inner {
  position: relative;
  display: grid;
  justify-items: center;
  padding-inline: 20px;
  text-align: center;
  transition: opacity .5s ease, transform .7s ease;
}

/* --- ロゴ --- */
.splash__logo {
  width: 84px;
  height: 84px;
  border-radius: 10px;
  object-fit: contain;
  opacity: 0;
  transform: translateY(10px) scale(.9);
  animation: splash-mark .8s cubic-bezier(.22,.61,.36,1) .15s forwards;
}

/* --- ワードマーク（1文字ずつ立ち上がる） --- */
.splash__word {
  display: flex;
  margin: 26px 0 0;
  color: var(--ink);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(1.5rem, 1.05rem + 2.1vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .28em;
  margin-right: -.28em;   /* 末尾の字間を打ち消して中央に見せる */
}
.splash__word > span {
  display: inline-block;
  opacity: 0;
  transform: translateY(14px);
  animation: splash-letter .7s cubic-bezier(.22,.61,.36,1) forwards;
}
.splash__space { width: .45em; }

.splash__word > span:nth-child(1)  { animation-delay: .40s; }
.splash__word > span:nth-child(2)  { animation-delay: .46s; }
.splash__word > span:nth-child(3)  { animation-delay: .52s; }
.splash__word > span:nth-child(4)  { animation-delay: .58s; }
.splash__word > span:nth-child(5)  { animation-delay: .64s; }
.splash__word > span:nth-child(6)  { animation-delay: .70s; }
.splash__word > span:nth-child(7)  { animation-delay: .76s; }
.splash__word > span:nth-child(8)  { animation-delay: .82s; }
.splash__word > span:nth-child(9)  { animation-delay: .88s; }
.splash__word > span:nth-child(10) { animation-delay: .94s; }
.splash__word > span:nth-child(11) { animation-delay: 1.00s; }

/* --- 罫線（左から引かれる） --- */
.splash__line {
  width: min(240px, 52vw);
  height: 3px;
  margin-top: 26px;
  background: var(--teal-pale);
  transform: scaleX(0);
  transform-origin: left center;
  animation: splash-line .7s cubic-bezier(.22,.61,.36,1) 1.02s forwards;
}

/* --- タグライン --- */
.splash__tagline {
  margin: 18px 0 0;
  color: var(--mute);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .3em;
  text-indent: .3em;
  opacity: 0;
  animation: splash-fade .7s cubic-bezier(.22,.61,.36,1) 1.22s forwards;
}

/* --- 退場 --- */
.splash.is-leaving .splash__inner {
  opacity: 0;
  transform: translateY(-14px);
  transition-duration: .45s;
}
.splash.is-leaving .splash__curtain--front { transform: translateY(-101%); }
.splash.is-leaving .splash__curtain--back {
  transform: translateY(-101%);
  transition-delay: .12s;
}

@keyframes splash-mark   { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes splash-letter { to { opacity: 1; transform: translateY(0); } }
@keyframes splash-line   { to { transform: scaleX(1); } }
@keyframes splash-fade   { to { opacity: 1; } }

/* JSが途中で失敗しても、6秒後には必ず幕が消えるようにする */
.js .splash {
  animation: splash-failsafe 0s linear 6s forwards;
}
@keyframes splash-failsafe {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

@media (prefers-reduced-motion: reduce) {
  .splash *,
  .splash { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}