/* LayerBuilt shared motion: scroll progress, staggered reveals, floating layers, live widgets */
.sprog{position:fixed;top:0;inset-inline-start:0;height:3px;width:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--teal),var(--violet),var(--clay));z-index:200;pointer-events:none}
[dir=rtl] .sprog{transform-origin:right}

/* stagger: children of .stg reveal one after another */
.stg>*{opacity:0;transform:translateY(22px) scale(.98);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0) * 90ms)}
.stg.on>*{opacity:1;transform:none}

/* floating layer bars behind page heroes */
.phero{position:relative;overflow:hidden}
.floaty{position:absolute;inset:0;pointer-events:none;z-index:0}
.phero .wrap{position:relative;z-index:1}
.floaty i{position:absolute;height:14px;border-radius:9px;opacity:.5;animation:fl 9s ease-in-out infinite}
.floaty i:nth-child(1){width:150px;background:#12C9A0;top:22%;inset-inline-end:8%}
.floaty i:nth-child(2){width:110px;background:#5BA3E8;top:36%;inset-inline-end:16%;animation-delay:-2s}
.floaty i:nth-child(3){width:190px;background:#6D5BFF;top:50%;inset-inline-end:5%;animation-delay:-4s;opacity:.35}
.floaty i:nth-child(4){width:70px;background:#FFD84D;top:66%;inset-inline-end:20%;animation-delay:-6s}
.floaty b{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--clay);top:30%;inset-inline-end:27%;animation:fl 7s ease-in-out infinite;box-shadow:0 0 0 6px rgba(216,105,63,.15)}
@keyframes fl{0%,100%{transform:translate(0,0) rotate(-4deg)}50%{transform:translate(-18px,-14px) rotate(3deg)}}
@media (max-width:900px){.floaty{opacity:.35}}

/* layer stack that builds itself (services hero) */
.stack{position:absolute;inset-inline-end:4%;top:50%;transform:translateY(-50%);width:300px;display:flex;flex-direction:column;gap:10px;z-index:1}
.stack div{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 16px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:0 10px 24px rgba(60,40,15,.08);font:600 .9rem var(--head);opacity:0;transform:translateY(-30px);animation:drop 6.5s cubic-bezier(.2,.8,.2,1) infinite;animation-delay:calc(var(--i) * 450ms)}
.stack div i{width:10px;height:10px;border-radius:50%;background:var(--c)}
.stack div:nth-child(1){margin-inline:40px}.stack div:nth-child(2){margin-inline:30px}.stack div:nth-child(3){margin-inline:20px}.stack div:nth-child(4){margin-inline:10px}
@keyframes drop{0%{opacity:0;transform:translateY(-30px)}10%,80%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(10px)}}
@media (max-width:1100px){.stack{display:none}}

/* live feed: newest item slides in on top */
[data-feed]>*{transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .5s}
[data-feed]>.new{animation:feedin .6s cubic-bezier(.2,.8,.2,1)}
@keyframes feedin{from{opacity:0;transform:translateY(-14px) scale(.96);background:#FFF6D6}}

/* cycle: one child highlighted at a time */
[data-cycle]>*{transition:background .4s,color .4s,transform .4s,box-shadow .4s}
[data-cycle]>.act{background:var(--teal)!important;color:#fff!important;transform:scale(1.04);box-shadow:0 6px 16px rgba(18,201,160,.35)}

/* sequence: children appear one by one, then the loop restarts */
[data-seq]>*{opacity:0;transform:translateY(8px);transition:opacity .45s,transform .45s}
[data-seq]>.sh-on{opacity:1;transform:none}

/* terminal */
.term{width:100%;max-width:400px;background:#1F1A14;color:#E9DCC8;border-radius:14px;padding:16px 18px;font:500 .8rem/1.8 'JetBrains Mono',ui-monospace,monospace;direction:ltr;text-align:left;box-shadow:0 18px 40px rgba(60,40,15,.25)}
.term .ok{color:#3EE6BC}.term .dim{color:#8C7A64}.term .y{color:#FFD84D}
.term-top{display:flex;gap:6px;margin-bottom:8px}.term-top i{width:9px;height:9px;border-radius:50%;background:#4A3F33}

/* tilt cards */
.tilt3d{transition:transform .25s ease,box-shadow .25s;transform-style:preserve-3d;will-change:transform}

/* pulse dot */
.pulse{display:inline-block;width:8px;height:8px;border-radius:50%;background:#12C9A0;box-shadow:0 0 0 0 rgba(18,201,160,.6);animation:pls 1.8s infinite;vertical-align:middle}
@keyframes pls{70%{box-shadow:0 0 0 9px rgba(18,201,160,0)}100%{box-shadow:0 0 0 0 rgba(18,201,160,0)}}

@media (prefers-reduced-motion:reduce){.stg>*,[data-seq]>*{opacity:1;transform:none}.stack div{opacity:1;transform:none}.sprog{display:none}}