/* =================================================================
   OPENING OVERLAY（2026-06-01 / CCO設計）
   参考: TomoRevo / u-seven の「全画面オーバーレイ＋ロゴ＋キャッチ＋SKIP」構造
   - ブランド: 緑単軸（メイン #5B8C57 / 深緑 #3F6B3D / 明緑 #8FB571 / 淡緑 #E8F0E0）
   - 朝の光のグラデ背景 + 中央ロゴ fade-in + キャッチ遅延 fade-in + 葉舞い + SKIPボタン
   - 自動フェードアウト: 3.5s開始 / 4.0s完了
   - sessionStorage で 1セッション 1回（JS側で制御）
   ================================================================= */

.opening-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;            /* ヘッダー(z:100台)・hero-rich(z:1) より遥か上 */
  display: flex;
  align-items: center;
  justify-content: center;

  /* 朝の光が左上から差し込み、外周に淡緑が深まる（いろはの朝） */
  background:
    radial-gradient(ellipse 70% 50% at 30% 18%,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 255, 255, 0)    60%),
    linear-gradient(180deg,
      #FBFDF8 0%,
      #F2F7EC 35%,
      #E8F0E0 70%,
      #D4E5C5 100%);

  /* 初期はクリックを通さない設定（SKIPボタンは pointer-events:auto で個別ON） */
  pointer-events: auto;

  /* 自動フェードアウト（is-leavingクラスでトリガー） */
  opacity: 1;
  transition: opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);

  overflow: hidden;
}

.opening-overlay.is-leaving {
  opacity: 0;
  pointer-events: none;
}

.opening-overlay.is-done {
  display: none !important;
}

/* 中央コンテンツ */
.opening-overlay__inner {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 24px;
}

/* ロゴ: ふわっと浮き出る（blur+scale+translateY → クッキリ） */
.opening-overlay__logo {
  display: block;
  width: clamp(140px, 28vw, 220px);
  height: auto;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(18px) scale(0.88);
  filter: blur(8px);
  animation: openingLogoEmerge 1.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.3s forwards;
  will-change: opacity, transform, filter;
}

@keyframes openingLogoEmerge {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.88);
    filter: blur(8px);
  }
  60% {
    opacity: 1;
    filter: blur(1.5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* キャッチ: ロゴが現れた後にゆっくり fade-in */
.opening-overlay__catch {
  margin: 28px 0 0;
  font-family: var(--font-serif, '游明朝', YuMincho, 'Hiragino Mincho ProN', serif);
  font-size: clamp(18px, 3.4vw, 26px);
  font-weight: 500;
  color: #3F6B3D;            /* 深緑 */
  letter-spacing: 0.12em;
  line-height: 1.6;
  opacity: 0;
  transform: translateY(10px);
  animation: openingCatchFade 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) 1.4s forwards;
  will-change: opacity, transform;
}

/* サブテキスト: 屋号 */
.opening-overlay__sub {
  margin: 14px 0 0;
  font-family: var(--font-sans, 'Noto Sans JP', sans-serif);
  font-size: clamp(12px, 2.2vw, 14px);
  font-weight: 400;
  color: #5B8C57;            /* メイン緑 */
  letter-spacing: 0.18em;
  opacity: 0;
  animation: openingCatchFade 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) 2.0s forwards;
}

@keyframes openingCatchFade {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* SKIPボタン: 右下 */
.opening-overlay__skip {
  position: absolute;
  right: 24px;
  bottom: 24px;
  background: transparent;
  border: 1px solid rgba(63, 107, 61, 0.35);
  border-radius: 999px;
  padding: 8px 18px;
  font-family: var(--font-sans, 'Noto Sans JP', sans-serif);
  font-size: 12px;
  font-weight: 500;
  color: #3F6B3D;
  letter-spacing: 0.14em;
  cursor: pointer;
  opacity: 0;
  pointer-events: auto;      /* オーバーレイは通常クリック透過なし → SKIPは押せる */
  animation: openingCatchFade 1.0s cubic-bezier(0.22, 0.61, 0.36, 1) 2.4s forwards;
  transition: background-color 0.2s, border-color 0.2s;
  z-index: 3;
}

.opening-overlay__skip:hover,
.opening-overlay__skip:focus-visible {
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(63, 107, 61, 0.55);
  outline: none;
}

/* 葉が舞うレイヤー（JSで葉SVGを5枚生成して配置） */
.opening-overlay__leaves {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

/* 葉単体（JSが付与する className: opening-leaf） */
.opening-leaf {
  position: absolute;
  top: -10%;
  left: var(--leaf-x, 50%);
  width: var(--leaf-size, 28px);
  height: calc(var(--leaf-size, 28px) * 1.4);
  color: var(--leaf-color, #8FB571);
  opacity: 0;
  animation: openingLeafFall var(--leaf-duration, 4.5s) cubic-bezier(0.34, 0, 0.55, 1) var(--leaf-delay, 0s) forwards;
  will-change: transform, opacity;
}

.opening-leaf svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(63, 107, 61, 0.12));
}

@keyframes openingLeafFall {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0;
  }
  15% {
    opacity: var(--leaf-opacity, 0.75);
  }
  45% {
    transform: translate(calc(var(--leaf-drift, 60px) * 0.7), 45vh) rotate(calc(var(--leaf-rotate, 280deg) * 0.5));
  }
  80% {
    transform: translate(calc(var(--leaf-drift, 60px) * 1.0), 80vh) rotate(calc(var(--leaf-rotate, 280deg) * 0.85));
    opacity: var(--leaf-opacity, 0.6);
  }
  100% {
    transform: translate(calc(var(--leaf-drift, 60px) * 1.1), 108vh) rotate(var(--leaf-rotate, 280deg));
    opacity: 0;
  }
}

/* ---------------------------------------------------------------
   モバイル（375px等）: PC設計を維持しつつ小幅化
   --------------------------------------------------------------- */
@media (max-width: 768px) {
  .opening-overlay__logo {
    width: clamp(120px, 38vw, 160px);
  }
  .opening-overlay__catch {
    font-size: clamp(15px, 4.2vw, 20px);
    letter-spacing: 0.08em;
    padding: 0 16px;
  }
  .opening-overlay__sub {
    font-size: 11px;
    letter-spacing: 0.14em;
  }
  .opening-overlay__skip {
    right: 16px;
    bottom: 16px;
    padding: 7px 14px;
    font-size: 11px;
  }
}

/* ---------------------------------------------------------------
   prefers-reduced-motion: 静的表示で2.0秒だけ見せて消す
   - ロゴ・キャッチ・サブは透明度1で即表示
   - 葉舞いは非表示
   - JSが reduce-motion を検知して duration を 2.0s に短縮（後述）
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .opening-overlay__logo,
  .opening-overlay__catch,
  .opening-overlay__sub,
  .opening-overlay__skip {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
  .opening-overlay__leaves { display: none !important; }
}