/* Esteban Baquero — component styles. Values come from tokens.css (var(--…)). */
.eb-soft { color: var(--ink-soft); }

/* Wordmark — logotipo v3 (SVG) */
.eb-logo { display: inline-block; line-height: 0; --logo-ink: var(--ink); --logo-dot: var(--azul); --logo-ray: var(--azul); }
.eb-logo__svg { display: block; width: 260px; height: auto; overflow: visible; }
.eb-logo__ink { fill: var(--logo-ink); }
.eb-logo__dot { fill: var(--logo-dot); }
.eb-logo__rays { fill: none; stroke: var(--logo-ray); stroke-width: 7; stroke-linecap: round; }
[data-theme="oscuro"] .eb-logo--principal { --logo-ray: var(--lima); }
.eb-logo--negativo { --logo-ink: var(--blanco); --logo-dot: var(--azul); --logo-ray: var(--lima); }
.eb-logo--azul { --logo-ink: var(--blanco); --logo-dot: var(--lima); --logo-ray: var(--lima); }
.eb-logo--lima { --logo-ink: var(--carbon); --logo-dot: var(--azul); --logo-ray: var(--carbon); }
.eb-logo--carbon { --logo-ink: var(--blanco); --logo-dot: var(--azul); --logo-ray: var(--lima); }
.eb-logo--mono { --logo-dot: var(--logo-ink); --logo-ray: var(--logo-ink); }
.eb-logo--plate { padding: 24px 28px; border-radius: var(--radius-xl); }
.eb-logo--plate.eb-logo--azul { background: var(--azul); }
.eb-logo--plate.eb-logo--lima { background: var(--lima); }
.eb-logo--plate.eb-logo--carbon, .eb-logo--plate.eb-logo--negativo { background: var(--carbon-deep); }
.eb-logo--plate.eb-logo--principal { background: var(--surface-card); border: var(--border-card) solid var(--line); }
.eb-mono--seal { display: block; border-radius: var(--radius-round); }
/* Logo animado v3: empuje + boing + agentes en las "a" */
.eb-logo--animated .eb-l1{translate:-120px 0;animation:eb5-push1 1000ms cubic-bezier(.3,.6,.4,1) 100ms forwards}
.eb-logo--animated .eb-l2{translate:120px 0;animation:eb5-push2 1000ms cubic-bezier(.3,.6,.4,1) 350ms forwards}
@keyframes eb5-push1{0%{translate:-120px 0}55%{translate:7px 0}68%{translate:-4px 0}80%{translate:2px 0}90%{translate:-.8px 0}100%{translate:0 0}}
@keyframes eb5-push2{0%{translate:120px 0}55%{translate:-7px 0}68%{translate:4px 0}80%{translate:-2px 0}90%{translate:.8px 0}100%{translate:0 0}}
.eb-logo--animated .eb-pA,.eb-logo--animated .eb-pB{transform-box:fill-box;transform-origin:center}
.eb-logo--animated .eb-pA{animation:eb5-jumpA 520ms cubic-bezier(.4,0,.6,1) 1150ms forwards}
.eb-logo--animated .eb-pB{animation:eb5-jumpB 520ms cubic-bezier(.4,0,.6,1) 1400ms forwards}
@keyframes eb5-jumpA{0%{translate:0 0;scale:1;opacity:1}15%{translate:-6px 6px;scale:1.08 .9}55%{translate:150px -60px;scale:.7}92%{translate:290px -2px;scale:.36;opacity:1}100%{translate:298px 0;scale:.3;opacity:0}}
@keyframes eb5-jumpB{0%{translate:0 0;scale:1;opacity:1}15%{translate:6px 6px;scale:1.08 .9}55%{translate:-150px -60px;scale:.7}92%{translate:-300px -2px;scale:.36;opacity:1}100%{translate:-308px 0;scale:.3;opacity:0}}
.eb-logo--animated .eb-mA,.eb-logo--animated .eb-mB{transform-box:fill-box;transform-origin:50% 90%;scale:0;animation:eb5-pop 420ms cubic-bezier(.2,1.6,.4,1) forwards}
.eb-logo--animated .eb-mA{animation-delay:1620ms}
.eb-logo--animated .eb-mB{animation-delay:1870ms}
@keyframes eb5-pop{0%{scale:0}60%{scale:1.25 .85}80%{scale:.92 1.08}100%{scale:1}}
.eb-logo--animated .eb-dot{transform-box:fill-box;transform-origin:center;scale:0;animation:eb5-dot 260ms cubic-bezier(.2,1.6,.4,1) 2150ms forwards}
@keyframes eb5-dot{to{scale:1}}
.eb-logo--animated .eb-r{stroke-dasharray:40;stroke-dashoffset:40;animation:eb5-ray 260ms ease-out forwards}
.eb-logo--animated .eb-r0{animation-delay:2300ms}
.eb-logo--animated .eb-r1{animation-delay:2400ms}
.eb-logo--animated .eb-r2{animation-delay:2500ms}
@keyframes eb5-ray{to{stroke-dashoffset:0}}
.eb-logo--alive .eb-mini-eyes{transform-box:fill-box;transform-origin:center;animation:eb5-blink 4.2s ease-in-out 3.4s infinite}
.eb-logo--alive .mB .eb-mini-eyes{animation-delay:4.6s}
@keyframes eb5-blink{0%,94%,100%{scale:1 1}97%{scale:1 .1}}
@media (prefers-reduced-motion: reduce) { .eb-logo .eb-l1, .eb-logo .eb-l2, .eb-logo .eb-mA, .eb-logo .eb-mB, .eb-logo .eb-dot, .eb-logo .eb-r, .eb-logo .eb-mini-eyes { animation: none !important; translate: none !important; scale: none !important; stroke-dashoffset: 0 !important; } .eb-logo .eb-pA, .eb-logo .eb-pB { display: none; } }

