/* ==========================================================================
   Home — Section C "The Journey" (deck-style, compact)
   - Absolute-positioned blobs on a fixed-height board so JS can compute exact
     path coordinates between blob centers.
   - Dotted connectors are revealed via a "cream cover" wipe — the cover stroke
     (cream, wider than the dotted line) starts fully covering the dotted line
     and animates off, exposing the dots.
   - Sequential reveal: stage 1 visible → connector 1 wipes → stage 2 visible …
   Copy: DEVELOPMENT_BRIEF.md §2.1, §5.1C, §5.3.
   ========================================================================== */

.journey-deck {
  position: relative;
  padding-block: var(--space-6);
  overflow: hidden;
  background-color: var(--color-cream);
}
@media (min-width: 768px) {
  .journey-deck { padding-block: var(--space-7); }
}

.journey-deck__title {
  text-align: center;
  margin-bottom: var(--space-5);
  max-width: 32rem;
  margin-inline: auto;
}

/* ---- Board: fixed-height container holding absolute-positioned stages ---- */
.journey-deck__board {
  position: relative;
  width: 100%;
  max-width: 880px;
  height: 790px;
  margin-inline: auto;
}


/* ---- One stage block ----------------------------------------------------- */
.journey-stage {
  position: absolute;
  width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  z-index: 2;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 480ms ease-out, transform 480ms ease-out;
}
.journey-stage.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Zig-zag positions (desktop): LEFT → RIGHT → LEFT → RIGHT → LEFT */
.journey-stage--toddlers     { top:   0;   left:  0;   right: auto; }
.journey-stage--dream-makers { top: 145px; left: auto; right:  0;   }
.journey-stage--mini-makers  { top: 290px; left:  0;   right: auto; }
.journey-stage--inventors    { top: 435px; left: auto; right:  0;   }
.journey-stage--legends      { top: 580px; left:  0;   right: auto; }

