/* ============================================================
   SANCTUARY — The Scrying (site-wide command palette)
   Shared across all pages. Builds on styles.css vars.
   ============================================================ */

/* floating trigger (bottom-left, opposite any sound toggle) */
.scry-trigger {
  position: fixed; left: clamp(1rem,3vw,2.2rem); bottom: clamp(1rem,3vw,2.2rem); z-index: 120; cursor: none;
  display: flex; align-items: center; gap: .6rem; padding: .6rem .95rem;
  background: rgba(7,6,10,.6); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,90,31,.3); border-radius: 999px; color: var(--bone-dim);
  font-family: var(--display); letter-spacing: .18em; font-size: .58rem; text-transform: uppercase;
  transition: color .3s, border-color .3s, box-shadow .3s;
}
.scry-trigger:hover { color: var(--bone); border-color: var(--ember); box-shadow: 0 0 22px rgba(255,90,31,.3); }
.scry-trigger__orb {
  width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--ember-soft), var(--blood) 80%);
  box-shadow: 0 0 10px var(--ember); animation: pulse 2.4s ease-in-out infinite;
}
.scry-trigger kbd {
  font-family: var(--display); font-size: .56rem; letter-spacing: .1em;
  border: 1px solid rgba(216,203,184,.25); border-radius: 3px; padding: .1rem .35rem; color: var(--bone-dim);
}

/* overlay */
.scry {
  position: fixed; inset: 0; z-index: 400; display: grid; justify-items: center; align-content: start;
  padding: clamp(4rem,14vh,11rem) 1rem 2rem;
  background: rgba(4,2,3,0); backdrop-filter: blur(0px);
  opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s, background .35s, backdrop-filter .35s;
}
.scry.is-open { opacity: 1; visibility: visible; background: rgba(4,2,3,.72); backdrop-filter: blur(9px); }

.scry__box {
  width: min(640px, 94vw);
  background: linear-gradient(180deg, rgba(20,12,12,.96), rgba(9,5,6,.98));
  border: 1px solid rgba(255,90,31,.35); border-radius: 6px;
  box-shadow: 0 50px 130px rgba(0,0,0,.8), 0 0 60px rgba(255,90,31,.16);
  overflow: hidden;
  transform: translateY(-18px) scale(.98); transition: transform .4s var(--ease);
}
.scry.is-open .scry__box { transform: none; }

.scry__field { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.2rem; border-bottom: 1px solid rgba(255,90,31,.18); }
.scry__field .orb { width: 14px; height: 14px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, var(--ember-soft), var(--blood) 80%); box-shadow: 0 0 12px var(--ember); animation: pulse 2.4s ease-in-out infinite; }
.scry__input {
  flex: 1; background: none; border: 0; outline: none; cursor: none;
  font-family: var(--serif); font-size: 1.15rem; color: var(--bone);
}
.scry__input::placeholder { color: var(--bone-dim); font-style: italic; }

.scry__results { max-height: min(56vh, 460px); overflow-y: auto; padding: .5rem; }
.scry__results::-webkit-scrollbar { width: 8px; }
.scry__results::-webkit-scrollbar-thumb { background: rgba(255,90,31,.35); border-radius: 8px; }

.scry__group { font-family: var(--display); letter-spacing: .28em; font-size: .56rem; text-transform: uppercase;
  color: var(--bone-dim); padding: .9rem .9rem .35rem; }
.scry__item {
  display: flex; align-items: center; gap: .9rem; width: 100%; text-align: left;
  background: none; border: 0; cursor: none; border-radius: 4px;
  padding: .65rem .9rem; color: var(--bone);
}
.scry__item:hover, .scry__item.is-sel { background: linear-gradient(90deg, rgba(255,90,31,.16), transparent); }
.scry__item.is-sel { box-shadow: inset 2px 0 0 var(--ember); }
.scry__ico { width: 26px; height: 26px; flex: none; color: var(--ember); opacity: .85; }
.scry__ico svg { width: 100%; height: 100%; }
.scry__label { flex: 1; font-family: var(--serif); font-size: 1rem; }
.scry__label b { color: var(--ember-soft); font-weight: 400; } /* match highlight */
.scry__tag { font-family: var(--display); letter-spacing: .16em; font-size: .54rem; text-transform: uppercase;
  color: var(--bone-dim); border: 1px solid rgba(216,203,184,.18); border-radius: 3px; padding: .15rem .45rem; }
.scry__empty { padding: 2rem; text-align: center; color: var(--bone-dim); font-style: italic; }

.scry__hint { display: flex; gap: 1.2rem; flex-wrap: wrap; justify-content: center;
  padding: .7rem; border-top: 1px solid rgba(255,90,31,.14);
  font-family: var(--display); letter-spacing: .14em; font-size: .56rem; text-transform: uppercase; color: var(--bone-dim); }
.scry__hint kbd { border: 1px solid rgba(216,203,184,.25); border-radius: 3px; padding: .05rem .35rem; }

/* ---------- the rite (easter egg) ---------- */
.rite-flash { position: fixed; inset: 0; z-index: 600; pointer-events: none; opacity: 0;
  background: radial-gradient(120% 100% at 50% 50%, transparent 30%, rgba(138,10,10,.6) 100%); }
.rite-flash.go { animation: riteFlash 2.6s var(--ease); }
@keyframes riteFlash { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }
.rite-quote { position: fixed; inset: 0; z-index: 601; display: grid; place-items: center; pointer-events: none;
  padding: 2rem; text-align: center; opacity: 0; }
.rite-quote.go { animation: riteQuote 4s var(--ease); }
.rite-quote span { font-family: var(--decor); font-weight: 700; font-size: clamp(1.4rem,4vw,3rem); max-width: 24ch;
  color: transparent; background: linear-gradient(180deg, #fff, var(--blood-lit)); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 30px rgba(193,18,31,.6)); }
@keyframes riteQuote { 0%,100% { opacity: 0; transform: scale(.96); } 20%,72% { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .scry, .scry__box { transition: none; }
  .rite-flash.go, .rite-quote.go { animation-duration: .01s; }
}