/* Capital Stacks — pictogram tiles. Pure CSS shapes positioned in a square tile.
   Use the <Pictogram> component, or the raw markup: <span class="cs-tile"><span class="head"></span>…</span>.
   Hover animation fires on the tile itself or on any ancestor with .cs-hover. */
.cs-tile { position: relative; display: block; aspect-ratio: 1; overflow: hidden; flex: none }
.cs-tile > span { position: absolute }
.cs-tile .head   { left: 31%; top: 13%; width: 38%; aspect-ratio: 1; border-radius: 50% }
.cs-tile .body   { left: 12%; bottom: -2%; width: 76%; height: 40%; border-radius: 50% 50% 0 0 / 100% 100% 0 0; transform-origin: 50% 100% }
.cs-tile .pie    { inset: 16%; border-radius: 50% }
.cs-tile .arrow  { inset: 14% 16%; clip-path: polygon(50% 0,100% 100%,50% 70%,0 100%) }
.cs-tile .arrow-right { inset: 14% 16%; clip-path: polygon(0 0,100% 50%,0 100%,30% 50%) }
.cs-tile .chevron{ inset: 16% 14%; clip-path: polygon(0 0,50% 32%,100% 0,50% 100%) }
.cs-tile .sun    { left: 16%; top: 16%; width: 26%; aspect-ratio: 1; border-radius: 50% }
.cs-tile .planet { right: 12%; bottom: 14%; width: 52%; aspect-ratio: 1; border-radius: 50% }
.cs-tile .big    { left: 38%; top: 38%; width: 50%; aspect-ratio: 1; border-radius: 50% }
.cs-tile .small  { left: 16%; top: 16%; width: 24%; aspect-ratio: 1; border-radius: 50% }
.cs-tile .ring   { inset: 16%; border-radius: 50% }
.cs-tile .ring2  { inset: 30%; border-radius: 50% }
.cs-tile .core   { inset: 42%; border-radius: 50% }
.cs-tile .star   { inset: 12%; clip-path: polygon(50% 0,55% 45%,100% 50%,55% 55%,50% 100%,45% 55%,0 50%,45% 45%) }
.cs-tile .eye    { left: 10%; top: 30%; width: 80%; height: 40%; border-radius: 50% }
.cs-tile .iris   { left: 36%; top: 36%; width: 28%; aspect-ratio: 1; border-radius: 50% }
.cs-tile .pupil  { left: 44%; top: 44%; width: 12%; aspect-ratio: 1; border-radius: 50% }
.cs-tile .bars   { inset: 12% 14%; display: flex; flex-direction: column; justify-content: flex-end; gap: 9%; background: transparent !important }
.cs-tile .bars i { display: block; height: 16%; width: 100%; flex: none; transform-origin: 50% 100% }
.cs-tile .bars i:nth-child(1) { width: 55%; margin-left: 45% }
.cs-tile .bars i:nth-child(2) { width: 78%; margin-left: 22% }
.cs-tile .road   { inset: 0; clip-path: polygon(36% 0,64% 0,100% 100%,0 100%) }
.cs-tile .dash   { left: 46%; width: 8%; height: 14% }
.cs-tile .dash1 { top: 6% } .cs-tile .dash2 { top: 36% } .cs-tile .dash3 { top: 68% }
.cs-tile .env    { left: 12%; top: 24%; width: 76%; height: 52% }
.cs-tile .flap   { left: 12%; top: 24%; width: 76%; height: 52%; clip-path: polygon(0 0,100% 0,50% 58%); transform-origin: 50% 0 }
.cs-tile > span { will-change: transform }

