/* =============================================================================
   Pepvela main site V3 -- /vela only (loaded by pages.vela via headExtra).
   Vela: the longevity intelligence app by Pepvela. Story: baseline > change >
   context > response > trend, told with calm, scientific motion.

   Motion contract:
   - Every "not yet revealed / not yet drawn" state is scoped under .vela-motion,
     which js/v3-vela.js adds ONLY when motion is allowed. Without JS, and under
     prefers-reduced-motion, every line, step and mark is complete and static.
   - Scroll-linked progress is a 0..1 custom property --p (default 1) written by
     js/v3-vela.js on [data-vela-progress]; it only ever moves forward.
   - The CEO's longevity image is never animated or distorted: it gets a gentle
     reveal and, on narrow screens, a contained sideways pan at a readable size.
   ========================================================================== */

/* ------------------------------------------------------------ image figure -- */
.vela-figure {
  --vela-screen: #0c0b20; --vela-ink: #C2C3F4; --vela-ink-soft: rgba(194, 195, 244, 0.78); --vela-link: #9B9AF0; --vela-line: rgba(194, 195, 244, 0.14);
  position: relative; width: min(100% - 2 * var(--gutter), 1380px); margin: clamp(8px, 2vw, 20px) auto 0;
  border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--vela-screen); color: var(--vela-ink);
  overflow: hidden; box-shadow: var(--shadow-raised);
}
.vela-figure__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 18px; border-bottom: 1px solid var(--vela-line); font-size: 12.5px; }
.vela-figure__label { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(155, 154, 240, 0.35); color: var(--vela-ink); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 11px; }
.vela-figure__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--signal-cyan); animation: v3-ping 3.2s ease-out infinite; }
.vela-figure__title { color: var(--vela-ink-soft); }
.vela-figure__viewport { position: relative; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(155, 154, 240, 0.35) transparent; }
.vela-figure__viewport:focus-visible { outline: 2px solid var(--vela-link); outline-offset: -4px; border-radius: 0; }
/* never smaller than a readable size: below it the frame pans instead of shrinking the labels */
.vela-figure__viewport img { display: block; width: max(100%, 1160px); max-width: none; height: auto; }
.vela-figure[data-edge="start"] .vela-figure__viewport { -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); }
.vela-figure[data-edge="mid"] .vela-figure__viewport { -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.vela-figure[data-edge="end"] .vela-figure__viewport { -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%); mask-image: linear-gradient(90deg, transparent, #000 14%); }
.vela-figure__rail { display: none; height: 3px; margin: 0 18px; border-radius: 3px; background: var(--vela-line); overflow: hidden; }
.vela-figure__rail-fill { display: block; height: 100%; width: calc(18% + var(--pan, 0) * 82%); border-radius: inherit; background: linear-gradient(90deg, var(--vela-link), var(--signal-cyan)); transition: width 0.15s linear; }
.vela-figure.is-scrollable .vela-figure__rail { display: block; margin-top: 12px; }
.vela-figure__caption { padding: 12px 18px 16px; font-size: 13px; line-height: 1.6; color: var(--vela-ink-soft); }
.vela-figure__caption a { color: var(--vela-link); font-weight: 650; white-space: nowrap; }
.vela-figure__hint { display: none; color: var(--vela-ink); font-weight: 650; }
.vela-figure__hint::after { content: "\2192"; display: inline-block; margin-left: 6px; animation: vela-nudge 2.4s var(--ease) infinite; }
.vela-figure.is-scrollable .vela-figure__hint { display: inline; }
/* soft depth on reveal (opacity, lift, glow); the image itself never moves inside its frame */
.vela-figure[data-reveal] { transform: translateY(18px) scale(0.985); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease), box-shadow 1.6s var(--ease); }
.vela-figure[data-reveal].is-in { transform: none; box-shadow: var(--shadow-raised), 0 40px 90px -40px rgba(89, 52, 207, 0.55); }
.no-js .vela-figure[data-reveal] { transform: none; }

/* --------------------------------------------------- baseline > ... > trend -- */
.vela-flow { --p: 1; margin-top: clamp(36px, 5vw, 64px); }
.vela-flow__eyebrow { margin-bottom: 22px; }
.vela-flow__body { position: relative; }
.vela-flow__track { position: absolute; top: 9px; left: calc((100% - 72px) / 10); right: calc((100% - 72px) / 10); height: 2px; border-radius: 2px; background: var(--border); overflow: hidden; }
.vela-flow__fill { position: absolute; inset: 0; transform-origin: left center; transform: scaleX(var(--p, 1)); background: linear-gradient(90deg, var(--accent-text), var(--signal-cyan)); transition: transform 0.35s linear; }
.vela-flow__fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0, rgba(255, 255, 255, 0.85) 50%, transparent 100%); background-size: 22% 100%; background-repeat: no-repeat; animation: vela-flow 5.5s linear infinite; mix-blend-mode: overlay; }
.vela-flow__steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.vela-flow__step { display: grid; justify-items: center; align-content: start; gap: 8px; text-align: center; transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.vela-flow__node { position: relative; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--accent-text); background: var(--bg); box-shadow: 0 0 0 6px var(--accent-soft); transition: border-color 0.5s, box-shadow 0.5s, background-color 0.5s; }
.vela-flow__node::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--accent-text); }
.vela-flow__n { font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; color: var(--accent-text); margin-top: 6px; }
.vela-flow__step h3 { font-size: clamp(16px, 1.4vw, 18px); }
.vela-flow__step p { font-size: 14px; color: var(--text-secondary); line-height: 1.55; max-width: 26ch; }
.vela-flow__step.is-current .vela-flow__node { animation: vela-halo 3s ease-out infinite; }

/* ------------------------------------------------------------- your biology -- */
.vela-markers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 172px), 1fr)); gap: 14px; }
.vela-marker { display: grid; gap: 10px; align-content: start; padding: 18px; border-radius: var(--radius); border: 1px solid var(--border-soft); background: var(--surface); transition: border-color 0.35s, box-shadow 0.45s var(--ease), transform 0.45s var(--ease); }
.vela-marker:hover { border-color: var(--accent-line); box-shadow: var(--shadow); transform: translateY(-3px); }
.vela-marker__head { display: grid; gap: 4px; align-content: start; min-height: 64px; }
.vela-marker__head h3 { font-size: 16px; line-height: 1.3; }
.vela-marker__tag { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.vela-marker p { font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); }
.vela-spark { width: 100%; height: 66px; display: block; overflow: visible; }
.vela-spark__area { fill: var(--accent-soft); opacity: 0.75; transition: opacity 0.4s; }
.vela-spark__line { fill: none; stroke: var(--accent-text); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.vela-spark__pt { fill: var(--surface); stroke: var(--signal-cyan-text); stroke-width: 2.4; vector-effect: non-scaling-stroke; }
.vela-spark__ring { fill: none; stroke: var(--signal-cyan); stroke-width: 1.5; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; opacity: 0.45; animation: vela-ring 3.6s ease-out infinite; }
.vela-marker:hover .vela-spark__line { stroke-width: 2.6; }
.vela-page .vela-note { margin-top: 26px; max-width: 86ch; }
.vela-note .v3-link { margin-left: 4px; }

/* ------------------------------------------------------------- your journey -- */
.vela-journey__grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.vela-journey__intro { display: grid; gap: 18px; position: sticky; top: 96px; }
.vela-callout { padding: 16px 18px; border-radius: var(--radius-sm); border: 1px solid var(--border-soft); border-left: 3px solid var(--accent-text); background: var(--surface-soft); font-size: 14.5px; line-height: 1.6; color: var(--text-secondary); }
.vela-callout strong { color: var(--text-primary); }
.vela-timeline { --p: 1; position: relative; }
.vela-timeline__rail { position: absolute; left: 11px; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: var(--border); overflow: hidden; }
.vela-timeline__fill { position: absolute; inset: 0; transform-origin: center top; transform: scaleY(var(--p, 1)); background: linear-gradient(180deg, var(--accent-text), var(--signal-cyan)); transition: transform 0.35s linear; }
.vela-timeline__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.vela-timeline__item { position: relative; margin-left: 38px; padding: 14px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border-soft); background: var(--surface); display: grid; gap: 4px; transition: opacity 0.7s var(--ease), transform 0.7s var(--ease), border-color 0.35s, box-shadow 0.45s; }
.vela-timeline__item:hover { border-color: var(--accent-line); box-shadow: var(--shadow); }
.vela-timeline__node { position: absolute; left: -33px; top: 18px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--accent-text); background: var(--bg); box-shadow: 0 0 0 5px var(--accent-soft); transition: border-color 0.5s, box-shadow 0.5s; }
.vela-timeline__item.is-current .vela-timeline__node { animation: vela-halo 3s ease-out infinite; }
.vela-timeline__kind { font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-text); }
.vela-timeline__item p { font-size: 15px; line-height: 1.55; color: var(--text-primary); }

