/* ==============================================================
   JOURNEY.CSS  —  "Scroll World" cinematic flight
   A scroll-scrubbed camera that flies through 5 career scenes.
   Hand-built SVG/CSS dioramas — no external assets.
   Uses design tokens from style.css + enhance.css (:root).
   Engine: GSAP ScrollTrigger (already loaded on the page).
   ============================================================== */

.flight{
    position:relative;
    height:100vh;
    overflow:hidden;
    background:
        radial-gradient(ellipse 90% 70% at 50% 40%, rgba(108,140,255,.06) 0%, transparent 60%),
        radial-gradient(ellipse 70% 60% at 50% 90%, rgba(201,168,76,.05) 0%, transparent 60%);
}

/* Sticky stage the camera renders into */
.journey-stage{
    position:absolute;inset:0;
    display:flex;align-items:center;justify-content:center;
    perspective:1300px;
    perspective-origin:50% 45%;
    overflow:hidden;
}

/* Ambient depth grid (recedes into the distance) */
.journey-grid{
    position:absolute;inset:0;z-index:0;pointer-events:none;
    background-image:
        linear-gradient(rgba(201,168,76,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(108,140,255,.05) 1px, transparent 1px);
    background-size:64px 64px;
    mask-image:radial-gradient(ellipse 60% 60% at 50% 45%, #000 0%, transparent 78%);
    -webkit-mask-image:radial-gradient(ellipse 60% 60% at 50% 45%, #000 0%, transparent 78%);
    transform:translateZ(0);
    opacity:.5;
}

/* Faint travelling starfield / dust for depth cues */
.journey-dust{
    position:absolute;inset:-20%;z-index:0;pointer-events:none;
    background-image:
        radial-gradient(1.5px 1.5px at 20% 30%, rgba(232,204,110,.5), transparent),
        radial-gradient(1.5px 1.5px at 70% 60%, rgba(165,184,255,.5), transparent),
        radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,.35), transparent),
        radial-gradient(1px 1px at 85% 20%, rgba(232,204,110,.4), transparent),
        radial-gradient(1.5px 1.5px at 55% 15%, rgba(165,184,255,.45), transparent),
        radial-gradient(1px 1px at 10% 70%, rgba(255,255,255,.3), transparent);
    background-size:cover;
    opacity:.6;
}

/* ---------- Scenes ---------- */
.journey-scenes{position:absolute;inset:0;transform-style:preserve-3d}

.jscene{
    position:absolute;top:50%;left:50%;
    width:min(680px,86vw);height:min(680px,86vw);
    margin:calc(min(680px,86vw) / -2) 0 0 calc(min(680px,86vw) / -2);
    display:flex;align-items:center;justify-content:center;
    opacity:0;
    transform:scale(.4);
    will-change:transform,opacity,filter;
    transform-style:preserve-3d;
}
.jscene svg{width:100%;height:100%;overflow:visible}

/* parallax depth layers inside a scene */
.jl{transition:transform .15s linear;will-change:transform}

/* soft glow disc behind each scene focal point */
.jscene-halo{
    position:absolute;width:70%;height:70%;border-radius:50%;
    background:radial-gradient(circle, rgba(201,168,76,.14), transparent 70%);
    filter:blur(24px);z-index:-1;
}

/* ---------- Captions (fixed, readable — do not scale) ---------- */
.journey-captions{position:absolute;left:0;right:0;bottom:8%;z-index:5;pointer-events:none;text-align:center;padding:0 24px}
.jcap{position:absolute;left:0;right:0;bottom:0;opacity:0;transform:translateY(24px);padding:0 24px}
.jcap-phase{
    display:inline-block;font-family:var(--mono);font-size:.72rem;font-weight:600;
    letter-spacing:.22em;text-transform:uppercase;color:var(--accent2);
    padding:6px 14px;border:1px solid rgba(201,168,76,.25);border-radius:100px;
    background:rgba(201,168,76,.06);margin-bottom:14px;
}
.jcap h3{
    font-size:clamp(1.6rem,4.2vw,2.8rem);font-weight:900;letter-spacing:-.03em;line-height:1.1;
    margin-bottom:10px;
}
.jcap h3 em{font-style:normal;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.jcap p{font-size:clamp(.9rem,1.6vw,1.05rem);color:var(--t2);max-width:560px;margin:0 auto;line-height:1.65}

/* ---------- Intro / heading overlay ---------- */
.journey-lead{
    position:absolute;top:11%;left:0;right:0;z-index:6;text-align:center;pointer-events:none;padding:0 24px;
}
.journey-lead .section-tag{margin-bottom:10px}
.journey-lead h2{font-size:clamp(1.3rem,3vw,2rem);font-weight:800;letter-spacing:-.02em}
.journey-lead h2 .gradient-text{background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ---------- Progress rail (scene dots) ---------- */
.journey-rail{position:absolute;right:clamp(14px,3vw,38px);top:50%;transform:translateY(-50%);z-index:7;display:flex;flex-direction:column;gap:14px;align-items:center}
.journey-rail .jdot{width:9px;height:9px;border-radius:50%;background:var(--bdr2);position:relative;transition:transform .35s,background .35s}
.journey-rail .jdot::after{content:attr(data-label);position:absolute;right:20px;top:50%;transform:translateY(-50%);white-space:nowrap;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);opacity:0;transition:opacity .3s}
.journey-rail .jdot.active{background:linear-gradient(135deg,var(--accent),var(--accent2));transform:scale(1.5);box-shadow:0 0 14px rgba(201,168,76,.5)}
.journey-rail .jdot.active::after{opacity:1;color:var(--accent2)}

/* ---------- Scroll hint ---------- */
.journey-hint{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:7;display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--t3);transition:opacity .4s}
.journey-hint .jarrow{display:inline-block;animation:jbob 1.8s ease-in-out infinite}
@keyframes jbob{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(4px);opacity:1}}

/* ---------- Palette helpers for scene art ---------- */
.j-stroke{stroke:rgba(201,168,76,.55)}
.j-stroke-2{stroke:rgba(108,140,255,.5)}
.j-fill-gold{fill:var(--accent)}
.j-fill-indigo{fill:var(--teal)}

/* ---------- Reduced-motion / no-JS fallback ----------
   Scenes stack as a normal vertical gallery, fully visible. */
.flight.is-static{height:auto;padding:80px 0}
.flight.is-static .journey-stage{position:relative;flex-direction:column;gap:64px;perspective:none;padding:40px 0}
.flight.is-static .journey-scenes{position:relative;inset:auto;display:flex;flex-direction:column;gap:72px;align-items:center;width:100%}
.flight.is-static .jscene{position:relative;top:auto;left:auto;margin:0;opacity:1;transform:none;filter:none!important}
.flight.is-static .journey-captions{position:relative;bottom:auto;margin-top:8px}
.flight.is-static .jcap{position:relative;opacity:1;transform:none;margin-bottom:40px}
.flight.is-static .journey-rail,
.flight.is-static .journey-hint,
.flight.is-static .journey-lead{display:none}

@media (prefers-reduced-motion: reduce){
    .journey-hint .jarrow{animation:none}
}

@media (max-width:640px){
    .journey-rail{display:none}
    .journey-captions{bottom:12%}
}