/* ═══ Boot loader (2026-09-26) ═════════════════════════════════════════════════
   The first-open choreography: the 99 sketches itself → lifts over GROUP → the
   logo slides left as "MKT Dashboard · Campaign Monitoring" opens beside it →
   the block lifts while one card per boot stage (Signing in · Project Index ·
   Ads · Funnel) takes the centre and hands over to the next as the real event
   lands. Sizes and colours are the dashboard's own tokens. Everything here is
   scoped to #boot; remove the two tags and the old spinner is what it was.
   Every movement is one curve family: fast → slow (Satriya, 2026-09-26). */
#boot{position:fixed;inset:0;z-index:2000;background:#fff;color:#0F172A;font-family:'Plus Jakarta Sans','Inter',sans-serif;-webkit-font-smoothing:antialiased;
      display:grid;place-items:center;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);overflow:hidden;
      --bt-blue:#2563EB;--bt-logo:#2B4F9E;--bt-text:#0F172A;--bt-muted:#64748B;--bt-faint:#94A3B8;--bt-border:#EDEFF3;--bt-soft:#F1F5F9;
      --bt-out:cubic-bezier(.22,1,.36,1);--bt-io:cubic-bezier(.65,0,.35,1);--bt-spring:cubic-bezier(.34,1.45,.64,1);--bt-spring-soft:cubic-bezier(.3,1.25,.4,1)}
#boot[hidden]{display:none}
#boot.bt-out{animation:btOut .6s var(--bt-io) forwards;pointer-events:none}
@keyframes btOut{to{opacity:0;transform:scale(1.03);visibility:hidden}}
#boot .bt-bar{position:absolute;left:0;top:0;height:2px;width:0%;background:var(--bt-blue);transition:width .5s var(--bt-out)}
#boot .bt-bar.done{opacity:0;transition:width .3s ease,opacity .5s ease .3s}
/* brand block */
#boot .bt-brand{position:absolute;left:50%;top:50%;display:flex;align-items:center;transform:translate(-50%,-50%);transition:transform 1.1s var(--bt-spring-soft)}
#boot .bt-brand.up{transform:translate(-50%,calc(-50% - var(--lift,150px))) scale(.8)}
#boot .bt-logo{display:flex;flex-direction:column;align-items:center;width:96px}
#boot .bt-nine{width:96px;height:65px;overflow:visible;transform:translateY(14px);transition:transform .9s var(--bt-spring-soft)}
#boot .bt-nine path{fill:transparent;fill-rule:evenodd;stroke:var(--bt-logo);stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;
                    transition:stroke-dashoffset 1.7s cubic-bezier(.5,0,.2,1),fill .7s ease 1.4s,stroke-width .7s ease 1.4s}
#boot .bt-brand.in .bt-nine path{stroke-dashoffset:0 !important;fill:var(--bt-logo);stroke-width:0}
#boot .bt-brand.grp-in .bt-nine{transform:translateY(0)}
#boot .bt-grp{display:flex;justify-content:center;font-size:11.5px;font-weight:700;letter-spacing:.42em;color:var(--bt-logo);margin-top:2px;padding-left:.42em;height:16px}
#boot .bt-grp span{display:inline-block;opacity:0;transform:translateY(10px);filter:blur(5px);transition:opacity .45s ease,transform .8s var(--bt-spring),filter .5s ease}
#boot .bt-brand.grp-in .bt-grp span{opacity:1;transform:none;filter:blur(0)}
#boot .bt-col{display:flex;align-items:center;max-width:0;overflow:hidden;transition:max-width 1s var(--bt-spring-soft)}
#boot .bt-brand.split .bt-col{max-width:var(--colw,340px)}
#boot .bt-div{width:1px;height:44px;background:var(--bt-border);margin:0 18px 0 22px;flex:none;opacity:0;transform:scaleY(.3);transition:opacity .5s ease .25s,transform .8s var(--bt-spring-soft) .25s}
#boot .bt-brand.split .bt-div{opacity:1;transform:none}
#boot .bt-ttl{display:flex;flex-direction:column;align-items:flex-start;gap:3px;white-space:nowrap}
#boot .bt-ttl .w{display:inline-block;overflow:hidden;line-height:1.15;vertical-align:bottom}
#boot .bt-ttl .w i{display:inline-block;font-style:normal;font-size:19px;font-weight:800;letter-spacing:-.4px;color:var(--bt-text);transform:translateY(110%);transition:transform .9s var(--bt-spring-soft)}
#boot .bt-ttl .w+.w{margin-left:6px}
#boot .bt-ttl .s{font-size:10.5px;font-weight:600;color:var(--bt-faint);letter-spacing:.3em;text-transform:uppercase;opacity:0;transform:translateY(6px);transition:opacity .6s ease .45s,transform .8s var(--bt-out) .45s}
#boot .bt-brand.split .bt-ttl .w:nth-child(1) i{transition-delay:.3s}#boot .bt-brand.split .bt-ttl .w:nth-child(2) i{transition-delay:.4s}
#boot .bt-brand.split .bt-ttl .w i{transform:none}
#boot .bt-brand.split .bt-ttl .s{opacity:1;transform:none}
/* stage cards */
#boot .bt-stack{position:absolute;left:50%;top:50%;width:min(420px,calc(100vw - 32px));height:0;transform:translateX(-50%) translateY(46px) scale(.96);opacity:0;filter:blur(6px);
                transition:opacity .6s ease,transform 1.2s var(--bt-spring-soft),filter .7s ease}
#boot .bt-stack.in{opacity:1;transform:translateX(-50%);filter:blur(0)}
#boot .st{position:absolute;left:0;right:0;top:0;height:54px;border-radius:18px;background:#fff;border:1px solid var(--bt-border);
          box-shadow:0 1px 2px rgba(15,23,42,.04),0 10px 30px -12px rgba(15,23,42,.14);overflow:hidden;
          transform:translateY(var(--y,0)) scale(var(--s,1));opacity:var(--o,1);
          transition:transform 1s var(--bt-spring-soft),height .9s var(--bt-out),opacity .5s var(--bt-out),box-shadow .9s var(--bt-out);will-change:transform,height}
#boot .st.on{height:var(--h,150px);box-shadow:0 2px 4px rgba(15,23,42,.04),0 24px 48px -16px rgba(37,99,235,.25)}
#boot .st .hd{display:flex;align-items:center;gap:11px;height:54px;padding:0 14px 0 12px}
#boot .st .ic{width:32px;height:32px;border-radius:10px;background:var(--bt-soft);display:grid;place-items:center;color:var(--bt-muted);flex:none;transition:background .4s,color .4s}
#boot .st.on .ic{background:#EFF6FF;color:var(--bt-blue)}
#boot .st.ok .ic{background:#ECFDF5;color:#059669;animation:btIcPop .6s var(--bt-spring) both}
#boot .st.err .ic{background:#FEF2F2;color:#DC2626}
@keyframes btIcPop{0%{transform:scale(.7)}100%{transform:none}}
#boot .st .t{font-size:13.5px;font-weight:700;letter-spacing:-.1px;flex:1;transition:color .3s}
#boot .st:not(.on) .t{color:var(--bt-muted)}
#boot .st.ok .t,#boot .st.err .t{color:var(--bt-text)}
#boot .st .m{font-size:11px;color:var(--bt-faint);font-weight:600;white-space:nowrap;display:flex;align-items:center;gap:6px}
#boot .st .m i{width:7px;height:7px;border-radius:50%;background:#CBD5E1;position:relative}
#boot .st.on .m i{background:var(--bt-blue)}
#boot .st.on .m i::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(37,99,235,.4);animation:btPing 1.2s ease-out infinite}
@keyframes btPing{0%{transform:scale(.5);opacity:1}100%{transform:scale(1.45);opacity:0}}
#boot .st .chk{width:16px;height:16px;border-radius:50%;background:#10B981;display:none;place-items:center}
#boot .st .chk::before{content:'';width:7px;height:4px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(0,-1px)}
#boot .st.ok .m i{display:none}#boot .st.ok .chk{display:grid;animation:btPop .6s var(--bt-spring) both}
@keyframes btPop{0%{transform:scale(0) rotate(-40deg)}100%{transform:none}}
#boot .st.err .m i{background:#DC2626}#boot .st.err .m i::after{display:none}
#boot .st .bd{padding:0 14px 14px}
#boot .st .bd > *{opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .8s var(--bt-spring-soft)}
#boot .st.on .bd > *{opacity:1;transform:none}
#boot .st.on .bd > :nth-child(1){transition-delay:.3s}#boot .st.on .bd > :nth-child(2){transition-delay:.4s}#boot .st.on .bd > :nth-child(3){transition-delay:.5s}
#boot .st:not(.on) .bd > *{transition:opacity .15s ease,transform .3s ease}
#boot .bd > :first-child{margin-top:2px}
#boot .big{font-size:24px;font-weight:800;letter-spacing:-.7px;font-variant-numeric:tabular-nums;line-height:1.1;min-height:27px}
#boot .big small{font-size:12px;font-weight:600;color:var(--bt-muted);letter-spacing:0;margin-left:6px}
#boot .sub{font-size:11.5px;color:var(--bt-muted);margin-top:4px;min-height:15px}
#boot .sub b{color:var(--bt-text)}
#boot .sub.err{color:#DC2626}
/* a line that is still on its way: a soft shimmer, never a made-up number */
#boot .ghost{display:inline-block;height:12px;width:140px;border-radius:6px;vertical-align:middle;background:linear-gradient(90deg,#F1F5F9 25%,#E9EEF6 50%,#F1F5F9 75%);background-size:200% 100%;animation:btSh 1.3s linear infinite}
#boot .ghost.big{height:22px;width:110px}
@keyframes btSh{to{background-position:-200% 0}}
/* the two small charts: platform share bars (Ads) and a 12-week raw-lead sparkline (Funnel), both from real figures */
#boot .bars{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;margin-top:12px}
#boot .bars div{font-size:10.5px;color:var(--bt-muted);display:flex;justify-content:space-between;font-weight:600}
#boot .bars div b{color:var(--bt-text)}
#boot .bars i{display:block;height:5px;border-radius:99px;background:var(--bt-soft);overflow:hidden;margin-top:-4px}
#boot .bars i b{display:block;height:100%;width:0;border-radius:99px;background:var(--bt-blue);transition:width 1.1s var(--bt-out)}
#boot .bars i:nth-of-type(2) b{background:#059669}
#boot .units{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;min-height:22px}
#boot .units span{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:99px;background:#EFF6FF;color:var(--bt-blue);font-size:11px;font-weight:700;opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .7s var(--bt-spring)}
#boot .st.on .units span{opacity:1;transform:none}
#boot .bars i:nth-of-type(2) b[data-p=ended]{background:#CBD5E1}
#boot .spark{width:100%;height:54px;margin-top:8px;overflow:visible}
#boot .spark path.l{fill:none;stroke:var(--bt-blue);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1200;stroke-dashoffset:1200}
#boot .st.on .spark path.l{animation:btDraw 1.3s var(--bt-io) .3s forwards}
@keyframes btDraw{to{stroke-dashoffset:0}}
#boot .spark path.a{fill:url(#btg);opacity:0;transition:opacity .8s ease 1s}
#boot .st.on .spark path.a{opacity:1}
#boot .bt-hint{position:absolute;left:0;right:0;bottom:calc(26px + env(safe-area-inset-bottom));text-align:center;font-size:11px;color:var(--bt-faint);opacity:0;transition:opacity .6s ease 1s;padding:0 16px}
#boot .bt-hint b{color:var(--bt-muted);font-weight:600}
#boot .bt-stack.in ~ .bt-hint{opacity:1}
#boot .bt-retry{margin-top:10px;height:30px;padding:0 12px;border-radius:8px;border:1px solid var(--bt-border);background:#fff;font:600 12px/1 inherit;color:var(--bt-text);cursor:pointer}
@media (max-width:420px){#boot .bt-ttl .w i{font-size:17px}#boot .bt-div{margin:0 14px 0 16px}}
@media (prefers-reduced-motion: reduce){
  #boot *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}