/* LUNARTECH RISE ACADEMY: two sections below the services slider on index.html, driven by js/lunartech-ai-roles.js.
   1. .lt-trend      "Expand your AI engineering stack": line chart of open roles requiring AI skills, 2023-2026.
                     The line draws left to right when it scrolls into view; each milestone appears as the line reaches it.
                     Afterwards, hovering, touching or using the arrow keys on the plot reads out any month's value.
   2. .lt-roles-*    "~35,000 open roles right now": typical salaries by role, level and location, five rows per page.
                     Pages slide in from the right on a timer; a controller below shows the page, its progress and
                     previous / next buttons. */

/* ---------- 1. Chart ---------- */

.lt-trend-title,
.lt-roles-title { margin: 0; text-transform: none; font-weight: 300; letter-spacing: -0.01em; color: #f5f5f5; }

.lt-trend-title { max-width: 46vw; font-size: 3.33vw; line-height: 1.1; }

.lt-trend-chart { position: relative; margin: 0; }

.lt-trend-stat { position: absolute; z-index: 3; top: clamp(24px, 2.8vw, 56px); left: 9%; display: flex; flex-direction: column; gap: 0.75rem; margin: 0; pointer-events: none; }
.lt-trend-stat-num { font-size: 3.6vw; font-weight: 300; line-height: 1; letter-spacing: -0.02em; color: #f5f5f5; font-variant-numeric: tabular-nums; }
.lt-trend-stat-label { font-size: 14px; font-weight: 300; line-height: 1.4; color: #aaa; }

.lt-trend-plot { position: relative; height: clamp(240px, 22vw, 440px); border-bottom: 1px solid rgba(255, 255, 255, 0.12); touch-action: pan-y; }
.lt-trend-plot:focus-visible { outline: 1px solid rgba(255, 255, 255, 0.4); outline-offset: 6px; }

.lt-trend-hline { position: absolute; left: 0; right: 0; height: 1px; background-color: rgba(255, 255, 255, 0.06); }
.lt-trend-vline { position: absolute; top: 0; bottom: 0; width: 1px; background-color: rgba(255, 255, 255, 0.035); }
.lt-trend-ylab { position: absolute; left: 4px; margin-top: 6px; font-size: 11px; font-weight: 300; line-height: 1; letter-spacing: 0.02em; color: #777; }

.lt-trend-svg { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; clip-path: inset(0 100% 0 0); transition: clip-path 2.4s linear; }
.lt-trend-chart.is-in .lt-trend-svg { clip-path: inset(0 0 0 0); }
.lt-trend-line { fill: none; stroke: url(#lt-trend-stroke); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.lt-trend-line.is-estimate { stroke-dasharray: 2 5; }
.lt-trend-area { fill: url(#lt-trend-fill); stroke: none; }

/* Milestones: a dot on the line with a two-line label above it. The delay is set per mark so it appears as the line arrives. */
.lt-trend-marks { position: absolute; z-index: 2; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.lt-trend-mark { position: absolute; width: 0; height: 0; opacity: 0; transform: translateY(6px); transition: opacity 0.5s ease, transform 0.5s ease; }
.lt-trend-chart.is-in .lt-trend-mark { opacity: 1; transform: none; }
.lt-trend-dot { position: absolute; top: -4.5px; left: -4.5px; width: 9px; height: 9px; box-sizing: border-box; border: 1.5px solid #f5f5f5; border-radius: 50%; background-color: #050505; }
.lt-trend-label { position: absolute; bottom: 10px; left: 0; display: flex; flex-direction: column; gap: 2px; padding-bottom: 14px; white-space: nowrap; text-align: center; transform: translateX(-50%); }
.lt-trend-label::after { content: ""; position: absolute; bottom: 0; left: 50%; width: 1px; height: 10px; background-color: rgba(245, 245, 245, 0.35); }
.lt-trend-mark[data-align="start"] .lt-trend-label { text-align: left; transform: translateX(-8px); }
.lt-trend-mark[data-align="start"] .lt-trend-label::after { left: 8px; }
.lt-trend-mark[data-align="end"] .lt-trend-label { text-align: right; transform: translateX(calc(-100% + 8px)); }
.lt-trend-mark[data-align="end"] .lt-trend-label::after { left: auto; right: 8px; }
/* From 1200px the first label has room to centre, which keeps it clear of the next stem and label. */
@media (min-width: 1200px) {
  .lt-trend-mark[data-align="start"] .lt-trend-label { text-align: center; transform: translateX(-50%); }
  .lt-trend-mark[data-align="start"] .lt-trend-label::after { left: 50%; }
}
/* Tier 2: the label sits 28px higher on a longer stem, between its tier-1 neighbours. */
.lt-trend-mark[data-tier="2"] .lt-trend-label { padding-bottom: 42px; }
.lt-trend-mark[data-tier="2"] .lt-trend-label::after { height: 38px; }
.lt-trend-date { font-size: 12px; font-weight: 300; line-height: 1.3; color: #888; }
.lt-trend-name { font-size: 13px; font-weight: 300; line-height: 1.3; color: #ddd; }

/* Readout: a hairline and dot at the month under the pointer (or the arrow keys), with a card above or below the dot. */
.lt-trend-cursor,
.lt-trend-cursor-dot,
.lt-trend-tip { position: absolute; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }
.lt-trend-plot.is-scrubbing .lt-trend-cursor,
.lt-trend-plot.is-scrubbing .lt-trend-cursor-dot,
.lt-trend-plot.is-scrubbing .lt-trend-tip { opacity: 1; }
.lt-trend-cursor { z-index: 2; top: 0; bottom: 0; width: 1px; background-color: rgba(255, 255, 255, 0.22); }
.lt-trend-cursor-dot { z-index: 3; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background-color: #f5f5f5; }
.lt-trend-tip { z-index: 4; display: flex; flex-direction: column; gap: 3px; padding: 9px 12px; white-space: nowrap; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 6px; background-color: rgba(10, 10, 10, 0.98); transform: translate(var(--tx, -50%), var(--ty, calc(-100% - 14px))); }
.lt-trend-tip[data-align="start"] { --tx: -12px; }
.lt-trend-tip[data-align="end"] { --tx: calc(-100% + 12px); }
.lt-trend-tip[data-side="below"] { --ty: 14px; }
.lt-trend-tip-date { font-size: 12px; font-weight: 300; line-height: 1.3; color: #888; }
.lt-trend-tip-val { font-size: 13px; font-weight: 300; line-height: 1.3; color: #f5f5f5; font-variant-numeric: tabular-nums; }
.lt-trend-tip-name { font-size: 12px; font-weight: 300; line-height: 1.3; color: #c3d3f5; }
.lt-trend-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* "Now": the end of the line, with a slow pulse. */
.lt-trend-mark.is-now .lt-trend-dot { border-color: #f6d5c5; }
.lt-trend-mark.is-now .lt-trend-dot::after { content: ""; position: absolute; inset: -5px; border: 1px solid rgba(246, 213, 197, 0.6); border-radius: 50%; animation: lt-trend-pulse 2.4s ease-out infinite; }
@keyframes lt-trend-pulse { from { transform: scale(0.6); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }

.lt-trend-years { position: relative; height: 34px; }
.lt-trend-years span { position: absolute; top: 12px; font-size: 12px; font-weight: 300; line-height: 1; color: #777; }
.lt-trend-years .lt-trend-qlab { font-size: 11px; color: #666; }

/* Key to the line, the dashed estimate and the milestone dots. */
.lt-trend-legend { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 4px 0 0; font-size: 12px; font-weight: 300; line-height: 1; color: #777; }
.lt-trend-legend span { display: inline-flex; align-items: center; gap: 10px; }
.lt-trend-legend span::before { content: ""; flex: none; width: 22px; height: 1px; background-image: linear-gradient(90deg, #c3d3f5, #f6d5c5); }
.lt-trend-legend .is-dash::before { background-image: repeating-linear-gradient(90deg, #f6d5c5 0 2px, transparent 2px 6px); }
.lt-trend-legend .is-dot::before { width: 9px; height: 9px; box-sizing: border-box; border: 1.5px solid #f5f5f5; border-radius: 50%; background: #050505; }

.lt-trend-source { margin-top: 28px; text-align: left; font-size: 12px; font-weight: 300; line-height: 1.6; letter-spacing: 0.01em; color: #666; }

/* ---------- 2. Rotating salary table ---------- */

.lt-roles { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "title table" "source table"; column-gap: 5vw; }
.lt-roles-title { grid-area: title; max-width: 8.5em; font-size: clamp(28px, 2vw, 42px); line-height: 1.12; }
.lt-roles-source { grid-area: source; align-self: end; margin: 0; font-size: 12px; font-weight: 300; line-height: 1.6; color: #666; }
.lt-roles-table { grid-area: table; min-width: 0; }

.lt-roles-head,
.lt-role { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem 11rem 5.5rem; column-gap: 1.25rem; align-items: center; }
.lt-roles-head { padding-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-size: 13px; font-weight: 300; color: #888; }

/* The window holds one page (5 = PER_PAGE in the script). During a change two pages overlap: the new one slides in
   over the old one, which drifts the other way and fades. */
.lt-roles-window { --lt-row-h: 112px; position: relative; height: calc(var(--lt-row-h) * 5); overflow: hidden; opacity: 0; transform: translateY(12px); transition: opacity 0.9s ease, transform 0.9s ease; }
.lt-roles-window.is-in { opacity: 1; transform: none; }
.lt-roles-page { position: absolute; top: 0; left: 0; width: 100%; margin: 0; padding: 0; list-style: none; }
.lt-roles-page.is-moving { transition: transform 0.9s cubic-bezier(0.77, 0, 0.18, 1), opacity 0.6s ease; }

.lt-role { box-sizing: border-box; height: var(--lt-row-h); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }

/* Controller: "01 / 05", one progress line per page (filling while it shows), previous / next. */
.lt-roles-controls { display: flex; align-items: center; gap: 24px; margin-top: 28px; }
.lt-roles-count { flex: none; font-size: 12px; font-weight: 300; letter-spacing: 0.04em; color: #777; font-variant-numeric: tabular-nums; }
.lt-roles-count-now { color: #f5f5f5; }
.lt-roles-progress { display: flex; flex: 1; gap: 6px; min-width: 0; }
.lt-roles-seg { position: relative; flex: 1; height: 13px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.lt-roles-seg::before,
.lt-roles-seg-fill { content: ""; position: absolute; top: 6px; left: 0; right: 0; height: 1px; }
.lt-roles-seg::before { background-color: rgba(255, 255, 255, 0.14); }
.lt-roles-seg-fill { background-color: #f5f5f5; transform: scaleX(0); transform-origin: left center; }
.lt-roles-arrows { display: flex; flex: none; gap: 8px; }
.lt-roles-arrow { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 50%; background: transparent; color: #ddd; cursor: pointer; transition: border-color 0.3s ease, color 0.3s ease; }
.lt-roles-arrow:hover { border-color: rgba(255, 255, 255, 0.4); color: #fff; }
.lt-roles-arrow svg { width: 12px; height: 12px; }
.lt-roles-arrow.is-prev svg { transform: scaleX(-1); }
.lt-roles-arrow:focus-visible,
.lt-roles-seg:focus-visible { outline: 1px solid rgba(255, 255, 255, 0.5); outline-offset: 3px; }

.lt-role-main { display: flex; align-items: center; gap: 16px; min-width: 0; }
.lt-role-mark { display: grid; flex: none; place-items: center; width: 40px; height: 40px; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; background-color: rgba(255, 255, 255, 0.04); font-size: 11px; font-weight: 400; letter-spacing: 0.08em; color: #ddd; }
.lt-role-text { min-width: 0; }
.lt-role-name { margin: 0; font-size: 17px; font-weight: 300; line-height: 1.3; color: #f5f5f5; }
.lt-role-pay { margin: 4px 0 0; white-space: nowrap; font-size: 15px; font-weight: 300; line-height: 1.3; color: #aaa; font-variant-numeric: tabular-nums; }

.lt-role-meta { display: contents; }
.lt-pill { display: inline-block; padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 400; line-height: 1.3; }
.lt-pill.is-junior { background-color: #333; color: #ddd; }
.lt-pill.is-mid { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); color: #ddd; }
.lt-pill.is-senior { background-image: linear-gradient(90deg, #dfe7fb, #f7dccf); color: #111; }
.lt-role-place,
.lt-role-mode { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 13px; font-weight: 300; line-height: 1.3; color: #ddd; white-space: nowrap; }
.lt-role-place svg { flex: none; width: 12px; height: 12px; color: #999; }

/* ---------- 3. Capabilities block (Derive / Build / Diagnose / Deploy) ---------- */

/* The text block clips at four lines and the Webflow scroll interaction parks each inactive paragraph 120% of its own
   height below the visible one. A paragraph shorter than four lines would park closer and show its first line, so
   every paragraph is at least four lines tall. */
.services-text { min-height: 6.4em; min-height: 4lh; }

/* ---------- Responsive ---------- */

@media (max-width: 1499px) {
  .lt-trend-mark[data-p="3"] .lt-trend-label { display: none; }
}

@media (max-width: 1199px) {
  .lt-trend-mark[data-p="2"] .lt-trend-label { display: none; }
}

/* Below 1280px the table needs the full width: the headline goes above it and the sources below. */
@media (max-width: 1279px) {
  .lt-roles { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "title" "table" "source"; row-gap: 40px; }
  .lt-roles-title { max-width: none; }
}

/* Below 992px each row becomes two lines: role and salary, then level, location and format. */
@media (max-width: 991px) {
  .lt-trend-title { max-width: none; font-size: 5vw; }
  .lt-trend-stat-num { font-size: 5vw; }
  .lt-roles-head { display: none; }
  .lt-roles-window { --lt-row-h: 128px; }
  .lt-role { grid-template-columns: minmax(0, 1fr); row-gap: 14px; align-content: center; }
  .lt-role-meta { display: flex; align-items: center; gap: 14px; padding-left: 56px; }
}

@media (max-width: 767px) {
  .lt-trend-title { font-size: 8vw; }
  .lt-trend-stat { position: static; margin-bottom: 32px; }
  .lt-trend-stat-num { font-size: 12vw; }
  .lt-trend-plot { height: 280px; }
  .lt-trend-mark:not(.is-now) .lt-trend-label { display: none; } /* too narrow for labels: dots only, plus "Now" */
  .lt-trend-qlab { display: none; } /* too narrow for month names under the years */
}

@media (max-width: 479px) {
  .lt-role-meta { padding-left: 0; }
  .lt-role-mode { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lt-trend-svg { clip-path: none; transition: none; }
  .lt-trend-mark, .lt-roles-window { opacity: 1; transform: none; transition: none; }
  .lt-trend-mark.is-now .lt-trend-dot::after { animation: none; }
  .lt-trend-cursor, .lt-trend-cursor-dot, .lt-trend-tip { transition: none; }
}