/* Tessel motion: calm, Creaze-branded (blue, gold, swoosh). Switched off by prefers-reduced-motion. */
@keyframes mFadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes mPop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
@keyframes mSwoosh{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes mSpin{to{transform:rotate(360deg)}}
@keyframes mPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.12);opacity:.85}}
@keyframes mSheetIn{from{opacity:.35;transform:translateY(6px) scale(.992)}to{opacity:1;transform:none}}
@keyframes mCard{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes mDrop{0%{opacity:0;transform:translateY(-14px) scale(.9)}100%{opacity:1;transform:none}}
@keyframes mGlow{0%,100%{box-shadow:0 0 0 0 rgba(231,190,67,.0)}50%{box-shadow:0 0 0 6px rgba(231,190,67,.28)}}
/* landing: hero entrance, gold swoosh under the headline, cards dropping onto the sheet */
html.m-on .t-hero .t-eyebrow,html.m-on .t-hero h1,html.m-on .t-hero>div>p,html.m-on .t-hero .t-cta,html.m-on .t-hero .t-fine{animation:mFadeUp .7s cubic-bezier(.2,.8,.2,1) both}
html.m-on .t-hero h1{animation-delay:.08s}html.m-on .t-hero>div>p{animation-delay:.18s}html.m-on .t-hero .t-cta{animation-delay:.28s}html.m-on .t-hero .t-fine{animation-delay:.36s}
.t-hero h1 em{position:relative;font-style:normal;white-space:nowrap}
.t-hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:-.34em;height:.42em;background:url(/assets/swoosh-gold.svg) no-repeat left center/100% 100%;pointer-events:none}
html.m-on .t-hero h1 em::after{animation:mSwoosh .9s .5s cubic-bezier(.3,.7,.2,1) both}
html.m-on .t-sheet svg rect{transform-box:fill-box;transform-origin:center;animation:mDrop .5s both}
html.m-on .t-sheet svg rect:nth-child(n+2){animation-delay:calc(var(--i,0) * 40ms + .2s)}
html.m-on .t-sheet svg rect:nth-child(2){--i:1}html.m-on .t-sheet svg rect:nth-child(3){--i:2}html.m-on .t-sheet svg rect:nth-child(4){--i:3}html.m-on .t-sheet svg rect:nth-child(5){--i:4}html.m-on .t-sheet svg rect:nth-child(6){--i:5}html.m-on .t-sheet svg rect:nth-child(7){--i:6}html.m-on .t-sheet svg rect:nth-child(8){--i:7}html.m-on .t-sheet svg rect:nth-child(9){--i:8}html.m-on .t-sheet svg rect:nth-child(10){--i:9}html.m-on .t-sheet svg rect:nth-child(11){--i:10}html.m-on .t-sheet svg rect:nth-child(12){--i:11}html.m-on .t-sheet svg rect:nth-child(13){--i:12}html.m-on .t-sheet svg rect:nth-child(14){--i:13}html.m-on .t-sheet svg rect:nth-child(15){--i:14}html.m-on .t-sheet svg rect:nth-child(n+16){--i:15}
/* scroll reveal */
html.m-on .m-rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}html.m-on .m-rv.m-in{opacity:1;transform:none}
/* buttons and chips */
.t-btn,.btn,.imp-chip,.fold-chip,.t-plan,.t-feat{transition:transform .16s ease,box-shadow .22s ease,background .2s ease,border-color .2s ease}
.t-btn:hover,.btn:hover,.imp-chip:hover{transform:translateY(-1px)}.t-btn:active,.btn:active,.imp-chip:active{transform:scale(.97)}
.t-plan:hover,.t-feat:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(19,84,157,.14)}
.t-btn.lg:not(.ghost){position:relative;overflow:hidden}.t-btn.lg:not(.ghost)::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);animation:none}
.t-btn.lg:not(.ghost):hover::after{transform:translateX(120%);transition:transform .7s ease}
/* studio */
html.m-on .imp-stage>*{animation:mSheetIn .32s ease both}
html.m-on .imp-sum>div{animation:mCard .4s both}html.m-on .imp-sum>div:nth-child(2){animation-delay:.05s}html.m-on .imp-sum>div:nth-child(3){animation-delay:.1s}html.m-on .imp-sum>div:nth-child(4){animation-delay:.15s}
html.m-on .imp-sidebody.steps>.imp-q{animation:mCard .35s both}html.m-on .imp-sidebody.steps>.imp-q:nth-child(2){animation-delay:.04s}html.m-on .imp-sidebody.steps>.imp-q:nth-child(3){animation-delay:.08s}html.m-on .imp-sidebody.steps>.imp-q:nth-child(4){animation-delay:.12s}html.m-on .imp-sidebody.steps>.imp-q:nth-child(5){animation-delay:.16s}
.imp-tabs button{transition:background .2s,color .2s,box-shadow .2s}
.imp-foot .btn.primary,.imp-foot .btn.pri{animation:mGlow 3.2s ease-in-out 1.2s 3}
#howto-drawer{transition:transform .28s cubic-bezier(.2,.8,.2,1)}
#tmodal .t-card{animation:mFadeUp .3s ease both}
.ht-opt[open]>ol{animation:mCard .3s both}
/* the Creaze mark spins while the studio is working */
.imp-pre-busy .note::before,.note[data-busy]::before{content:"";display:inline-block;width:18px;height:18px;margin-right:8px;vertical-align:-4px;background:url(/assets/mark-colour.svg) center/contain no-repeat;animation:mSpin 1.1s linear infinite}
.m-loader{width:28px;height:28px;background:url(/assets/mark-colour.svg) center/contain no-repeat;animation:mSpin 1.2s linear infinite;display:inline-block}
#m-bar{position:fixed;left:0;top:0;height:3px;width:0;background:linear-gradient(90deg,#13549D,#E7BE43);z-index:100001;opacity:0;transition:width .3s ease,opacity .3s ease}#m-bar.on{opacity:1}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}html.m-on .m-rv{opacity:1;transform:none}}