/* The house style every page shares: one palette, two typefaces, the little monitor in the top-left corner
   that takes you home, and the walk between rooms. Each page keeps its own scene on top of this. */
:root {
  --room: #15161b;
  --room-2: #1e2027;
  --ink: #ece7dc;
  --ink-dim: #9a968d;
  --coral: #ff8a65;
  --amber: #ffc46b;
  --neon: #ff6a00;
  --line: #2e3039;
  --display: "Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  /* a little tooth for flat surfaces, laid on as a background: pale specks for dark walls, dark specks for paper.
     Small noise tiles, not an SVG turbulence filter, so nothing has to be computed while the page paints or scrolls. */
  --grain: url("/grain.png");
  --grain-dark: url("/grain-dark.png");
}

/* Going from one page to the next is a walk through a door. The hall names the door you clicked (.through, Home.css) and
   each room's page gives its <html> the same view-transition-name, so the browser grows the room out of that door,
   seen through the doorway first, and shrinks it back in when you press Back. Anything without a door just steps past. */
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: .55s; animation-timing-function: cubic-bezier(.45, 0, .15, 1); }
::view-transition-old(*), ::view-transition-new(*) { height: 100%; object-fit: cover; }
::view-transition-old(root) { animation: .3s ease-in both step-out; }
::view-transition-new(root) { animation: .5s ease-out both step-in; }
@keyframes step-out { to { opacity: 0; transform: scale(1.06); } }
@keyframes step-in { from { opacity: 0; transform: scale(.98); } }

/* The wall label: the character (the way home), the room's name and one line about it. It hangs in the same corner of
   the window on every page: over a 3D room with a dark backing (.plaque), on a reading page without one (.corner). */
.label { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; color: var(--ink); }
.label .home { grid-row: span 2; align-self: start; display: grid; justify-items: center; gap: 2px; text-decoration: none; color: var(--ink-dim); font: 500 10px/1 var(--mono); letter-spacing: .04em; pointer-events: auto; }
.label .home svg { display: block; width: 36px; height: 40px; overflow: visible; transition: transform .3s cubic-bezier(.3, 1.7, .5, 1); }
.label .home .eye { transform-box: fill-box; transform-origin: center; animation: blink 4.6s infinite; }
.label .home .bulb { transition: fill .2s; }
.label .home:hover, .label .home:focus-visible { color: var(--neon); }
.label .home:hover svg, .label .home:focus-visible svg { transform: translateY(-3px) rotate(-7deg); }
.label .home:hover .bulb, .label .home:focus-visible .bulb { fill: var(--neon); }
.label h1 { margin: 0; font: 800 22px/1.1 var(--display); letter-spacing: -.02em; align-self: end; }
.label p { margin: 2px 0 0; font: 13px/1.3 var(--display); color: var(--ink-dim); align-self: start; }
.label.plaque, .label.corner { padding: 7px 16px 7px 10px; }
/* the dark backing that keeps it readable over any room; the room's page pins it 12px in from the window's top-left corner */
.label.plaque { max-width: calc(100vw - 24px); border-radius: 4px; pointer-events: none;
  background: rgba(17, 17, 21, .78); box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 10px 30px rgba(0, 0, 0, .35); backdrop-filter: blur(8px); }
/* on a reading page it hangs on that same spot, not at the top of the page's own centred column, so the way home doesn't
   move from page to page. It's out of the flow: the page leaves room for it above its column (its body's top padding). */
.label.corner { position: absolute; top: max(12px, env(safe-area-inset-top, 0px)); left: max(12px, env(safe-area-inset-left, 0px)); }
@keyframes blink { 0%, 96%, 100% { transform: scaleY(1); } 98% { transform: scaleY(.1); } }

/* What a room's own buttons look like when they float over it: words on a dark strip, the current one underlined in orange. */
.tabs { display: flex; flex-wrap: wrap; border-radius: 4px; overflow: hidden; background: rgba(17, 17, 21, .78); box-shadow: 0 0 0 1px rgba(255, 255, 255, .07); backdrop-filter: blur(8px); }
.tabs > * { font: 500 13px/1 var(--display); color: var(--ink-dim); text-decoration: none; background: none; border: 0; padding: 9px 13px; cursor: pointer; box-shadow: inset 0 -2px 0 transparent; transition: color .15s, box-shadow .15s; }
.tabs > * + * { border-left: 1px solid rgba(255, 255, 255, .07); }
.tabs > :hover { color: var(--ink); box-shadow: inset 0 -2px 0 var(--neon); }
.tabs > [aria-current], .tabs > [aria-pressed="true"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--neon); }

/* How to move, along the bottom of a room. Each hint is its own dark chip, so it reads over a bright floor as well as a dark one. */
.keys { font: 12px/1 var(--display); color: #d9d2c6; }
.keys span span { display: inline-block; white-space: nowrap; margin: 4px 6px 0 0; padding: 4px 8px 4px 4px; border-radius: 4px; background: rgba(17, 17, 21, .78); box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); }
.keys b { display: inline-block; font: 500 11px/1 var(--mono); color: var(--ink); background: #2c2e37; border-radius: 3px; padding: 3px 5px; margin-right: 5px; }
.keys b + b { margin-left: -2px; }

/* the line at the bottom of a reading page */
.foot { font-size: 13px; color: var(--ink-dim); }
.foot a { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
.foot a:hover { color: var(--neon); text-decoration-color: currentColor; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .label .home svg { transition: none; } .label .home .eye { animation: none; }
}