/* ============================================================
   ページ遷移アニメーション
   四隅から幕が中央へ収束 → 中央に「MIRAIESTA」→ 1〜2回点滅 → 遷移
   遷移先では幕が四隅へ開いてページが現れます。
   ============================================================ */

html.mt-arriving::after{content:"";position:fixed;inset:0;z-index:9998;background:#1d3a22}

.mt-veil{position:fixed;inset:0;z-index:9999;pointer-events:none;overflow:hidden}
.mt-veil.is-in,.mt-veil.is-cover{pointer-events:auto}

/* 四隅の幕（それぞれ画面の1/4。中央に向かって集まる） */
.mt-q{position:absolute;width:50.5%;height:50.5%;background:#1d3a22;will-change:transform;
  transition:transform .8s cubic-bezier(.77,0,.18,1)}
.mt-q.tl{left:0;top:0;transform:translate(-100%,-100%)}
.mt-q.tr{right:0;top:0;transform:translate(100%,-100%)}
.mt-q.bl{left:0;bottom:0;transform:translate(-100%,100%)}
.mt-q.br{right:0;bottom:0;transform:translate(100%,100%)}
/* 角の内側に金の細い枠線（収束時に四隅のパネルの合わせ目を上品に見せる） */
.mt-q.tl{box-shadow:inset -1px -1px 0 rgba(201,173,116,.55)}
.mt-q.tr{box-shadow:inset 1px -1px 0 rgba(201,173,116,.55)}
.mt-q.bl{box-shadow:inset -1px 1px 0 rgba(201,173,116,.55)}
.mt-q.br{box-shadow:inset 1px 1px 0 rgba(201,173,116,.55)}
.mt-veil.is-logo .mt-q{box-shadow:none;transition:transform .8s cubic-bezier(.77,0,.18,1),box-shadow .4s ease}

/* 中央のロゴ */
.mt-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 6vw}
.mt-mark{font-family:'Cormorant Garamond','Times New Roman',serif;font-weight:600;font-size:clamp(1.6rem,4vw,2.8rem);
  letter-spacing:.55em;margin-right:-.55em;color:#f3f1e6;opacity:0}
.mt-rule{display:block;width:0;height:1px;background:#c9ad74;margin-top:1.2rem;transition:width .6s cubic-bezier(.22,1,.36,1)}
.mt-div{font-family:'Shippori Mincho','Yu Mincho',serif;font-size:.86rem;letter-spacing:.32em;color:#c9ad74;margin-top:.9rem;opacity:0;transition:opacity .5s ease}

/* ① 出発：四隅から中央へ収束 */
.mt-veil.is-in .mt-q{transform:translate(0,0)}
/* ② 収束後：MIRAIESTA が現れて2回点滅 */
.mt-veil.is-in.is-logo .mt-mark{animation:mtBlink 1.05s ease forwards}
.mt-veil.is-in.is-logo .mt-rule{width:120px}
.mt-veil.is-in.is-logo .mt-div{opacity:1;transition-delay:.25s}
@keyframes mtBlink{
  0%{opacity:0;filter:blur(3px)}
  18%{opacity:1;filter:blur(0)}
  34%{opacity:.15}
  50%{opacity:1}
  66%{opacity:.15}
  82%,100%{opacity:1}
}

/* 到着：閉じた状態から始めて、四隅へ開く */
.mt-veil.is-cover .mt-q{transform:translate(0,0);transition:none}
.mt-veil.is-cover .mt-center{display:none}
.mt-veil.is-lift{pointer-events:none}
.mt-veil.is-lift .mt-center{opacity:0;transition:opacity .35s ease}
.mt-veil.is-lift .mt-q{transition:transform .9s cubic-bezier(.77,0,.18,1) .15s}
.mt-veil.is-lift .mt-q.tl{transform:translate(-100%,-100%)}
.mt-veil.is-lift .mt-q.tr{transform:translate(100%,-100%)}
.mt-veil.is-lift .mt-q.bl{transform:translate(-100%,100%)}
.mt-veil.is-lift .mt-q.br{transform:translate(100%,100%)}

@media (prefers-reduced-motion: reduce){
  html.mt-arriving::after{display:none}
  .mt-veil{display:none!important}
}

/* ============================================================
   広報PR：カメラシャッター（絞り羽根36枚）
   羽根はJSでSVGに毎フレーム描画（js/page-transition.js）。
   羽根の外側は常に画面全体を覆うため、途中で隙間が出ない。
   ============================================================ */
.mt-veil.mt-shutter .mt-q{display:none}
.mt-svg{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
/* 閉じた瞬間、シャッターを切ったような一瞬の光 */
.mt-flash{position:absolute;inset:0;background:#fffdf8;opacity:0;pointer-events:none}
.mt-veil.mt-shutter.is-logo .mt-flash{animation:mtFlash .45s ease-out}
@keyframes mtFlash{0%{opacity:.5}100%{opacity:0}}