/* ============================================================
   Spatial portfolio · engine (v6, dock first)
   The world's stage (items, depth), the Control Center, the Dock
   (sections, then Alter ego), the Tour stepper card, the switch
   HUD, the intro, and the chrome of the big windows.
   ============================================================ */

/* ---------- Stage ---------- */
/* overflow: clip (not hidden): focusing something inside a window that is partly off screen must never scroll the stage */
.vx-space { position: fixed; inset: 0; z-index: 1; overflow: hidden; overflow: clip; touch-action: none; cursor: grab; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.vx-space.is-looking, .vx-space.is-grabbing { cursor: grabbing; }
.vx-space .vx-window { cursor: auto; -webkit-user-select: text; user-select: text; }
.vx-item { position: absolute; left: 0; top: 0; transform-origin: 50% 50%; backface-visibility: hidden; }
.vx-item.is-off { visibility: hidden; }
.vx-space.is-moving .vx-item:not(.is-off) { will-change: transform, opacity; }
.vx-item[data-kind="widget"] { cursor: grab; }
/* photos and media never look grabbable (they don't move a window or a widget) */
.vx-item[data-kind="widget"] :is(img, picture, video, canvas, figure, [data-photo]) { cursor: default; }
.vx-item.is-dragging, .vx-item.is-dragging * { cursor: grabbing !important; -webkit-user-select: none; user-select: none; }
.vx-item.is-dragging { transition: none; }
.vx-item.is-dragging.vx-glass { box-shadow: inset 0 1px 0 var(--vx-edge-top), inset 0 0 0 1px var(--vx-edge), 0 70px 120px -40px rgb(0 0 0 / 0.6), 0 20px 50px -20px rgb(0 0 0 / 0.45); }
.vx-item.is-hidden, .vx-item.is-away { pointer-events: none; }
.vx-item:focus { outline: none; }
/* the window you land in only shows a ring when you're navigating with the keyboard */
html.vx-kbd .vx-item:focus-visible { outline: 2px solid rgb(255 255 255 / 0.7); outline-offset: 6px; }
html.vx-looking, html.vx-looking * { -webkit-user-select: none !important; user-select: none !important; }
/* Photos and media inside windows never lift off as native drag ghosts or long press callouts */
.vx-item img, .vx-window img, .vx-dock img, .vx-cc img, .vx-hud img { -webkit-user-drag: none; -webkit-touch-callout: none; }
.vx-item img, .vx-window img { -webkit-user-select: none; user-select: none; }

/* Far and receded glass: no live backdrop blur (cheap), a denser tint instead */
.vx-item.is-far.vx-glass, .vx-item.is-far .vx-glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(var(--vx-glass) / 0.86); }
.vx-item.is-far .vx-close { display: none; }

/* Arriving / opening: blur to sharp while the spring carries the window in */
.vx-item.is-opening { animation: vx-unblur .72s var(--vx-ease-out) both; }
@keyframes vx-unblur { from { filter: blur(12px) saturate(1.25); } to { filter: none; } }

/* Big windows: the ornament hangs just under the bottom edge (visionOS), the window bar sits under it */
html.vx-dockmode .vx-item[data-kind="window"] > .vx-ornament { bottom: -52px; }
html.vx-dockmode .vx-item[data-kind="window"].has-orn > .vx-winbar { bottom: -96px; }
.vx-item .vx-ornament, .vx-item .vx-tabbar, .vx-item .vx-winbar { transition: opacity .35s var(--vx-ease-out); }
.vx-item.is-away .vx-ornament, .vx-item.is-away .vx-tabbar, .vx-item.is-away .vx-winbar,
.vx-item.is-hidden .vx-ornament, .vx-item.is-hidden .vx-tabbar { opacity: 0; }
/* a Dock label is showing: the window bar and ornament just above the Dock step aside (no collisions) */
html.vx-docktip .vx-item > .vx-winbar, html.vx-docktip .vx-item > .vx-ornament { opacity: 0; pointer-events: none; transition: opacity .2s var(--vx-ease-out) .1s; }
/* a section window stepped back behind a sub window: quiet chrome */
.vx-item.is-main[inert] .vx-ornament, .vx-item.is-main[inert] .vx-tabbar, .vx-item.is-main[inert] .vx-winbar { opacity: 0; }

