/* ---- Journey layer -------------------------------------------------
   Interactive atlas for "ما بعد الشاشة".
   Replaces the decorative SVG in scene 04 with a real navigation map,
   and adds a persistent progress bar / launcher / skip affordance.
   Scoped with .jm- prefixes so nothing collides with the bundle CSS. */

:root {
  --jm-line: rgba(196, 181, 253, .22);
  --jm-line-hot: rgba(196, 181, 253, .9);
  --jm-ease: cubic-bezier(.22, 1, .36, 1);
}

/* Native map + old heading are replaced by the live one. */
body.jm-ready .scene--nav .navmap,
body.jm-ready .scene--nav .nav-head,
body.jm-ready .scene--nav .orb,
body.jm-ready .scene--nav .drop { display: none !important; }

.jm-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  z-index: 60; pointer-events: none;
  background: rgba(243, 237, 227, .05);
}
.jm-progress i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #6d28d9, #a78bfa 55%, #f3ede3);
  box-shadow: 0 0 12px rgba(139, 92, 246, .8);
}

/* ---------- skip intro ---------- */
.jm-skip {
  position: fixed; right: 4vw; bottom: calc(3vh + 56px); z-index: 46;
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .62rem 1.05rem; border-radius: 999px;
  border: 1px solid rgba(243, 237, 227, .16);
  background: rgba(9, 6, 15, .5); backdrop-filter: blur(12px);
  color: rgba(243, 237, 227, .62); font-size: .7rem; letter-spacing: .16em;
  transition: color .3s, border-color .3s, background .3s, transform .3s, visibility .3s;
  opacity: 0; transform: translateY(8px); pointer-events: none; visibility: hidden;
}
.jm-skip.is-on { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
.jm-skip:hover { color: #fff; border-color: rgba(196, 181, 253, .55); background: rgba(139, 92, 246, .16); }
.jm-skip svg { width: 13px; height: 13px; }

/* ---------- launcher ---------- */
.jm-launch {
  position: fixed; right: 3vw; bottom: 3vh; z-index: 45;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .55rem .9rem .55rem .7rem; border-radius: 999px;
  border: 1px solid rgba(243, 237, 227, .16);
  background: rgba(9, 6, 15, .62); backdrop-filter: blur(14px);
  color: rgba(243, 237, 227, .72); font-size: .68rem; letter-spacing: .14em;
  transition: transform .35s var(--jm-ease), border-color .3s, color .3s, background .3s, opacity .3s;
}
.jm-launch:hover { transform: translateY(-2px); border-color: rgba(196, 181, 253, .6); color: #fff; }
.jm-launch.is-dim { opacity: 0; pointer-events: none; visibility: hidden; }
.jm-launch__ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(140deg, #7c3aed, #4c1d95); box-shadow: 0 0 18px rgba(139, 92, 246, .55); }
.jm-launch__ic svg { width: 14px; height: 14px; }
.jm-launch kbd {
  font-family: inherit; font-size: .58rem; padding: .1rem .34rem; border-radius: 4px;
  border: 1px solid rgba(243, 237, 227, .2); color: rgba(243, 237, 227, .5);
}

/* ---------- map shell ---------- */
.jmap {
  position: fixed; inset: 0; z-index: 55;
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity .55s var(--jm-ease), visibility .55s var(--jm-ease);
  isolation: isolate;
}
.jmap.is-on { opacity: 1; pointer-events: auto; visibility: visible; }
.jmap::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(35, 16, 62, .92), rgba(5, 4, 8, .96) 70%);
  backdrop-filter: blur(16px);
  transition: opacity .55s var(--jm-ease);
}
.jmap.is-overlay::before { opacity: 1; }
.jmap.is-overlay { z-index: 58; }

.jmap__head {
  position: absolute; top: 8vh; right: 6vw; z-index: 3;
  display: grid; gap: .55rem; max-width: 30vw;
}
.jmap__head .display--md { font-weight: 300; line-height: 1.04; font-size: clamp(1.8rem, 3.9vw, 3.2rem); }
.jmap__head .display--md b { font-weight: 900; }
.jmap__head .sub { font-size: clamp(.72rem, 1vw, .9rem); font-weight: 300; color: rgba(243, 237, 227, .48); letter-spacing: .05em; }
.jmap__now {
  display: flex; align-items: baseline; gap: .5rem; direction: ltr;
  font-size: .7rem; letter-spacing: .2em; color: rgba(243, 237, 227, .45);
}
.jmap__now b { font-size: 1.5rem; color: #f3ede3; letter-spacing: .04em; }
.jmap__now em {
  font-style: normal; direction: rtl; letter-spacing: .12em;
  color: rgba(196, 181, 253, .8); margin-inline-start: .4rem;
}

/* ---------- svg atlas ---------- */
.jmap__stage {
  position: absolute; inset: 0; display: grid; place-items: center;
  transform: perspective(1400px) rotateX(calc(var(--my, 0) * -2.4deg)) rotateY(calc(var(--mx, 0) * 3deg));
  transition: transform .8s var(--jm-ease);
}
.jmap__svg { width: min(1060px, 82vw); height: auto; overflow: visible; transform: translateY(2vh); }
.jmap__svg text { font-family: var(--font); }

.jm-route { fill: none; stroke: var(--jm-line); stroke-width: 1.2; stroke-linecap: round; }
.jm-route--live {
  stroke: url(#jmGrad); stroke-width: 1.8; stroke-linecap: round;
  filter: drop-shadow(0 0 5px rgba(139, 92, 246, .8));
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset .9s var(--jm-ease);
}
.jm-star { fill: #f3ede3; opacity: .28; }
.jm-star--tw { animation: jmTwinkle 5.5s ease-in-out infinite; }
@keyframes jmTwinkle { 0%, 100% { opacity: .12 } 50% { opacity: .55 } }
.jm-orbit { fill: none; stroke: rgba(196, 181, 253, .1); stroke-width: 1; stroke-dasharray: 2 10; }
.jm-orbit--spin { animation: jmSpin 90s linear infinite; transform-origin: 600px 360px; }
@keyframes jmSpin { to { transform: rotate(360deg) } }

/* ---------- nodes ---------- */
.jm-node { cursor: pointer; outline: none; }
.jm-node__halo {
  fill: rgba(139, 92, 246, .07); stroke: rgba(196, 181, 253, .3); stroke-width: 1;
  transition: r .45s var(--jm-ease), fill .45s, stroke .45s;
}
.jm-node__dot {
  fill: #f3ede3; filter: drop-shadow(0 0 8px rgba(196, 181, 253, .85));
  transition: r .35s var(--jm-ease), fill .35s;
}
.jm-node__label {
  fill: rgba(243, 237, 227, .74); font-size: 23px; font-weight: 500;
  letter-spacing: .02em; transition: fill .3s, font-weight .3s;
}
.jm-node__idx {
  fill: rgba(243, 237, 227, .34); font-size: 14px; letter-spacing: .22em;
  transition: fill .3s;
}
.jm-node:focus-visible .jm-node__halo,
.jm-node:hover .jm-node__halo { r: 46; fill: rgba(139, 92, 246, .2); stroke: rgba(233, 225, 255, .8); }
.jm-node:focus-visible .jm-node__label,
.jm-node:hover .jm-node__label { fill: #fff; }
.jm-node.is-done .jm-node__halo { fill: rgba(139, 92, 246, .13); stroke: rgba(196, 181, 253, .45); }
.jm-node.is-done .jm-node__dot { fill: #c4b5fd; }
.jm-node.is-active .jm-node__halo { r: 44; fill: rgba(139, 92, 246, .26); stroke: #e9e1ff; }
.jm-node.is-active .jm-node__dot { r: 8.5; fill: #fff; }
.jm-node.is-active .jm-node__label { fill: #fff; }
.jm-node.is-active .jm-node__idx { fill: rgba(196, 181, 253, .95); }
.jm-node__pulse {
  fill: none; stroke: rgba(196, 181, 253, .8); opacity: 0; r: 26;
}
.jm-node.is-active .jm-node__pulse { animation: jmPulse 2.6s var(--jm-ease) infinite; }
@keyframes jmPulse {
  0% { r: 26; opacity: .55 }
  70% { r: 62; opacity: 0 }
  100% { r: 62; opacity: 0 }
}
.jm-node__here {
  fill: rgba(243, 237, 227, .55); font-size: 12px; letter-spacing: .3em;
  opacity: 0; transition: opacity .3s;
}
.jm-node.is-active .jm-node__here { opacity: 1; }

/* ---------- hover preview ---------- */
.jm-tip {
  position: absolute; z-index: 6; top: 0; left: 0;
  width: min(280px, 62vw); padding: 1rem 1.1rem 1.1rem;
  border-radius: 14px; border: 1px solid rgba(196, 181, 253, .22);
  background: linear-gradient(155deg, rgba(30, 20, 48, .95), rgba(10, 7, 18, .97));
  box-shadow: 0 30px 70px -24px #000, inset 0 1px rgba(255, 255, 255, .07);
  backdrop-filter: blur(14px);
  opacity: 0; transform: translateY(6px) scale(.98); pointer-events: none;
  transition: opacity .28s var(--jm-ease), transform .28s var(--jm-ease);
}
.jm-tip.is-on { opacity: 1; transform: none; }
.jm-tip__k { font-size: .55rem; letter-spacing: .28em; color: rgba(196, 181, 253, .7); }
.jm-tip__t { margin-top: .4rem; font-size: 1.15rem; font-weight: 700; line-height: 1.2; color: #fff; }
.jm-tip__d { margin-top: .45rem; font-size: .78rem; font-weight: 300; line-height: 1.6; color: rgba(243, 237, 227, .55); }
.jm-tip__go {
  margin-top: .8rem; display: inline-flex; align-items: center; gap: .4rem;
  font-size: .68rem; letter-spacing: .1em; color: rgba(196, 181, 253, .95);
}
.jm-tip__go svg { width: 12px; height: 12px; transform: scaleX(-1); }

/* ---------- footer hints ---------- */
.jmap__foot {
  position: absolute; left: 6vw; bottom: 5vh; z-index: 4;
  display: flex; flex-direction: column; gap: .9rem;
}
.jmap__keys { display: flex; flex-wrap: wrap; gap: 1.1rem; font-size: .6rem; letter-spacing: .18em; color: rgba(243, 237, 227, .38); }
.jmap__keys span { display: inline-flex; align-items: center; gap: .4rem; }
.jmap__keys kbd {
  font-family: inherit; font-size: .58rem; padding: .18rem .4rem; border-radius: 5px;
  border: 1px solid rgba(243, 237, 227, .18); color: rgba(243, 237, 227, .62);
}
.jmap__share {
  align-self: flex-start; display: inline-flex; align-items: center; gap: .45rem;
  font-size: .64rem; letter-spacing: .12em; color: rgba(243, 237, 227, .5);
  border-bottom: 1px solid rgba(243, 237, 227, .16); padding-bottom: .25rem;
  transition: color .3s, border-color .3s;
}
.jmap__share:hover { color: #fff; border-color: rgba(196, 181, 253, .6); }
.jmap__share svg { width: 12px; height: 12px; }

/* ---------- mobile list ---------- */
.jm-list { display: none; position: absolute; inset: 15vh 6vw 12vh; z-index: 3; overflow-y: auto; overscroll-behavior: contain; }
.jm-list__row {
  width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: .9rem; padding: .95rem .2rem; text-align: right;
  border-bottom: 1px solid rgba(243, 237, 227, .08);
  transition: background .3s, padding .3s;
}
.jm-list__row:active { background: rgba(139, 92, 246, .14); }
.jm-list__i { font-size: .62rem; letter-spacing: .2em; color: rgba(243, 237, 227, .35); }
.jm-list__t { font-size: 1.05rem; font-weight: 500; color: rgba(243, 237, 227, .8); }
.jm-list__d { display: block; margin-top: .2rem; font-size: .7rem; font-weight: 300; color: rgba(243, 237, 227, .38); }
.jm-list__row.is-active .jm-list__t { color: #fff; font-weight: 700; }
.jm-list__row.is-active .jm-list__i { color: #c4b5fd; }
.jm-list__row.is-active { background: linear-gradient(90deg, rgba(139, 92, 246, .16), transparent); }
.jm-list__mark { width: 6px; height: 6px; border-radius: 50%; background: rgba(243, 237, 227, .2); }
.jm-list__row.is-active .jm-list__mark { background: #c4b5fd; box-shadow: 0 0 12px #8b5cf6; }

/* ---------- toast ---------- */
.jm-toast {
  position: fixed; left: 50%; bottom: 4vh; z-index: 70; transform: translate(-50%, 14px);
  padding: .7rem 1.2rem; border-radius: 999px; border: 1px solid rgba(196, 181, 253, .3);
  background: rgba(12, 8, 20, .92); backdrop-filter: blur(14px);
  font-size: .72rem; letter-spacing: .06em; color: #f3ede3;
  opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s var(--jm-ease);
}
.jm-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 860px) {
  .jmap__svg { width: 150vw; max-width: none; }
  .jmap__head { top: 9vh; right: 6vw; max-width: 80vw; }
  .jmap__foot { bottom: 3vh; left: 6vw; right: 6vw; }
  .jmap__keys { display: none; }
  .jm-skip { bottom: calc(3vh + 52px); right: 6vw; }
  .jm-launch { top: 3vh; left: 6vw; right: auto; bottom: auto; padding: .5rem .8rem .5rem .55rem; }
  .jm-launch kbd { display: none; }
}
@media (max-width: 760px) {
  .jmap__svg { display: none; }
  .jm-list { display: block; inset: 16vh 6vw 27vh; }
}
@media (prefers-reduced-motion: reduce) {
  .jm-node__pulse, .jm-orbit--spin, .jm-star--tw { animation: none !important; }
  .jmap__stage { transform: none !important; }
  .jm-route--live { transition: none; }
}

/* ---------- overlay close ---------- */
.jm-close {
  position: absolute; top: 4.4vh; left: 4vw; z-index: 8;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(243, 237, 227, .16); background: rgba(9, 6, 15, .6);
  display: grid; place-items: center; color: rgba(243, 237, 227, .62);
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity .35s var(--jm-ease), background .3s, color .3s, transform .3s, visibility .35s;
}
.jmap.is-overlay .jm-close { opacity: 1; pointer-events: auto; visibility: visible; }
.jm-close:hover { background: rgba(139, 92, 246, .22); color: #fff; transform: rotate(90deg); }
.jm-close svg { width: 16px; height: 16px; }

.jmap__foot .jmap__now { font-size: .62rem; gap: .4rem; }
.jmap__foot .jmap__now b { font-size: 1.05rem; }
.jmap__foot .jmap__now em { font-size: .62rem; }

.jm-fin-share { margin-top: .1rem; }
.jm-fin-share svg { opacity: .8; }

/* ---------- station stepper + guided tour ---------- */
.jm-tourbar { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.jm-step {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .48rem .72rem; border-radius: 10px;
  border: 1px solid rgba(243, 237, 227, .12); background: rgba(9, 6, 15, .42);
  backdrop-filter: blur(10px);
  transition: border-color .3s, background .3s, transform .3s var(--jm-ease), opacity .3s;
}
.jm-step:hover:not(:disabled) { border-color: rgba(196, 181, 253, .5); background: rgba(139, 92, 246, .14); transform: translateY(-1px); }
.jm-step:disabled { opacity: .28; cursor: default; }
.jm-step__tx { display: grid; gap: .12rem; text-align: right; }
.jm-step em { font-style: normal; font-size: .5rem; letter-spacing: .22em; color: rgba(243, 237, 227, .34); }
.jm-step b { font-weight: 500; font-size: .7rem; color: rgba(243, 237, 227, .82); }
.jm-step__ar { font-size: .78rem; line-height: 1; color: rgba(196, 181, 253, .85); transition: transform .3s var(--jm-ease); }
.jm-step:hover:not(:disabled) .jm-step__ar { transform: translateX(-3px); }

.jm-tour {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .45rem .85rem .45rem .5rem; border-radius: 999px;
  border: 1px solid rgba(196, 181, 253, .26); background: rgba(139, 92, 246, .12);
  font-size: .66rem; letter-spacing: .1em; color: rgba(243, 237, 227, .86);
  transition: border-color .3s, background .3s, color .3s, transform .3s var(--jm-ease);
}
.jm-tour:hover { border-color: rgba(196, 181, 253, .6); background: rgba(139, 92, 246, .24); color: #fff; transform: translateY(-1px); }
.jm-tour__ic {
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: linear-gradient(140deg, #7c3aed, #4c1d95); box-shadow: 0 0 14px rgba(139, 92, 246, .5);
}
.jm-tour__ic svg { width: 9px; height: 9px; margin-inline-start: 1px; }
.jm-tour.is-on { background: rgba(243, 237, 227, .09); border-color: rgba(243, 237, 227, .32); }
.jm-tour.is-on .jm-tour__ic svg { display: none; }
.jm-tour.is-on .jm-tour__ic::after {
  content: ""; width: 7px; height: 8px;
  border-inline: 2px solid #fff; box-sizing: border-box;
}

/* travelling head of the route */
.jm-comet {
  fill: #fff; pointer-events: none;
  filter: drop-shadow(0 0 8px #e9e1ff) drop-shadow(0 0 20px #8b5cf6);
  transition: cx .75s var(--jm-ease), cy .75s var(--jm-ease);
}
.jm-ripple {
  fill: none; stroke: rgba(233, 225, 255, .85); stroke-width: 1.1;
  transform-box: fill-box; transform-origin: center; pointer-events: none;
  animation: jmRipple .78s var(--jm-ease) forwards;
}
@keyframes jmRipple { from { r: 12; opacity: .85 } to { r: 104; opacity: 0 } }

@media (max-width: 560px) {
  .jm-step__tx { display: none; }
  .jm-step { padding: .5rem .62rem; }
  .jm-tour { padding: .5rem .8rem .5rem .5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .jm-ripple { animation: none; opacity: 0; }
  .jm-comet { transition: none; }
}

/* ---------- keyboard: visible focus + real hit targets ---------- */
.jm-skip:focus-visible, .jm-launch:focus-visible, .jm-list__row:focus-visible,
.jm-step:focus-visible, .jm-tour:focus-visible, .jm-close:focus-visible,
.jmap__share:focus-visible, .jm-fin-share:focus-visible {
  outline: 2px solid #c4b5fd; outline-offset: 3px;
}
body.jm-ready .chrome__tick::after { content: ""; position: absolute; inset: -9px -11px; }
.chrome__tick:focus-visible { outline: 2px solid #c4b5fd; outline-offset: 5px; background: #c4b5fd; }