@keyframes eb-blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
.eb-mono--agent { display: block; }
.eb-mono__eye { transform-box: fill-box; transform-origin: center; }
.eb-mono--alive .eb-mono__eye { animation: eb-blink 3.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .eb-logo__eye, .eb-logo__eyes, .eb-mono__eye { animation: none !important; transform: none !important; } }


/* Monogram */
.eb-mono { display: inline-flex; }
.eb-mono--tile { background: var(--carbon); align-items: center; justify-content: center; }
.eb-mono__mark { background: var(--lima); color: var(--on-lima); font-family: var(--font-sans); font-weight: 800; line-height: 1; }

/* Brand bar */
.eb-bar { display: flex; width: 100%; }
.eb-bar__azul { flex: 40 0 0; background: var(--azul); }
.eb-bar__lima { flex: 30 0 0; background: var(--lima); }
.eb-bar__amarillo { flex: 30 0 0; background: var(--amarillo); }

/* Page header */
.eb-header { color: var(--ink); }
.eb-header__title { margin: 16px 0 0; color: var(--ink); }
.eb-header__lead { margin: 22px 0 0; max-width: 760px; }

/* Chip */
.eb-chip { display: inline-block; padding: 8px 18px; border-radius: var(--radius-pill); border: var(--border-hair) solid var(--line-chip); }
.eb-chip--azul { background: var(--azul); color: var(--on-azul); border-color: var(--azul); }
.eb-chip--lima { background: var(--lima); color: var(--on-lima); border-color: var(--lima); }
.eb-chip--amarillo { background: var(--amarillo); color: var(--on-amarillo); border-color: var(--amarillo); }
.eb-chip--blanco { background: var(--blanco); color: var(--carbon); border-color: #e6e9ee; }
.eb-chip--data { background: var(--azul-tint); color: var(--azul); border-color: #e6e9ee; }
.eb-chip--carbon { background: var(--carbon); color: var(--blanco); border-color: var(--line); font-weight: 800; font-size: 15px; padding: 7px 16px; }
.eb-chip--outline { background: transparent; color: var(--ink-faint); border-color: var(--line); font-weight: 500; font-size: 12px; letter-spacing: 2px; padding: 6px 12px; }

/* Cards */
.eb-card { background: var(--surface-card); color: var(--ink); border: var(--border-card) solid var(--line); }
.eb-card--lg { border-radius: var(--radius-lg); padding: 18px; }
.eb-card--xl { border-radius: var(--radius-xl); padding: 22px; }

/* Status card */
.eb-status__head { display: flex; align-items: center; gap: var(--space-gap-sm); }
.eb-status__icon { width: 26px; height: 26px; border-radius: var(--radius-round); box-sizing: border-box; flex: none; }
.eb-status__icon--exito { background: var(--verde); color: var(--blanco); display: flex; align-items: center; justify-content: center; font-family: var(--font-sans); font-weight: 800; font-size: 15px; }
.eb-status__icon--proceso { border: 3px solid var(--azul); border-top-color: transparent; }
.eb-status__desc { margin-top: 10px; font-size: 14px; }

/* Agent card */
.eb-agent { display: flex; gap: 16px; align-items: center; padding: 20px; }
.eb-agent--stack { flex-direction: column; gap: 6px; text-align: center; padding: 16px; }
.eb-agent__img { display: block; height: auto; }
.eb-agent__desc { margin-top: 6px; }

/* Do / Don't */
.eb-dodont { border-radius: var(--radius-xl); padding: var(--space-card-lg); border: var(--border-card) solid; }
.eb-dodont--si { background: var(--verde-tint); border-color: var(--verde-line); }
.eb-dodont--no { background: var(--rojo-tint); border-color: var(--rojo-line); }
.eb-dodont .eb-soft { color: #5b6675; }
.eb-dodont__title { font-family: var(--font-sans); font-weight: 800; font-size: 20px; }
.eb-dodont--si .eb-dodont__title, .eb-dodont--si .eb-dodont__sym { color: var(--verde); }
.eb-dodont--no .eb-dodont__title, .eb-dodont--no .eb-dodont__sym { color: var(--rojo); }
.eb-dodont__item { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; }
.eb-dodont__sym { font-family: var(--font-sans); font-weight: 800; }

/* Trait card */
.eb-trait__title { font-family: var(--font-sans); font-weight: 800; font-size: 19px; color: var(--kicker); }
.eb-trait__num { color: var(--kicker); }
.eb-trait__label { font-family: var(--font-sans); font-weight: 700; font-size: 16px; margin-top: 8px; color: var(--ink-soft); }
.eb-trait__text { margin-top: 7px; font-size: 14px; }

/* Quote */
.eb-quote { margin: 0; background: var(--surface-soft); color: var(--ink); border-left: var(--stroke-flow) solid var(--lima); border-radius: var(--radius-sm); padding: 18px; }

/* Icon */
.eb-icon { display: inline-flex; color: var(--azul); }
.eb-icon--framed { width: 62px; height: 62px; box-sizing: border-box; border: var(--border-card) solid var(--line); border-radius: var(--radius-lg); align-items: center; justify-content: center; }

/* ===== Brand book pages (components/BB…/preview.html) ===== */
.bb { margin: 0; background: var(--surface-page); color: var(--ink); font-family: var(--font-sans); }
.bb * { box-sizing: border-box; }
.bb-sec { position: relative; padding: var(--space-page-y) var(--space-page-x) 96px; background: var(--surface-page); color: var(--ink); overflow: hidden; }
.bb-sec--dark { background: var(--carbon-deep); }
.bb-sec--dark::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--space-grid) var(--space-grid); }
.bb-sec > * { position: relative; }
.bb-sec > .eb-bar { position: absolute; left: 0; right: 0; bottom: 0; }
.bb-foot { position: absolute; left: var(--space-page-x); right: var(--space-page-x); bottom: 30px; display: flex; justify-content: space-between; color: var(--ink-faint); text-transform: uppercase; }
.bb-chapter { display: flex; align-items: baseline; gap: 14px; }
.bb-chapter__num { font-weight: 800; font-size: 14px; color: var(--kicker); letter-spacing: 3px; }
.bb-title { margin: 16px 0 0; max-width: 980px; }
.bb-lead { margin: 20px 0 0; max-width: 760px; color: var(--ink-soft); }
.bb-sub-h { margin: 56px 0 18px; display: flex; align-items: center; gap: 12px; text-transform: uppercase; color: var(--ink-soft); }
.bb-sub-h::after { content: ""; flex: 1; height: 0; border-top: var(--border-card) solid var(--line); }
.bb-grid { display: grid; gap: var(--space-gap); }
.bb-g2 { grid-template-columns: repeat(2, 1fr); }
.bb-g3 { grid-template-columns: repeat(3, 1fr); }
.bb-g4 { grid-template-columns: repeat(4, 1fr); }
.bb-g5 { grid-template-columns: repeat(5, 1fr); }
.bb-g8 { grid-template-columns: repeat(8, 1fr); }
.bb-row { display: flex; gap: var(--space-gap); align-items: center; flex-wrap: wrap; }
.bb-box { background: var(--surface-card); border: var(--border-card) solid var(--line); border-radius: var(--radius-xl); padding: 26px; }
.bb-box--soft { background: var(--surface-soft); border-color: transparent; }
.bb-label { text-transform: uppercase; color: var(--ink-faint); }
.bb-note { color: var(--ink-soft); font-size: 15px; line-height: 1.5; }
.bb-strong { color: var(--ink); font-weight: 800; }
.bb-img { display: block; max-width: 100%; height: auto; }
.bb-pill { display: inline-flex; align-items: center; height: 36px; padding: 0 20px; border-radius: var(--radius-pill); font-weight: 800; font-size: 15px; }
.bb-list { margin: 0; padding: 0; list-style: none; }
.bb-list li { display: flex; gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: var(--border-hair) solid var(--line); color: var(--ink-soft); font-size: 15px; line-height: 1.45; }
.bb-list li:last-child { border-bottom: 0; }
.bb-list b { color: var(--ink); font-weight: 800; min-width: 150px; }
.bb-dot { width: 9px; height: 9px; border-radius: var(--radius-round); background: var(--azul); flex: none; transform: translateY(-1px); }
.bb-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.bb-table th { text-align: left; font-weight: 500; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-faint); padding: 0 12px 10px 0; border-bottom: var(--border-card) solid var(--line); }
.bb-table td { padding: 14px 12px 14px 0; border-bottom: var(--border-hair) solid var(--line); color: var(--ink-soft); vertical-align: top; }
.bb-table td:first-child { color: var(--ink); font-weight: 800; }
.bb-swatch { border: var(--border-hair) solid var(--line); border-radius: var(--radius-md); height: 168px; padding: 16px; display: flex; flex-direction: column; justify-content: flex-end; cursor: pointer; font: inherit; text-align: left; width: 100%; }
.bb-swatch:focus-visible, .bb-btn:focus-visible, .bb-check input:focus-visible + span { outline: 3px solid var(--azul); outline-offset: 3px; }
.bb-btn { font: inherit; font-weight: 800; font-size: 14px; border: var(--border-card) solid var(--line); background: var(--surface-card); color: var(--ink); border-radius: var(--radius-pill); padding: 9px 18px; cursor: pointer; }
.bb-btn[aria-pressed="true"] { background: var(--ink); color: var(--surface-page); border-color: var(--ink); }
.bb-ratio { display: flex; height: 44px; border-radius: var(--radius-md); overflow: hidden; border: var(--border-hair) solid var(--line); }
.bb-ratio span { display: flex; align-items: center; padding-left: 12px; font-size: 12px; font-weight: 800; }
.bb-cross { position: relative; }
.bb-cross::after { content: "\2715"; position: absolute; top: 10px; right: 12px; color: var(--rojo); font-weight: 800; font-size: 16px; }
.bb-check { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: var(--border-hair) solid var(--line); cursor: pointer; }
.bb-check input { position: absolute; opacity: 0; }
.bb-check span.box { width: 22px; height: 22px; border-radius: 6px; border: var(--border-card) solid var(--ink-faint); flex: none; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; color: transparent; }
.bb-check input:checked + span.box { background: var(--lima); border-color: var(--lima); color: var(--on-lima); }
.bb-check .t { color: var(--ink-soft); font-size: 16px; line-height: 1.45; }
.bb-check input:checked ~ .t { color: var(--ink); }
.bb-progress { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.bb-progress > i { display: block; height: 100%; width: 0; background: var(--azul); transition: width 300ms ease; }
@media (prefers-reduced-motion: reduce) { .bb *, .bb *::before, .bb *::after { animation: none !important; transition: none !important; } }

/* Iconos v1 — banco propio, duotono suave; el acento se anima en hover/focus (eb-ic--loop: siempre) */
.eb-ic{width:1.5em;height:1.5em;display:inline-block;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.eb-ic .t{fill:var(--ic-tint,#eef4ff);stroke:none}
.eb-ic .a{color:var(--ic-accent,#0061fe);transform-box:fill-box;transform-origin:center}
.eb-ic .a.n{color:inherit}
.eb-ic .k{color:var(--ic-accent,#0061fe)}
[data-theme="oscuro"] .eb-ic{--ic-tint:#2f3a52;--ic-accent:#b5fe00}
@keyframes eb-ic-blink{0%,42%,100%{transform:scaleY(1)}46%{transform:scaleY(.1)}50%{transform:scaleY(1)}}
.eb-ic--loop[data-anim="blink"] .a,:hover>.eb-ic[data-anim="blink"] .a,.eb-ic[data-anim="blink"]:hover .a,:focus-visible>.eb-ic[data-anim="blink"] .a{animation:eb-ic-blink 2.4s ease-in-out infinite}
@keyframes eb-ic-spark{0%{opacity:.2;transform:scale(.5) rotate(-12deg)}55%{opacity:1;transform:scale(1.2)}100%{opacity:1;transform:scale(1)}}
.eb-ic--loop[data-anim="spark"] .a,:hover>.eb-ic[data-anim="spark"] .a,.eb-ic[data-anim="spark"]:hover .a,:focus-visible>.eb-ic[data-anim="spark"] .a{animation:eb-ic-spark .9s ease-in-out infinite}
@keyframes eb-ic-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}
.eb-ic--loop[data-anim="pulse"] .a,:hover>.eb-ic[data-anim="pulse"] .a,.eb-ic[data-anim="pulse"]:hover .a,:focus-visible>.eb-ic[data-anim="pulse"] .a{animation:eb-ic-pulse 1.2s ease-in-out infinite}
@keyframes eb-ic-type{0%,49%{opacity:1}50%,100%{opacity:.15}}
.eb-ic--loop[data-anim="type"] .a,:hover>.eb-ic[data-anim="type"] .a,.eb-ic[data-anim="type"]:hover .a,:focus-visible>.eb-ic[data-anim="type"] .a{animation:eb-ic-type .9s steps(1) infinite}
@keyframes eb-ic-launch{0%,100%{transform:translateY(0) scaleY(1)}50%{transform:translateY(1px) scaleY(1.6)}}
.eb-ic[data-anim="launch"] .a{transform-origin:50% 0%}
.eb-ic--loop[data-anim="launch"] .a,:hover>.eb-ic[data-anim="launch"] .a,.eb-ic[data-anim="launch"]:hover .a,:focus-visible>.eb-ic[data-anim="launch"] .a{animation:eb-ic-launch .45s ease-in-out infinite}
@keyframes eb-ic-grow{0%{transform:scaleY(.25)}65%{transform:scaleY(1.12)}100%{transform:scaleY(1)}}
.eb-ic[data-anim="grow"] .a{transform-origin:50% 100%}
.eb-ic--loop[data-anim="grow"] .a,:hover>.eb-ic[data-anim="grow"] .a,.eb-ic[data-anim="grow"]:hover .a,:focus-visible>.eb-ic[data-anim="grow"] .a{animation:eb-ic-grow 1.2s ease-in-out infinite}
@keyframes eb-ic-draw{from{stroke-dashoffset:24}to{stroke-dashoffset:0}}
.eb-ic[data-anim="draw"] .a [pathLength]{stroke-dasharray:24}
.eb-ic--loop[data-anim="draw"] .a [pathLength],:hover>.eb-ic[data-anim="draw"] .a [pathLength],.eb-ic[data-anim="draw"]:hover .a [pathLength],:focus-visible>.eb-ic[data-anim="draw"] .a [pathLength]{animation:eb-ic-draw 1.3s cubic-bezier(.4,0,.2,1) infinite}
@keyframes eb-ic-flow{from{stroke-dashoffset:48}to{stroke-dashoffset:0}}
.eb-ic[data-anim="flow"] .a [pathLength]{stroke-dasharray:24}
.eb-ic--loop[data-anim="flow"] .a [pathLength],:hover>.eb-ic[data-anim="flow"] .a [pathLength],.eb-ic[data-anim="flow"]:hover .a [pathLength],:focus-visible>.eb-ic[data-anim="flow"] .a [pathLength]{animation:eb-ic-flow 1.6s linear infinite}
@keyframes eb-ic-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.eb-ic--loop[data-anim="spin"] .a,:hover>.eb-ic[data-anim="spin"] .a,.eb-ic[data-anim="spin"]:hover .a,:focus-visible>.eb-ic[data-anim="spin"] .a{animation:eb-ic-spin 2.4s linear infinite}
@keyframes eb-ic-orbit{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.eb-ic[data-anim="orbit"] .a{transform-origin:50% 50%}
.eb-ic[data-anim="orbit"] .a{transform-box:view-box;transform-origin:12px 12px}
.eb-ic--loop[data-anim="orbit"] .a,:hover>.eb-ic[data-anim="orbit"] .a,.eb-ic[data-anim="orbit"]:hover .a,:focus-visible>.eb-ic[data-anim="orbit"] .a{animation:eb-ic-orbit 5s linear infinite}
@keyframes eb-ic-lift{0%{transform:translateY(3px);opacity:.2}60%{transform:translateY(-1.5px);opacity:1}100%{transform:translateY(0)}}
.eb-ic--loop[data-anim="lift"] .a,:hover>.eb-ic[data-anim="lift"] .a,.eb-ic[data-anim="lift"]:hover .a,:focus-visible>.eb-ic[data-anim="lift"] .a{animation:eb-ic-lift 1.1s ease-in-out infinite}
@keyframes eb-ic-scan{0%,100%{transform:translate(0,0)}25%{transform:translate(1.5px,-1px)}75%{transform:translate(-1px,1.5px)}}
.eb-ic--loop[data-anim="scan"] .a,:hover>.eb-ic[data-anim="scan"] .a,.eb-ic[data-anim="scan"]:hover .a,:focus-visible>.eb-ic[data-anim="scan"] .a{animation:eb-ic-scan 1.4s ease-in-out infinite}
@keyframes eb-ic-wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}}
.eb-ic--loop[data-anim="wiggle"] .a,:hover>.eb-ic[data-anim="wiggle"] .a,.eb-ic[data-anim="wiggle"]:hover .a,:focus-visible>.eb-ic[data-anim="wiggle"] .a{animation:eb-ic-wiggle .7s ease-in-out infinite}
@keyframes eb-ic-bounce{0%,100%{transform:translateY(0)}40%{transform:translateY(-2.5px)}60%{transform:translateY(0)}75%{transform:translateY(-1px)}}
.eb-ic--loop[data-anim="bounce"] .a,:hover>.eb-ic[data-anim="bounce"] .a,.eb-ic[data-anim="bounce"]:hover .a,:focus-visible>.eb-ic[data-anim="bounce"] .a{animation:eb-ic-bounce 1.1s ease-in-out infinite}
@keyframes eb-ic-slide{0%,100%{transform:translateX(0)}50%{transform:translateX(2.5px)}}
.eb-ic--loop[data-anim="slide"] .a,:hover>.eb-ic[data-anim="slide"] .a,.eb-ic[data-anim="slide"]:hover .a,:focus-visible>.eb-ic[data-anim="slide"] .a{animation:eb-ic-slide 1s ease-in-out infinite}
@keyframes eb-ic-swing{0%,100%{transform:rotate(0)}20%{transform:rotate(14deg)}45%{transform:rotate(-10deg)}70%{transform:rotate(5deg)}}
.eb-ic[data-anim="swing"] .a{transform-origin:50% 0%}
.eb-ic--loop[data-anim="swing"] .a,:hover>.eb-ic[data-anim="swing"] .a,.eb-ic[data-anim="swing"]:hover .a,:focus-visible>.eb-ic[data-anim="swing"] .a{animation:eb-ic-swing 1.2s ease-in-out infinite}
@keyframes eb-ic-shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-1.2px)}40%,80%{transform:translateX(1.2px)}}
.eb-ic--loop[data-anim="shake"] .a,:hover>.eb-ic[data-anim="shake"] .a,.eb-ic[data-anim="shake"]:hover .a,:focus-visible>.eb-ic[data-anim="shake"] .a{animation:eb-ic-shake .5s ease-in-out infinite}
@keyframes eb-ic-beat{0%,100%{transform:scale(1)}15%{transform:scale(1.25)}30%{transform:scale(1)}45%{transform:scale(1.18)}60%{transform:scale(1)}}
.eb-ic--loop[data-anim="beat"] .a,:hover>.eb-ic[data-anim="beat"] .a,.eb-ic[data-anim="beat"]:hover .a,:focus-visible>.eb-ic[data-anim="beat"] .a{animation:eb-ic-beat 1.3s ease-in-out infinite}
@keyframes eb-ic-pop{0%{transform:scale(.2);opacity:0}60%{transform:scale(1.2);opacity:1}100%{transform:scale(1)}}
.eb-ic--loop[data-anim="pop"] .a,:hover>.eb-ic[data-anim="pop"] .a,.eb-ic[data-anim="pop"]:hover .a,:focus-visible>.eb-ic[data-anim="pop"] .a{animation:eb-ic-pop .9s ease-in-out infinite}
@keyframes eb-ic-fill{from{stroke-dashoffset:24}to{stroke-dashoffset:0}}
.eb-ic[data-anim="fill"] .a [pathLength]{stroke-dasharray:24}
.eb-ic--loop[data-anim="fill"] .a [pathLength],:hover>.eb-ic[data-anim="fill"] .a [pathLength],.eb-ic[data-anim="fill"]:hover .a [pathLength],:focus-visible>.eb-ic[data-anim="fill"] .a [pathLength]{animation:eb-ic-fill 1.3s cubic-bezier(.4,0,.2,1) infinite}
@media (prefers-reduced-motion:reduce){.eb-ic .a,.eb-ic .a *{animation:none!important}}