/* ---------- Fixed chrome ---------- */
.vx-cc, .vx-dock, .vx-tourcard, .vx-hud { position: fixed; font-family: var(--vx-font); color: var(--vx-label-1); }
.vx-cc { z-index: 97; }
.vx-dock, .vx-tourcard { z-index: 96; }
.vx-hud { z-index: 98; }

/* Control Center pill */
.vx-cc { top: max(14px, env(safe-area-inset-top)); left: 50%; translate: -50% 0; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; transition: opacity .6s var(--vx-ease-out), translate .8s var(--vx-spring-smooth); }
.vx-cc__btn { position: relative; width: 40px; height: 40px; border: 0; padding: 0; border-radius: 50%; background: transparent; color: var(--vx-label-2); display: grid; place-items: center; cursor: pointer; transition: background .2s, color .2s, scale .35s var(--vx-spring); }
.vx-cc__btn:hover { background: var(--vx-fill); color: var(--vx-label-1); }
.vx-cc__btn:active { scale: 0.92; }
.vx-cc__btn:focus-visible { outline: 2px solid rgb(255 255 255 / 0.85); outline-offset: 1px; }
.vx-cc__btn .vx-ico { width: 18px; height: 18px; }
.vx-cc__btn.is-on, .vx-cc__btn[aria-pressed="true"] { background: rgb(255 255 255 / 0.92); color: rgb(18 18 22); }
.vx-cc__btn:disabled { opacity: .45; cursor: default; }
.vx-cc__btn--label { width: auto; display: inline-flex; gap: 8px; padding: 0 16px 0 12px; border-radius: 999px; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--vx-label-1); }
.vx-cc__btn--label .vx-ico { width: 13px; height: 13px; }
.vx-cc__theme { position: relative; width: 18px; height: 18px; display: block; }
.vx-cc__theme .vx-ico { position: absolute; inset: 0; transition: opacity .3s, rotate .6s var(--vx-spring), scale .5s var(--vx-spring); }
.vx-cc__theme .vx-ico:last-child { opacity: 0; rotate: -60deg; scale: .6; }
.vx-cc__btn.is-dark .vx-cc__theme .vx-ico:first-child { opacity: 0; rotate: 60deg; scale: .6; }
.vx-cc__btn.is-dark .vx-cc__theme .vx-ico:last-child { opacity: 1; rotate: 0deg; scale: 1; }
.vx-cc__slash { position: absolute; width: 22px; height: 2px; border-radius: 2px; background: currentColor; rotate: -45deg; scale: 0 1; transition: scale .35s var(--vx-spring); }
.vx-cc__btn.is-on .vx-cc__slash { scale: 1 1; }
.vx-cc__slot { display: inline-flex; min-width: 40px; min-height: 40px; align-items: center; justify-content: center; }
.vx-cc__sep { width: 1px; height: 24px; background: var(--vx-hairline); margin: 0 4px; }
.vx-cc__btn[data-cc="help"][aria-pressed="true"] { background: var(--vx-fill-hi); color: var(--vx-label-1); }
.vx-cc__btn[data-cc="help"] .vx-ico { width: 20px; height: 20px; }
.vx-cc__btn[hidden] { display: none; }
/* labels on hover (a glass pill under the Control Center) */
.vx-cc__tip { position: absolute; top: calc(100% + 12px); left: 50%; translate: -50% -4px; padding: 6px 12px; border-radius: 999px; background: rgb(var(--vx-glass) / 0.86); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); box-shadow: inset 0 0 0 1px var(--vx-edge), 0 10px 26px -10px rgb(0 0 0 / 0.5); color: var(--vx-label-1); font-size: 13px; line-height: 16px; font-weight: 600; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .16s, translate .35s var(--vx-spring); }
.vx-cc__btn:hover .vx-cc__tip, .vx-cc__btn:focus-visible .vx-cc__tip { opacity: 1; translate: -50% 0; transition-delay: .25s, .25s; }