@keyframes cs-nod     { 0%,100%{transform:translateY(0)} 30%{transform:translateY(9%)} 65%{transform:translateY(-4%)} }
@keyframes cs-squash  { 0%,100%{transform:scaleY(1)} 30%{transform:scaleY(.9)} }
@keyframes cs-spin    { to{transform:rotate(360deg)} }
@keyframes cs-shoot   { 0%,100%{transform:translateY(0)} 40%{transform:translateY(-18%)} 70%{transform:translateY(6%)} }
@keyframes cs-dash    { 0%,100%{transform:translateX(0)} 40%{transform:translateX(18%)} 70%{transform:translateX(-6%)} }
@keyframes cs-twinkle { 0%,100%{transform:rotate(0) scale(1)} 50%{transform:rotate(72deg) scale(1.18)} }
@keyframes cs-blink   { 0%,18%,42%,100%{transform:scaleY(1)} 9%,33%{transform:scaleY(.06)} }
@keyframes cs-grow    { 0%{transform:scaleY(.2)} 60%{transform:scaleY(1.12)} 100%{transform:scaleY(1)} }
@keyframes cs-rise    { 0%,100%{transform:translate(0,0)} 50%{transform:translate(8%,-22%)} }
@keyframes cs-wobble  { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-5%,5%)} }
@keyframes cs-pulse   { 0%,100%{transform:scale(1)} 50%{transform:scale(1.2)} }
@keyframes cs-drive   { from{transform:translateY(-30%)} to{transform:translateY(30%)} }
@keyframes cs-open    { 0%,100%{transform:scaleY(1)} 50%{transform:scaleY(-1)} }

.cs-tile:hover .head,   .cs-hover:hover .cs-tile .head   { animation: cs-nod .7s ease }
.cs-tile:hover .body,   .cs-hover:hover .cs-tile .body   { animation: cs-squash .7s ease }
.cs-tile:hover .pie,    .cs-hover:hover .cs-tile .pie    { animation: cs-spin .9s ease }
.cs-tile:hover .arrow,  .cs-hover:hover .cs-tile .arrow  { animation: cs-shoot .6s ease }
.cs-tile:hover .arrow-right, .cs-hover:hover .cs-tile .arrow-right { animation: cs-dash .6s ease }
.cs-tile:hover .chevron,.cs-hover:hover .cs-tile .chevron{ animation: cs-shoot .6s ease }
.cs-tile:hover .sun,    .cs-hover:hover .cs-tile .sun,
.cs-tile:hover .planet, .cs-hover:hover .cs-tile .planet { animation: cs-twinkle .8s ease }
.cs-tile:hover .star,   .cs-hover:hover .cs-tile .star   { animation: cs-twinkle .8s ease }
.cs-tile:hover .eye, .cs-tile:hover .iris, .cs-tile:hover .pupil,
.cs-hover:hover .cs-tile .eye, .cs-hover:hover .cs-tile .iris, .cs-hover:hover .cs-tile .pupil { animation: cs-blink 1s ease }
.cs-tile:hover .bars i, .cs-hover:hover .cs-tile .bars i { animation: cs-grow .6s ease }
.cs-tile:hover .bars i:nth-child(2), .cs-hover:hover .cs-tile .bars i:nth-child(2) { animation-delay: .08s }
.cs-tile:hover .bars i:nth-child(3), .cs-hover:hover .cs-tile .bars i:nth-child(3) { animation-delay: .16s }
.cs-tile:hover .small,  .cs-hover:hover .cs-tile .small  { animation: cs-rise .8s ease }
.cs-tile:hover .big,    .cs-hover:hover .cs-tile .big    { animation: cs-wobble .8s ease }
.cs-tile:hover .ring,   .cs-hover:hover .cs-tile .ring   { animation: cs-pulse .8s ease }
.cs-tile:hover .ring2,  .cs-hover:hover .cs-tile .ring2  { animation: cs-pulse .8s ease .1s }
.cs-tile:hover .core,   .cs-hover:hover .cs-tile .core   { animation: cs-pulse .8s ease .2s }
.cs-tile:hover .dash,   .cs-hover:hover .cs-tile .dash   { animation: cs-drive .6s linear infinite }
.cs-tile:hover .flap,   .cs-hover:hover .cs-tile .flap   { animation: cs-open 1s ease }
.cs-tile.is-outlined { outline: 1.5px solid var(--cs-ink); outline-offset: 0 }
@media (prefers-reduced-motion: reduce) { .cs-tile * { animation: none !important } }