/* ============================================================
   TEST: オープニングアニメーション（試作）
   ------------------------------------------------------------
   削除する場合は以下の3点だけでOKです（既存CSSへの影響なし）。
   1. このファイルを削除
   2. functions.php 内の opening.css / opening.js の enqueue 部分を削除
   3. front-page.php 内の「TEST: オープニングアニメーション」ブロックを削除
   ------------------------------------------------------------
   フォント・アニメーション方法は、既存のファーストビュー
   （.hero-tagline / @keyframes heroFadeUp）の指定をそのまま流用しています。
   heroFadeUp は css/style.css 側で定義済みのものを再利用します。
   ============================================================ */

/* オープニング表示中はページ側のスクロールバーを出さない（JSでhtmlに付与） */
html.opening-active,
html.opening-active body {
  overflow: hidden;
}

/* 画面全体を覆う最前面レイヤー */
.opening-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  overflow: hidden;
  background: #000; /* 画像読み込み前の一瞬の黒背景 */
}

/* 背景画像：Ken Burns風にゆっくりズーム（scale 1 → 1.08） */
.opening-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  animation: openingZoom 6s ease-out forwards;
}

@keyframes openingZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

/* 文字を読みやすくするための黒半透明オーバーレイ */
.opening-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

/* 中央テキスト（英語キャッチコピー＋日本語コピー） */
.opening-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
  width: 90%;
  max-width: 600px;
  padding: 0 20px;
}

/* 英語キャッチコピー：.hero-tagline とまったく同じフォント指定
   ただし、幅の狭いiPhoneでも必ず1行に収まるよう white-space:nowrap にし、
   下の @media で画面幅に応じて自動的に縮小する。 */
.opening-en {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 1.7px;
  color: #fff;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  /* 既存の heroFadeUp（style.css）をそのまま使用。0.8秒後に開始 */
  animation: heroFadeUp 1.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.8s both;
}

/* 幅の狭い画面では、1行に収まるよう段階的にフォントサイズを縮小 */
@media (max-width: 430px) {
  .opening-en { font-size: 14px; letter-spacing: 1.3px; }
}

@media (max-width: 375px) {
  .opening-en { font-size: 12px; letter-spacing: 1px; }
}

@media (max-width: 340px) {
  .opening-en { font-size: 10.5px; letter-spacing: 0.8px; }
}

/* 日本語コピー：ヒーローと同じ画像(hero-brand.png)をそのまま使用するため
   フォントの近似は不要になった。画像そのものなので完全に同じ見た目になる。 */
.opening-ja-img {
  width: 360px;
  max-width: 100%;
  height: auto;
  /* 「文字を書いて現れる」演出：.hero-brand とまったく同じマスクワイプ方式(heroWrite)を流用 */
  -webkit-mask-image: linear-gradient(to right, black 45%, transparent 55%);
  mask-image: linear-gradient(to right, black 45%, transparent 55%);
  -webkit-mask-size: 220% 100%;
  mask-size: 220% 100%;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  /* 1.5秒後から2.5秒かけて書かれる（4.0秒で完了。以前のテキスト版と同じ完了タイミング） */
  animation: heroWrite 2.5s cubic-bezier(0.4, 0, 0.2, 1) 1.5s forwards;
}

/* ------------------------------------------------------------
   切り替え演出：「一瞬吸い込まれるように暗転」→「明るいフラッシュとともにHPが現れる」
   JSがタイマーで .opening-screen / .opening-flash に is-hidden / is-flashing を付与する。
   0%〜35%：暗転（オーバーレイが黒一色になる＝吸い込まれる感じ）
   35%〜100%：opening-screen自体が消えていき、同時に白いフラッシュが一瞬光る
   ------------------------------------------------------------ */
.opening-screen.is-hidden {
  animation: openingSuckOut 1.2s ease forwards;
  pointer-events: none; /* フェード中から下のページを操作できるように */
}

.opening-screen.is-hidden .opening-overlay {
  animation: openingDarken 1.2s ease forwards;
}

/* テキスト（英語コピー＋日本語画像）も暗転と同時にフェードアウトさせる。
   これがないと、背景が暗転してもテキストだけ取り残されたように見えてしまう。 */
.opening-screen.is-hidden .opening-text {
  animation: openingTextOut 0.6s ease forwards;
}

@keyframes openingSuckOut {
  0%   { opacity: 1; }
  35%  { opacity: 1; }   /* まずは暗転が先に完了するまで画面を保持 */
  100% { opacity: 0; }
}

@keyframes openingTextOut {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes openingDarken {
  0%   { background: rgba(0, 0, 0, 0.45); }
  35%  { background: rgba(0, 0, 0, 1); }  /* 吸い込まれるように黒一色に */
  100% { background: rgba(0, 0, 0, 1); }
}

/* フェードアウト完了後：JSがこのクラスを付与して完全に非表示 */
.opening-screen.is-removed {
  display: none;
}

/* 白いフラッシュ（opening-screenとは独立した要素なので、暗転の影響を受けず綺麗に光る） */
.opening-flash {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}

.opening-flash.is-flashing {
  animation: openingFlash 1.2s ease forwards;
}

@keyframes openingFlash {
  0%   { opacity: 0; }
  35%  { opacity: 0; }   /* 暗転が終わるまでは光らない */
  55%  { opacity: 0.85; } /* HPが現れる瞬間、一瞬明るく */
  100% { opacity: 0; }
}

/* ------------------------------------------------------------
   メインメニュー(ヘッダー)のフェードイン演出
   オープニングが消えたあと、少し間を置いてヘッダーをふわっと表示する。
   このCSSはこのファイル(opening.css)を削除すれば自動的に無効になり、
   ヘッダーは常時表示の元の状態に戻る。
   ------------------------------------------------------------ */
.site-header {
  opacity: 0;
}

.site-header.opening-menu-reveal {
  animation: heroFadeUp 1.8s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* PCではやや画像を大きく */
@media (min-width: 1024px) {
  .opening-ja-img { width: 560px; }
}