/* ---------- Dock ---------- */
.vx-dock { left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); translate: -50% 0; transition: opacity .5s var(--vx-ease-out), translate .75s var(--vx-spring-smooth); }
.vx-dock__glass { position: absolute; inset: 0; border-radius: 999px; pointer-events: none; }
.vx-dock__row { position: relative; display: flex; align-items: center; gap: 4px; padding: 8px 12px; }
.vx-dock__item { --mag: 1; position: relative; width: 58px; height: 60px; border: 0; padding: 0; margin: 0; background: none; color: inherit; display: grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.vx-dock__item:focus-visible { outline: none; }
.vx-dock__icon { display: block; width: 52px; height: 52px; border-radius: 50%; transform-origin: 50% 100%; scale: var(--mag); translate: 0 calc((var(--mag) - 1) * -26px); will-change: scale; }
.vx-dock__icon .vx-ricon { --ricon: 52px; box-shadow: 0 10px 18px -10px rgb(0 0 0 / 0.55), 0 2px 6px -2px rgb(0 0 0 / 0.3); transition: box-shadow .25s, filter .25s; }
.vx-dock__item:hover .vx-ricon { filter: brightness(1.06); }
.vx-dock__item:active .vx-dock__icon { filter: brightness(.86); }
/* the focus ring sits on the unmasked round wrapper: .vx-ricon's Safari mask (icons.css) clips its own box-shadow */
.vx-dock__icon { transition: box-shadow .25s; }
.vx-dock__item:focus-visible .vx-dock__icon { box-shadow: 0 0 0 2px rgb(255 255 255 / 0.95), 0 0 0 6px rgb(255 255 255 / 0.24), 0 0 0 7px rgb(0 0 0 / 0.18); }
.vx-dock__icon.is-bounce { animation: vx-dockbounce .62s var(--vx-ease-out); }
@keyframes vx-dockbounce { 0% { translate: 0 0; } 32% { translate: 0 -14px; } 62% { translate: 0 0; } 80% { translate: 0 -4px; } 100% { translate: 0 0; } }
/* open / current indicator dots */
.vx-dock__dot { position: absolute; left: 50%; bottom: -3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 2px; background: rgb(255 255 255 / 0.9); opacity: 0; scale: .4; transition: opacity .3s, scale .45s var(--vx-spring), width .45s var(--vx-spring), margin .45s var(--vx-spring); }
.vx-dock__item.is-open .vx-dock__dot { opacity: .5; scale: 1; }
.vx-dock__item.is-current .vx-dock__dot { opacity: 1; scale: 1; width: 14px; margin-left: -7px; }
/* labels on hover: a glass pill above the icon */
.vx-dock__tip { position: absolute; left: 50%; bottom: calc(100% + 20px); translate: -50% 6px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px 8px 16px; border-radius: 999px; background: rgb(var(--vx-glass) / 0.88); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); box-shadow: inset 0 1px 0 var(--vx-edge-top), inset 0 0 0 1px var(--vx-edge), 0 12px 28px -12px rgb(0 0 0 / 0.55); color: var(--vx-label-1); font-size: 14px; line-height: 18px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .16s, translate .35s var(--vx-spring); z-index: 3; }
.vx-dock__item--other .vx-dock__tip { padding-right: 16px; }
.vx-dock__tip small { font-size: 12px; font-weight: 500; color: var(--vx-label-2); }
.vx-dock__tip .vx-kbd { font-size: 11px; min-width: 20px; }
.vx-dock__item:hover .vx-dock__tip, .vx-dock__item:focus-visible .vx-dock__tip { opacity: 1; translate: -50% 0; }
.vx-dock__sep { width: 1px; height: 40px; margin: 0 8px; background: linear-gradient(transparent, rgb(255 255 255 / 0.3) 20%, rgb(255 255 255 / 0.3) 80%, transparent); flex: none; }
/* Alter ego: the face peeks now and then, wobbles on hover */
.vx-dock__item--other .vx-ricon { animation: vx-peek 9s var(--vx-ease-out) 4s infinite; }
@keyframes vx-peek { 0%, 86%, 100% { rotate: 0deg; } 89% { rotate: -9deg; } 93% { rotate: 6deg; } 96% { rotate: -2deg; } }
.vx-dock__item--other:hover .vx-ricon { animation: vx-wobble .6s var(--vx-spring-bouncy); }
@keyframes vx-wobble { 30% { rotate: -10deg; } 60% { rotate: 7deg; } 100% { rotate: 0deg; } }
.vx-dock__item--other .vx-dock__tip small { color: var(--vx-label-2); }
/* photo icon (the alter ego hero portrait, when the alter ego site provides one) */
.vx-ricon--photo { position: relative; display: block; width: var(--ricon); height: var(--ricon); border-radius: 50%; overflow: hidden; background: #0d0f14; }
.vx-ricon--photo .vx-ricon__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vx-ricon--photo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), inset 0 0 0 1px rgb(255 255 255 / 0.16); pointer-events: none; }
/* the Alter ego's hero portrait: a gold ring like its HUD portrait, and no peek or wobble (a photo doesn't tilt) */
.vx-dock__item--other .vx-ricon--photo, .vx-dock__item--other:hover .vx-ricon--photo { animation: none; }
.vx-ricon--photo.vx-ricon--hero::after { box-shadow: inset 0 0 0 2px #d6b26a, inset 0 0 0 3px rgb(16 18 22 / 0.7), inset 0 1px 0 3px rgb(255 240 200 / 0.35); }

/* The Dock and Control Center rise in after the world on first load */
html.vx-intro:not(.vx-ready) .vx-dock { opacity: 0; translate: -50% 40px; }
html.vx-intro:not(.vx-ready) .vx-cc { opacity: 0; translate: -50% -20px; }
html.vx-intro.vx-ready .vx-dock .vx-dock__icon { animation: vx-dockrise .8s var(--vx-spring-bouncy) both; animation-delay: calc(var(--i, 0) * 45ms + 60ms); }
@keyframes vx-dockrise { from { opacity: 0; translate: 0 18px; scale: .7; } to { opacity: 1; translate: 0 0; scale: 1; } }

/* ---------- Tour stepper (takes the Dock's place) ---------- */
html.vx-touring .vx-dock { opacity: 0; translate: -50% 30px; pointer-events: none; }
.vx-tourcard { left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); translate: -50% 30px; width: min(820px, calc(100vw - 32px)); min-height: 80px; display: flex; align-items: center; gap: 16px; padding: 16px 16px 16px 24px; border-radius: 32px; opacity: 0; transition: opacity .4s var(--vx-ease-out), translate .7s var(--vx-spring-smooth); }
.vx-tourcard[hidden] { display: none; }
.vx-tourcard.is-in { opacity: 1; translate: -50% 0; }
.vx-tourcard__prog { position: absolute; left: 32px; right: 32px; top: 8px; display: flex; gap: 5px; pointer-events: none; }
.vx-tourcard__prog i { flex: 1; height: 3px; border-radius: 2px; background: rgb(255 255 255 / 0.16); overflow: hidden; position: relative; }
.vx-tourcard__prog i::after { content: ""; position: absolute; inset: 0; background: rgb(255 255 255 / 0.9); transform-origin: 0 50%; scale: 0 1; transition: scale .6s var(--vx-ease-out); }
.vx-tourcard__prog i.is-done::after, .vx-tourcard__prog i.is-on::after { scale: 1 1; }
.vx-tourcard__prog i.is-done::after { background: rgb(255 255 255 / 0.55); }
.vx-tourcard__text { flex: 1; min-width: 0; padding-top: 4px; }
.vx-tourcard__text.is-swap { animation: vx-tourswap .55s var(--vx-spring) both; }
@keyframes vx-tourswap { from { opacity: 0; translate: calc(var(--dir, 1) * 22px) 0; filter: blur(4px); } to { opacity: 1; translate: 0 0; filter: none; } }
.vx-tourcard__k { margin: 0; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--vx-label-2); }
.vx-tourcard__t { margin: 1px 0 0; font-size: 17px; line-height: 1.25; font-weight: 700; letter-spacing: -0.015em; }
.vx-tourcard__l { margin: 2px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--vx-label-2); }
.vx-tourcard__btns { display: flex; align-items: center; gap: 8px; flex: none; padding-top: 4px; }
.vx-tourcard__btn { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--vx-fill); color: var(--vx-label-1); font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; transition: background .2s, scale .35s var(--vx-spring), opacity .2s; }
.vx-tourcard__btn .vx-ico { width: 16px; height: 16px; }
.vx-tourcard__btn[data-t="back"] { padding: 0 16px 0 12px; }
.vx-tourcard__btn:hover { background: var(--vx-fill-hi); }
.vx-tourcard__btn:active { scale: .95; }
.vx-tourcard__btn:disabled { opacity: .38; cursor: default; }
.vx-tourcard__btn--next { padding: 0 12px 0 20px; background: rgb(255 255 255 / 0.94); color: rgb(18 18 22); }
.vx-tourcard__btn--next:hover { background: #fff; }
.vx-tourcard__btn--also { background: transparent; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.28); }
.vx-tourcard__x { width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--vx-label-2); display: grid; place-items: center; cursor: pointer; transition: background .2s, color .2s; }
.vx-tourcard__x:hover { background: var(--vx-fill); color: var(--vx-label-1); }
.vx-tourcard__x .vx-ico { width: 15px; height: 15px; }
.vx-tourcard :focus-visible { outline: 2px solid rgb(255 255 255 / 0.9); outline-offset: 2px; }

