/* t1147: page load. Every design page holds its content hidden over an opaque dark base until its scene art has decoded
   (or 1.5s pass), then fades in over 200ms, so the header, the scene and the controls appear together.
   Cross document view transitions give a short fade between pages, back navigation included. */
@view-transition { navigation: auto; }
/* p43: 300ms cross fade, the new page settles in from a hair larger */
::view-transition-old(root) { animation: gos-vt-out .3s ease both; }
::view-transition-new(root) { animation: gos-vt-in .3s ease both; }
@keyframes gos-vt-out { to { opacity: 0; } }
@keyframes gos-vt-in { from { opacity: 0; transform: scale(1.012); } }
/* p43: fallback for browsers without cross document view transitions (pl.js): fade the page out on an in site link, the next page fades in */
html.gos-pl-out body { opacity: 0 !important; transition: opacity .18s ease; }
html { background-color: var(--pl-bg, #121613); }
html.gos-pl body { opacity: 0; animation: gos-pl-fallback 0s 1.6s forwards; }
html.gos-pl-in body { transition: opacity .2s ease; }
@keyframes gos-pl-fallback { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  html.gos-pl-out body { transition: none; }
  html.gos-pl-in body { transition: none; }
}
/* p46 (t1366u): one shared transition for every place entry and every way back to the forest.
   The page fades to a dark forest veil (never pure black), the gold label fades in, the next page is warmed while it holds,
   and the next page opens under the same veil and fades it away. Cross document view transitions bridge the two veils where supported. */
@font-face { font-family: 'GOS TX'; src: url('/design/fonts/cinzel_tx.woff2') format('woff2'); font-weight: 600; font-display: block; }
#gos-tx { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; opacity: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: radial-gradient(ellipse 85% 75% at 50% 48%, #24342B 0, #1A261F 55%, #131C17 100%); transition: opacity var(--txd, .36s) cubic-bezier(.45, 0, .55, 1); }
#gos-tx.on { opacity: 1; pointer-events: auto; }
#gos-tx .k, #gos-tx .n { font-family: 'GOS TX', Cinzel, 'Cormorant SC', Georgia, serif; font-weight: 600; text-align: center; padding: 0 24px; opacity: 0; transform: translateY(5px);
  transition: opacity .28s cubic-bezier(.45, 0, .55, 1) .16s, transform .28s cubic-bezier(.45, 0, .55, 1) .16s; }
#gos-tx.on .k, #gos-tx.on .n { opacity: 1; transform: none; }
#gos-tx .k { font-size: 13px; line-height: 1; letter-spacing: .38em; text-transform: uppercase; color: #D9A441; }
#gos-tx .n { font-size: 38px; line-height: 1.15; letter-spacing: .14em; color: #F4D27A; text-shadow: 0 0 22px rgba(244, 190, 80, .28); }
#gos-tx.now, #gos-tx.now .k, #gos-tx.now .n { transition: none; }
#gos-tx.out .k, #gos-tx.out .n { transition-delay: 0s; }
@media (max-width: 600px) { #gos-tx .n { font-size: 28px; } #gos-tx .k { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { #gos-tx { --txd: .15s; } #gos-tx .k, #gos-tx .n { transition: none; transform: none; } }

/* p46: arriving through the veil, the ground under the page is the veil colour from the first paint, before pl.js runs */
html.gos-arr{background:radial-gradient(ellipse 85% 75% at 50% 48%,#24342B 0,#1A261F 55%,#131C17 100%) fixed #1A261F!important;min-height:100%}