/* FujAA: student journey section (index.php, scene in fujaa-journey.js).
   Full motion + WebGL: a tall section with a sticky stage; scrolling walks the cadet through seven steps.
   Calm motion or no WebGL: a normal-height section; the steps are cards (and with WebGL, buttons that move the scene). */

.fj-journey { position: relative; background: var(--fj-surface-2); }
html[data-motion="full"][data-webgl="yes"] .fj-journey { height: 640vh; }

.fj-journey__stage { position: relative; display: grid; grid-template-rows: auto 1fr auto auto; gap: var(--fj-s4); padding: var(--fj-s7) 0; overflow: hidden; }
html[data-webgl="yes"] .fj-journey__stage { min-height: min(760px, 92vh); }
html[data-motion="full"][data-webgl="yes"] .fj-journey__stage { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0; padding: calc(var(--fj-header-h) + var(--fj-s4)) 0 var(--fj-s5); }

.fj-journey__canvas { position: absolute; inset: 0; z-index: 0; }
.fj-journey__canvas canvas { display: block; width: 100% !important; height: 100% !important; }

.fj-journey__head { position: relative; z-index: 2; text-align: center; pointer-events: none; }
.fj-journey__head h2 { margin: 0; }

/* caption for the current step (3D only) */
.fj-journey__caption { position: relative; z-index: 2; align-self: end; justify-self: center; width: min(560px, calc(100% - 32px)); text-align: center;
  padding: .9rem 1.1rem; border-radius: var(--fj-r-sm); border: 1px solid var(--fj-line); background: color-mix(in srgb, var(--fj-surface) 88%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: none; }
.fj-journey__caption h3 { margin: 0 0 .2rem; font-size: var(--fj-fs-lg); }
.fj-journey__caption p { margin: 0; color: var(--fj-muted); font-size: var(--fj-fs-sm); }
.fj-journey__caption .fj-journey__num { color: var(--fj-accent); font: 700 var(--fj-fs-xs)/1 var(--fj-font-body); letter-spacing: .12em; display: block; margin-bottom: .35rem; }
.fj-journey.is-3d .fj-journey__caption { display: block; }

/* steps: cards before/without 3D */
.fj-journey__steps { position: relative; z-index: 2; list-style: none; margin: 0 auto; padding: 0 16px; width: min(1180px, 100%);
  display: grid; gap: var(--fj-s3); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.fj-journey__step { background: var(--fj-surface); border: 1px solid var(--fj-line); border-radius: var(--fj-r-sm); padding: var(--fj-s4); }
.fj-journey__step button { all: unset; display: flex; flex-direction: column; gap: .3rem; cursor: pointer; width: 100%; }
.fj-journey__step button:focus-visible { outline: 2px solid var(--fj-focus); outline-offset: 4px; }
.fj-journey__num { color: var(--fj-accent); font: 700 var(--fj-fs-xs)/1 var(--fj-font-body); letter-spacing: .12em; }
.fj-journey__label { font: 700 var(--fj-fs-md)/1.25 var(--fj-font-display, inherit); color: var(--fj-text); }
.fj-journey__step p { margin: .4rem 0 0; color: var(--fj-muted); font-size: var(--fj-fs-sm); }

/* steps: segmented progress bar once the 3D scene runs */
.fj-journey.is-3d .fj-journey__steps { grid-template-columns: repeat(8, 1fr); gap: 4px; }
.fj-journey.is-3d .fj-journey__step { background: none; border: 0; border-radius: 0; padding: 0; }
.fj-journey.is-3d .fj-journey__step p { display: none; }
.fj-journey.is-3d .fj-journey__step button { gap: .35rem; padding-top: .55rem; border-top: 3px solid color-mix(in srgb, var(--fj-text) 18%, transparent); transition: border-color .3s; }
.fj-journey.is-3d .fj-journey__label { font: 600 var(--fj-fs-xs)/1.2 var(--fj-font-body); color: var(--fj-muted); transition: color .3s; }
.fj-journey.is-3d .fj-journey__step.is-done button { border-top-color: color-mix(in srgb, var(--fj-accent) 55%, transparent); }
.fj-journey.is-3d .fj-journey__step.is-active button { border-top-color: var(--fj-accent); }
.fj-journey.is-3d .fj-journey__step.is-active .fj-journey__label { color: var(--fj-text); }
@media (max-width: 719.98px) { .fj-journey.is-3d .fj-journey__label { display: none; } }

/* soft fade behind the heading so the scene never fights the title */
.fj-journey.is-3d .fj-journey__stage::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 34%; z-index: 1; pointer-events: none;
  background: linear-gradient(var(--fj-surface-2) 35%, color-mix(in srgb, var(--fj-surface-2) 0%, transparent)); }

/* wide screens: caption sits bottom-left so the cadet in the centre stays visible */
@media (min-width: 960px) {
  .fj-journey.is-3d .fj-journey__caption { justify-self: start; text-align: left; margin-left: max(16px, calc((100vw - 1180px) / 2 + 16px)); width: 360px; }
}

/* stepper stays readable over any part of the scene */
.fj-journey.is-3d .fj-journey__steps { width: min(1180px, calc(100% - 32px)); padding: .6rem .9rem .7rem; border: 1px solid var(--fj-line); border-radius: var(--fj-r-sm);
  background: color-mix(in srgb, var(--fj-surface) 90%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }