/* Evolution page (Figma node 577:249 "Page · Evolution"). 1440px canvas, scaled by fit.js.
   Nav, type helpers, closing and footer come from styles.css and features.css. */
.page--evo { gap: 0; overflow: clip; }
.page--evo > section { flex-shrink: 0; }

/* Image crops from the Figma fills (shared by the lineup cards and the timeline photos) */
.crop { position: absolute; max-width: none; }
.crop--v2 { left: -45.33%; top: -22.74%; width: 228.65%; height: 145.6%; }
.crop--v3 { left: -36.44%; top: -17.42%; width: 211.39%; height: 134.61%; }
.crop--v5 { left: -2.32%;  top: .32%;    width: 104.64%; height: 104.76%; }
.crop--v6 { left: -4.53%;  top: -4.43%;  width: 108.8%;  height: 108.93%; }

/* ───────── 01 Hero ───────── */
.ehero { position: relative; height: 900px; margin-top: 3px; }
.ehero__label { position: absolute; left: 64px; top: 92px; }
.ehero__title { position: absolute; left: 64px; top: 124px; width: 900px; }
.ehero__lead { position: absolute; left: 64px; top: 316px; width: 600px; }
.lineup { position: absolute; left: 64px; top: 470px; margin: 0; padding: 0; list-style: none; display: flex; gap: 18px; }
.lineup li { width: 172px; }
.lineup a { display: flex; flex-direction: column; }
.lineup__img { position: relative; display: block; height: 246px; border-radius: 16px; overflow: hidden; }
.lineup__img img { transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.lineup a:hover .lineup__img img { transform: scale(1.04); }
.lineup__v { margin-top: 16px; font-weight: 500; font-size: 16px; line-height: 1.5; letter-spacing: -0.48px; color: var(--ink); transition: color .2s; }
.lineup a:hover .lineup__v { color: #db9466; }
.lineup__name { margin-top: 2px; width: 168px; font-size: 14px; line-height: 1.5; letter-spacing: -0.42px; color: #9c958a; }

/* ───────── 02 Timeline ───────── */
.etime { position: relative; height: 3960px; margin-top: 120px; }
.etime__line { position: absolute; left: 720px; top: 40px; width: 1px; height: 3840px; background: #262421; }
.etime__line i { position: absolute; inset: 0; background: var(--accent); transform-origin: top; transform: scaleY(0); opacity: 0; }
.ever { position: absolute; left: 0; top: calc(var(--k) * 560px); width: 1440px; height: 480px; }
.ever__photo { position: absolute; left: 280px; top: 0; width: 360px; height: 480px; border-radius: 24px; overflow: hidden; }
.ever__photo--mirror img { transform: scaleX(-1); }
.ever__dot { position: absolute; left: 710px; top: 228px; }
.ever__text { position: absolute; left: 800px; top: 150px; width: 420px; display: flex; flex-direction: column; }
.ever__v { font-family: var(--f-display); font-size: 56px; line-height: 1.04; letter-spacing: -2.24px; color: var(--accent); }
.ever__text .t-h3 { margin-top: 12px; }
.ever__text .t-bodyL { margin-top: 12px; }
.ever__date { margin-top: 28px; }
.ever--flip .ever__photo { left: 800px; }
.ever--flip .ever__text { left: 240px; width: 400px; text-align: right; }

/* ───────── 03 Today ───────── */
.etoday { position: relative; height: 720px; margin-top: 80px; }
.etoday__dot { position: absolute; left: 712px; top: 0; }
.etoday__label { position: absolute; left: 0; top: 40px; width: 1440px; text-align: center; }
.etoday__title { position: absolute; left: 0; top: 72px; width: 1440px; text-align: center; font-family: var(--f-display); font-size: 56px; line-height: 1.04; letter-spacing: -2.24px; color: var(--ink); }
.etoday__lead { position: absolute; left: 370px; top: 150px; width: 700px; text-align: center; }
.etoday__img { position: absolute; top: 260px; height: 460px; border-radius: 24px; overflow: hidden; }
.etoday__img--cam { left: 64px; width: 832px; }
.etoday__img--tara { left: 920px; width: 456px; }

/* ───────── 04 What seven versions taught us ───────── */
.elearn { position: relative; height: 360px; margin-top: 180px; padding: 0 64px; }
.elearn__title { width: 900px; font-family: var(--f-display); font-size: 56px; line-height: 1.04; letter-spacing: -2.24px; color: var(--ink); }
.elearn__cols { position: absolute; left: 64px; top: 110px; display: flex; gap: 48px; }
.elearn__col { width: 400px; padding-top: 27px; border-top: 1px solid #262421; }
.elearn__col .t-bodyL { margin-top: 16px; }

.page--evo > .closing-wrap { margin-top: 120px; }

/* ───────── Motion (only with html.motion; see evolution.js) ───────── */
.motion .etime__line i { opacity: 1; }
.motion .ever__dot { transition: transform .6s cubic-bezier(.34, 1.56, .64, 1), opacity .4s ease; }
.motion .ever:not(.is-reached) .ever__dot { transform: scale(0); opacity: 0; }
/* Version numbers stay dim until the line reaches them (keeps the reveal transition too) */
.motion .ever__v[data-reveal] {
  transition: opacity 1s var(--ease), transform 1.1s var(--ease), color .5s ease;
  transition-delay: var(--d, 0ms), var(--d, 0ms), 0s;
}
.motion .ever:not(.is-reached) .ever__v { color: #5c564e; }
/* "Today" dot sends out a slow ping */
@keyframes evo-ping { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(2.6); opacity: 0; } }
.motion .etoday__ping { position: absolute; left: 712px; top: 0; width: 17px; height: 17px; border-radius: 50%; background: var(--accent); animation: evo-ping 2.4s ease-out infinite; pointer-events: none; }