/* Small animations beside the layer texts (Adam, 2026-11-06; drawn by Cara's
   ~/base/agents/team/cara-wells/work/stratara-site/layer-anims.py). Each is inline SVG in its caption,
   so it restarts whenever its layer is chosen. Without motion they rest in their finished state. */
.layer-anim-defs{position:absolute;width:0;height:0;overflow:hidden}
.strata-annotation{max-width:820px}
.stratum-caption{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:36px;align-items:center}
.stratum-caption[hidden]{display:none}
.layer-anim{display:block;width:100%;height:auto;overflow:visible}
@media(min-width:801px){.strata-section .strata-sticky{row-gap:18px}}
@media(max-width:1179px){.stratum-caption{grid-template-columns:minmax(0,1fr);gap:14px}.layer-anim{max-width:300px}}
@media(max-width:800px){.stratum-caption{gap:8px;justify-items:center}.caption-text{min-height:114px;display:flex;flex-direction:column;justify-content:center}.layer-anim{max-width:260px}}

/* shared parts */
.la-text{font:500 11.5px var(--sans);fill:#5b625e;letter-spacing:.01em}
.la-line{fill:none;stroke:#dccba7;stroke-width:1.2;stroke-linecap:round}
.la-flow{fill:none;stroke:#c8913a;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:14 100;stroke-dashoffset:-100;filter:url(#la-glow)}
.la-node{fill:#fff;stroke:#d6b77d;stroke-width:1.2}
.la-icon{fill:none;stroke:#46525a;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.la-thin{stroke:#6b7570;stroke-width:1.3}
.la-ochre{stroke:#a87a2c;stroke-width:2}
.la-glyph{fill:none;stroke-width:1.6;stroke-linejoin:round}
.la-tile-top{stroke:#2c3034;stroke-opacity:.08;stroke-width:.8}
.la-shine{opacity:0;pointer-events:none}
.la-ui{fill:none;stroke:#d3d8d4;stroke-width:4;stroke-linecap:round}
.la-ui-o{stroke:#e5c992}

/* 1 · different models, each on its job, join in one result */
.anim-1 .a1-flow{animation:la1-flow 6s infinite both}
.anim-1 .a1-card{animation:la1-card 6s infinite both}
.anim-1 .a1-out{animation:la1-out 6s infinite both}
.anim-1 .a1-fill{transform-box:fill-box;transform-origin:left center;animation:la1-fill 6s infinite both}
@keyframes la1-flow{0%{stroke-dashoffset:14}22%,100%{stroke-dashoffset:-100}}
@keyframes la1-card{0%,100%{stroke:var(--s)}4%,16%{stroke:#c8913a}26%{stroke:var(--s)}}
@keyframes la1-out{0%,18%{stroke:#e2ddd1}26%,84%{stroke:#d9b87a}96%,100%{stroke:#e2ddd1}}
@keyframes la1-fill{0%,20%{transform:scaleX(0)}30%,88%{transform:scaleX(1)}96%,100%{transform:scaleX(0)}}

/* 2 · a team passes the work along */
.anim-2 .a2-flow{animation:la2-flow 5s linear infinite both}
.anim-2 .a2-lift{animation:la2-lift 5s infinite both}
.anim-2 .a2-lift .la-shine{animation:la2-shine 5s infinite both;animation-delay:inherit}
.anim-2 .a2-fill{transform-box:fill-box;transform-origin:left center;animation:la2-fill 5s infinite both}
@keyframes la2-flow{0%{stroke-dashoffset:14}60%,100%{stroke-dashoffset:-100}}
@keyframes la2-lift{0%{transform:translateY(0)}6%,14%{transform:translateY(-5px)}24%,100%{transform:translateY(0)}}
@keyframes la2-shine{0%{opacity:0}6%,14%{opacity:.45}24%,100%{opacity:0}}
@keyframes la2-fill{0%,58%{transform:scaleX(0)}66%,92%{transform:scaleX(1)}98%,100%{transform:scaleX(0)}}

/* 3 · for each step, a few things are picked into a fresh brief */
.anim-3 .a3-src{animation:la3-src 6s infinite both}
.anim-3 .a3-src-b{animation-delay:3s}
.anim-3 .a3-brief{animation:la3-brief 6s infinite both}
.anim-3 .a3-fly{animation:la3-fly 6s infinite both}
.anim-3 .a3-agent{animation:la3-agent 6s infinite both}
.anim-3 .a3-agent .la-shine{animation:la3-shine 6s infinite both}
@keyframes la3-src{0%,100%{stroke:#d9d4c7}3%,22%{stroke:#c8913a}30%{stroke:#d9d4c7}}
@keyframes la3-brief{0%{transform:none;opacity:0}4%,24%{transform:none;opacity:1}38%,100%{transform:translateX(62px);opacity:0}}
@keyframes la3-fly{0%,6%{transform:translate(var(--dx),var(--dy));opacity:0}9%{opacity:1}22%,100%{transform:none;opacity:1}}
@keyframes la3-agent{0%,34%,44%,84%,94%,100%{transform:none}38%,88%{transform:translateY(-4px)}}
@keyframes la3-shine{0%,34%,46%,84%,96%,100%{opacity:0}38%,88%{opacity:.5}}

/* 4 · the product comes first; its rules and steps follow from it */
.anim-4 .a4-phone{animation:la4-phone 6s infinite both}
.anim-4 .a4-draw{stroke-dasharray:100;animation:la4-draw 6s infinite both}
.anim-4 .a4-node{transform-box:fill-box;transform-origin:center;animation:la4-node 6s infinite both}
@keyframes la4-phone{0%,100%{stroke:#cfd3cc}2%,10%{stroke:#c8913a}18%{stroke:#cfd3cc}}
@keyframes la4-draw{0%{stroke-dashoffset:100}6%,86%{stroke-dashoffset:0}94%,100%{stroke-dashoffset:100}}
@keyframes la4-node{0%{opacity:0;transform:scale(.7)}6%,86%{opacity:1;transform:scale(1)}94%,100%{opacity:0;transform:scale(.9)}}

/* 5 · each layer feeds a part of the character */
.anim-5 .a5-flow{animation:la5-flow 7s infinite both}
.anim-5 .a5-arc{fill:none;stroke:#c8913a;stroke-width:3;stroke-linecap:round;stroke-dasharray:100;animation:la5-arc 7s infinite both}
.anim-5 .a5-pill rect{animation:la5-pill 7s infinite both;animation-delay:inherit}
.anim-5 .a5-face{animation:la5-face 7s infinite both;animation-delay:3.6s}
@keyframes la5-flow{0%{stroke-dashoffset:14}9%,100%{stroke-dashoffset:-100}}
@keyframes la5-arc{0%{stroke-dashoffset:100}8%,84%{stroke-dashoffset:0}94%,100%{stroke-dashoffset:100}}
@keyframes la5-pill{0%,100%{stroke:#ddd6c8}2%,10%{stroke:#c8913a}16%{stroke:#ddd6c8}}
@keyframes la5-face{0%{stroke:#ddd3c0}8%,30%{stroke:#c8913a}44%,100%{stroke:#ddd3c0}}

/* 6 · the polished surface lifts to show what holds it up */
.anim-6 .a6-crust{animation:la6-crust 6s ease-in-out infinite both}
.anim-6 .a6-layer .la-shine{animation:la6-shine 6s infinite both;animation-delay:inherit}
@keyframes la6-crust{0%,14%{transform:translateY(0)}28%,62%{transform:translateY(-34px)}78%,100%{transform:translateY(0)}}
@keyframes la6-shine{0%{opacity:0}5%,15%{opacity:.5}30%,100%{opacity:0}}

.anims-paused .layer-anim *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.layer-anim *{animation:none!important}}