/* ============================================================
   MAZE · The Index — a global launcher / command palette.
   Injected on every page (showcase · lab · atelier · expert).
   Self-contained, brand-scoped (.portal*). Vanilla, no deps.
   ============================================================ */

/* ---- floating trigger orb ---- */
.portal-orb {
  position: fixed; left: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
  z-index: 9000; display: inline-flex; align-items: center; gap: .55rem;
  padding: .6rem .9rem; border-radius: 100px;
  border: 1px solid rgba(200,169,106,.42); background: rgba(12,12,15,.72);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: #F4F1EA; font: 500 .76rem/1 "Inter Tight","Inter",system-ui,sans-serif;
  letter-spacing: .02em; cursor: pointer;
  transition: transform .4s cubic-bezier(.16,1,.3,1), border-color .4s, opacity .35s, box-shadow .4s;
  animation: portalOrbPulse 2.4s ease-out 3;
}
.portal-orb:hover { transform: translateY(-2px); border-color: rgba(200,169,106,.95); box-shadow: 0 10px 40px -12px rgba(200,169,106,.5); }
.portal-orb:focus-visible { outline: 2px solid #C8A96A; outline-offset: 3px; }
.portal-orb__d { color: #C8A96A; font-size: .72rem; }
.portal-orb kbd { font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: .62rem; color: #C8A96A;
  border: 1px solid rgba(200,169,106,.4); border-radius: 5px; padding: .12rem .34rem; letter-spacing: .04em; }
body.portal-open .portal-orb { opacity: 0; pointer-events: none; transform: translateY(8px); }
@keyframes portalOrbPulse { 0% { box-shadow: 0 0 0 0 rgba(200,169,106,.5); } 70%,100% { box-shadow: 0 0 0 14px rgba(200,169,106,0); } }

/* ---- overlay ---- */
.portal { position: fixed; inset: 0; z-index: 9001; display: none; }
.portal.is-open { display: block; }
.portal__scrim { position: absolute; inset: 0; background: rgba(6,6,8,.62);
  -webkit-backdrop-filter: blur(10px) saturate(.85); backdrop-filter: blur(10px) saturate(.85);
  opacity: 0; transition: opacity .35s ease; }
.portal.is-open .portal__scrim { opacity: 1; }

.portal__panel {
  position: absolute; left: 50%; top: clamp(1.5rem, 9vh, 7rem); transform: translateX(-50%) scale(.97);
  width: min(93vw, 660px); max-height: 82vh; display: flex; flex-direction: column;
  background: rgba(13,13,16,.94); border: 1px solid rgba(200,169,106,.22); border-radius: 16px;
  box-shadow: 0 50px 130px -34px rgba(0,0,0,.85); opacity: 0; overflow: hidden;
  transition: opacity .35s ease, transform .5s cubic-bezier(.16,1,.3,1);
}
.portal.is-open .portal__panel { opacity: 1; transform: translateX(-50%) scale(1); }

.portal__head { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.2rem; border-bottom: 1px solid rgba(255,255,255,.06); }
.portal__mk { color: #C8A96A; font: 700 1rem "Fraunces",Georgia,serif; }
.portal__input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: #F4F1EA;
  font: 400 1.05rem/1.2 "Inter Tight","Inter",system-ui,sans-serif; }
.portal__input::placeholder { color: rgba(244,241,234,.38); }
.portal__count { flex: none; font: 500 .62rem ui-monospace,monospace; color: rgba(244,241,234,.4); letter-spacing: .08em; text-transform: uppercase; }

.portal__list { overflow-y: auto; padding: .4rem; scrollbar-width: thin; scrollbar-color: rgba(200,169,106,.4) transparent; }
.portal__list::-webkit-scrollbar { width: 8px; }
.portal__list::-webkit-scrollbar-thumb { background: rgba(200,169,106,.32); border-radius: 8px; }
.portal__group { padding: .8rem .85rem .3rem; font: 600 .58rem ui-monospace,monospace; letter-spacing: .2em; text-transform: uppercase; color: rgba(200,169,106,.72); }

.portal__row { display: flex; align-items: center; gap: .85rem; padding: .68rem .85rem; border-radius: 10px; cursor: pointer; position: relative; }
.portal__row.is-sel { background: rgba(200,169,106,.12); }
.portal__row.is-sel::before { content: ""; position: absolute; left: 0; top: 20%; bottom: 20%; width: 2px; background: #C8A96A; border-radius: 2px; }
.portal__no { flex: none; width: 1.3rem; text-align: center; font: 600 .66rem ui-monospace,monospace; color: rgba(200,169,106,.6); }
.portal__txt { flex: 1; min-width: 0; }
.portal__t { display: flex; align-items: center; gap: .5rem; font: 500 .98rem "Fraunces",Georgia,serif; color: #F4F1EA; }
.portal__here { flex: none; font: 700 .52rem ui-monospace,monospace; letter-spacing: .12em; text-transform: uppercase; color: #0A0A0B; background: #C8A96A; border-radius: 4px; padding: .12rem .36rem; }
.portal__cap { flex: none; font: 700 .5rem ui-monospace,monospace; letter-spacing: .14em; text-transform: uppercase; color: rgba(200,169,106,.85); border: 1px solid rgba(200,169,106,.32); border-radius: 4px; padding: .12rem .36rem; }
.portal__d { font: 400 .78rem/1.35 "Inter Tight","Inter",system-ui,sans-serif; color: rgba(244,241,234,.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.portal__go { flex: none; color: rgba(200,169,106,0); font-size: .82rem; transition: color .2s; }
.portal__row.is-sel .portal__go { color: #C8A96A; }
.portal__empty { padding: 2.4rem 1rem; text-align: center; color: rgba(244,241,234,.42); font: 400 .92rem "Inter Tight",sans-serif; }

.portal__foot { display: flex; flex-wrap: wrap; gap: .35rem .95rem; align-items: center; padding: .7rem 1.2rem; border-top: 1px solid rgba(255,255,255,.06); font: 500 .62rem ui-monospace,monospace; color: rgba(244,241,234,.45); letter-spacing: .04em; }
.portal__foot kbd { font-family: ui-monospace,monospace; color: #C8A96A; border: 1px solid rgba(200,169,106,.3); border-radius: 4px; padding: .08rem .3rem; margin-right: .25rem; }
.portal__surprise { margin-left: auto; background: none; border: 1px solid rgba(200,169,106,.38); color: #C8A96A; border-radius: 8px; padding: .38rem .65rem; font: 600 .62rem ui-monospace,monospace; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s; }
.portal__surprise:hover { background: #C8A96A; color: #0A0A0B; }

/* ---- deep-link flash on a lab experiment ---- */
.portal-flash { animation: portalFlash 1.7s cubic-bezier(.16,1,.3,1); border-radius: 6px; }
@keyframes portalFlash {
  0% { box-shadow: 0 0 0 0 rgba(200,169,106,0); }
  18% { box-shadow: 0 0 0 3px rgba(200,169,106,.75), 0 0 70px rgba(200,169,106,.22); }
  100% { box-shadow: 0 0 0 0 rgba(200,169,106,0); }
}

@media (max-width: 560px) { .portal-orb__l { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .portal-orb { animation: none; }
  .portal-orb, .portal__scrim, .portal__panel, .portal__go, .portal__surprise { transition: none; }
  .portal-flash { animation: none; box-shadow: 0 0 0 3px rgba(200,169,106,.7); }
}