/* ============================================================================
   Educircle Website V2.1 — "Your journey with Sage AI" scroll section (PROTOTYPE)
   ----------------------------------------------------------------------------
   ONE Sage admissions workspace, seven moments — a signature product-storytelling
   moment, the next chapter of the dark hero. Glossy navy (hero tone), white type,
   restrained Educircle-green accent, subtle depth + a single light sweep on morph.
   NOT white/light, NOT a neon SaaS gradient.

   Motion is transform + opacity ONLY (no layout thrash → CLS/INP safe). Pinning is
   native `position: sticky` (no scroll-hijack).
     - Base (no state class)               -> clean, readable stacked cards.
     - `.sjny.is-enhanced` (wide + motion) -> ONE pinned workspace that cross-fades
                                              through the journey (seven screens
                                              share a single sticky grid cell).
     - `.sjny.is-stacked-anim` (narrow)    -> cinematic deck: cards lift into focus,
                                              neighbours dim; sticky progress HUD.
   ========================================================================== */

.sjny {
  --sjny-viz: 30rem;      /* pinned workspace width (desktop)               */
  --sjny-step-vh: 62vh;   /* scroll distance per moment (desktop pacing)    */
  position: relative;
  isolation: isolate;
  overflow: clip;                 /* never leak horizontal scroll; keeps glows in */
  color: var(--c-on-dark);
  /* Glossy navy: cool light from the top, faint green low-right, hero-matched base. */
  background:
    radial-gradient(115% 75% at 12% -5%, rgba(0,129,250,.20) 0%, rgba(0,129,250,0) 55%),
    radial-gradient(90% 70% at 105% 108%, rgba(112,163,68,.16) 0%, rgba(112,163,68,0) 60%),
    linear-gradient(180deg, #041F3D 0%, #022C54 45%, #041F3D 100%);
}
/* Faint depth grid, masked so it fades toward the edges. A whisper of parallax
   (JS sets --sjny-progress; 0 when idle / reduced-motion → no movement). */
.sjny::before {
  content: "";
  position: absolute; inset: -4% 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.030) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.030) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(120% 78% at 50% 12%, #000 0%, transparent 78%);
          mask-image: radial-gradient(120% 78% at 50% 12%, #000 0%, transparent 78%);
  transform: translateY(calc(var(--sjny-progress, 0) * -22px));
  will-change: transform;
}

/* ---- Intro (dark) --------------------------------------------------------- */
.sjny__intro { max-width: 46rem; position: relative; }
.sjny .eyebrow { color: #6FD0FF; }
.sjny .title { color: #fff; margin-top: var(--sp-3); }
.sjny .lead { color: #DCE9FB; margin-top: var(--sp-4); }
.sjny__intro-cta { margin-top: var(--sp-6); }   /* primary CTA before the journey */

/* ---- Sticky progress HUD (mobile / tablet; decorative echo of the headings) --
   Shown only with JS + motion, below the fixed 74px site header. */
.sjny__flow { position: relative; }
.sjny__hud { display: none; }
html.js .sjny__hud {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  position: sticky; top: 74px; z-index: 4;
  margin: var(--sp-6) 0 var(--sp-5);
  padding: 10px 16px;
  border-radius: var(--r-lg);
  background: rgba(4, 18, 38, .78);
  border: 1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
          backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 16px 34px -22px rgba(0,0,0,.85);
}
.sjny__hud-title {
  flex: 0 0 auto; font-size: .78rem; font-weight: var(--fw-bold);
  letter-spacing: .12em; text-transform: uppercase; color: #6FD0FF;
}
.sjny__hud-step { margin-left: auto; font-size: .82rem; font-weight: var(--fw-semibold); color: var(--c-on-dark-muted); }
.sjny__hud-step b { color: #fff; font-weight: var(--fw-extrabold); }
.sjny__hud-track { flex: 1 1 100%; height: 4px; border-radius: var(--r-pill); background: rgba(255,255,255,.14); overflow: hidden; }
.sjny__hud-fill {
  display: block; height: 100%; width: 100%; border-radius: inherit;
  background: linear-gradient(90deg, #8FCB5A 0%, #0081FA 100%);
  transform: scaleX(0); transform-origin: left;
  transition: transform 120ms linear;
}

/* ---- Step list: base = readable stacked cards ----------------------------- */
.sjny__list { list-style: none; margin: var(--sp-6) 0 0; padding: 0; display: grid; gap: var(--sp-6); }
.sjny__step {
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--r-2xl);
  padding: clamp(1.1rem, 4vw, 1.6rem);
  box-shadow: 0 18px 44px -26px rgba(0,0,0,.65);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  display: flex; flex-direction: column; gap: var(--sp-5);
}
.sjny__frame-wrap { order: 2; }
.sjny__note { order: 1; display: grid; gap: var(--sp-2); }

/* Numbered "moment" node — the shared spine marker across every step. */
.sjny__node {
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-grid; place-items: center;
  font-size: 13px; font-weight: var(--fw-extrabold);
  color: var(--c-on-dark-muted);
  background: rgba(255,255,255,.06);
  border: 1.5px solid rgba(255,255,255,.22);
  transition: color var(--dur-slow) var(--ease-out), background-color var(--dur-slow) var(--ease-out),
              border-color var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}
.sjny__step.is-past .sjny__node { color: #eafbe0; background: rgba(143,203,90,.28); border-color: rgba(143,203,90,.55); }
.sjny__step.is-active .sjny__node {
  color: var(--c-navy); background: #8FCB5A; border-color: #8FCB5A;
  box-shadow: 0 0 0 5px rgba(112,163,68,.22);
}
.sjny__tag {
  font-size: var(--fs-eyebrow); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: #8FCB5A;                         /* lighter Educircle green — AA on navy */
}
.sjny__title { font-size: var(--fs-h4); color: #fff; margin: 0; line-height: var(--lh-snug); }
.sjny__copy  { color: var(--c-on-dark); font-size: var(--fs-body-lg); line-height: var(--lh-body); margin: 0; }

/* ---- The Sage workspace panel (a bright product panel on the dark stage) --- */
.sjny__frame {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 30rem;
  background: var(--c-surface);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-xl);
  box-shadow: 0 30px 70px -24px rgba(0,0,0,.70), 0 0 0 1px rgba(111,208,255,.06), 0 0 60px -30px rgba(0,129,250,.5);
  overflow: hidden;
}
.sjny__chrome {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  background: var(--c-surface-2);
  border-bottom: 1px solid var(--c-line);
}
.sjny__dot { width: 9px; height: 9px; border-radius: 50%; background: #cdd8e6; flex: 0 0 auto; }
.sjny__dot:nth-child(1) { background: #f2a9a0; }
.sjny__dot:nth-child(2) { background: #f4cf8a; }
.sjny__dot:nth-child(3) { background: #a7d29a; }
.sjny__chrome-title { margin-left: auto; font-size: 12px; font-weight: var(--fw-bold); color: var(--c-muted); }
.sjny__screen { padding: clamp(1rem, 3.5vw, 1.4rem); min-height: 13.5rem; display: flex; flex-direction: column; gap: 12px; }
.sjny__screen-tab {
  align-self: start; padding: 3px 11px; border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: var(--fw-bold); letter-spacing: .02em;
  color: var(--c-primary-700); background: var(--c-surface-3); border: 1px solid var(--c-line);
}
.sjny__screen-body { display: grid; align-content: center; gap: 12px; flex: 1 1 auto; }

/* One-pass light sweep as the workspace morphs to a new moment (enhanced only). */
.sjny__frame::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.34) 48%, transparent 64%);
  opacity: 0;
}

/* ---- Frame internals (on the light panel — high-contrast, unchanged) ------- */
.sjf-hint { margin: 4px 0 0; font-size: var(--fs-small); color: var(--c-muted); line-height: 1.45; }
.sjf-chip {
  display: inline-flex; align-items: center;
  padding: 5px 11px; border-radius: var(--r-pill);
  font-size: 12.5px; font-weight: var(--fw-semibold); white-space: nowrap;
}
.sjf-chip--on   { background: var(--c-primary); color: #fff; }
.sjf-chip--soft { background: var(--c-surface-3); color: var(--c-primary-700); border: 1px solid var(--c-line); }
.sjf-bar { height: 8px; border-radius: var(--r-pill); background: var(--c-surface-3); overflow: hidden; }
.sjf-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--grad-primary); }
.sjf-cap, .sjf-badge { font-size: 12px; color: var(--c-muted); }
.sjf-badge {
  justify-self: start; padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--c-surface-3); color: var(--c-primary-700); font-weight: var(--fw-bold);
}
.sjf-q { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sjf-q li { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sjf-q__label { font-size: 13px; color: var(--c-ink); }
.sjf-plan { display: grid; gap: 10px; }
.sjf-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--c-muted); }
.sjf-row b { color: var(--c-navy); font-weight: var(--fw-bold); }
.sjf-cards { display: grid; gap: 10px; }
.sjf-card { display: grid; gap: 3px; padding: 12px 14px; border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface); }
.sjf-card b { color: var(--c-navy); font-size: 14px; }
.sjf-card span:not(.sjf-chip) { color: var(--c-muted); font-size: 12.5px; }
.sjf-card .sjf-chip { justify-self: start; margin-top: 4px; }
.sjf-docs { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.sjf-docs li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--c-navy); font-weight: var(--fw-medium); }
.sjf-ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex: 0 0 auto; }
.sjf-state { margin-left: auto; font-size: 12px; font-weight: var(--fw-bold); }
.sjf-docs .is-ready   .sjf-ic { background: rgba(112,163,68,.16); color: var(--c-green-600); }
.sjf-docs .is-ready   .sjf-state { color: var(--c-green-600); }
.sjf-docs .is-review  .sjf-ic { background: rgba(0,74,173,.12); color: var(--c-primary); }
.sjf-docs .is-review  .sjf-state { color: var(--c-primary); }
.sjf-docs .is-missing .sjf-ic { background: rgba(214,120,0,.16); color: #B25C00; }
.sjf-docs .is-missing .sjf-state { color: #B25C00; }
.sjf-track { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; gap: 4px; }
.sjf-track li { position: relative; flex: 1 1 0; text-align: center; font-size: 11.5px; color: var(--c-muted); font-weight: var(--fw-semibold); }
.sjf-node { display: block; width: 14px; height: 14px; border-radius: 50%; margin: 0 auto 8px; background: var(--c-line); border: 2px solid var(--c-line); }
.sjf-track li::before { content: ""; position: absolute; top: 6px; left: -50%; width: 100%; height: 2px; background: var(--c-line); z-index: 0; }
.sjf-track li:first-child::before { display: none; }
.sjf-track .is-done .sjf-node { background: var(--c-primary); border-color: var(--c-primary); }
.sjf-track .is-done { color: var(--c-navy); }
.sjf-track .is-done::before { background: var(--c-primary); }
.sjf-track .is-now .sjf-node { background: #fff; border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(0,74,173,.18); }
.sjf-track .is-now { color: var(--c-primary); }
.sjf-hand { display: flex; align-items: center; justify-content: center; gap: 12px; text-align: center; }
.sjf-hand__col { display: grid; justify-items: center; gap: 3px; flex: 1 1 0; }
.sjf-hand__col b { color: var(--c-navy); font-size: 13.5px; }
.sjf-hand__col span:last-child { color: var(--c-muted); font-size: 12px; }
.sjf-hand__plus { color: var(--c-muted); font-weight: var(--fw-bold); font-size: 18px; }
.sjf-ava { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-weight: var(--fw-extrabold); font-size: 14px; color: #fff; }
.sjf-ava--sage  { background: var(--grad-sage); }
.sjf-ava--human { background: var(--grad-primary); }
.sjf-arrive { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- CTAs ----------------------------------------------------------------- */
.sjny__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); margin-top: var(--sp-8); }
.sjny__talk { font-weight: var(--fw-semibold); color: #6FD0FF; text-decoration: none; }
.sjny__talk:hover { text-decoration: underline; }
.sjny__talk:focus-visible { outline: none; box-shadow: var(--sh-focus); border-radius: var(--r-sm); }

/* ===========================================================================
   MOBILE / TABLET — cinematic deck (JS-gated: `.is-stacked-anim`, motion only)
   Cards enter from below, rest slightly dimmed/compressed, and lift into full
   focus when centred → a journey deck being flipped, not a static stack.
   =========================================================================== */
.sjny.is-stacked-anim .sjny__step {
  opacity: 0; transform: translateY(26px) scale(.965);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out),
              box-shadow var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease-out);
  will-change: opacity, transform;
}
.sjny.is-stacked-anim .sjny__step.is-in     { opacity: .58; transform: translateY(0) scale(.975); }
.sjny.is-stacked-anim .sjny__step.is-active {
  opacity: 1; transform: translateY(0) scale(1);
  border-color: rgba(143,203,90,.32);
  box-shadow: 0 28px 60px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(143,203,90,.16), 0 18px 56px -34px rgba(0,129,250,.5);
}

/* Compact rhythm so seven moments never feel heavy on a phone. Copy stays
   >=16px (readable, no iOS zoom). */
@media (max-width: 1023px) {
  .sjny__list { gap: var(--sp-5); }
  .sjny__step { padding: clamp(0.9rem, 3.2vw, 1.15rem); gap: var(--sp-4); }
  .sjny__screen { min-height: 0; padding: clamp(0.85rem, 2.8vw, 1.05rem); gap: 10px; }
  .sjny__screen-body { gap: 9px; }
  .sjf-hint { display: none; }            /* the step copy already carries the message */
  .sjny__title { font-size: 1.18rem; }
  .sjny__copy { font-size: var(--fs-body); line-height: 1.5; }
}

/* ===========================================================================
   DESKTOP ENHANCED — ONE pinned workspace that morphs (>=1024px, JS + motion)
   The seven screens share a single sticky grid cell and cross-fade; the callouts
   scroll beside them on a connected progress spine.
   =========================================================================== */
@media (min-width: 1024px) {
  .sjny.is-enhanced .sjny__hud { display: none; }

  .sjny.is-enhanced .sjny__list {
    display: grid;
    grid-template-columns: [viz] minmax(0, var(--sjny-viz)) [text] minmax(0, 1fr);
    /* Seven explicit rows so the workspace can span 1 / -1 and stay pinned. */
    grid-template-rows: repeat(7, minmax(var(--sjny-step-vh), auto));
    column-gap: clamp(2.5rem, 6vw, 6rem);
    margin-top: var(--sp-7);
    position: relative;
  }
  .sjny.is-enhanced .sjny__step { display: contents; }

  /* All frames occupy the SAME pinned cell → overlap + cross-fade = one workspace. */
  .sjny.is-enhanced .sjny__frame-wrap {
    grid-column: viz; grid-row: 1 / -1;
    position: sticky; top: 15vh; align-self: start; height: -moz-fit-content; height: fit-content;
    pointer-events: none;
  }
  .sjny.is-enhanced .sjny__step.is-active .sjny__frame-wrap { pointer-events: auto; z-index: 2; }
  .sjny.is-enhanced .sjny__frame {
    max-width: none;
    opacity: 0; transform: scale(.975) translateY(10px);
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
    will-change: opacity, transform;
  }
  .sjny.is-enhanced .sjny__step.is-active .sjny__frame { opacity: 1; transform: none; }
  .sjny.is-enhanced .sjny__step.is-active .sjny__frame::after { animation: sjny-sweep 900ms var(--ease-out) 1; }
  .sjny.is-enhanced .sjny__screen { min-height: 19rem; }

  /* Callouts flow down the text column and drive the scroll. */
  .sjny.is-enhanced .sjny__note {
    grid-column: text; align-self: stretch;
    display: flex; flex-direction: column; justify-content: center; gap: var(--sp-3);
    position: relative; padding-left: 3.5rem;
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  }
  .sjny.is-enhanced .sjny__step:not(.is-active) .sjny__note { opacity: .3; transform: translateY(4px); }
  .sjny.is-enhanced .sjny__step.is-active .sjny__note { opacity: 1; transform: none; }
  .sjny.is-enhanced .sjny__title { font-size: var(--fs-h3); }

  /* Connected progress spine down the callouts. */
  .sjny.is-enhanced .sjny__note::before {
    content: ""; position: absolute; left: 14px; top: 0; bottom: 0; width: 2px;
    background: rgba(255,255,255,.12);
  }
  .sjny.is-enhanced .sjny__step.is-past  .sjny__note::before,
  .sjny.is-enhanced .sjny__step.is-active .sjny__note::before { background: rgba(143,203,90,.5); }
  .sjny.is-enhanced .sjny__node {
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    opacity: 1 !important;                 /* node stays full-strength even when note dims */
  }
}
@keyframes sjny-sweep {
  0%   { opacity: 0;   transform: translateX(-35%); }
  28%  { opacity: .85; }
  100% { opacity: 0;   transform: translateX(35%); }
}

/* ===========================================================================
   Reduced motion — hard guarantee: no animation, everything readable/visible.
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .sjny__hud { display: none !important; }
  .sjny::before { transform: none !important; }
  .sjny__step, .sjny__frame, .sjny__note, .sjny__node, .sjny__hud-fill { transition: none !important; }
  .sjny__step { opacity: 1 !important; transform: none !important; }
  .sjny__frame, .sjny__note { opacity: 1 !important; transform: none !important; }
  .sjny__frame::after { display: none !important; }
}