/* ==========================================================================
   Monal Group — Journey widget
   Converted from the static build (assets/css/style.css). Values are the
   original Figma-derived numbers: 1 unit of --monal-u == 1 Figma px / 10.
   ========================================================================== */

/* ==========================================================================
   JOURNEY  (Figma 1:908 panel 1890×1040 r50 · mobile 1:2236)
   ========================================================================== */
.monal-journey { padding-top: calc(var(--monal-u) * 6); }
.monal-journey__panel {
  position: relative; overflow: hidden; isolation: isolate;
  margin: 0 var(--monal-inset); padding: calc(var(--monal-u) * 5.3) 0 calc(var(--monal-u) * 6.4);
  background: var(--monal-journey-panel, var(--monal-c-ink)); color: #fff; border-radius: var(--monal-radius-panel);
}
.monal-journey__pattern { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; pointer-events: none; opacity: .8; }
.monal-journey__head { text-align: center; }
.monal-journey__intro { display: flex; flex-direction: column; align-items: center; gap: calc(var(--monal-u) * 2); margin-top: calc(var(--monal-u) * 2.2); }
.monal-journey__intro p { font-size: calc(var(--monal-u) * 1.6); line-height: calc(var(--monal-u) * 2.2); color: var(--monal-c-white-70); max-width: calc(var(--monal-u) * 30); }

.monal-timeline-wrap { position: relative; margin-top: calc(var(--monal-u) * 5); }
.monal-timeline { position: relative; display: flex; flex-direction: column; align-items: center; }
.monal-timeline__axis { /* vertical axis on mobile */
  position: absolute; top: calc(var(--monal-u) * 3.5); bottom: calc(var(--monal-u) * 12); left: calc(50% - .5px); width: 1px;
  background: rgba(255,255,255,.22); transform-origin: top;
}
.monal-tl { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding-bottom: calc(var(--monal-u) * 4.7); }
.monal-tl:last-child { padding-bottom: 0; }
.monal-tl__node {
  order: -1; position: relative; display: grid; place-items: center; width: calc(var(--monal-u) * 7); height: calc(var(--monal-u) * 7); border-radius: 50%;
  background: var(--monal-c-ink); border: 1px solid #fff; color: #fff;
  box-shadow: calc(var(--monal-u) * 3) calc(var(--monal-u) * 3.4) calc(var(--monal-u) * 8.5) rgba(0,0,0,.1);
  transition: background-color .4s, border-color .4s, color .4s, transform .5s var(--monal-ease-out);
}
.monal-tl__node .monal-i { width: 50%; height: 50%; }
.monal-tl:hover .monal-tl__node { transform: scale(1.06); }
.monal-tl__stem { display: none; }
.monal-tl__label { display: flex; flex-direction: column; align-items: center; gap: calc(var(--monal-u) * .4); margin-top: calc(var(--monal-u) * 2.5); padding: calc(var(--monal-u) * .4) calc(var(--monal-u) * 1.4); background: var(--monal-c-ink); }
.monal-tl--up .monal-tl__label { flex-direction: column-reverse; }
.monal-tl__year { font-size: calc(var(--monal-u) * 1.4); line-height: 1.4; font-weight: 500; text-transform: uppercase; letter-spacing: -.02em; }
/* A milestone whose year is not yet confirmed keeps the slot, so the titles
   along the timeline stay on the same baseline as the design. */
.monal-tl__year:empty::before { content: "\200B"; }
.monal-tl__title { font-family: var(--monal-f-display); font-size: calc(var(--monal-u) * 2.4); line-height: 1.2; letter-spacing: -.02em; }
.monal-tl.monal-is-current .monal-tl__node { background: var(--monal-c-orange-hot); border-color: var(--monal-c-orange-hot); color: var(--monal-c-ink); box-shadow: 0 calc(var(--monal-u) * 1.4) calc(var(--monal-u) * 4) rgba(248, 127, 12, .45); }
.monal-tl.monal-is-current .monal-tl__year { color: var(--monal-c-orange); font-weight: 600; }
.monal-tl.monal-is-current .monal-tl__title { font-family: var(--monal-f-serif); font-weight: 700; }