/* -------------------------------------------------------------- your trends -- */
.vela-compare { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.6fr); gap: 16px; align-items: stretch; }
.vela-panel { --p: 1; display: grid; gap: 10px; align-content: start; padding: 20px 22px; border-radius: var(--radius); border: 1px solid var(--border-soft); background: linear-gradient(180deg, var(--surface-soft), transparent 70%), var(--surface); }
.vela-panel__head { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--text-muted); }
.vela-panel__head span:first-child { color: var(--text-primary); font-weight: 650; }
.vela-panel p { font-size: 14px; color: var(--text-secondary); line-height: 1.55; }
.vela-one, .vela-years { width: 100%; height: auto; display: block; overflow: visible; }
.vela-one { max-height: 260px; }
.vela-one__axis, .vela-years__axis { stroke: var(--border); stroke-width: 1.2; }
.vela-one__node { fill: var(--surface); stroke: var(--accent-text); stroke-width: 2.6; }
.vela-one__halo { fill: var(--accent-soft); stroke: none; transform-box: fill-box; transform-origin: center; animation: vela-breathe 4.5s ease-in-out infinite; }
.vela-years__grid line { stroke: var(--border-soft); stroke-width: 1; }
.vela-years__ghost { fill: none; stroke: var(--border); stroke-width: 1.6; stroke-dasharray: 3 6; }
.vela-years__line { fill: none; stroke: var(--accent-text); stroke-width: 2.8; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 1)); transition: stroke-dashoffset 0.35s linear; }
.vela-years__stem { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 4; }
.vela-years__halo { fill: var(--accent-soft); opacity: 0; transform-box: fill-box; transform-origin: center; }
.vela-years__node { fill: var(--surface); stroke: var(--accent-text); stroke-width: 2.4; }
.vela-years__step { font: 650 13px var(--font-ui); fill: var(--text-primary); }
.vela-years__year { font: 600 12px var(--font-ui); fill: var(--text-muted); letter-spacing: 0.06em; }
.vela-years__mark { transition: opacity 0.6s var(--ease); }
.vela-years__mark.is-current .vela-years__halo { opacity: 1; animation: vela-breathe 3.6s ease-in-out infinite; }

/* -------------------------------------------------------- your intelligence -- */
.vela-caps .v3-cap { transition: transform 0.45s var(--ease), border-color 0.35s, box-shadow 0.45s var(--ease); }
.vela-caps .v3-cap:hover { transform: translateY(-3px); border-color: var(--accent-line); box-shadow: var(--shadow); }
.vela-caps .v3-cap__icon { transition: box-shadow 0.45s var(--ease); }
.vela-caps .v3-cap:hover .v3-cap__icon { box-shadow: 0 0 0 6px var(--accent-soft); }
.vela-cap--note { background: radial-gradient(120% 140% at 100% 0%, var(--accent-soft), transparent 60%), var(--surface); border-style: dashed; border-color: var(--accent-line); }

/* ------------------------------------------------------- more valuable with time -- */
.vela-stages { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 14px; }
.vela-stage { display: grid; gap: 12px; padding: 20px; border-radius: var(--radius); border: 1px solid var(--border-soft); background: var(--surface); transition: border-color 0.35s, box-shadow 0.45s var(--ease), transform 0.45s var(--ease); }
.vela-stage:hover { border-color: var(--accent-line); box-shadow: var(--shadow); transform: translateY(-3px); }
.vela-stage p { font-size: 15.5px; color: var(--text-secondary); }
.vela-stage strong { color: var(--text-primary); font-weight: 700; }
.vela-stages__arrow { color: var(--accent-text); font-size: 20px; }
.vela-density { width: 100%; height: auto; display: block; overflow: visible; }
.vela-density__line { fill: none; stroke: var(--accent-line); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 0; }
.vela-density__dot { fill: var(--accent-text); }
.vela-principles { margin-top: clamp(28px, 4vw, 44px); }

/* reveal stagger for card rows */
.vela-page [data-reveal][style*="--d"] { transition-delay: calc(var(--d) * 90ms); }

