/* Infrastructure uses the site container, with larger scenes and readable copy. */
body[data-page=home] .infrastructure{
 --feature-row-width:var(--container);--feature-illustration-width:560px;
 --feature-copy-width:520px;--feature-column-gap:clamp(40px,6vw,88px);
 --infra-settle:cubic-bezier(.18,.78,.22,1);
 --infra-travel:cubic-bezier(.45,0,.2,1);
 padding-top:clamp(104px,9vw,144px);padding-bottom:104px;
}
.infrastructure .section-heading{margin-bottom:60px}
.infrastructure .feature-row{min-height:360px;margin-top:0}
body[data-page=home] .infrastructure .feature-row+.feature-row{margin-top:88px}
.infrastructure .feature-row .illustration{max-width:560px}
.infrastructure .multimodal{aspect-ratio:440/320}
/* SVG contours are authored as superellipses rather than relying on CSS border-radius. */
.infrastructure .chat-bubble>path:not(.diagram-round-rect),
.infrastructure :is(.project-panel,.orbit-solid,.orbit-dashed),
.infrastructure .orbit-node circle,.infrastructure .response-bubbles .diagram-round-rect{stroke-width:1;vector-effect:non-scaling-stroke}
.infrastructure .chat-bubble .diagram-round-rect{fill:var(--illustration-bar);stroke:none;animation:sourceBarTransfer var(--motion-duration) ease-in-out infinite}
.infrastructure .project-new-badge .diagram-round-rect{fill:var(--primary)}
.infrastructure .response-bubbles .diagram-round-rect{fill:var(--illustration-fill);stroke:var(--illustration-stroke)}
.infrastructure .response-bubbles path:not(.diagram-round-rect){stroke-width:4;stroke:var(--text-faint);stroke-linecap:round}
.infrastructure .magnifier{animation-name:infra-search;animation-timing-function:var(--infra-travel)}
.infrastructure .fragment{animation-timing-function:var(--infra-travel)}
.infrastructure .chat-bubble{animation-timing-function:var(--infra-settle)}
.infrastructure .result-memory{transform-origin:220px 141px;animation-name:infra-form;animation-timing-function:var(--infra-settle)}
.infrastructure :is(.old-project,.new-project,.new-code,.metal-shine){animation-timing-function:var(--infra-settle)}
.infrastructure .travelling-memory{animation-name:infra-transfer;animation-timing-function:var(--infra-travel)}
.infrastructure .orbit-node{animation-name:infra-node;animation-timing-function:var(--infra-settle)}
.infrastructure .center-logo{animation-timing-function:var(--infra-travel)}
.infrastructure .response-bubbles{animation-name:infra-response;animation-timing-function:var(--infra-settle)}
/* Dwell between searches; gather begins only after the final search settles. */
@keyframes infra-search{
 0%,100%{transform:translate(-20px,16px);opacity:0}
 4%{transform:translate(-20px,16px);opacity:1}
 14%,19%{transform:translate(70px,10px);opacity:1}
 29%,34%{transform:translate(8px,58px);opacity:1}
 44%,47%{transform:translate(90px,105px);opacity:1}
 54%,96%{transform:translate(90px,105px);opacity:0}
}
@keyframes infra-form{
 0%,60%{opacity:0;transform:translateY(6px) scale(.95)}
 72%,88%{opacity:1;transform:translateY(0) scale(1)}
 96%,100%{opacity:0;transform:translateY(-3px) scale(.98)}
}
/* Accelerate through the middle, then settle into the new project's position. */
@keyframes infra-transfer{
 0%,28%,100%{opacity:0;transform:translate(-92px,38px) scale(.96)}
 37%{opacity:1;transform:translate(-92px,38px) scale(1)}
 62%,66%{opacity:1;transform:translate(56px,3px) scale(1)}
 74%,94%{opacity:0;transform:translate(56px,3px) scale(.96)}
}
@keyframes infra-node{
 0%,18%,88%,100%{opacity:0;transform:scale(.75) rotate(-8deg)}
 36%{opacity:1;transform:scale(1) rotate(0)}
 50%{opacity:1;transform:scale(1.025) rotate(1.5deg)}
 64%{opacity:1;transform:scale(1) rotate(0)}
 80%{opacity:0;transform:scale(.85) rotate(8deg)}
}
@keyframes infra-response{
 0%,70%,100%{opacity:0;transform:translate(-16px,4px)}
 83%,92%{opacity:1;transform:translate(0,0)}
 98%{opacity:0;transform:translate(4px,0)}
}
@media(max-width:860px){
 body[data-page=home] .infrastructure{padding-top:88px;padding-bottom:80px}
 .infrastructure .section-heading{margin-bottom:36px}
 .infrastructure .feature-row{min-height:0}
 .infrastructure .feature-row .illustration{max-width:500px}
 body[data-page=home] .infrastructure .feature-row+.feature-row{margin-top:64px}
}
@media(max-width:540px){
 body[data-page=home] .infrastructure{padding-top:72px;padding-bottom:64px}
 .infrastructure .feature-row .illustration{max-width:400px}
}
@media(prefers-reduced-motion:reduce){
 .infrastructure .illustration *{animation:none!important}
 .infrastructure :is(.result-memory,.travelling-memory,.fragment,.response-bubbles,.magnifier){display:none}
}

/* Memory tokens share a bright graphite surface, with light confined to the panel. */
.infrastructure .memory-token-panel{
 position:relative;isolation:isolate;box-sizing:border-box;display:flex;align-items:center;justify-content:center;
 width:140px;height:46px;gap:10px;border:1px solid #ffffff45;border-radius:14px;
 corner-shape:superellipse(1.3);overflow:hidden;
 background:linear-gradient(135deg,#444 0%,#303030 48%,#242424 100%);
 color:#fff;font-family:inherit;
 box-shadow:inset 0 1px 0 #ffffff12;
}
.infrastructure .memory-token-panel::before{
 content:"";position:absolute;inset:-50% -100%;z-index:-1;pointer-events:none;
 background:linear-gradient(115deg,transparent 35%,#ffffff04 43%,#ffffff20 50%,#ffffff04 57%,transparent 65%);
 animation:infra-panel-sheen 4s cubic-bezier(.45,0,.2,1) infinite;
}
.infrastructure .memory-token-panel span{font-size:16px;font-weight:600;line-height:1}
.infrastructure .memory-token-icon{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7}
@keyframes infra-panel-sheen{from{transform:translateX(-35%)}to{transform:translateX(35%)}}