@media (min-width: 1200px) {
  .monal-journey { padding-top: calc(var(--monal-u) * 20); }
  .monal-journey__panel { height: calc(var(--monal-u) * 104); padding: calc(var(--monal-u) * 13.2) 0 0; }
  .monal-journey__pattern { opacity: 1; }
  .monal-journey__head { display: flex; justify-content: space-between; align-items: flex-start; text-align: left; }
  .monal-journey__intro { align-items: flex-start; gap: calc(var(--monal-u) * 2.6); margin: calc(var(--monal-u) * 4.4) 0 0; width: calc(var(--monal-u) * 56); }
  .monal-journey__intro p { max-width: none; font-size: max(calc(var(--monal-u) * 2.2), 15px); line-height: calc(var(--monal-u) * 3.4); }

  .monal-timeline-wrap { margin-top: calc(var(--monal-u) * 8.3); }
  .monal-timeline {
    display: grid;
    grid-template-columns: repeat(var(--monal-tl-count, 6), calc(var(--monal-u) * 154.44 / var(--monal-tl-count, 6)));
    align-items: stretch;
    width: calc(var(--monal-u) * 154.4); margin: 0 auto; transform: translateX(calc(var(--monal-u) * -1.8));
  }
  .monal-timeline__axis { /* horizontal axis (Figma 1:915), full panel width */
    top: calc(var(--monal-u) * 25.9); bottom: auto; left: 0; right: 0; width: auto; height: 1px; transform-origin: left;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.28) 12%, rgba(255,255,255,.28) 88%, rgba(255,255,255,0));
  }
  .monal-tl { display: grid; grid-template-rows: calc(var(--monal-u) * 17) calc(var(--monal-u) * 3.5) calc(var(--monal-u) * 10.8) calc(var(--monal-u) * 3.5) auto; justify-items: center; align-items: start; padding: 0; }
  .monal-tl__node { order: 0; grid-row: 3; width: calc(var(--monal-u) * 10.8); height: calc(var(--monal-u) * 10.8); }
  /* The design sized each node icon through its own .monal-i--j-* class (below).
     Icons are chosen from a media control now, so anything without one of those
     classes — a custom upload — still needs a box; the mask is `contain`, so the
     artwork scales inside it. The per-icon rules below are equally specific and
     declared later, so the bundled icons keep their exact design sizes. */
  .monal-tl__node .monal-i { width: calc(var(--monal-u) * 6); height: calc(var(--monal-u) * 6); }
  .monal-tl__stem { display: block; width: calc(var(--monal-u) * .8); height: calc(var(--monal-u) * 3.5); background: url(../../assets/monal/icons/timeline-connector.svg) center / 100% 100% no-repeat; }
  .monal-tl--up .monal-tl__stem { grid-row: 2; }
  .monal-tl--down .monal-tl__stem { grid-row: 4; transform: scaleY(-1); }
  .monal-tl__label { margin: 0; padding: 0; background: none; gap: 0; }
  .monal-tl--up .monal-tl__label { grid-row: 1; align-self: end; flex-direction: column; padding-bottom: calc(var(--monal-u) * 2); }
  .monal-tl--down .monal-tl__label { grid-row: 5; padding-top: calc(var(--monal-u) * 1.9); }
  .monal-tl__year { order: 0; font-weight: 300; font-size: max(calc(var(--monal-u) * 2.2), 13px); line-height: calc(var(--monal-u) * 4.8); letter-spacing: -.04em; }
  .monal-tl--up .monal-tl__title { order: -1; margin-bottom: calc(var(--monal-u) * 1); }
  .monal-tl--down .monal-tl__title { margin-top: calc(var(--monal-u) * 1); }
  .monal-tl__title { font-size: calc(var(--monal-u) * 4); line-height: calc(var(--monal-u) * 4.2); letter-spacing: -.04em; }
  .monal-tl.monal-is-current .monal-tl__year { font-weight: 600; }
  .monal-tl.monal-is-current .monal-tl__title { letter-spacing: -.02em; }
  .monal-tl.monal-is-current .monal-tl__stem { filter: sepia(1) saturate(8) hue-rotate(-18deg); }
  /* Icon sizes match the traced Figma icon boxes (1x px) */
  .monal-tl .monal-i--j-handshake { width: calc(var(--monal-u) * 6.1); height: calc(var(--monal-u) * 5.9); }
  .monal-tl .monal-i--j-expansion { width: calc(var(--monal-u) * 5.6); height: calc(var(--monal-u) * 5.3); }
  .monal-tl .monal-i--j-brands { width: calc(var(--monal-u) * 5.5); height: calc(var(--monal-u) * 5.5); }
  .monal-tl .monal-i--j-entertainment { width: calc(var(--monal-u) * 6.2); height: calc(var(--monal-u) * 6.3); }
  .monal-tl .monal-i--j-cities { width: calc(var(--monal-u) * 4); height: calc(var(--monal-u) * 5.7); }
  .monal-tl .monal-i--j-corporate { width: calc(var(--monal-u) * 6.3); height: calc(var(--monal-u) * 7.5); }
}

/* ==========================================================================
   TIMELINE REVEAL
   The hidden state is CSS and is in place for the very first paint, so a
   milestone is never seen finished before its own reveal starts. It applies
   only once monal-boot.js has flagged that scripting is alive (html.monal-js),
   so with JavaScript off the timeline simply renders. .monal-is-revealed is
   added once by the IntersectionObserver in monal-journey.js, which also marks
   the wrapper ready so the boot failsafe leaves it alone. When that class
   lands these selectors stop matching and the layout rules above resume.
   ========================================================================== */
