/*
 * Omniverse (/omniverse/): one locked screen with the WebGL system, a HUD in
 * the corners and the project panel on the right (a bottom sheet on phones).
 * Everything is prefixed .ov so it cannot collide with the rest of the theme.
 */
.luval-omniverse { --ov-top: calc(max(.75rem, env(safe-area-inset-top)) + 5.25rem); --ov-glass: rgba(18, 13, 11, .9); --ov-glass-hi: rgba(34, 26, 21, .94); --ov-line: rgba(224, 168, 116, .2); --ov-muted: rgba(246, 240, 233, .62); --ov-faint: rgba(246, 240, 233, .38); --ov-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
html:has(body.luval-omniverse), body.luval-omniverse { height: 100%; overflow: hidden; overscroll-behavior: none; }
body.luval-omniverse { background: #07060a; }
/* No live blur over the moving canvas: re-blurring it every frame costs more than the scene. */
.luval-omniverse .site-header__inner--glass { background: rgba(27, 21, 18, .92); backdrop-filter: none; -webkit-backdrop-filter: none; }
.admin-bar.luval-omniverse { --ov-top: calc(32px + 6rem); }

.ov { position: fixed; inset: 0; color: var(--paper); font-family: var(--font-sans); }
.ov-stage { position: absolute; inset: 0; background: #07060a; }
.ov-stage canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.ov-stage canvas.is-drag { cursor: grabbing; }
.ov-stage canvas.is-hot { cursor: pointer; }
.ov button { font: inherit; color: inherit; }

.ov-hud { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.ov-hud > * { pointer-events: auto; }

.ov-tools { position: absolute; top: var(--ov-top); left: max(var(--gutter), env(safe-area-inset-left)); display: flex; gap: .5rem; }
.ov-chip { appearance: none; display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .9rem; border: 1px solid var(--ov-line); border-radius: 999px; background: var(--ov-glass); font-size: .8rem; cursor: pointer; transition: border-color .25s, background .25s; }
.ov-chip:hover { border-color: rgba(224, 168, 116, .5); background: var(--ov-glass-hi); }
.ov-chip[disabled] { opacity: .4; cursor: default; }
.ov-chip svg { width: 14px; height: 14px; }

.ov-tele { position: absolute; left: max(var(--gutter), env(safe-area-inset-left)); bottom: calc(1.6rem + env(safe-area-inset-bottom)); display: grid; grid-template-columns: auto auto; gap: 3px 16px; margin: 0; font-family: var(--ov-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--ov-muted); pointer-events: none; }
.ov-tele dt { color: var(--ov-faint); }
.ov-tele dd { margin: 0; color: var(--paper); }

.ov-nav { position: absolute; left: 50%; bottom: calc(1.4rem + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; gap: 6px; max-width: calc(100vw - 2rem); padding: 6px; overflow-x: auto; scrollbar-width: none; border: 1px solid var(--ov-line); border-radius: 999px; background: var(--ov-glass); }
.ov-nav::-webkit-scrollbar { display: none; }
.ov-nav button { appearance: none; display: flex; align-items: center; gap: .5rem; padding: .5rem .8rem; border: 0; border-radius: 999px; background: transparent; color: var(--ov-muted); font-size: .8rem; white-space: nowrap; cursor: pointer; transition: background .25s, color .25s; }
.ov-nav button:hover { color: var(--paper); background: rgba(255, 255, 255, .05); }
.ov-nav button.is-on { color: var(--paper); background: rgba(224, 168, 116, .14); }
.ov-nav i, .ov-jump i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }

.ov-labels { position: absolute; inset: 0; pointer-events: none; }
.ov-lbl { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: var(--off, 30px); pointer-events: auto; cursor: pointer; will-change: transform; transition: opacity .4s; }
.ov-lbl b { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 1.2rem; line-height: 1; text-shadow: 0 1px 12px #000; }
.ov-lbl span { font-family: var(--ov-mono); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ov-muted); text-shadow: 0 1px 8px #000; }
.ov-lbl.is-hover b { color: var(--bronze-lt); }
.ov-lbl.is-hidden { opacity: 0; pointer-events: none; }

.ov-hint { position: absolute; left: 50%; bottom: calc(5.2rem + env(safe-area-inset-bottom)); transform: translateX(-50%); margin: 0; font-family: var(--ov-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; color: var(--ov-faint); pointer-events: none; transition: opacity .6s; }

.ov-panel { position: absolute; top: var(--ov-top); right: max(var(--gutter), env(safe-area-inset-right)); bottom: calc(5.2rem + env(safe-area-inset-bottom)); width: min(26rem, 40vw); display: flex; flex-direction: column; gap: 1.1rem; padding: 1.6rem 1.5rem 1.5rem; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--ov-line); border-radius: 1.25rem; background: var(--ov-glass); transform: translateX(calc(100% + 3rem)); opacity: 0; transition: transform .9s var(--ease-out), opacity .6s; scrollbar-width: thin; scrollbar-color: rgba(224, 168, 116, .3) transparent; }
.ov-panel.is-open { transform: none; opacity: 1; }
.ov-panel__close { position: absolute; top: 1rem; right: 1rem; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border: 1px solid var(--ov-line); border-radius: 50%; background: transparent; color: var(--ov-muted); cursor: pointer; }
.ov-panel__close:hover { color: var(--paper); border-color: rgba(224, 168, 116, .5); }
.ov-eyebrow { margin: 0; font-family: var(--ov-mono); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--bronze-lt); }
.ov-panel__name { margin: -.4rem 0 0; font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 3.5rem; line-height: .95; letter-spacing: -.01em; color: var(--paper); }
.ov-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 0; overflow: hidden; border: 1px solid var(--ov-line); border-radius: .75rem; background: var(--ov-line); }
.ov-facts div { padding: .55rem .6rem; background: rgba(10, 8, 7, .55); }
.ov-facts dt { font-family: var(--ov-mono); font-size: .56rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ov-faint); }
.ov-facts dd { margin: .2rem 0 0; font-family: var(--ov-mono); font-size: .75rem; font-variant-numeric: tabular-nums; }
.ov-blurb { margin: 0; font-size: .85rem; line-height: 1.6; color: var(--ov-muted); }
.ov-projects { display: flex; flex-direction: column; gap: .6rem; }
.ov-proj { display: grid; grid-template-columns: 4rem 1fr; gap: .9rem; padding: .9rem; border: 1px solid rgba(255, 255, 255, .06); border-radius: .9rem; background: rgba(255, 255, 255, .025); transition: border-color .3s, background .3s; }
.ov-proj:hover { border-color: rgba(224, 168, 116, .32); background: rgba(224, 168, 116, .05); }
.ov-proj > div { min-width: 0; }
.ov-proj__vis { width: 4rem; height: 4rem; border-radius: 50%; background: var(--v); box-shadow: inset -10px -12px 24px rgba(0, 0, 0, .65), inset 4px 4px 12px rgba(255, 255, 255, .12), 0 0 24px -6px var(--g); }
.ov-proj__kind { margin: 0; font-family: var(--ov-mono); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ov-faint); }
.ov-proj h3 { margin: .2rem 0 .35rem; font-family: var(--font-serif); font-weight: 400; font-size: 1.5rem; line-height: 1.05; letter-spacing: 0; color: var(--paper); }
.ov-proj__desc { margin: 0; font-size: .8rem; line-height: 1.55; color: var(--ov-muted); }
.ov-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: .6rem 0 0; padding: 0; list-style: none; }
.ov-tags li { padding: 3px 7px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 6px; font-family: var(--ov-mono); font-size: .6rem; letter-spacing: .04em; color: var(--ov-muted); }
.ov-proj__link { display: inline-flex; align-items: center; gap: .35rem; margin-top: .7rem; font-size: .8rem; font-weight: 500; color: var(--bronze-lt); text-decoration: none; }
.ov-proj__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.ov-proj__link.is-quiet { color: var(--ov-faint); font-weight: 400; }
.ov-jump { display: flex; flex-direction: column; gap: .6rem; padding-top: .4rem; border-top: 1px solid var(--ov-line); }
.ov-jump__row { display: flex; flex-wrap: wrap; gap: 6px; }
.ov-jump button { appearance: none; display: flex; align-items: center; gap: .45rem; padding: .45rem .75rem; border: 1px solid var(--ov-line); border-radius: 999px; background: transparent; color: var(--ov-muted); font-size: .75rem; cursor: pointer; }
.ov-jump button:hover { color: var(--paper); border-color: rgba(224, 168, 116, .5); }
.ov-jump i { width: 7px; height: 7px; box-shadow: none; }

