/* trip & route studio layer. Included by every game page after its own styles.
   1. the studio bar (one markup, see any game page)
   2. the bleed: the homepage black runs into the top of every game page
   3. the slide: leaving a page wipes to black from the click; arriving slides the black up */

:root { --tr-black: #0b0b0b; }

.studio-bar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line, rgba(255,255,255,.09)); }
.studio-bar a { color: var(--muted, var(--ink-dim, #8a8a8a)); text-decoration: none; display: inline-flex; align-items: center; gap: 12px; font: 500 12px 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase; }
.studio-bar a:hover { color: var(--ink, #fff); }
.studio-bar .mark { width: 64px; height: auto; display: block; color: var(--ink, #fff); }
.studio-bar .mark .eye { fill: var(--page-bg, var(--tr-black)); }

/* the bleed. --page-bg is the game's own background; the page sets it. */
body { background: linear-gradient(to bottom, var(--tr-black) 0, var(--page-bg) min(60vh, 560px)) no-repeat, var(--page-bg); }

/* the curtain: homepage black over everything until the page is ready, then it slides up.
   studio.js adds .tr-in to <html> before first paint, and .tr-in-slide when we came from the studio. */
html.tr-in::before { content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; background: var(--tr-black); will-change: transform, opacity;
  animation: tr-fade .32s ease-out .05s forwards; }
html.tr-in.tr-in-slide::before { animation: tr-slide-up .62s cubic-bezier(.65, 0, .2, 1) .05s forwards; }
html.tr-in.tr-in-slide .tr-rise { animation: tr-rise .7s cubic-bezier(.2, .7, .2, 1) .1s both; }
@keyframes tr-fade { to { opacity: 0; visibility: hidden; } }
@keyframes tr-slide-up { to { transform: translateY(-101%); visibility: hidden; } }
@keyframes tr-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* the wipe out: a black disc grows from the click, then we navigate. */
.tr-wipe { position: fixed; left: 0; top: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--tr-black); z-index: 10000; pointer-events: none; transform: scale(0); will-change: transform; }
.tr-wipe.go { transition: transform .42s cubic-bezier(.6, 0, .3, 1); }

@media (prefers-reduced-motion: reduce) {
  html.tr-in::before { display: none; }
  html.tr-in .tr-rise { animation: none; }
}
html.no-motion.tr-in::before { display: none; }
html.no-motion .tr-rise { animation: none; }

/* the site credit: a small mark in the footer, gold on hover, the same on every page that carries it */
.fv { display: inline-flex; align-items: center; gap: 7px; color: inherit; text-decoration: none; white-space: nowrap; }
.fv svg { width: 16px; height: 16px; flex: none; border-radius: 4px; transition: transform .2s ease, box-shadow .2s ease; }
.fv b { font-weight: inherit; color: #bfa054; transition: color .2s ease; }
.fv:hover b, .fv:focus-visible b { color: #e2c477; }
.fv:hover svg, .fv:focus-visible svg { transform: rotate(-8deg) scale(1.12); box-shadow: 0 0 12px rgba(191, 160, 84, .45); }
.fv:focus-visible { outline: 1px solid #bfa054; outline-offset: 3px; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) { .fv svg { transition: none; } }