/* Mosaic polish layer. Added 30 Oct 2026. Remove the <link> and <script> tags from a page to switch it all off. */

/* 01 Headline rise: words arrive in sequence */
.mx-words .mx-w{display:inline-block;opacity:0;transform:translateY(.4em);animation:mx-rise .65s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--i) * 70ms + 120ms)}
@keyframes mx-rise{to{opacity:1;transform:none}}
h1.reveal.mx-words{opacity:1;transform:none;transition:none}

/* 02 Hero mosaic assembles tile by tile */
.mx-tile{animation:mx-tile .6s cubic-bezier(.3,1.25,.5,1) both;animation-delay:var(--mx-d,0s);transform-box:fill-box;transform-origin:center}
@keyframes mx-tile{from{opacity:0;transform:scale(.35)}to{opacity:1;transform:none}}

/* 03 Scroll reveals switched off below the fold (homepage keeps its hero entrance only) */
.reveal:not(.hero .reveal){opacity:1;transform:none}

/* 06b Pink line draws in on hover: Why Mosaic cards, AI sprint deliverables, About How we work */
.why .card,.hww .i,.group{position:relative}
.why .card::before,.hww .i::before,.group::before{content:"";position:absolute;left:0;height:3px;width:0;background:#FB0A7F;transition:width .35s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.why .card::before{top:-1px}
.hww .i::before{top:-2px}
.group::before{top:-2px}
.why .card:hover::before,.hww .i:hover::before,.group:hover::before,.group:focus-within::before{width:100%}

/* 06 Service cards: lift, pink edge draws in, arrow nudges (arrow nudge already existed) */
.cardlink::before{content:"";position:absolute;left:0;top:-16px;height:3px;width:0;background:#FB0A7F;transition:width .35s cubic-bezier(.2,.7,.2,1)}
.cardlink:hover::before,.cardlink:focus-visible::before{width:100%}
.cardlink.reveal.in{transition:opacity .7s ease,transform .3s cubic-bezier(.2,.7,.2,1)}
.cardlink.reveal.in:hover{transform:translateY(-4px)}

/* 07 Arrow links: underline draws in from the left */
.why .link,.serieslink,.more{background-image:linear-gradient(90deg,#0000FD,#FB0A7F);background-repeat:no-repeat;background-position:0 100%;background-size:0 2px;padding-bottom:4px;text-decoration:none;transition:background-size .35s cubic-bezier(.2,.7,.2,1)}
.why .link:hover,.serieslink:hover,.more:hover,.why .link:focus-visible,.serieslink:focus-visible,.more:focus-visible{background-size:100% 2px}
.ai .ailink{background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 100%;background-size:0 2px;transition:background-size .35s cubic-bezier(.2,.7,.2,1)}
.ai .ailink:hover,.ai .ailink:focus-visible{background-size:100% 2px}

/* 09 Buttons: pink sweeps across on hover */
.btn,.btn-w,.btn-g,button[type="submit"]{position:relative;isolation:isolate;overflow:hidden}
.btn::before,.btn-w::before,.btn-g::before,button[type="submit"]::before{content:"";position:absolute;inset:0;z-index:-1;background:#FB0A7F;transform:translateX(-101%);transition:transform .35s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.btn:hover::before,.btn-w:hover::before,.btn-g:hover::before,button[type="submit"]:hover:not(:disabled)::before,
.btn:focus-visible::before,.btn-w:focus-visible::before,.btn-g:focus-visible::before,button[type="submit"]:focus-visible::before{transform:none}
.btn:hover,.btn-w:hover,.btn-g:hover,button[type="submit"]:hover:not(:disabled){background-color:var(--mx-rest,transparent)!important;color:#fff!important}

/* 19 Section labels become pills with a pink dot (homepage .kick labels) */
.kick{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;letter-spacing:.12em;border:1px solid #C9D2FF;border-radius:999px;padding:6px 13px 6px 10px}
.kick::before{content:"";width:7px;height:7px;border-radius:50%;background:#FB0A7F;flex:0 0 7px}

/* JTBD stat tiles: one tile = 1,000 */
.tiles{display:flex;gap:2px;margin:0 0 9px}
.tiles i{display:block;width:6px;height:6px;background:#0000FD}
.tiles i:last-child{background:#FB0A7F}
.tiles.mx-tarm i{opacity:0}
.tiles.mx-tin i{animation:mx-pop .35s cubic-bezier(.3,1.3,.5,1) both;animation-delay:calc(var(--i) * 28ms)}
@keyframes mx-pop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .mx-words .mx-w,.mx-tile,.tiles.mx-tin i{animation:none;opacity:1;transform:none}
  .btn::before,.btn-w::before,.btn-g::before,button[type="submit"]::before,.why .card::before,.hww .i::before,.group::before{transition:none}
}