html.gate-on, html.gate-on body { overflow: hidden; }
html.gate-on body::before { content: ''; position: fixed; inset: 0; z-index: 9980; background: var(--paper, #f2e8d8); }
html.gate-on .hero *, html.gate-on .hero *::before, html.gate-on .hero *::after { animation-play-state: paused !important; }

.gate { position: fixed; inset: 0; z-index: 9990; overflow: hidden; isolation: isolate; background: var(--grain, none), var(--paper, #f2e8d8); color: var(--sepia, #3f3128);
  font-family: 'Yubi Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif; opacity: 0; transition: opacity 1.4s ease; }
.gate.is-in { opacity: 1; }
.gate i, .gate b { display: block; font-style: normal; font-weight: normal; }

.gate-corner { position: absolute; width: 46px; height: 46px; background: center / contain no-repeat; opacity: .8; pointer-events: none; }
.gate-corner.tl { left: 8px; top: calc(8px + env(safe-area-inset-top, 0px)); background-image: url(art/corner-tl.svg); }
.gate-corner.tr { right: 8px; top: calc(8px + env(safe-area-inset-top, 0px)); background-image: url(art/corner-tr.svg); }
.gate-corner.bl { left: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); background-image: url(art/corner-bl.svg); }
.gate-corner.br { right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); background-image: url(art/corner-br.svg); }
.gate-group { position: absolute; left: 0; right: 0; top: calc(max(2.6svh, 14px) + env(safe-area-inset-top, 0px)); margin: 0; text-align: center; font-size: .92rem; line-height: 1.4; letter-spacing: .62em; text-indent: .62em; color: var(--gold-ink, #7b5c2c); transition: opacity .5s ease; }

.gate-arch { position: absolute; left: 50%; top: calc(max(7.4svh, 50px) + env(safe-area-inset-top, 0px)); bottom: calc(max(3svh, 22px) + env(safe-area-inset-bottom, 0px)); width: min(calc(100% - 2 * max(16px, 4.5vw)), 560px, 68svh); transform: translateX(-50%);
  overflow: hidden; isolation: isolate; border-radius: 50% 50% 4px 4px / 30% 30% 4px 4px; border: 1px solid var(--line, #a8854c); background: #2f3866; color: var(--moonlight, #f6eedc);
  box-shadow: 0 14px 34px var(--shade, rgba(63, 49, 40, .16)), inset 0 0 0 1px rgba(246, 238, 220, .08); }
.gate-arch::before { content: ''; position: absolute; inset: 7px; z-index: 8; border: 1px solid color-mix(in srgb, var(--gold-pale, #e3cf9f) 55%, transparent); border-radius: inherit; pointer-events: none; }
.gate-arch::after { content: ''; position: absolute; top: 6px; left: 50%; z-index: 9; width: 22px; height: 22px; margin-left: -11px; background: var(--gold-pale, #e3cf9f); -webkit-mask: var(--star) center / contain no-repeat; mask: var(--star) center / contain no-repeat; }
.gate-front, .gate-next, .gate-post, .gate-cam, .gate-fog, .gate-haze, .gate-warm, .gate-steam, .gate-petals, .gate-tone { position: absolute; inset: 0; pointer-events: none; }

.gate-front { overflow: hidden; }
.gate-next { transform: translateX(-100%); }
.gate-post { transform: translateX(-108%); }
.gate-post::before { content: ''; position: absolute; top: 0; bottom: 0; right: -7%; width: 14%; background: linear-gradient(90deg, #4a3428, #9a7652 34%, #6c4f39 62%, #3a2a22); box-shadow: 0 0 18px rgba(20, 14, 30, .5); }

.gate-hallglow { position: absolute; inset: 0; mix-blend-mode: screen; background: radial-gradient(36% 20% at 50% 48%, rgba(255, 229, 176, .32), rgba(255, 229, 176, 0) 72%), radial-gradient(26% 13% at 50% 33%, rgba(255, 236, 196, .26), rgba(255, 236, 196, 0) 72%); animation: gate-breathe 4.8s ease-in-out infinite alternate; }
.gate-hallfog { position: absolute; left: 0; right: 0; top: 68%; height: 32%; opacity: .42; }
.gate-hallfog > i { position: absolute; top: 0; bottom: 0; left: 0; width: 440%; background: url(art/gate/fog-mid.webp) 0 0 / 50% 100% repeat-x; will-change: transform; animation: gate-flow 84s linear infinite; }
.gate-hall { position: absolute; display: block; max-width: none; left: 50%; top: var(--ht, 0px); width: var(--hw, 100%); height: var(--hh, 100%); margin-left: calc(var(--hw, 100%) / -2); transform-origin: 50% 52.7%; user-select: none; -webkit-user-drag: none; }
.gate-cam { transform-origin: 50% var(--oy, 60%); }
.gate-pic { position: absolute; left: 50%; top: var(--pt, 0px); width: var(--pw, 100%); height: var(--ph, 100%); margin-left: calc(var(--pw, 100%) / -2); transform-origin: 50% 60%; animation: gate-idle 17s ease-in-out infinite alternate; }
.gate-pic img { position: absolute; display: block; max-width: none; user-select: none; -webkit-user-drag: none; }
.gate-out { inset: 0; width: 100%; height: 100%; }
.gate-in { left: var(--ix, 37.667%); top: var(--iy, 35%); width: calc(var(--iw, 24.667%) * 5); height: calc(var(--ih, 31.955%) * 5); transform: scale(.2); transform-origin: 0 0; will-change: transform; }
@keyframes gate-idle { from { transform: scale(1); } to { transform: scale(1.03) translateY(-.4%); } }

.gate-light { position: absolute; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(closest-side, rgba(255, 229, 176, var(--a, .3)), rgba(255, 229, 176, 0)); animation: gate-breathe 6.5s ease-in-out infinite alternate; }
.gate-light.door { left: 29%; top: 31%; width: 42%; height: 40%; --a: .26; }
.gate-light.l { left: 19.5%; top: 34%; width: 20%; height: 12%; --a: .34; animation: gate-lamp 4.6s ease-in-out infinite alternate; }
.gate-light.r { left: 60.5%; top: 34%; width: 20%; height: 12%; --a: .34; animation: gate-lamp 5.9s ease-in-out -1.7s infinite alternate; }
@keyframes gate-breathe { from { opacity: .35; } to { opacity: 1; } }
@keyframes gate-lamp { 0% { opacity: .3; } 45% { opacity: 1; } 60% { opacity: .62; } 100% { opacity: .9; } }
.gate-star { position: absolute; width: var(--s, 12px); height: var(--s, 12px); margin: calc(var(--s, 12px) / -2); background: #f6e7bb; -webkit-mask: var(--star) center / contain no-repeat; mask: var(--star) center / contain no-repeat; animation: gate-twinkle var(--d, 5.5s) ease-in-out var(--dl, 0s) infinite; }
@keyframes gate-twinkle { 0%, 100% { opacity: 1; transform: scale(1) rotate(0); } 50% { opacity: .15; transform: scale(.5) rotate(20deg); } }

.gate-fog { inset: auto 0 auto 0; top: var(--t); height: var(--h); transform-origin: 50% 80%; will-change: transform, opacity; animation: gate-bob var(--b, 19s) ease-in-out infinite alternate; }
.gate-fog > i { position: absolute; top: 0; bottom: 0; left: 0; width: calc(var(--w) * 2); background: var(--img) 0 0 / 50% 100% repeat-x; will-change: transform; animation: gate-flow var(--d) linear infinite; }
.gate-fog.far { --t: 31%; --h: 25%; --w: 175%; --d: 170s; --b: 23s; --img: url(art/gate/fog-far.webp); opacity: .74; }
.gate-fog.mid { --t: 59%; --h: 30%; --w: 205%; --d: 104s; --b: 17s; --img: url(art/gate/fog-mid.webp); opacity: .85; }
.gate-fog.mid > i { animation-direction: reverse; }
.gate-fog.near { --t: 77%; --h: 30%; --w: 250%; --d: 66s; --b: 13s; --img: url(art/gate/fog-near.webp); }
@keyframes gate-flow { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes gate-bob { from { transform: translateY(0) scaleY(1); } to { transform: translateY(-2.5%) scaleY(1.07); } }

.gate-haze { inset: 68% 0 0 0; background: linear-gradient(to top, rgba(206, 205, 236, .62), rgba(206, 205, 236, .2) 55%, rgba(206, 205, 236, 0)); }
.gate-warm { inset: 64% -10% 4% -10%; background: radial-gradient(closest-side, rgba(255, 224, 164, .5), rgba(255, 224, 164, .16) 55%, rgba(255, 224, 164, 0)); mix-blend-mode: soft-light; animation: gate-breathe 6.5s ease-in-out infinite alternate; }

.gate-steam > i, .gate-steam > b { position: absolute; bottom: 21%; width: 46%; aspect-ratio: 240 / 100; background: url(art/steam.svg) center / contain no-repeat; opacity: 0; will-change: transform, opacity; animation: gate-puff 12s ease-out var(--dl, 0s) infinite; }
.gate-steam > i { left: -6%; --px: -8%; } .gate-steam > b { right: -8%; --px: 10%; background-image: url(art/steam-2.svg); animation-duration: 14s; }
@keyframes gate-puff { 0% { transform: translate(0, 30%) scale(.5); opacity: 0; } 16% { opacity: .7; } 100% { transform: translate(var(--px), -200%) scale(1.6); opacity: 0; } }

.gate-petals > i { position: absolute; left: var(--x); top: var(--y); width: 8px; height: 11px; border-radius: 80% 10% 80% 10%; background: linear-gradient(135deg, #efe9fb, #b9aee4); opacity: 0; will-change: transform, opacity; animation: gate-petal var(--d) linear var(--dl) infinite; }
.gate-petals > i:nth-child(even) { background: linear-gradient(135deg, #fff3ee, #efbdb6); width: 7px; height: 9px; }
@keyframes gate-petal { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 8% { opacity: .9; } 50% { transform: translate(-60px, 44svh) rotate(250deg); opacity: .8; } 88% { opacity: .5; } 100% { transform: translate(-96px, 84svh) rotate(500deg); opacity: 0; } }

.gate-tone { z-index: 5; border-radius: inherit; opacity: .7; background: var(--tooth, none), var(--granule, none); mix-blend-mode: soft-light; }

.gate-ui { position: absolute; z-index: 7; left: 0; right: 0; bottom: max(5.2svh, 38px); display: grid; justify-items: center; gap: 12px; padding: 0 16px; text-align: center; transition: opacity .5s ease; }
.gate-go { appearance: none; position: relative; font: inherit; font-size: 1.1rem; line-height: 1.4; color: var(--sepia, #3f3128); cursor: pointer; padding: 0; border: 0; background: none; filter: drop-shadow(0 8px 16px rgba(20, 24, 50, .5)) drop-shadow(0 0 18px rgba(251, 236, 203, .35)); transition: transform .2s ease, filter .2s ease; }
.gate-go > span { position: relative; display: grid; gap: 3px; padding: 13px 44px 12px; background: var(--paper-card, #f8f1e5); border: 1px solid var(--gold, #a8854c); box-shadow: inset 0 0 0 4px var(--paper-card, #f8f1e5), inset 0 0 0 5px color-mix(in srgb, var(--gold, #a8854c) 60%, transparent); }
.gate-go > span::before, .gate-go > span::after { content: ''; position: absolute; top: 9px; bottom: 9px; width: 0; border-left: 1px dashed color-mix(in srgb, var(--gold, #a8854c) 75%, transparent); }
.gate-go > span::before { left: 22px; } .gate-go > span::after { right: 22px; }
.gate-go b { font-size: 1.12rem; letter-spacing: .46em; text-indent: .46em; }
.gate-go small { font-size: .72rem; letter-spacing: .26em; text-indent: .26em; color: var(--sepia-soft, #6a5545); }
.gate-go:hover { filter: drop-shadow(0 8px 16px rgba(20, 24, 50, .5)) drop-shadow(0 0 26px rgba(251, 236, 203, .55)); }
.gate-go:active { transform: translateY(1px) scale(.985); }
.gate-go:focus-visible, .gate-mute:focus-visible { outline: 1px solid var(--moonlight, #f6eedc); outline-offset: 6px; }
.gate-mute { appearance: none; border: 0; font: inherit; font-size: .88rem; letter-spacing: .18em; color: rgba(246, 238, 220, .96); cursor: pointer; padding: 7px 18px; border-radius: 999px; background: rgba(28, 34, 68, .58); text-shadow: 0 1px 6px rgba(20, 24, 50, .8);
  text-decoration: underline; text-decoration-color: rgba(227, 207, 159, .7); text-underline-offset: 6px; }

.gate-black { position: absolute; inset: 0; z-index: 20; background: #06050b; opacity: 0; pointer-events: none; }
.gate.is-boarding .gate-ui, .gate.is-boarding .gate-group { opacity: 0; pointer-events: none; }
.gate.is-boarding .gate-pic { animation-play-state: paused; }
.gate.is-boarding .gate-cam { animation: gate-walk 3.2s cubic-bezier(.45, .05, .4, 1) forwards; }
@keyframes gate-walk {
  0% { transform: translateY(0) scale(1); }
  12% { transform: translateY(calc(var(--ty, 0px) * .08 + .7%)) scale(calc(1 + (var(--zf, 3.6) - 1) * .07)); }
  24% { transform: translateY(calc(var(--ty, 0px) * .2 - .3%)) scale(calc(1 + (var(--zf, 3.6) - 1) * .18)); }
  36% { transform: translateY(calc(var(--ty, 0px) * .38 + .7%)) scale(calc(1 + (var(--zf, 3.6) - 1) * .34)); }
  48% { transform: translateY(calc(var(--ty, 0px) * .6 - .3%)) scale(calc(1 + (var(--zf, 3.6) - 1) * .56)); }
  60% { transform: translateY(calc(var(--ty, 0px) * .85 + .6%)) scale(calc(1 + (var(--zf, 3.6) - 1) * .8)); }
  72% { transform: translateY(calc(var(--ty, 0px) - .3%)) scale(var(--zf, 3.6)); }
  86% { transform: translateY(calc(var(--ty, 0px) + .5%)) scale(calc(var(--zf, 3.6) * 1.34)); }
  100% { transform: translateY(var(--ty, 0px)) scale(calc(var(--zf, 3.6) * 1.74)); }
}
.gate.is-boarding .gate-front { animation: gate-turn-out 1s cubic-bezier(.62, 0, .3, 1) 3.25s forwards; }
.gate.is-boarding .gate-next { animation: gate-turn-in 1s cubic-bezier(.62, 0, .3, 1) 3.25s forwards; }
@keyframes gate-turn-out { to { transform: translateX(100%); } }
@keyframes gate-turn-in { from { transform: translateX(-100%); } to { transform: translateX(0); } }
.gate.is-boarding .gate-post { animation: gate-post 1s cubic-bezier(.62, 0, .3, 1) 3.25s forwards; }
@keyframes gate-post { from { transform: translateX(-108%); } to { transform: translateX(9%); } }
.gate.is-boarding .gate-hall { animation: gate-settle 1.5s cubic-bezier(.2, .6, .3, 1) 3.7s forwards; }
@keyframes gate-settle { from { transform: scale(1); } to { transform: scale(1.035); } }
.gate.is-boarding .gate-fog.far { animation: gate-part 2.2s ease-in forwards; --k: 1.7; }
.gate.is-boarding .gate-fog.mid { animation: gate-part 2s ease-in forwards; --k: 2.4; }
.gate.is-boarding .gate-fog.near { animation: gate-part 1.7s ease-in forwards; --k: 3.4; }
@keyframes gate-part { 0% { transform: scale(1); opacity: 1; } 35% { opacity: 1; } 100% { transform: scale(var(--k)) translateY(calc((var(--k) - 1) * 16%)); opacity: 0; } }
.gate.is-boarding .gate-haze, .gate.is-boarding .gate-warm, .gate.is-boarding .gate-steam, .gate.is-boarding .gate-petals { opacity: 0; transition: opacity 1.3s ease; animation: none; }
.gate.is-boarding .gate-black { opacity: 1; transition: opacity 1.7s cubic-bezier(.45, 0, .55, 1) 5.1s; }
.gate.is-through { opacity: 0; transition: opacity 2.4s ease-out; pointer-events: none; }

.gate-arch img, .gate-fog > i, .gate-hallfog > i { opacity: 0; transition: opacity 1.2s ease; }
.gate.has-art .gate-arch img, .gate.has-art .gate-fog > i, .gate.has-art .gate-hallfog > i, .gate.no-art .gate-fog > i, .gate.no-art .gate-hallfog > i { opacity: 1; }
.gate:not(.has-art):not(.no-art) .gate-ui { opacity: 0; visibility: hidden; }

.gate-lang { position: absolute; z-index: 12; top: calc(60px + env(safe-area-inset-top, 0px)); right: calc(13px + env(safe-area-inset-right, 0px)); display: flex; align-items: center; transition: opacity .5s ease; }
.gate-lang button { appearance: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--gold, #a8854c) 75%, transparent); background: var(--paper-card, #f8f1e5); color: var(--sepia, #3f3128);
  box-shadow: inset 0 0 0 2px var(--paper-card, #f8f1e5), inset 0 0 0 3px color-mix(in srgb, var(--gold, #a8854c) 35%, transparent);
  font: 13px/1 'Yubi Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif; letter-spacing: 0; text-indent: 0; }
.gate-lang button:lang(en) { font-family: 'Yubi Cormorant', 'Yubi Mincho', serif; letter-spacing: .02em; }
.gate-lang button:lang(th) { font-family: 'Yubi Thai', 'Yubi Mincho', serif; font-size: 11px; }
.gate-lang button[aria-pressed='true'] { background: color-mix(in srgb, var(--gold-pale, #e3cf9f) 60%, var(--paper-card, #f8f1e5)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--gold-pale, #e3cf9f) 60%, var(--paper-card, #f8f1e5)), inset 0 0 0 3px color-mix(in srgb, var(--gold, #a8854c) 55%, transparent); }
.gate-lang button:focus-visible { outline: 1px solid var(--sepia, #3f3128); outline-offset: 3px; }
.gate-lang-menu { display: none; position: absolute; top: calc(100% + 8px); right: -7px; gap: 6px; padding: 6px; border-radius: 26px;
  border: 1px solid color-mix(in srgb, var(--gold, #a8854c) 55%, transparent); background: rgba(248, 241, 229, .97); box-shadow: 0 6px 16px rgba(20, 24, 50, .38); }
.gate-lang.is-open .gate-lang-menu { display: flex; }
.gate:not(.has-art):not(.no-art) .gate-lang { opacity: 0; visibility: hidden; }
.gate.is-boarding .gate-lang { opacity: 0; pointer-events: none; }
@media (min-width: 900px) {
  .gate-lang { top: calc(14px + env(safe-area-inset-top, 0px)); right: calc(62px + env(safe-area-inset-right, 0px)); }
  .gate-lang .gate-lang-now { display: none; }
  .gate-lang-menu, .gate-lang.is-open .gate-lang-menu { display: flex; position: static; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
}

@media (orientation: landscape) and (max-height: 520px) {
  .gate-group { top: calc(5px + env(safe-area-inset-top, 0px)); font-size: .8rem; }
  .gate-arch { top: calc(28px + env(safe-area-inset-top, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); width: min(calc(100% - 2 * max(64px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px))), 820px); border-radius: 26px 26px 4px 4px; }
  .gate-ui { left: auto; right: max(14px, 3%); bottom: 50%; transform: translateY(50%); width: min(42%, 230px); padding: 0; gap: 10px; }
  .gate-go > span { padding: 10px 30px 9px; }
  .gate-go b { font-size: 1rem; }
  .gate-go b, .gate-go small, .gate-mute { white-space: nowrap; }
  .gate-lang { top: calc(62px + env(safe-area-inset-top, 0px)); right: calc(14px + env(safe-area-inset-right, 0px)); }
  .gate-lang button { width: 32px; height: 32px; }
  .gate-lang .gate-lang-now { display: none; }
  .gate-lang-menu, .gate-lang.is-open .gate-lang-menu { display: flex; flex-direction: column; position: static; gap: 6px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
}

html[data-motion='reduce'] .gate, html[data-motion='reduce'] .gate * { animation: none !important; }
html[data-motion='reduce'] .gate.is-boarding .gate-black { opacity: 0; transition: none; }
html[data-motion='reduce'] .gate.is-boarding { opacity: 0; transition: opacity .5s ease; }
@media (prefers-reduced-motion: reduce) {
  .gate, .gate * { animation: none !important; }
  .gate.is-boarding .gate-black { opacity: 0; transition: none; }
  .gate.is-boarding { opacity: 0; transition: opacity .5s ease; }
}

.gate:lang(th) { font-family: 'Yubi Cormorant', 'Yubi Thai', 'Yubi Mincho', serif; }
body:lang(th) .gate .gate-go b, body:lang(th) .gate .gate-go small, body:lang(th) .gate .gate-mute { text-indent: 0; }
body:lang(th) .gate .gate-go b { font-weight: 600; }
body:lang(th) .gate .gate-group:not(#_) { letter-spacing: .3em; }
body:lang(th) .gate .gate-group { text-indent: .3em; }