/* ============================================================
   journey.css — Positivity Labs "The Journey"
   A calm, safe-space aesthetic: soft gradients, generous space,
   large friendly type, big tappable answers, a progress map.
   Ambient color leans toward the visitor's leading energy.
   ============================================================ */

:root { --lead-a: #7a5cc0; --lead-b: #4a2e80; }

.journey-page {
  margin: 0; height: 100svh; color: #fff;
  font-family: var(--font-body); -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column; position: relative; overflow: hidden;
  background: linear-gradient(165deg, #171233 0%, #100c26 62%, #0a0720 100%);
}

/* ambient glow — softly shifts toward the leading energy */
.jambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.jambient span {
  position: absolute; border-radius: 50%; filter: blur(80px); opacity: .5;
  transition: background-color 1.2s var(--ease);
}
.jambient span:nth-child(1) { width: 70vw; height: 70vw; top: -18%; left: 50%; transform: translateX(-50%); background: var(--lead-a); animation: jfloat1 24s ease-in-out infinite; }
.jambient span:nth-child(2) { width: 60vw; height: 60vw; bottom: -20%; left: 12%; background: var(--lead-b); animation: jfloat2 30s ease-in-out infinite; }
@keyframes jfloat1 { 0%,100%{ transform:translateX(-50%) scale(1);} 50%{ transform:translateX(-46%) scale(1.1);} }
@keyframes jfloat2 { 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(6%,-4%) scale(1.08);} }

/* ---------- chrome ---------- */
.jhead {
  position: relative; z-index: 3; flex: 0 0 auto; display: flex; justify-content: center;
  padding: calc(.7rem + env(safe-area-inset-top,0px)) 1.25rem .4rem;
}
.jhome img { height: 24px; width: auto; opacity: .9; }

.jmain { position: relative; z-index: 2; flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: safe center; padding: .5rem 1.25rem; }
.jstage { width: min(100%, 34rem); flex: 0 0 auto; margin-inline: auto; }

/* screen enter animation */
.jscreen { transition: opacity .5s var(--ease), transform .5s var(--ease); }
.jscreen--enter { opacity: 0; transform: translateY(16px); }

.jkicker { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: .24em; font-size: var(--step--1); color: color-mix(in srgb,#fff 72%,transparent); margin: 0 0 var(--space-2); text-align: center; }

/* ---------- intro ---------- */
.jintro { text-align: center; }
.jbreathe { display: flex; justify-content: center; margin-bottom: var(--space-3); }
.jbreathe span { width: 88px; height: 88px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb,var(--lead-a) 70%,transparent), transparent 70%); animation: breathe 5s ease-in-out infinite; }
@keyframes breathe { 0%,100%{ transform:scale(.82); opacity:.55;} 50%{ transform:scale(1.05); opacity:.95;} }
.jintro__title { font-family: var(--font-display); font-size: clamp(2.2rem,1.6rem + 3vw,3.4rem); line-height: 1.05; margin: 0 0 var(--space-3); }
.jintro__lede { font-size: var(--step-0); line-height: 1.6; color: color-mix(in srgb,#fff 82%,transparent); max-width: 28rem; margin: 0 auto var(--space-4); }

/* ---------- buttons / links ---------- */
.jbtn { display: inline-block; font-family: var(--font-ui); font-size: var(--step-0); text-decoration: none; border: 0; cursor: pointer; border-radius: 999px; padding: 1em 2em; transition: transform .2s var(--ease), box-shadow .3s var(--ease); }
.jbtn--primary { background: #fff; color: #1a1035; box-shadow: 0 14px 40px -12px color-mix(in srgb,var(--lead-a) 80%,transparent); }
.jbtn--primary:hover { transform: translateY(-2px); }
.jbtn--ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.35); }
.jbtn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.jlink { display: inline-block; margin-top: var(--space-3); font-family: var(--font-ui); font-size: var(--step--1); letter-spacing: .04em; color: color-mix(in srgb,#fff 66%,transparent); text-decoration: none; background: none; border: 0; cursor: pointer; }
.jlink:hover { color: #fff; }

/* ---------- question ---------- */
.jq__reader { display: block; width: 100%; margin: 0; padding: 0; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; text-align: center; }
.jq__eyebrow { display: flex; align-items: center; justify-content: center; gap: .6rem; margin: 0 0 var(--space-2); font-family: var(--font-ui); }
.jq__cat { text-transform: uppercase; letter-spacing: .18em; font-size: var(--step--1); color: color-mix(in srgb,var(--lead-a) 55%, white); }
.jq__of { font-size: .68rem; letter-spacing: .08em; color: color-mix(in srgb,#fff 50%,transparent); }
.jq__of::before { content: "·  "; }
.jq__title { display: block; font-family: var(--font-display); font-size: clamp(1.5rem,1.1rem + 2vw,2.3rem); line-height: 1.18; text-align: center; margin: 0 0 var(--space-3); transition: font-size .45s var(--ease), margin .45s var(--ease); }
.jq__tap { display: block; margin-top: var(--space-3); font-family: var(--font-ui); text-transform: uppercase; letter-spacing: .18em; font-size: .66rem; color: color-mix(in srgb,#fff 55%,transparent); animation: tapPulse 2.2s ease-in-out infinite; }
@keyframes tapPulse { 0%,100%{ opacity: .4; } 50%{ opacity: .95; } }

/* question-first reveal: the question takes over, then shrinks and the answers appear */
.jq.is-reading .jq__reader { padding: var(--space-3) 0; cursor: pointer; }
.jq.is-reading .jq__eyebrow { margin-bottom: var(--space-3); }
.jq.is-reading .jq__title { font-size: clamp(1.9rem,1.4rem + 3.4vw,3.05rem); margin-bottom: 0; }
.jq.is-reading .jq__cards { display: none; }
.jq.is-reading .jback { display: none; }
.jq:not(.is-reading) .jq__tap { display: none; }
.jq:not(.is-reading) .jq__reader { cursor: default; }
.jmapwrap { transition: opacity .4s var(--ease), filter .4s var(--ease); }
.journey-page.reading .jmapwrap { opacity: .3; filter: blur(1.5px); }

.jq__cards { display: grid; gap: .5rem; }
.jcard {
  display: flex; align-items: center; gap: .85rem; text-align: left; width: 100%;
  min-height: 56px; padding: .65rem 1rem; border-radius: 15px; cursor: pointer;
  background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.13); color: #fff;
  font-family: var(--font-body); font-size: var(--step-0); line-height: 1.28;
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .2s var(--ease);
  animation: cardin .5s var(--ease) both; animation-delay: var(--d, 0ms);
}
@keyframes cardin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.jcard:hover { background: rgba(255,255,255,.1); transform: translateY(-1px); }
.jcard__icon {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb,var(--lead-a) 24%, transparent); color: color-mix(in srgb,var(--lead-a) 30%, white);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.jcard__icon svg { width: 23px; height: 23px; }
.jcard__text { flex: 1; }
.jcard.is-chosen { background: color-mix(in srgb,var(--lead-a) 26%,transparent); border-color: color-mix(in srgb,var(--lead-a) 70%,white); box-shadow: 0 0 0 1px color-mix(in srgb,var(--lead-a) 55%,transparent), 0 12px 30px -12px color-mix(in srgb,var(--lead-a) 85%,transparent); }
.jcard.is-chosen .jcard__icon { background: color-mix(in srgb,var(--lead-a) 55%, transparent); color: #fff; }
.jback { display: block; text-align: center; margin-top: var(--space-3); }

/* ---------- result ---------- */
.jresult { text-align: center; }
.jresult__media { position: relative; display: flex; justify-content: center; margin-bottom: var(--space-2); }
.jresult__glow { position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; background: var(--a); filter: blur(60px); opacity: .5; }
.jresult__img { position: relative; width: min(100%, 460px); animation: floaty 7s ease-in-out infinite; }
@keyframes floaty { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-10px);} }
.jresult__name { font-family: var(--font-display); font-size: clamp(2.4rem,1.8rem + 3vw,3.8rem); line-height: 1; margin: 0; }
.jresult__stone { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: .12em; font-size: var(--step--1); color: color-mix(in srgb,#fff 82%,transparent); margin: .5rem 0 0; }
.jresult__mantra { font-family: var(--font-display); font-style: italic; font-size: var(--step-1); color: color-mix(in srgb,var(--a) 45%,white); margin: var(--space-2) 0; }
.jresult__desc { font-size: var(--step-0); line-height: 1.55; color: color-mix(in srgb,#fff 82%,transparent); max-width: 28rem; margin: 0 auto var(--space-4); }
.jresult__actions { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }

/* ---------- progress path: a clean straight line with section icons ---------- */
.jmapwrap { position: relative; z-index: 3; flex: 0 0 auto; padding: .3rem 1.25rem calc(.6rem + env(safe-area-inset-bottom,0px)); }
.jmap { width: min(100%, 24rem); margin: 0 auto; height: 0; opacity: 0; transition: opacity .5s var(--ease); }
.jmap.is-on { height: auto; opacity: 1; }
.jpath { width: 100%; height: auto; overflow: visible; }
.jpath__base { stroke: rgba(255,255,255,.16); stroke-width: 2; stroke-linecap: round; }
.jpath__fill { stroke: color-mix(in srgb,var(--lead-a) 72%, white); stroke-width: 2; stroke-linecap: round; }
.jnode__ring { fill: #120d26; stroke-width: 1.5; transition: stroke .4s var(--ease); }
.jnode__icon { color: rgba(255,255,255,.45); transition: color .4s var(--ease); }
.jnode--todo .jnode__ring { stroke: rgba(255,255,255,.22); }
.jnode--done .jnode__ring { stroke: color-mix(in srgb,var(--lead-a) 68%,white); }
.jnode--done .jnode__icon { color: color-mix(in srgb,var(--lead-a) 55%,white); }
.jnode--here .jnode__ring { stroke: #fff; stroke-width: 2; filter: drop-shadow(0 0 5px color-mix(in srgb,var(--lead-a) 90%,white)); }
.jnode--here .jnode__icon { color: #fff; }
.jpath__cat { text-align: center; font-family: var(--font-ui); letter-spacing: .16em; text-transform: uppercase; font-size: .68rem; color: color-mix(in srgb,#fff 66%,transparent); margin: .35rem 0 0; }

/* ---------- privacy reassurance (subtle) ---------- */
.jprivacy { display: flex; align-items: center; justify-content: center; gap: .4rem; text-align: center;
  max-width: 30rem; margin: .55rem auto 0; font-size: .64rem; line-height: 1.45;
  color: color-mix(in srgb,#fff 40%,transparent); }
.jprivacy:empty { display: none; }
.jprivacy svg { width: 12px; height: 12px; flex: 0 0 auto; opacity: .8; }

@media (prefers-reduced-motion: reduce) {
  .jambient span, .jbreathe span, .jresult__img, .jmarker, .jcard { animation: none !important; }
  .jscreen { transition: none; }
}