/* ============================================================
   v2モック：オープニングのロゴアニメ
   1. 「eg」（眼鏡）だけを大きく表示
   2. 右目（g）がウインク
   3. 引いていき、残りの文字が現れてロゴ全体になる
   4. 幕が消えてサイトが見える
   時間配分は下の変数で調整する。
   ============================================================ */

.intro {
  --intro-wink-at: 0.7s; /* ウインクを始める時刻 */
  --intro-zoom-at: 1.5s; /* 引き始める時刻 */
  --intro-zoom-dur: 1s; /* 引く時間 */
  --intro-out-at: 3s; /* 幕を消し始める時刻 */
  --intro-zoom: 2.4; /* 最初の拡大率 */

  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--mm-bg, #fff);
  cursor: pointer;
  animation: introOut 0.6s ease var(--intro-out-at) both;
}

.intro.is-skipped {
  animation: introOut 0.25s ease both;
}

.intro-logo {
  width: min(64vw, 440px);
  height: auto;
  overflow: visible;
  /* 「eg」の中心（viewBox上の 782,315）を基準に拡大し、画面中央へ寄せておく */
  transform-origin: 44.3% 29.1%;
  animation: introZoom var(--intro-zoom-dur) cubic-bezier(0.65, 0, 0.25, 1) var(--intro-zoom-at) both;
}

.intro-eg {
  animation: introFade 0.4s ease 0.1s both;
}

.intro-rest {
  animation: introFade 0.6s ease calc(var(--intro-zoom-at) + var(--intro-zoom-dur) * 0.45) both;
}

/* まぶたの線（y=322）を軸に目を閉じる */
.intro-wink {
  transform-origin: 1027px 322px;
  animation: introWink 0.5s ease-in-out var(--intro-wink-at) both;
}

@keyframes introFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes introWink {
  0%,
  100% {
    transform: scaleY(1);
  }
  30%,
  60% {
    transform: scaleY(0.04);
  }
}

@keyframes introZoom {
  from {
    transform: translate(5.7%, 20.9%) scale(var(--intro-zoom));
  }
  to {
    transform: none;
  }
}

@keyframes introOut {
  from {
    opacity: 1;
    visibility: visible;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* アニメーションを減らす設定の人には出さない */
@media (prefers-reduced-motion: reduce) {
  .intro {
    display: none;
  }
}