/* Services: Websites appears, the line draws to Brand, Brand appears, the line draws to Systems. Each has a tagline. */
.svx-grid{grid-template-rows:auto auto auto auto 1fr auto}
.svx-node{grid-row:span 6}
.svx-line{top:calc(3.4rem + .7rem + 54px)}
.svx-tag{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;align-content:flex-end;column-gap:.32em;row-gap:.2rem;min-height:3.4rem;font:800 clamp(1.1rem,1.65vw,1.45rem)/1.08 'Urbanist','Inter',sans-serif;letter-spacing:-.005em;text-transform:uppercase;color:#fff}
.svx-tag::after{content:"";flex-basis:100%;height:1px;margin-top:.45rem;background:linear-gradient(90deg,transparent,#fff,transparent);transform:scaleX(0);transition:transform .5s cubic-bezier(.5,0,.2,1) .35s}
.tw{display:inline-block;overflow:hidden;padding:.12em .04em .1em;margin:-.12em -.04em -.1em;vertical-align:bottom}
.tw-i{display:inline-block;will-change:transform}
.tw:last-of-type .tw-i{font-style:italic;text-shadow:2px 2px 0 rgba(255,255,255,.35)}
/* before it plays */
.svx-grid.svx-seq .svx-line{clip-path:inset(0 100% 0 0);box-shadow:0 0 12px rgba(255,255,255,.35);background:linear-gradient(90deg,rgba(255,255,255,.2),#fff 8%,#fff 92%,rgba(255,255,255,.2))}
.svx-grid.svx-seq .svx-node.reveal{opacity:1;transform:none;transition:none}
.svx-grid.svx-seq .svx-tw-ready .tw-i{transform:translateY(118%) rotate(7deg);opacity:0}
.svx-grid.svx-seq .svx-node .svx-orb{opacity:0;transform:scale(.5)}
.svx-grid.svx-seq .svx-node .svx-cat,.svx-grid.svx-seq .svx-node b,.svx-grid.svx-seq .svx-node p,.svx-grid.svx-seq .svx-node .svx-price{opacity:0;transform:translateY(12px)}
/* playing: fast */
.svx-grid.svx-seq .svx-node.on .tw-i{transform:none;opacity:1;transition:transform .42s cubic-bezier(.2,.9,.2,1) calc(var(--i)*70ms),opacity .3s ease calc(var(--i)*70ms)}
.svx-grid.svx-seq .svx-node.on .svx-tag::after{transform:scaleX(1)}
.svx-grid.svx-seq .svx-node.on .tw-i{animation:twGlow .8s ease-in-out calc(.38s + var(--i)*90ms) 1}
@keyframes twGlow{0%,100%{filter:drop-shadow(0 0 0 rgba(255,255,255,0))}45%{filter:drop-shadow(0 0 14px rgba(255,255,255,.95)) brightness(1.25)}}
.svx-grid.svx-seq .svx-node.on .svx-orb{opacity:1;transform:none;transition:opacity .35s ease .08s,transform .45s cubic-bezier(.2,1.2,.3,1) .08s,box-shadow .3s}
.svx-grid.svx-seq .svx-node.on .svx-cat,.svx-grid.svx-seq .svx-node.on b,.svx-grid.svx-seq .svx-node.on p,.svx-grid.svx-seq .svx-node.on .svx-price{opacity:1;transform:none;transition:opacity .38s ease,transform .4s cubic-bezier(.2,.9,.2,1)}
.svx-grid.svx-seq .svx-node.on .svx-cat{transition-delay:.16s}
.svx-grid.svx-seq .svx-node.on b{transition-delay:.22s}
.svx-grid.svx-seq .svx-node.on p{transition-delay:.3s}
.svx-grid.svx-seq .svx-node.on .svx-price{transition-delay:.38s}
@media(max-width:900px){
  .svx-line{top:auto}
  .svx-node{grid-template-areas:"orb tag" "orb cat" "orb name" "orb desc" "orb price"}
  .svx-grid>.svx-node:nth-child(3){grid-template-areas:"tag orb" "cat orb" "name orb" "desc orb" "price orb"}
  .svx-tag{grid-area:tag;min-height:0;justify-content:flex-start;font-size:1.25rem}
  .svx-tag::after{background:linear-gradient(90deg,#fff,transparent);transform-origin:left}
  .svx-grid>.svx-node:nth-child(3) .svx-tag{justify-content:flex-end}
  .svx-grid>.svx-node:nth-child(3) .svx-tag::after{background:linear-gradient(270deg,#fff,transparent);transform-origin:right}
  .svx-grid.svx-seq .svx-node:not(:last-child)::after{opacity:0;transition:opacity .5s ease .25s}
  .svx-grid.svx-seq .svx-node.on:not(:last-child)::after{opacity:1}
}
@media(prefers-reduced-motion:reduce){
  .svx-grid.svx-seq .svx-line{clip-path:none}
  .svx-tag::after{transform:none}
  .svx-grid.svx-seq .svx-tw-ready .tw-i,.svx-grid.svx-seq .svx-node .svx-orb,.svx-grid.svx-seq .svx-node .svx-cat,.svx-grid.svx-seq .svx-node b,.svx-grid.svx-seq .svx-node p,.svx-grid.svx-seq .svx-node .svx-price{opacity:1;transform:none}
}