/* ---------- Switch HUD (` between recent places) ---------- */
.vx-hud { top: calc(max(14px, env(safe-area-inset-top)) + 58px); left: 50%; translate: -50% -8px; display: flex; align-items: center; gap: 12px; padding: 7px 10px 7px 7px; border-radius: 999px; opacity: 0; pointer-events: none; transition: opacity .2s, translate .45s var(--vx-spring); }
.vx-hud.is-in { opacity: 1; translate: -50% 0; }
.vx-hud .vx-ricon { --ricon: 30px; }
.vx-hud b { display: block; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.vx-hud small { display: block; font-size: 12px; color: var(--vx-label-2); }

/* ---------- Intro veil ---------- */
.vx-veil { position: fixed; inset: 0; z-index: 200; background: #07080c; pointer-events: none; opacity: 1; transition: opacity 1.5s cubic-bezier(.4, 0, .2, 1); }
.vx-veil.is-out { opacity: 0; }

/* ---------- Fallback Work window (only when APPS hasn't registered one) ---------- */
.vx-workfb { padding: 44px 52px; }
.vx-workfb__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 22px 12px; margin-top: 28px; }
.vx-workfb__app { display: flex; flex-direction: column; align-items: center; gap: 10px; border: 0; background: none; color: inherit; font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; padding: 6px 0; border-radius: 20px; }
.vx-workfb__app .vx-ricon { transition: scale .4s var(--vx-spring); }
.vx-workfb__app:hover .vx-ricon { scale: 1.07; }
.vx-workfb__app span { max-width: 112px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Narrow screens (the MOBILE manager normally takes over below 900px) ---------- */
@media (max-width: 899px) {
  .vx-cc__btn { width: 36px; height: 36px; }
  .vx-cc [data-cc="fs"], .vx-cc__tip { display: none; }
  .vx-dock__row { padding: 6px 8px; }
  .vx-dock__item { width: 44px; height: 50px; }
  .vx-dock__icon { width: 40px; height: 40px; }
  .vx-dock__icon .vx-ricon { --ricon: 40px; }
  .vx-dock__tip { display: none; }
  .vx-dock__sep { margin: 0 3px; height: 32px; }
  .vx-tourcard { flex-wrap: wrap; gap: 8px; padding: 16px 12px 10px 18px; }
  .vx-tourcard__btns { width: 100%; justify-content: flex-end; }
}
@media (max-height: 700px) {
  .vx-dock__item { height: 52px; }
  .vx-dock__icon, .vx-dock__icon .vx-ricon { width: 46px; height: 46px; --ricon: 46px; }
  .vx-dock__row { padding: 5px 8px; }
}

/* ---------- Reduced motion (system or the Control Center toggle) ---------- */
html.vx-reduced *, html.vx-reduced *::before, html.vx-reduced *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; }
html.vx-reduced .vx-dock__item--other .vx-ricon { animation: none; }
html.vx-reduced .vx-dock__icon { scale: 1; translate: 0 0; }
/* chrome still crossfades gently */
html.vx-reduced .vx-tourcard, html.vx-reduced .vx-dock, html.vx-reduced .vx-hud { transition: opacity .25s linear !important; }

@media (prefers-reduced-transparency: reduce) {
  .vx-dock__tip, .vx-cc__tip { background: rgb(var(--vx-glass) / 0.97); }
}