html.monal-js .monal-timeline-wrap[data-monal-tl-reveal]:not(.monal-is-revealed) .monal-tl__node,
html.monal-js .monal-timeline-wrap[data-monal-tl-reveal]:not(.monal-is-revealed) .monal-tl__stem,
html.monal-js .monal-timeline-wrap[data-monal-tl-reveal]:not(.monal-is-revealed) .monal-tl__label { opacity: 0; }
html.monal-js .monal-timeline-wrap[data-monal-tl-reveal]:not(.monal-is-revealed) .monal-tl__node,
html.monal-js .monal-timeline-wrap[data-monal-tl-reveal]:not(.monal-is-revealed) .monal-tl:hover .monal-tl__node { transform: scale(.4); }
html.monal-js .monal-timeline-wrap[data-monal-tl-reveal]:not(.monal-is-revealed) .monal-tl__stem,
html.monal-js .monal-timeline-wrap[data-monal-tl-reveal]:not(.monal-is-revealed) .monal-tl--down .monal-tl__stem { transform: scaleY(0); }
html.monal-js .monal-timeline-wrap[data-monal-tl-reveal]:not(.monal-is-revealed) .monal-tl--up .monal-tl__label { transform: translateY(calc(var(--monal-u) * -2.4)); }
html.monal-js .monal-timeline-wrap[data-monal-tl-reveal]:not(.monal-is-revealed) .monal-tl--down .monal-tl__label { transform: translateY(calc(var(--monal-u) * 2.4)); }
html.monal-js .monal-timeline-wrap[data-monal-tl-reveal]:not(.monal-is-revealed) .monal-timeline__axis { transform: scaleX(0); }

/* One milestone per step, in DOM order: left to right on the desktop grid,
   top to bottom once the timeline stacks. */
.monal-timeline-wrap[data-monal-tl-reveal] .monal-tl__node,
.monal-timeline-wrap[data-monal-tl-reveal] .monal-tl__stem,
.monal-timeline-wrap[data-monal-tl-reveal] .monal-tl__label {
  --monal-tl-step: calc(var(--monal-tl-i, 0) * .13s);
  transition: opacity .6s var(--monal-ease-out), transform .7s var(--monal-ease-out);
}
.monal-timeline-wrap[data-monal-tl-reveal] .monal-tl__node  { transition-delay: calc(.28s + var(--monal-tl-step)); }
.monal-timeline-wrap[data-monal-tl-reveal] .monal-tl__stem  { transition-delay: calc(.46s + var(--monal-tl-step)); }
.monal-timeline-wrap[data-monal-tl-reveal] .monal-tl__label { transition-delay: calc(.56s + var(--monal-tl-step)); }
.monal-timeline-wrap[data-monal-tl-reveal] .monal-timeline__axis { transition: transform 1.4s cubic-bezier(.65, 0, .35, 1); }

/* Editing beats animating: the editor must never show an empty section. */
html.monal-js body.elementor-editor-active .monal-timeline-wrap[data-monal-tl-reveal]:not(.monal-is-revealed) .monal-tl__node,
html.monal-js body.elementor-editor-active .monal-timeline-wrap[data-monal-tl-reveal]:not(.monal-is-revealed) .monal-tl:hover .monal-tl__node,
html.monal-js body.elementor-editor-active .monal-timeline-wrap[data-monal-tl-reveal]:not(.monal-is-revealed) .monal-tl__stem,
html.monal-js body.elementor-editor-active .monal-timeline-wrap[data-monal-tl-reveal]:not(.monal-is-revealed) .monal-tl__label,
html.monal-js body.elementor-editor-active .monal-timeline-wrap[data-monal-tl-reveal]:not(.monal-is-revealed) .monal-timeline__axis {
  opacity: 1;
  transform: none;
  transition: none;
}
html.monal-js body.elementor-editor-active .monal-timeline-wrap[data-monal-tl-reveal]:not(.monal-is-revealed) .monal-tl--down .monal-tl__stem { transform: scaleY(-1); }

/* Same prefix, declared later: reduced motion simply shows the timeline. */
@media (prefers-reduced-motion: reduce) {
  html.monal-js .monal-timeline-wrap[data-monal-tl-reveal]:not(.monal-is-revealed) .monal-tl__node,
  html.monal-js .monal-timeline-wrap[data-monal-tl-reveal]:not(.monal-is-revealed) .monal-tl:hover .monal-tl__node,
  html.monal-js .monal-timeline-wrap[data-monal-tl-reveal]:not(.monal-is-revealed) .monal-tl__stem,
  html.monal-js .monal-timeline-wrap[data-monal-tl-reveal]:not(.monal-is-revealed) .monal-tl__label,
  html.monal-js .monal-timeline-wrap[data-monal-tl-reveal]:not(.monal-is-revealed) .monal-timeline__axis {
    opacity: 1;
    transform: none;
    transition: none;
  }
  html.monal-js .monal-timeline-wrap[data-monal-tl-reveal]:not(.monal-is-revealed) .monal-tl--down .monal-tl__stem { transform: scaleY(-1); }
  .monal-timeline-wrap[data-monal-tl-reveal] .monal-tl__node,
  .monal-timeline-wrap[data-monal-tl-reveal] .monal-tl__stem,
  .monal-timeline-wrap[data-monal-tl-reveal] .monal-tl__label,
  .monal-timeline-wrap[data-monal-tl-reveal] .monal-timeline__axis { transition: none; }
}