/* ---- Blob (clipped image) ------------------------------------------------ */
.journey-stage__blob {
  position: relative;
  width: 120px;
  height: 120px;
  margin-bottom: var(--space-2);
  filter: drop-shadow(0 10px 22px rgba(26, 20, 51, 0.16));
  transition: filter var(--t-base), transform var(--t-base);
  animation: blob-float 6.5s ease-in-out infinite;
}
.journey-stage__blob img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.journey-stage--toddlers     .journey-stage__blob img { clip-path: url(#blob-1); -webkit-clip-path: url(#blob-1); }
.journey-stage--dream-makers .journey-stage__blob img { clip-path: url(#blob-2); -webkit-clip-path: url(#blob-2); }
.journey-stage--mini-makers  .journey-stage__blob img { clip-path: url(#blob-3); -webkit-clip-path: url(#blob-3); }
.journey-stage--inventors    .journey-stage__blob img { clip-path: url(#blob-4); -webkit-clip-path: url(#blob-4); }
.journey-stage--legends      .journey-stage__blob img { clip-path: url(#blob-5); -webkit-clip-path: url(#blob-5); }

/* Stagger float phase per stage */
.journey-stage--dream-makers .journey-stage__blob { animation-delay: -1.3s; animation-duration: 7s;   }
.journey-stage--mini-makers  .journey-stage__blob { animation-delay: -2.6s; animation-duration: 6.8s; }
.journey-stage--inventors    .journey-stage__blob { animation-delay: -3.9s; animation-duration: 7.2s; }
.journey-stage--legends      .journey-stage__blob { animation-delay: -5.2s; animation-duration: 6.6s; }

@keyframes blob-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* Invisible click target over each blob */
.journey-stage__toggle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-size: 0;
  color: transparent;
  z-index: 3;
}

/* Hovered / expanded stage floats above siblings so details aren't clipped */
.journey-stage:hover,
.journey-stage:focus-within,
.journey-stage.is-expanded { z-index: 10; }

/* Hover / focus / expanded — lift + tinted shadow per stage lead colour */
.journey-stage:hover .journey-stage__blob,
.journey-stage:focus-within .journey-stage__blob,
.journey-stage.is-expanded .journey-stage__blob {
  transform: translateY(-4px) scale(1.04);
  filter: drop-shadow(0 14px 30px var(--stage-shadow, rgba(26, 20, 51, 0.22)));
  animation-play-state: paused;
}
.journey-stage--toddlers     { --stage-shadow: rgba(255, 107, 43, 0.45); }   /* Orange */
.journey-stage--dream-makers { --stage-shadow: rgba(255, 210,  0, 0.55); }   /* Yellow */
.journey-stage--mini-makers  { --stage-shadow: rgba(  0, 201,167, 0.45); }   /* Teal   */
.journey-stage--inventors    { --stage-shadow: rgba(155, 127,232, 0.55); }   /* Purple */
.journey-stage--legends      { --stage-shadow: rgba( 26,  20, 51, 0.40); }   /* Navy   */

/* ---- Caption ------------------------------------------------------------- */
.journey-stage__caption { max-width: 200px; }
.journey-stage__label {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: 0.95rem;
  color: var(--color-orange);
  margin: 0 0 0.15rem;
  line-height: 1.2;
}
.journey-stage__age {
  font-weight: var(--fw-medium);
  color: var(--color-orange);
}
.journey-stage__product {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.4;
}

/* Expanded details (revealed on hover/focus/expanded) */
.journey-stage__details {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  margin-top: 0;
  transition: grid-template-rows 360ms ease-out, opacity 320ms ease-out, margin-top 360ms ease-out;
}
.journey-stage__details > div {
  overflow: hidden;
  min-height: 0;
}
.journey-stage:hover .journey-stage__details,
.journey-stage:focus-within .journey-stage__details,
.journey-stage.is-expanded .journey-stage__details {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: var(--space-1);
}
.journey-stage__tagline {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--text-muted);
  font-size: 0.85rem;
  margin: 0 0 0.25rem;
}
.journey-stage__skills {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.75rem;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.45rem;
  justify-content: center;
}
.journey-stage__skills li::before {
  content: '·';
  margin-right: 0.3em;
  color: var(--color-orange);
}
.journey-stage__skills li:first-child::before { content: none; }

/* ---- Connector layer (SVG behind stages) -------------------------------- */
.journey-deck__connectors {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}
/* The visible dotted path */
.connector-dotted {
  fill: none;
  stroke: var(--color-purple);
  stroke-width: 2.5;
  stroke-dasharray: 2.5 9;
  stroke-linecap: round;
  opacity: 0.55;
}
/* The cream "cover" stroke that hides the dotted path until it wipes off.
   d, dasharray and dashoffset are set per-instance by JS. */
.connector-cover {
  fill: none;
  stroke: var(--color-cream);
  stroke-width: 7;
  stroke-linecap: round;
  transition: stroke-dashoffset 700ms ease-out;
}

/* ---- CTA below ----------------------------------------------------------- */
.journey-deck__cta {
  text-align: center;
  margin-top: var(--space-5);
}
.journey-deck__cta a { font-weight: var(--fw-semibold); }

/* ---- Tablet / mobile: VERTICAL CONNECTED JOURNEY ---------------------------
   Brief: on mobile the journey becomes a vertical path of smaller blobs that
   alternate left/right side. journey.js auto-detects the dominant axis
   between adjacent blob centers and draws a vertical S-curve dotted path
   between them, so the connector visually weaves between sides like a road.
   No horizontal scrolling — the entire deck flows down the page.
--------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* Container at normal width — title + CTA visible naturally */
  .journey-deck--horizontal .container {
    max-width: var(--container-max);
    width: 100%;
    padding-inline: var(--container-pad);
  }

  /* Board: tall column, no scrolling, holds 5 stacked stages */
  .journey-deck--horizontal .journey-deck__board {
    display: block;
    position: relative;
    width: 100%;
    height: 900px;
    max-width: 480px;
    margin-inline: auto;
    overflow: visible;
    /* Reset any horizontal-scroll legacy */
    -webkit-mask-image: none;
            mask-image: none;
    scroll-snap-type: none;
    touch-action: auto;
  }
  /* Kill the old horizontal-scroll spacer pseudo */
  .journey-deck--horizontal .journey-deck__board::after { content: none; }

  /* Stages: smaller blobs, alternating left/right with a vertical stride */
  .journey-deck--horizontal .journey-stage {
    position: absolute;
    width: 180px;
    scroll-snap-align: none;
    text-align: center;
  }
  .journey-deck--horizontal .journey-stage__blob {
    width: 130px;
    height: 130px;
  }
  .journey-deck--horizontal .journey-stage__caption { max-width: 180px; }

  /* L → R → L → R → L vertical zigzag (compact) */
  .journey-deck--horizontal .journey-stage--toddlers     { top:    0;   left:  0;   right: auto; bottom: auto; }
  .journey-deck--horizontal .journey-stage--dream-makers { top:  175px; left: auto; right:  0;   bottom: auto; }
  .journey-deck--horizontal .journey-stage--mini-makers  { top:  350px; left:  0;   right: auto; bottom: auto; }
  .journey-deck--horizontal .journey-stage--inventors    { top:  525px; left: auto; right:  0;   bottom: auto; }
  .journey-deck--horizontal .journey-stage--legends      { top:  700px; left:  0;   right: auto; bottom: auto; }

  /* Connectors fill the board (full width, full height) */
  .journey-deck--horizontal .journey-deck__connectors {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
}

/* Phones — smaller stage width + tighter vertical stride */
@media (max-width: 480px) {
  .journey-deck--horizontal .journey-deck__board { height: 700px; max-width: 340px; }
  .journey-deck--horizontal .journey-stage       { width: 150px; }
  .journey-deck--horizontal .journey-stage__blob { width: 100px; height: 100px; }
  .journey-deck--horizontal .journey-stage__caption { max-width: 150px; }
  .journey-deck--horizontal .journey-stage--toddlers     { top:    0; }
  .journey-deck--horizontal .journey-stage--dream-makers { top:  135px; }
  .journey-deck--horizontal .journey-stage--mini-makers  { top:  270px; }
  .journey-deck--horizontal .journey-stage--inventors    { top:  405px; }
  .journey-deck--horizontal .journey-stage--legends      { top:  540px; }
}

/* ---- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .journey-stage,
  .journey-stage__blob,
  .journey-stage__details,
  .connector-cover {
    animation: none !important;
    transition: none !important;
  }
  .journey-stage { opacity: 1; transform: none; }
  /* Hide cream cover so the dotted line is fully visible without animation */
  .connector-cover { display: none; }
}

/* ==========================================================================
   Stage detail modal — opened by journey.js when a stage on the home deck
   (data-mode="modal") is clicked. The standalone /journey page that used
   .journey-deck--full has been redirected to / so that modifier was removed.
   ========================================================================== */
/* ---- Stage detail modal ------------------------------------------------- */
#stage-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  align-items: center;
  justify-content: center;
  background: rgba(26, 20, 51, 0.6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  padding: var(--space-4);
}
#stage-modal.is-open { display: flex; }

.stage-modal__card {
  --stage-color: var(--color-orange);
  position: relative;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--space-6);
  box-shadow: 0 30px 80px rgba(26, 20, 51, 0.30);
  border-top: 6px solid var(--stage-color);
}
.stage-modal__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: var(--radius-pill);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--text-muted);
  transition: background-color 180ms ease, color 180ms ease;
}
.stage-modal__close:hover { background-color: rgba(26, 20, 51, 0.06); color: var(--color-navy); }
.stage-modal__age {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill);
  background: var(--stage-color);
  color: var(--color-white);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
/* Yellow age pill needs dark text for contrast */
.stage-modal__card[data-stage-key="dream-makers"] .stage-modal__age {
  color: var(--color-navy);
}
.stage-modal__title {
  margin: 0 0 var(--space-2);
  color: var(--stage-color);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: var(--lh-tight);
}
/* Yellow stage name needs darker color for legibility on white */
.stage-modal__card[data-stage-key="dream-makers"] .stage-modal__title {
  color: var(--color-navy);
}
.stage-modal__tagline {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: var(--fs-quote);
  color: var(--text-muted);
  margin: 0 0 var(--space-4);
}
.stage-modal__product {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-body-lg);
}
.stage-modal__skills {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-5);
  display: grid;
  gap: var(--space-2);
}
.stage-modal__skills li {
  position: relative;
  padding-left: 1.5rem;
  font-weight: var(--fw-medium);
}
.stage-modal__skills li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--stage-color);
}
.stage-modal__cta { width: 100%; }

