/* fitur mapgate — layar perjalanan antar-peta: tinta gelap memudar, nama peta berhuruf kuas muncul
   seperti ditulis, lalu latar menghilang lebih dulu dan nama bertahan sebentar di atas dunia baru. */
.mapfade { position: fixed; inset: 0; z-index: 60; pointer-events: none; display: grid; place-items: center; visibility: hidden; }
.mapfade.on { visibility: visible; }
.mapfade .mf-bg { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 45%, #2a2f3a 0%, #14161c 60%, #0c0d10 100%); opacity: 0; transition: opacity 0.75s ease; }
.mapfade[data-to='lake'] .mf-bg { background: radial-gradient(120% 90% at 50% 45%, #3a2b30 0%, #1a1416 60%, #0d0b0c 100%); }
.mapfade.on .mf-bg { opacity: 1; }
.mapfade.on.out .mf-bg { opacity: 0; transition-duration: 1s; }
.mapfade .mf-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--washi, #f3ead6); text-align: center; opacity: 0; transform: translateY(8px); transition: opacity 0.6s ease 0.25s, transform 1.2s ease 0.25s; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55); }
.mapfade.on .mf-card { opacity: 1; transform: none; }
.mapfade.on.out .mf-card { opacity: 0; transform: translateY(-6px); transition: opacity 0.9s ease 1.5s, transform 2s ease 0.4s; }
.mapfade .mf-kanji { font: 400 clamp(76px, 17vw, 168px)/1 'Yuji Syuku Map', var(--kanji, serif); letter-spacing: 0.06em; clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(0.6, 0, 0.2, 1) 0.3s; }
.mapfade.on .mf-kanji { clip-path: inset(0 0 0 0); }
.mapfade .mf-rule { width: min(260px, 60vw); height: 10px; background: var(--rule) center / 100% 100% no-repeat; opacity: 0.8; filter: invert(1); }
.mapfade .mf-name { font: 800 clamp(22px, 5vw, 34px)/1.1 var(--sc, sans-serif); letter-spacing: 0.32em; text-transform: uppercase; padding-left: 0.32em; }
.mapfade .mf-sub { font: italic 500 clamp(14px, 3.6vw, 17px)/1.2 var(--display, serif); opacity: 0.8; letter-spacing: 0.02em; }
.mapfade[data-to='yukigawa'] .mf-kanji { color: #eef5fb; }
.mapfade[data-to='lake'] .mf-kanji { color: #f6dfe4; }
@media (prefers-reduced-motion: reduce) {
  .mapfade .mf-kanji { clip-path: none; transition: none; }
  .mapfade .mf-card { transform: none; }
}