/* ------------------------------------------- motion-only initial states -- */
.vela-motion .vela-flow__step:not(.is-on) { opacity: 0.38; transform: translateY(6px); }
.vela-motion .vela-flow__step:not(.is-on) .vela-flow__node { border-color: var(--border-strong); box-shadow: none; }
.vela-motion .vela-flow__step:not(.is-on) .vela-flow__node::after { background: transparent; }
.vela-motion .vela-timeline__item:not(.is-on) { opacity: 0.4; transform: translateX(8px); }
.vela-motion .vela-timeline__item:not(.is-on) .vela-timeline__node { border-color: var(--border-strong); box-shadow: none; }
.vela-motion .vela-years__mark:not(.is-on) { opacity: 0.18; }
.vela-motion .vela-spark__line { stroke-dashoffset: 1; }
.vela-motion .vela-spark__area { opacity: 0; }
.vela-motion .is-in .vela-spark__line { animation: vela-draw 2.4s var(--ease) forwards; animation-delay: calc(var(--d, 0) * 90ms + 0.15s); }
.vela-motion .is-in .vela-spark__area { animation: vela-show 1.4s var(--ease) forwards; animation-delay: calc(var(--d, 0) * 90ms + 1s); }
.vela-motion .vela-density__dot { opacity: 0; }
.vela-motion .vela-density__line { stroke-dashoffset: 1; }
.vela-motion .is-in .vela-density__dot { animation: vela-show 0.5s var(--ease) forwards; animation-delay: calc(var(--d, 0) * 260ms + var(--i) * 26ms); }
.vela-motion .is-in .vela-density__line { animation: vela-draw 2.6s var(--ease) forwards; animation-delay: calc(var(--d, 0) * 260ms + 0.3s); }

/* ---------------------------------------------------------------- keyframes -- */
@keyframes vela-draw { to { stroke-dashoffset: 0; } }
@keyframes vela-show { to { opacity: 1; } }
@keyframes vela-flow { from { background-position: -30% 0; } to { background-position: 130% 0; } }
@keyframes vela-ring { 0% { transform: scale(0.55); opacity: 0.6; } 80%, 100% { transform: scale(1.6); opacity: 0; } }
@keyframes vela-breathe { 0%, 100% { transform: scale(0.88); opacity: 0.55; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes vela-halo { 0% { box-shadow: 0 0 0 0 rgba(118, 191, 230, 0.55), 0 0 0 6px var(--accent-soft); } 70% { box-shadow: 0 0 0 12px rgba(118, 191, 230, 0), 0 0 0 6px var(--accent-soft); } 100% { box-shadow: 0 0 0 0 rgba(118, 191, 230, 0), 0 0 0 6px var(--accent-soft); } }
@keyframes vela-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }

/* ---------------------------------------------------------------- responsive -- */
@media (max-width: 1024px) {
  .vela-compare { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
  .vela-stages { grid-template-columns: minmax(0, 1fr); }
  .vela-stages__arrow { justify-self: center; transform: rotate(90deg); }
}
@media (max-width: 880px) {
  .vela-journey__grid { grid-template-columns: minmax(0, 1fr); }
  .vela-journey__intro { position: static; }
  .vela-compare { grid-template-columns: minmax(0, 1fr); }
  .vela-one { max-height: 180px; }
}
@media (max-width: 760px) {
  /* the five-step flow becomes a vertical timeline */
  .vela-flow__track { top: 10px; bottom: 10px; left: 9px; right: auto; width: 2px; height: auto; }
  .vela-flow__fill { transform-origin: center top; transform: scaleY(var(--p, 1)); }
  .vela-flow__fill::after { background: linear-gradient(180deg, transparent 0, rgba(255, 255, 255, 0.85) 50%, transparent 100%); background-size: 100% 22%; animation-name: vela-flow-y; }
  .vela-flow__steps { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .vela-flow__step { grid-template-columns: 20px minmax(0, 1fr); justify-items: start; text-align: left; column-gap: 16px; row-gap: 4px; }
  .vela-flow__node { grid-row: 1 / span 3; }
  .vela-flow__n { margin-top: 0; }
  .vela-flow__step p { max-width: none; }
  .vela-motion .vela-flow__step:not(.is-on) { transform: translateX(6px); }
  .vela-figure__bar { padding: 10px 14px; }
  .vela-figure__caption { padding: 12px 14px 14px; }
  .vela-figure__rail { margin: 0 14px; }
}
@keyframes vela-flow-y { from { background-position: 0 -30%; } to { background-position: 0 130%; } }

/* ------------------------------------------------------------ reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .vela-figure[data-reveal], .vela-figure[data-reveal].is-in { transform: none; }
  .vela-figure__dot, .vela-figure__hint::after, .vela-flow__fill::after, .vela-spark__ring, .vela-one__halo, .vela-years__halo,
  .vela-flow__step.is-current .vela-flow__node, .vela-timeline__item.is-current .vela-timeline__node, .vela-years__mark.is-current .vela-years__halo { animation: none !important; }
  .vela-flow__fill::after { display: none; }
  .vela-spark__ring { opacity: 0.45; }
  .vela-marker:hover, .vela-stage:hover, .vela-caps .v3-cap:hover { transform: none; }
  .vela-flow__fill, .vela-timeline__fill, .vela-years__line { transition: none; }
}