/* ==========================================================================
   Horizontal-flow modifier — used on the home-page hero deck
   Stages alternate top↔bottom across a wide row instead of the vertical
   left↔right zigzag. Pairs with journey.js's auto-detecting bezier.
   ========================================================================== */

@media (min-width: 901px) {
  .journey-deck--horizontal .journey-deck__board {
    max-width: 1200px;
    height: 640px;
  }
  /* Stage container widens just enough to hold a bigger blob; same-row cards
     are 490px apart so wider stages don't collide, and adjacent cards live on
     different rows so any X-overlap is invisible (different Y bands). */
  .journey-deck--horizontal .journey-stage       { width: 280px; }
  .journey-deck--horizontal .journey-stage__blob { width: 240px; height: 240px; }

  /* T → B → T → B → T zigzag, evenly spaced along the row.
     Stride 245 > stage width 220 → 25px horizontal gap, no overlap.
     Board total = 220 + 4×245 = 1200px (fits container exactly). */
  .journey-deck--horizontal .journey-stage--toddlers     { top:    0;   bottom: auto; left:    0;   right: auto; }
  .journey-deck--horizontal .journey-stage--dream-makers { top:  auto;  bottom:   0;  left:  245px; right: auto; }
  .journey-deck--horizontal .journey-stage--mini-makers  { top:    0;   bottom: auto; left:  490px; right: auto; }
  .journey-deck--horizontal .journey-stage--inventors    { top:  auto;  bottom:   0;  left:  735px; right: auto; }
  .journey-deck--horizontal .journey-stage--legends      { top:    0;   bottom: auto; left:  980px; right: auto; }

  /* Wavy/organic shape per card (Journey.png reference) — each stage uses its
     own SVG clipPath (#blob-1 … #blob-5) defined inline in index.html.
     We don't override clip-path here, so the base bindings take effect. */

  /* Colored bold name + age inline, dark caption beneath (per Journey.png) */
  .journey-deck--horizontal .journey-stage__label,
  .journey-deck--horizontal .journey-stage__age {
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    font-size: 1.18rem;
    line-height: 1.25;
  }
  .journey-deck--horizontal .journey-stage--toddlers     .journey-stage__label,
  .journey-deck--horizontal .journey-stage--toddlers     .journey-stage__age,
  .journey-deck--horizontal .journey-stage--mini-makers  .journey-stage__label,
  .journey-deck--horizontal .journey-stage--mini-makers  .journey-stage__age,
  .journey-deck--horizontal .journey-stage--inventors    .journey-stage__label,
  .journey-deck--horizontal .journey-stage--inventors    .journey-stage__age   { color: var(--color-orange); }
  .journey-deck--horizontal .journey-stage--dream-makers .journey-stage__label,
  .journey-deck--horizontal .journey-stage--dream-makers .journey-stage__age,
  .journey-deck--horizontal .journey-stage--legends      .journey-stage__label,
  .journey-deck--horizontal .journey-stage--legends      .journey-stage__age   { color: var(--color-teal); }

  .journey-deck--horizontal .journey-stage__product {
    margin-top: 0.4rem;
    font-size: 0.98rem;
    line-height: 1.4;
    color: var(--text-primary);
    max-width: 220px;
  }

  /* Section padding sized to the bigger deck — no visible gap above/below */
  .journey-deck.journey-deck--horizontal { padding-block: var(--space-5); }
}
/* Below 901px, the existing vertical-stack fallback in journey.css applies. */