/* AIA-LIFECYCLE-V2 2026-09-02 — Cresta AI Agent page, "A disciplined lifecycle" section.
   Adds interactive rotator: SVG nodes are triggers, center stage cycles stage cards (7s intro / 7s rotate).
   Behavior + copy ported from live cresta.com/ai-agent lifecycle component.
   Upload to: https://website-assets.cresta.com/ai-agent/lifecycle/aia-lifecycle.css
   Cache-Control: public, max-age=300 (non-immutable per cache convention — safe to overwrite same URL).
   Class convention: aia-lifecycle- prefix. JS hooks via data-aia-lifecycle-* attributes only.
   DM Sans assumed loaded site-wide (see README). */

.aia-lifecycle-root { width: 100%; max-width: 1440px; margin: 0 auto; box-sizing: border-box; padding: clamp(24px,3vw,40px) clamp(20px,5.5vw,80px); font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif; }

.aia-lifecycle-card { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); align-items: center; gap: clamp(32px,5vw,72px); box-sizing: border-box; padding: clamp(32px,4vw,56px); border-radius: 16px; background-color: #242B4C; background-image: radial-gradient(90% 70% at 64% 4%, rgba(196,203,235,.85) 0%, rgba(150,160,205,0) 46%), radial-gradient(70% 60% at 6% 62%, rgba(140,152,200,.55) 0%, rgba(140,152,200,0) 58%), linear-gradient(155deg, #2C3358 0%, #1F2542 52%, #3B4472 100%); }

.aia-lifecycle-diagram { position: relative; width: 100%; }
.aia-lifecycle-svg { display: block; width: 100%; overflow: visible; }

/* --- node triggers --- */
.aia-lifecycle-node { cursor: pointer; outline: none; }
.aia-lifecycle-node .aia-lifecycle-node-circle { transition: fill .2s ease, stroke .2s ease; stroke: rgba(255,255,255,0); stroke-width: 0; }
.aia-lifecycle-node:hover .aia-lifecycle-node-circle,
.aia-lifecycle-node:focus-visible .aia-lifecycle-node-circle { stroke: rgba(255,255,255,.28); stroke-width: 8; }
.aia-lifecycle-node.is-active .aia-lifecycle-node-circle { fill: #FFFFFF; stroke: rgba(255,255,255,0); }
.aia-lifecycle-node.is-active .aia-lifecycle-node-icon path { fill: #4B57A5; }

/* --- center stage (intro -> rotating detail card) --- */
.aia-lifecycle-stage { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; pointer-events: none; }
.aia-lifecycle-intro { position: absolute; max-width: 46%; text-align: center; font-size: clamp(18px,2.1vw,30px); font-weight: 400; letter-spacing: -0.01em; line-height: 1.2; color: #FFFFFF; opacity: 1; transition: opacity .35s ease, transform .35s ease; }
.aia-lifecycle-detail { position: absolute; width: 46%; max-width: 240px; display: flex; flex-flow: column; justify-content: flex-start; align-items: center; gap: 12px; text-align: center; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; }
.aia-lifecycle-detail-title { font-size: clamp(18px,2vw,28px); font-weight: 700; line-height: 1.1; color: #FFFFFF; }
.aia-lifecycle-detail-text { font-size: clamp(12px,1.05vw,15px); font-weight: 400; line-height: 150%; color: rgba(255,255,255,.82); }
.aia-lifecycle-learn { pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 8px 16px; border-radius: 999px; background: #FFFFFF; color: #205AE3; font-size: 14px; font-weight: 500; line-height: 1; text-decoration: none; transition: background .2s ease; }
.aia-lifecycle-learn:hover { background: #E8ECFA; }
.aia-lifecycle-learn svg { display: block; }
.aia-lifecycle-stage.is-detail .aia-lifecycle-intro { opacity: 0; pointer-events: none; }
.aia-lifecycle-stage.is-detail .aia-lifecycle-detail { pointer-events: auto; }
.aia-lifecycle-detail > * { pointer-events: auto; }

.aia-lifecycle-copy { display: flex; flex-direction: column; gap: 32px; max-width: 520px; }
.aia-lifecycle-title { margin: 0; font-size: clamp(32px,4.4vw,46px); font-weight: 500; line-height: 115%; letter-spacing: -0.03em; color: #FFFFFF; text-wrap: pretty; }
.aia-lifecycle-body { margin: 0; font-size: 16px; font-weight: 400; line-height: 150%; color: rgba(255,255,255,.82); text-wrap: pretty; }

/* --- data store + mobile cards hidden on desktop --- */
.aia-lifecycle-data, .aia-lifecycle-mobile { display: none; }

@media (max-width: 900px) {
  .aia-lifecycle-card { grid-template-columns: minmax(0,1fr); gap: 40px; padding: 32px 24px 40px; }
}

@media (max-width: 767px) {
  .aia-lifecycle-diagram { display: none; }
  .aia-lifecycle-mobile { display: flex; flex-flow: column; gap: 16px; }
  .aia-lifecycle-mcard { display: flex; flex-flow: column; align-items: flex-start; gap: 12px; background: #FFFFFF; color: #1A1A1A; border-radius: 16px; padding: 20px; }
  .aia-lifecycle-mcard-icon { display: flex; }
  .aia-lifecycle-mcard-title { font-size: 20px; font-weight: 700; line-height: 1.2; color: #1A1A1A; }
  .aia-lifecycle-mcard-text { margin: 0; font-size: 15px; line-height: 150%; color: rgba(26,26,26,.78); }
  .aia-lifecycle-mcard-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 8px 16px; border-radius: 999px; background: #205AE3; color: #FFFFFF; font-size: 14px; font-weight: 500; line-height: 1; text-decoration: none; }
  .aia-lifecycle-mcard-link:hover { background: #1A49BC; }
}

@media (max-width: 720px) {
  .aia-lifecycle-title { font-size: 32px; }
}