/* =========================================================
   DBmaestro handoff animations — shared tokens + keyframes
   Source: "Animations & Logos/01 Homepage/*.html"
   Tokens are scoped to .dbm-anim so they never leak into the
   design system; the dbm-* keyframes are namespaced already.
   ========================================================= */

.dbm-anim {
    --dbm-teal:#0D708B; --dbm-teal-deep:#0A5468; --dbm-teal-light:#5FB4C7;
    --dbm-signal:#08C6AD; --dbm-signal-hover:#05A08E; --dbm-signal-active:#037D70; --dbm-signal-bright:#3FD9C3; --dbm-signal-wash:#E6FAF6;
    --dbm-amber:#C77A05; --dbm-amber-wash:#FDF3E2; --dbm-navy:#16324B; --dbm-navy-wash:#E1EBEE;
    --dbm-ink-surface:#073744; --dbm-ink-deep:#04222B;
    --dbm-white:#FFFFFF; --dbm-paper:#F2F7F9; --dbm-fill:#E1EBEE; --dbm-line:#E1EBEE; --dbm-line-2:#CBD6DD;
    --dbm-teal-wash:#EFF7FA; --dbm-teal-wash-2:#D9EBF1;
    --dbm-heading:#0A2540; --dbm-body:#23394D; --dbm-muted:#536B7E;
    --dbm-success:#12A150; --dbm-warn:#C77A05; --dbm-drift:#C4342B;
    --font-display:"Barlow Condensed","Oswald","Arial Narrow",sans-serif;
    --font-body:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
    --font-mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;
    --ring-focus:0 0 0 3px rgba(8,198,173,.40);
    --grad:var(--dbm-signal);
    --ease:cubic-bezier(.2,.6,.2,1);
    --container:1260px; --gutter:28px; --section-y:40px;
    font-family: var(--font-body);
    line-height: 1.6;
    color: var(--dbm-body);
}

/* the widgets are authored against a zeroed box model */
.dbm-anim *,
.dbm-anim *::before,
.dbm-anim *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* the widgets size their own artwork inline, so the global
   img { width: 100% } would stretch it out of proportion */
.dbm-anim img {
    width: auto;
    max-width: 100%;
}

.dbm-anim .dbm-ver.is-bump {
    animation: dbm-verflash 0.5s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

@keyframes dbm-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  @keyframes dbm-word{from{opacity:0;transform:translateY(22px) scale(.985)}to{opacity:1;transform:none}}
  @keyframes dbm-eIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  @keyframes dbm-chk{to{transform:scale(1)}}
  @keyframes dbm-promo{0%{left:6%;opacity:0}5%{opacity:1}18%{left:6%}30%{left:27%}42%{left:48%}54%{left:69%}66%,90%{left:90%}95%{opacity:1}100%{left:90%;opacity:0}}
  @keyframes dbm-authA{0%{color:var(--dbm-signal)}49.9%{color:var(--dbm-signal)}50%{color:var(--dbm-line-2)}100%{color:var(--dbm-line-2)}}
  @keyframes dbm-authB{0%{color:var(--dbm-line-2)}49.9%{color:var(--dbm-line-2)}50%{color:var(--dbm-signal)}99.9%{color:var(--dbm-signal)}100%{color:var(--dbm-line-2)}}
  @keyframes dbm-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @keyframes dbm-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
  @keyframes dbm-pulse{0%,100%{box-shadow:0 0 0 0 rgba(8,198,173,0)}45%{box-shadow:0 0 0 7px rgba(8,198,173,.18)}}
  @keyframes dbm-run1{0%{opacity:0;transform:translateX(-7px)}6%{opacity:1;transform:none}88%{opacity:1}95%,100%{opacity:0;transform:translateX(-7px)}}
  @keyframes dbm-run2{0%,13%{opacity:0;transform:translateX(-7px)}21%{opacity:1;transform:none}88%{opacity:1}95%,100%{opacity:0;transform:translateX(-7px)}}
  @keyframes dbm-run3{0%,26%{opacity:0;transform:translateX(-7px)}34%{opacity:1;transform:none}88%{opacity:1}95%,100%{opacity:0;transform:translateX(-7px)}}
  @keyframes dbm-run4{0%,39%{opacity:0;transform:translateX(-7px)}47%{opacity:1;transform:none}88%{opacity:1}95%,100%{opacity:0;transform:translateX(-7px)}}
  @keyframes dbm-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  @keyframes dbm-verflash{0%{color:var(--dbm-signal);transform:translateY(-3px);opacity:0}55%{color:var(--dbm-signal)}100%{color:var(--dbm-teal);transform:none;opacity:1}}
  .dbm-ver.is-bump{animation:dbm-verflash .5s cubic-bezier(.2,.9,.3,1) both}
  [data-testi-scroll]::-webkit-scrollbar{display:none}
  @keyframes dbm-glowA{0%,44%{opacity:1;filter:drop-shadow(0 0 9px rgba(8,198,173,.75))}50%,94%{opacity:.34;filter:none}100%{opacity:1}}
  @keyframes dbm-glowB{0%,44%{opacity:.34;filter:none}50%,94%{opacity:1;filter:drop-shadow(0 0 9px rgba(8,198,173,.75))}100%{opacity:.34}}
  @keyframes dbm-ring{0%{transform:scale(.6);opacity:.7}80%,100%{transform:scale(1.7);opacity:0}}
  @keyframes dbm-corePulse{0%,100%{r:12;opacity:.9}50%{r:15;opacity:1}}
  @keyframes dbm-dash{to{stroke-dashoffset:-24}}
  @keyframes dbm-blink{0%,50%{opacity:1}51%,100%{opacity:0}}
  @keyframes dbm-draw{to{stroke-dashoffset:0}}
  @keyframes dbm-fillin{to{opacity:1}}
  @keyframes dbm-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}