/* ==================================================
   Opening Animation
   初回訪問時のみ表示されるオープニングアニメーション
   Layout & Base Styles (Animation is handled by GSAP)
   ================================================== */

/* オーバーレイコンテナ */
.opening {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 背景は.opening__overlayで管理するため透明に */
  background: transparent;
  visibility: visible;
  opacity: 1;
  /* マスク効果中にコンテンツを見せないため */
  pointer-events: none;
}

/* 非表示状態（アニメーション完了後） */
.opening.is-hidden {
  display: none;
  visibility: hidden;
  pointer-events: none;
}

/* ==================================================
   Phase 1: テキストロゴ「generous」
   ================================================== */
.opening__text-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* PCサイズ拡大: 約40%増 */
  width: min(400px, 85vw);
  /* 白背景より手前 */
  z-index: 10000;
  opacity: 0;
  /* JSで表示させるまで隠す */
  visibility: hidden;
  /* オーバーフロー対策 */
  overflow: visible;
}

.opening__text-logo svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible !important;
}

.opening__char {
  /* Brand Yellow */
  fill: #DBF227;
  opacity: 0;
}

/* Text morph target dot */
#text-dot {
  fill: #DBF227;
}

/* ==================================================
   Phase 2: Gロゴ（Yellow - 単体表示用）
   viewBox拡大（140→200, 比率1.43）に合わせてwidthも拡大
   ================================================== */
.opening__g-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* PCサイズ拡大: 約45%増 */
  width: min(650px, 55vw);
  z-index: 10000;
  opacity: 0;
  /* JSで表示させるまで隠す */
  visibility: hidden;
  /* オーバーフロー対策 */
  overflow: visible;
  /* iOS Safari向け: 明示的なアスペクト比とcontainment */
  aspect-ratio: 1 / 1;
  contain: layout style;
}

/* Tablet (1023.98px以下): 36vw * 1.3 ≈ 47vw */
@media screen and (max-width: 1023.98px) {
  .opening__g-logo {
    width: 47vw;
  }
}

/* Smartphone (767.98px以下): 72vw * 1.3 ≈ 94vw（ただし画面幅を超えないよう90vwに制限） */
@media screen and (max-width: 767.98px) {
  .opening__g-logo {
    width: 90vw;
  }
}

.opening__g-logo svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible !important;
  /* iOS Safari向けGPUレンダリング最適化 */
  will-change: auto;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

/* ==================================================
   Phase 3: Reveal Container (マスク効果)
   ================================================== */
/* オープニングオーバーレイ（マスク適用対象、ロゴの後ろに配置） */
.opening__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* ロゴ（10000）より下 */
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  /* はみ出したbox-shadowを隠す */
  background: transparent;
  /* 背景は透明（irisの影が白背景になる） */
  pointer-events: none;
}

/* アイリス（穴） */
.opening__iris {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-radius: 50%;
  background: transparent;
  /* 巨大なbox-shadowで周りを白く塗りつぶす */
  /* 画面対角線より十分大きければOK */
  box-shadow: 0 0 0 200vmax #fff;
  will-change: width, height;
}