.ov-warpcue { position: absolute; left: 50%; top: 20%; transform: translateX(-50%); text-align: center; opacity: 0; pointer-events: none; transition: opacity .5s; }
.ov-warpcue.is-on { opacity: 1; }
.ov-warpcue span { display: block; font-family: var(--ov-mono); font-size: .66rem; letter-spacing: .3em; text-transform: uppercase; color: var(--ov-muted); }
.ov-warpcue strong { display: block; margin-top: .4rem; font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(2.8rem, 7vw, 5.25rem); line-height: 1; text-shadow: 0 0 40px rgba(140, 180, 255, .5); }
.ov-warpcue em { display: block; margin-top: .75rem; font-style: normal; font-family: var(--ov-mono); font-size: .75rem; letter-spacing: .12em; font-variant-numeric: tabular-nums; }

.ov-flash { position: absolute; inset: 0; z-index: 6; background: #f4f8ff; opacity: 0; pointer-events: none; mix-blend-mode: screen; }

.ov-intro { position: absolute; inset: 0; z-index: 7; display: grid; place-items: center; padding: var(--ov-top) max(var(--gutter), env(safe-area-inset-right)) 2rem max(var(--gutter), env(safe-area-inset-left)); text-align: center; background: radial-gradient(ellipse at 50% 60%, rgba(7, 6, 10, .15), rgba(7, 6, 10, .85) 75%); transition: opacity 1.4s, visibility 1.4s; }
.ov-intro.is-gone { opacity: 0; visibility: hidden; }
.ov-intro__in { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; max-width: 40rem; }
.ov-intro h1 { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(3.4rem, 10vw, 7rem); line-height: .9; letter-spacing: -.02em; color: var(--paper); }
.ov-intro h1 em { color: var(--bronze-lt); }
.ov-intro p { margin: 0; max-width: 46ch; font-size: .95rem; line-height: 1.6; color: var(--ov-muted); }
.ov-intro .ov-intro__kicker, .ov-intro .ov-intro__note { font-family: var(--ov-mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ov-faint); }
.ov-intro__go { appearance: none; margin-top: .5rem; padding: .8rem 1.6rem; border: 1px solid rgba(224, 168, 116, .55); border-radius: 999px; background: rgba(192, 138, 82, .14); font-size: .9rem; font-weight: 500; cursor: pointer; transition: background .3s; }
.ov-intro__go:hover { background: rgba(192, 138, 82, .28); }
.ov-intro__go[disabled] { opacity: .5; cursor: wait; }

@media (max-width: 760px) {
  .ov-chip__txt, .ov-tele, .ov-lbl span { display: none; }
  .ov-lbl b { font-size: 1rem; }
  .ov-hint { bottom: calc(4.6rem + env(safe-area-inset-bottom)); width: calc(100% - 2rem); font-size: .56rem; letter-spacing: .1em; line-height: 1.6; white-space: normal; text-align: center; text-wrap: balance; }
  .ov-nav { bottom: calc(.9rem + env(safe-area-inset-bottom)); }
  .ov-nav.is-more { -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent); mask-image: linear-gradient(90deg, #000 78%, transparent); }
  .ov-panel { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 54%; z-index: 2; border-radius: 1.25rem 1.25rem 0 0; padding: 1.4rem max(1rem, env(safe-area-inset-right)) calc(1.5rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); transform: translateY(105%); }
  .ov-panel__name { font-size: 2.6rem; }
}
@media (prefers-reduced-motion: reduce) { .ov-panel, .ov-intro, .ov-lbl { transition: none; } }