/* ============================================================
   MAZE — THE TOUR (the ad IS the website)
   Page dims, a gold spotlight glides across the REAL sections,
   a card explains each capability in place. No libraries.
   ============================================================ */
.mazad, .mazad * { box-sizing: border-box; margin: 0; padding: 0; }
.mazad { display: none; }
.mazad.is-open { display: block; }

/* the spotlight IS the scrim: a travelling window with the world dimmed around it */
.mazad__spot {
  position: fixed; z-index: 9500; top: 40vh; left: 10vw; width: 80vw; height: 20vh;
  border-radius: 18px; pointer-events: auto; cursor: pointer;
  box-shadow: 0 0 0 200vmax rgba(6, 6, 8, 0.82), 0 0 0 1px rgba(200, 169, 106, 0.55) inset,
              0 0 44px rgba(200, 169, 106, 0.18) inset;
  transition: top .75s cubic-bezier(.16,1,.3,1), left .75s cubic-bezier(.16,1,.3,1),
              width .75s cubic-bezier(.16,1,.3,1), height .75s cubic-bezier(.16,1,.3,1),
              opacity .6s cubic-bezier(.16,1,.3,1);
  opacity: 0;
}
.mazad.is-shown .mazad__spot { opacity: 1; }
/* gold corner ticks on the spotlight frame */
.mazad__spot::before, .mazad__spot::after {
  content: ""; position: absolute; width: 22px; height: 22px; pointer-events: none;
  border: 2px solid #C8A96A;
}
.mazad__spot::before { top: -2px; left: -2px; border-right: none; border-bottom: none; border-radius: 16px 0 0 0; }
.mazad__spot::after { bottom: -2px; right: -2px; border-left: none; border-top: none; border-radius: 0 0 16px 0; }

/* ---------- the annotation card ---------- */
.mazad__card {
  position: fixed; z-index: 9520; width: min(430px, calc(100vw - 48px));
  background: linear-gradient(165deg, #131316, #0A0A0B);
  border: 1px solid rgba(200, 169, 106, 0.4); border-radius: 16px;
  padding: 1.15rem 1.25rem 1rem;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.65), 0 0 40px rgba(200, 169, 106, 0.08);
  color: #F4F1EA; font-family: "Inter Tight", -apple-system, sans-serif;
  opacity: 0; transform: translateY(14px);
}
.mazad__card.is-in {
  opacity: 1; transform: none;
  transition: opacity .55s cubic-bezier(.16,1,.3,1) .25s, transform .55s cubic-bezier(.16,1,.3,1) .25s;
}
.mazad__eyebrow {
  font-size: .64rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: #C8A96A;
}
.mazad__title {
  font-family: "Fraunces", Georgia, serif; font-weight: 400; line-height: 1.08;
  font-size: clamp(1.25rem, 4.6vw, 1.6rem); margin-top: .5rem;
}
.mazad__body { color: rgba(244, 241, 234, .66); font-weight: 300; font-size: .9rem; line-height: 1.55; margin-top: .55rem; }
.mazad__row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-top: .95rem; }
.mazad__count { font-family: ui-monospace, Menlo, monospace; font-size: .72rem; color: rgba(244,241,234,.4); letter-spacing: .12em; }
.mazad__nav {
  -webkit-tap-highlight-color: transparent; cursor: pointer; font: inherit;
  min-height: 42px; padding: .5rem 1.1rem; border-radius: 999px; font-size: .84rem; font-weight: 500;
  border: 1px solid #8a7038; color: #0A0A0B; background: linear-gradient(120deg, #C8A96A, #E4CE9C);
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s, opacity .3s;
}
.mazad__nav:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(200,169,106,.25); }
.mazad__back { background: none; color: rgba(244,241,234,.75); border-color: rgba(244,241,234,.22); padding-inline: .9rem; }
.mazad__back:disabled { opacity: .3; cursor: default; transform: none; box-shadow: none; }
.mazad__ctas { display: flex; gap: .7rem; margin-top: .9rem; flex-wrap: wrap; }
.mazad__ctas[hidden] { display: none; }
.mazad__btn {
  -webkit-tap-highlight-color: transparent; cursor: pointer; text-decoration: none; font: inherit;
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; flex: 1;
  padding: .65rem 1.2rem; border-radius: 999px; font-size: .86rem; font-weight: 500;
  border: 1px solid #8a7038; color: #0A0A0B; background: linear-gradient(120deg, #C8A96A, #E4CE9C);
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s;
}
.mazad__btn:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(200,169,106,.28); }
.mazad__btn--ghost { background: none; color: #F4F1EA; border-color: rgba(244,241,234,.3); }

/* ---------- end tour ✕ + progress ---------- */
.mazad__x {
  position: fixed; z-index: 9530; top: calc(max(12px, env(safe-area-inset-top)) + 6px); right: 14px;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(244,241,234,.3);
  background: rgba(10,10,11,.72); color: #F4F1EA; font-size: 1rem; line-height: 1; font-family: inherit;
  cursor: pointer; -webkit-tap-highlight-color: transparent; display: grid; place-items: center;
  transition: border-color .3s, transform .3s; opacity: 0;
}
.mazad.is-shown .mazad__x { opacity: 1; transition: opacity .5s .2s, border-color .3s, transform .3s; }
.mazad__x:hover { border-color: #C8A96A; transform: rotate(90deg); }
.mazad__bar {
  position: fixed; z-index: 9530; top: 0; left: 0; right: 0; height: 2px; background: rgba(244,241,234,.12);
}
.mazad__bar i {
  display: block; height: 100%; background: linear-gradient(90deg, #C8A96A, #E4CE9C);
  transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.16,1,.3,1);
}

/* ---------- ✦ chip (on the page) ---------- */
.mazad-chip {
  position: fixed; z-index: 9001; left: max(14px, env(safe-area-inset-left));
  bottom: calc(max(14px, env(safe-area-inset-bottom)) + 4px);
  -webkit-tap-highlight-color: transparent; cursor: pointer;
  display: inline-flex; align-items: center; gap: .45rem; min-height: 40px;
  padding: .5rem .95rem; border-radius: 999px; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: #E4CE9C; background: rgba(10,10,11,.72); border: 1px solid rgba(200,169,106,.35);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-family: "Inter Tight", -apple-system, sans-serif; font-weight: 500;
  transition: border-color .3s, transform .3s;
}
.mazad-chip:hover { border-color: #C8A96A; transform: translateY(-2px); }
.mazad-chip i { font-style: normal; color: #C8A96A; }
/* pages with the portal orb: chip stacks above it */
.has-portal-orb .mazad-chip { bottom: calc(clamp(1rem, 3vw, 2rem) + 54px); left: clamp(1rem, 3vw, 2rem); }
/* while the tour runs, floating UI steps aside */
html.mazad-lock .mazad-chip, html.mazad-lock .portal-orb { opacity: 0; pointer-events: none; }

/* ---------- mobile: card is a bottom sheet, everything vertical ---------- */
@media (max-width: 760px) {
  .mazad__card {
    left: 10px !important; right: 10px; bottom: calc(max(10px, env(safe-area-inset-bottom)) + 8px);
    width: auto; padding-bottom: .9rem;
  }
  .mazad__ctas { flex-direction: column; }
  .mazad__btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .mazad__spot, .mazad__card, .mazad__card.is-in, .mazad__bar i { transition: none !important; }
}