/* sg-cbx — GERADO por `manage.py port_card_css` (design/card_ports.py).
 * Não editar à mão.
 * Checkbox, byte a byte do <style> de components/forms/checkbox.card.html (bundle 8cd72241, ZIP
 * 48ebf484759c), sem o bloco de movimento reduzido (ele mira a moldura `.scheme` do card).
 * Mudanças mecânicas e reversíveis: `.cc` → `.sg-cbx`, `.box` / `.tick` → `__box` / `__tick`,
 * os traços `.pp` / `.x1` / `.x2` → `__pen` / `__x1` / `__x2`, `.dis` → `.is-disabled`. As 10
 * marcações (`.c1`…`.c10`) valem no eixo data-checkbox e os 10 formatos (`.f1`…`.f10`) no
 * data-checkbox-format; o token do card fica num ancestral, aqui a raiz do escopo (`:scope`).
 * Tempos finitos e raios cravados viram tokens; os laços infinitos e as fases (`animation-delay`
 * negativo) ficam literais, como na Tabela. O que o card não traz — a marca de cada estilo,
 * o indeterminado, o erro, o holofote e o movimento reduzido — está em
 * static/css/forms-choice.css e js/widgets/choice.js.
 * Marcação: {% sg_checkbox "Incluir encerrados" name="closed" %} (templatetags/sg_choice.py). */
  /* ════════════ BASE — Checkbox ════════════ */
  .sg-cbx{ display:inline-flex; align-items:center; gap:var(--space-2); cursor:pointer; font-size:var(--control-font);
    color:var(--text); user-select:none; position:relative; -webkit-tap-highlight-color:transparent; }
  .sg-cbx.is-disabled{ cursor:not-allowed; color:var(--text-disabled); }
  .sg-cbx input{ position:absolute; opacity:0; width:0; height:0; }
  .sg-cbx__box{ width:18px; height:18px; flex:none; display:grid; place-items:center; position:relative;
    background:var(--surface); border:1.5px solid var(--border-strong); color:var(--on-primary); border-radius:var(--radius-sm);
    transition: background-color var(--duration-fast) var(--ease-standard),
                border-color var(--duration-fast) var(--ease-standard),
                box-shadow var(--duration-fast) var(--ease-standard),
                transform var(--duration-base) var(--ease-spring); }
  .sg-cbx:hover:not(.is-disabled) .sg-cbx__box{ border-color:var(--primary); }
  .sg-cbx input:focus-visible + .sg-cbx__box{ box-shadow:0 0 0 var(--ring-width) var(--ring); border-color:var(--border-focus); }
  .sg-cbx input:checked + .sg-cbx__box,
  .sg-cbx input:indeterminate + .sg-cbx__box{ background:var(--primary); border-color:var(--primary); }
  .sg-cbx.is-disabled .sg-cbx__box{ background:var(--surface-sunken); border-color:var(--border); }
  .sg-cbx__tick{ position:relative; z-index:2; width:13px; height:13px; opacity:0; transform:scale(.55);
    transition:opacity var(--duration-fast) var(--ease-standard), transform var(--duration-base) var(--ease-spring); }
  .sg-cbx__tick svg{ width:100%; height:100%; display:block; }
  .sg-cbx input:checked + .sg-cbx__box .sg-cbx__tick,
  .sg-cbx input:indeterminate + .sg-cbx__box .sg-cbx__tick{ opacity:1; transform:scale(1); }

  @keyframes cc-goo{
    0%,100%{ border-radius:46% 54% 56% 44% / 54% 46% 54% 46%; }
    25%{ border-radius:57% 43% 47% 53% / 45% 57% 43% 55%; }
    50%{ border-radius:43% 57% 53% 47% / 57% 43% 57% 43%; }
    75%{ border-radius:53% 47% 43% 57% / 47% 53% 47% 53%; } }

  /* 01 · PADRÃO — base, marca com fade/scale */

  /* 02 · CANETA — o traço se desenha sozinho, com curva de mão (ponta arredondada) */
  @scope ([data-checkbox="pen"]) to ([data-checkbox]) { :scope/*data-checkbox*/ .sg-cbx__tick{ transform:none; } }
  @scope ([data-checkbox="pen"]) to ([data-checkbox]) { :scope/*data-checkbox*/ .sg-cbx__tick .sg-cbx__pen{ stroke-dasharray:30; stroke-dashoffset:30; } }
  @scope ([data-checkbox="pen"]) to ([data-checkbox]) { :scope/*data-checkbox*/ .sg-cbx input:checked + .sg-cbx__box .sg-cbx__tick, :scope/*data-checkbox*/ .sg-cbx input:indeterminate + .sg-cbx__box .sg-cbx__tick{ transform:none; opacity:1; } }
  @scope ([data-checkbox="pen"]) to ([data-checkbox]) { :scope/*data-checkbox*/ .sg-cbx input:checked + .sg-cbx__box .sg-cbx__tick .sg-cbx__pen{ stroke-dashoffset:0; animation:c2draw var(--sg-checkbox-t-500) var(--ease-out); } }
  @keyframes c2draw{ from{ stroke-dashoffset:30; } to{ stroke-dashoffset:0; } }

  /* 03 · RABISCO — um X feito à mão, dois riscos que se desenham com leve torção */
  @scope ([data-checkbox="scribble"]) to ([data-checkbox]) { :scope/*data-checkbox*/ .sg-cbx__tick{ transform:rotate(-5deg) scale(.7); } }
  @scope ([data-checkbox="scribble"]) to ([data-checkbox]) { :scope/*data-checkbox*/ .sg-cbx__tick .sg-cbx__x1, :scope/*data-checkbox*/ .sg-cbx__tick .sg-cbx__x2{ stroke-dasharray:24; stroke-dashoffset:24; } }
  @scope ([data-checkbox="scribble"]) to ([data-checkbox]) { :scope/*data-checkbox*/ .sg-cbx input:checked + .sg-cbx__box .sg-cbx__tick, :scope/*data-checkbox*/ .sg-cbx input:indeterminate + .sg-cbx__box .sg-cbx__tick{ transform:rotate(-5deg) scale(1); opacity:1; } }
  @scope ([data-checkbox="scribble"]) to ([data-checkbox]) { :scope/*data-checkbox*/ .sg-cbx input:checked + .sg-cbx__box .sg-cbx__tick .sg-cbx__x1{ stroke-dashoffset:0; animation:c3draw var(--sg-checkbox-t-260) var(--ease-out); } }
  @scope ([data-checkbox="scribble"]) to ([data-checkbox]) { :scope/*data-checkbox*/ .sg-cbx input:checked + .sg-cbx__box .sg-cbx__tick .sg-cbx__x2{ stroke-dashoffset:0; animation:c3draw2 var(--sg-checkbox-t-460) var(--ease-out); } }
  @keyframes c3draw{ from{ stroke-dashoffset:24; } to{ stroke-dashoffset:0; } }
  @keyframes c3draw2{ 0%,42%{ stroke-dashoffset:24; } 100%{ stroke-dashoffset:0; } }

  /* 04 · CARIMBO — a marca bate com overshoot e um respingo de tinta sai do anel */
  @scope ([data-checkbox="stamp"]) to ([data-checkbox]) { :scope/*data-checkbox*/ .sg-cbx__box{ overflow:visible; } }
  @scope ([data-checkbox="stamp"]) to ([data-checkbox]) { :scope/*data-checkbox*/ .sg-cbx input:checked + .sg-cbx__box .sg-cbx__tick, :scope/*data-checkbox*/ .sg-cbx input:indeterminate + .sg-cbx__box .sg-cbx__tick{ animation:c4stamp var(--sg-checkbox-t-420) var(--ease-spring); } }
  @keyframes c4stamp{ 0%{ opacity:0; transform:scale(.2) rotate(-12deg); } 55%{ opacity:1; transform:scale(1.3) rotate(4deg); } 100%{ opacity:1; transform:scale(1) rotate(0); } }
  @scope ([data-checkbox="stamp"]) to ([data-checkbox]) { :scope/*data-checkbox*/ .sg-cbx input:checked + .sg-cbx__box, :scope/*data-checkbox*/ .sg-cbx input:indeterminate + .sg-cbx__box{ animation:c4pop var(--sg-checkbox-t-420) var(--ease-spring); } }
  @keyframes c4pop{ 0%{ transform:scale(1); } 45%{ transform:scale(.85); } 100%{ transform:scale(1); } }
  @scope ([data-checkbox="stamp"]) to ([data-checkbox]) { :scope/*data-checkbox*/ .sg-cbx input:checked + .sg-cbx__box::after, :scope/*data-checkbox*/ .sg-cbx input:indeterminate + .sg-cbx__box::after{ content:""; position:absolute; inset:0; border-radius:inherit; z-index:0;
    border:2px solid var(--primary); animation:c4splat var(--sg-checkbox-t-500) var(--ease-out); pointer-events:none; } }
  @keyframes c4splat{ 0%{ transform:scale(.6); opacity:.6; } 100%{ transform:scale(1.7); opacity:0; } }

  /* 05 · PREENCHE — a cor cresce em círculo a partir do centro */
  @scope ([data-checkbox="fill"]) to ([data-checkbox]) { :scope/*data-checkbox*/ .sg-cbx__box{ overflow:hidden; } }
  @scope ([data-checkbox="fill"]) to ([data-checkbox]) { :scope/*data-checkbox*/ .sg-cbx input:checked + .sg-cbx__box, :scope/*data-checkbox*/ .sg-cbx input:indeterminate + .sg-cbx__box{ background:var(--surface); border-color:var(--primary); } }
  @scope ([data-checkbox="fill"]) to ([data-checkbox]) { :scope/*data-checkbox*/ .sg-cbx__box::before{ content:""; position:absolute; inset:0; z-index:0; background:var(--primary); border-radius:50%;
    transform:scale(0); transition:transform var(--sg-checkbox-t-400) var(--ease-emphasized), border-radius var(--sg-checkbox-t-400) var(--ease-emphasized); } }
  @scope ([data-checkbox="fill"]) to ([data-checkbox]) { :scope/*data-checkbox*/ .sg-cbx input:checked + .sg-cbx__box::before, :scope/*data-checkbox*/ .sg-cbx input:indeterminate + .sg-cbx__box::before{ transform:scale(1.8); border-radius:0; } }

  /* 06 · SALTO — a marca cai de cima e quica */
  @scope ([data-checkbox="jump"]) to ([data-checkbox]) { :scope/*data-checkbox*/ .sg-cbx input:checked + .sg-cbx__box .sg-cbx__tick, :scope/*data-checkbox*/ .sg-cbx input:indeterminate + .sg-cbx__box .sg-cbx__tick{ animation:c6jump var(--sg-checkbox-t-450) var(--ease-spring); } }
  @keyframes c6jump{ 0%{ opacity:0; transform:translateY(-6px) scale(.6); } 60%{ opacity:1; transform:translateY(2px) scale(1.12); } 100%{ transform:translateY(0) scale(1); } }

  /* 07 · MARCA-TEXTO — um traço de marca-texto passa por trás e a marca fica colorida */
  @scope ([data-checkbox="highlighter"]) to ([data-checkbox]) { :scope/*data-checkbox*/ .sg-cbx__box{ overflow:hidden; } }
  @scope ([data-checkbox="highlighter"]) to ([data-checkbox]) { :scope/*data-checkbox*/ .sg-cbx input:checked + .sg-cbx__box, :scope/*data-checkbox*/ .sg-cbx input:indeterminate + .sg-cbx__box{ background:var(--surface); border-color:var(--primary); } }
  @scope ([data-checkbox="highlighter"]) to ([data-checkbox]) { :scope/*data-checkbox*/ .sg-cbx__tick{ color:var(--primary); } }
  @scope ([data-checkbox="highlighter"]) to ([data-checkbox]) { :scope/*data-checkbox*/ .sg-cbx__box::before{ content:""; position:absolute; left:-3px; top:50%; height:11px; width:0; z-index:0;
    transform:translateY(-50%) rotate(-7deg); transform-origin:left center;
    background:color-mix(in srgb,var(--primary) 34%, transparent); border-radius:var(--sg-checkbox-r-2);
    transition:width var(--sg-checkbox-t-420) var(--ease-out) var(--sg-checkbox-t-40); } }
  @scope ([data-checkbox="highlighter"]) to ([data-checkbox]) { :scope/*data-checkbox*/ .sg-cbx input:checked + .sg-cbx__box::before, :scope/*data-checkbox*/ .sg-cbx input:indeterminate + .sg-cbx__box::before{ width:26px; } }

  /* 08 · ONDA — um anel suave emana ao marcar */
  @scope ([data-checkbox="wave"]) to ([data-checkbox]) { :scope/*data-checkbox*/ .sg-cbx__box{ overflow:visible; } }
  @scope ([data-checkbox="wave"]) to ([data-checkbox]) { :scope/*data-checkbox*/ .sg-cbx input:checked + .sg-cbx__box::after, :scope/*data-checkbox*/ .sg-cbx input:indeterminate + .sg-cbx__box::after{ content:""; position:absolute; inset:0; border-radius:inherit; z-index:0;
    border:2px solid var(--primary); animation:c8ring var(--sg-checkbox-t-650) var(--ease-out); pointer-events:none; } }
  @keyframes c8ring{ 0%{ transform:scale(1); opacity:.5; } 100%{ transform:scale(1.9); opacity:0; } }

  /* 09 · DOBRA — a caixa gira em 3D e revela a marca */
  @scope ([data-checkbox="flip"]) to ([data-checkbox]) { :scope/*data-checkbox*/ .sg-cbx__box{ transition:transform var(--sg-checkbox-t-450) var(--ease-spring), background-color var(--duration-fast), border-color var(--duration-fast); } }
  @scope ([data-checkbox="flip"]) to ([data-checkbox]) { :scope/*data-checkbox*/ .sg-cbx input:checked + .sg-cbx__box, :scope/*data-checkbox*/ .sg-cbx input:indeterminate + .sg-cbx__box{ transform:rotateY(360deg); } }
  @scope ([data-checkbox="flip"]) to ([data-checkbox]) { :scope/*data-checkbox*/ .sg-cbx__tick{ transition:opacity var(--duration-fast) var(--sg-checkbox-t-120), transform var(--duration-base) var(--sg-checkbox-t-120) var(--ease-spring); } }

  /* 10 · PULSO — respira e brilha; a marca balança */
  @scope ([data-checkbox="pulse"]) to ([data-checkbox]) { :scope/*data-checkbox*/ .sg-cbx input:checked + .sg-cbx__box, :scope/*data-checkbox*/ .sg-cbx input:indeterminate + .sg-cbx__box{ animation:c10breath 2.6s var(--ease-in-out) infinite; } }
  @scope ([data-checkbox="pulse"]) to ([data-checkbox]) { :scope/*data-checkbox*/ .sg-cbx:nth-of-type(2n) input:checked + .sg-cbx__box{ animation-delay:-1.1s; } }
  @keyframes c10breath{ 0%,100%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--primary) 0%,transparent); transform:scale(1); } 50%{ box-shadow:0 0 12px 1px color-mix(in srgb,var(--primary) 45%,transparent); transform:scale(1.06); } }
  @scope ([data-checkbox="pulse"]) to ([data-checkbox]) { :scope/*data-checkbox*/ .sg-cbx input:checked + .sg-cbx__box .sg-cbx__tick, :scope/*data-checkbox*/ .sg-cbx input:indeterminate + .sg-cbx__box .sg-cbx__tick{ animation:c10bob 2.6s var(--ease-in-out) infinite; } }
  @keyframes c10bob{ 0%,100%{ transform:scale(1) translateY(0); } 50%{ transform:scale(1) translateY(-1.5px); } }

  /* ════════════ FORMATOS — 10 estilos pareados com os botões (mesmo comportamento de marcar) ════════════ */

  /* F01 · PADRÃO — base, marca com fade/scale (linha de base) */

  /* F02 · ÓRBITA — facho gira em volta da caixa redonda só no hover */
  @scope ([data-checkbox-format="orbit"]) to ([data-checkbox-format]) { :scope/*data-checkbox-format*/ .sg-cbx__box{ border-radius:50%; overflow:visible; } }
  @scope ([data-checkbox-format="orbit"]) to ([data-checkbox-format]) { :scope/*data-checkbox-format*/ .sg-cbx__box::before{ content:""; position:absolute; inset:-3px; z-index:-1; border-radius:50%;
    background:conic-gradient(from 0deg, transparent 0 55%, color-mix(in srgb,var(--primary) 45%,white) 78%, color-mix(in srgb,var(--primary) 90%,white) 88%, transparent 97%);
    opacity:0; animation:f2orbit 2.4s linear infinite; animation-play-state:paused;
    transition:opacity var(--duration-base) var(--ease-standard); } }
  @scope ([data-checkbox-format="orbit"]) to ([data-checkbox-format]) { :scope/*data-checkbox-format*/ .sg-cbx:hover:not(.is-disabled) .sg-cbx__box::before{ opacity:1; animation-play-state:running; } }
  @keyframes f2orbit{ to{ transform:rotate(360deg); } }

  /* F03 · SPLASH — a caixa vira líquida e flui o tempo todo; acelera no hover */
  @scope ([data-checkbox-format="splash"]) to ([data-checkbox-format]) { :scope/*data-checkbox-format*/ .sg-cbx__box{ animation:f3flow 6s cubic-bezier(.45,0,.55,1) infinite; } }
  @scope ([data-checkbox-format="splash"]) to ([data-checkbox-format]) { :scope/*data-checkbox-format*/ .sg-cbx:nth-of-type(2n) .sg-cbx__box{ animation-delay:-2s; } } @scope ([data-checkbox-format="splash"]) to ([data-checkbox-format]) { :scope/*data-checkbox-format*/ .sg-cbx:nth-of-type(3n) .sg-cbx__box{ animation-delay:-4s; } }
  @scope ([data-checkbox-format="splash"]) to ([data-checkbox-format]) { :scope/*data-checkbox-format*/ .sg-cbx:hover:not(.is-disabled) .sg-cbx__box{ animation-duration:var(--sg-checkbox-t-2200); } }
  @keyframes f3flow{
    0%,100%{ border-radius:58% 42% 52% 48% / 56% 60% 40% 44%; }
    25%{ border-radius:46% 54% 60% 40% / 44% 48% 52% 56%; }
    50%{ border-radius:60% 40% 44% 56% / 58% 42% 58% 42%; }
    75%{ border-radius:42% 58% 56% 44% / 46% 60% 40% 54%; } }

  /* F04 · JELLY — gelatina: estica e comprime (squash & stretch) */
  @scope ([data-checkbox-format="jelly"]) to ([data-checkbox-format]) { :scope/*data-checkbox-format*/ .sg-cbx__box{ border-radius:var(--radius-md); transform-origin:center bottom; animation:f4idle 3.2s var(--ease-in-out) infinite; } }
  @scope ([data-checkbox-format="jelly"]) to ([data-checkbox-format]) { :scope/*data-checkbox-format*/ .sg-cbx:nth-of-type(2n) .sg-cbx__box{ animation-delay:-1.1s; } } @scope ([data-checkbox-format="jelly"]) to ([data-checkbox-format]) { :scope/*data-checkbox-format*/ .sg-cbx:nth-of-type(3n) .sg-cbx__box{ animation-delay:-2.1s; } }
  @keyframes f4idle{ 0%,100%{ transform:scale(1,1); } 50%{ transform:scale(1.04,.94); } }
  @scope ([data-checkbox-format="jelly"]) to ([data-checkbox-format]) { :scope/*data-checkbox-format*/ .sg-cbx:hover:not(.is-disabled) .sg-cbx__box{ animation:f4jiggle var(--sg-checkbox-t-600) var(--ease-spring); } }
  @keyframes f4jiggle{ 0%{ transform:scale(1,1); } 22%{ transform:scale(1.18,.8); } 45%{ transform:scale(.86,1.16); } 68%{ transform:scale(1.08,.94); } 100%{ transform:scale(1,1); } }

  /* F05 · HOLOFOTE — uma luz suave segue o cursor pelo rótulo */
  @scope ([data-checkbox-format="spotlight"]) to ([data-checkbox-format]) { :scope/*data-checkbox-format*/ .sg-cbx{ isolation:isolate; padding:6px 10px; margin:-6px -10px; border-radius:var(--radius-md); overflow:hidden; } }
  @scope ([data-checkbox-format="spotlight"]) to ([data-checkbox-format]) { :scope/*data-checkbox-format*/ .sg-cbx__box, :scope/*data-checkbox-format*/ .sg-cbx > span{ position:relative; z-index:1; } }
  @scope ([data-checkbox-format="spotlight"]) to ([data-checkbox-format]) { :scope/*data-checkbox-format*/ .sg-cbx::before{ content:""; position:absolute; inset:0; z-index:0; border-radius:inherit; pointer-events:none; opacity:0;
    background:radial-gradient(120px circle at var(--mx,50%) var(--my,50%), color-mix(in srgb,var(--primary) 24%,transparent), transparent 60%);
    transition:opacity var(--duration-base) var(--ease-standard); } }
  @scope ([data-checkbox-format="spotlight"]) to ([data-checkbox-format]) { :scope/*data-checkbox-format*/ .sg-cbx:not(.is-disabled):hover::before{ opacity:1; } }

  /* F06 · PREENCHE — a cor cresce em círculo a partir do centro */
  @scope ([data-checkbox-format="fill"]) to ([data-checkbox-format]) { :scope/*data-checkbox-format*/ .sg-cbx__box{ overflow:hidden; } }
  @scope ([data-checkbox-format="fill"]) to ([data-checkbox-format]) { :scope/*data-checkbox-format*/ .sg-cbx input:checked + .sg-cbx__box, :scope/*data-checkbox-format*/ .sg-cbx input:indeterminate + .sg-cbx__box{ background:var(--surface); border-color:var(--primary); } }
  @scope ([data-checkbox-format="fill"]) to ([data-checkbox-format]) { :scope/*data-checkbox-format*/ .sg-cbx__box::before{ content:""; position:absolute; inset:0; z-index:0; background:var(--primary); border-radius:50%;
    transform:scale(0); transition:transform var(--sg-checkbox-t-400) var(--ease-emphasized), border-radius var(--sg-checkbox-t-400) var(--ease-emphasized); } }
  @scope ([data-checkbox-format="fill"]) to ([data-checkbox-format]) { :scope/*data-checkbox-format*/ .sg-cbx input:checked + .sg-cbx__box::before, :scope/*data-checkbox-format*/ .sg-cbx input:indeterminate + .sg-cbx__box::before{ transform:scale(1.8); border-radius:0; } }

  /* F07 · ONDA — um anel suave emana ao marcar */
  @scope ([data-checkbox-format="wave"]) to ([data-checkbox-format]) { :scope/*data-checkbox-format*/ .sg-cbx__box{ overflow:visible; } }
  @scope ([data-checkbox-format="wave"]) to ([data-checkbox-format]) { :scope/*data-checkbox-format*/ .sg-cbx input:checked + .sg-cbx__box::after, :scope/*data-checkbox-format*/ .sg-cbx input:indeterminate + .sg-cbx__box::after{ content:""; position:absolute; inset:0; border-radius:inherit; z-index:0;
    border:2px solid var(--primary); animation:f7ring var(--sg-checkbox-t-650) var(--ease-out); pointer-events:none; } }
  @keyframes f7ring{ 0%{ transform:scale(1); opacity:.5; } 100%{ transform:scale(1.9); opacity:0; } }

  /* F08 · BOLHAS — bolhas sobem da caixa redonda enquanto marcada */
  @scope ([data-checkbox-format="bubbles"]) to ([data-checkbox-format]) { :scope/*data-checkbox-format*/ .sg-cbx__box{ border-radius:50%; overflow:visible; } }
  @scope ([data-checkbox-format="bubbles"]) to ([data-checkbox-format]) { :scope/*data-checkbox-format*/ .sg-cbx input:checked + .sg-cbx__box::before, :scope/*data-checkbox-format*/ .sg-cbx input:indeterminate + .sg-cbx__box::before,
  :scope/*data-checkbox-format*/ .sg-cbx input:checked + .sg-cbx__box::after, :scope/*data-checkbox-format*/ .sg-cbx input:indeterminate + .sg-cbx__box::after{
    content:""; position:absolute; left:50%; bottom:6px; width:5px; height:5px; border-radius:50%;
    background:color-mix(in srgb,var(--primary) 70%,white); z-index:3; pointer-events:none;
    animation:f8bub 1.7s var(--ease-out) infinite; } }
  @scope ([data-checkbox-format="bubbles"]) to ([data-checkbox-format]) { :scope/*data-checkbox-format*/ .sg-cbx input:checked + .sg-cbx__box::after, :scope/*data-checkbox-format*/ .sg-cbx input:indeterminate + .sg-cbx__box::after{ left:34%; width:3.5px; height:3.5px; animation-delay:-.85s; } }
  @keyframes f8bub{ 0%{ transform:translate(-50%,0) scale(.4); opacity:0; } 20%{ opacity:.9; } 80%{ opacity:.4; } 100%{ transform:translate(-50%,-20px) scale(1); opacity:0; } }

  /* F09 · GEL — blob gelatinoso com brilho que ondula */
  @scope ([data-checkbox-format="gel"]) to ([data-checkbox-format]) { :scope/*data-checkbox-format*/ .sg-cbx__box{ animation:cc-goo 4.6s var(--ease-in-out) infinite; overflow:hidden; box-shadow:var(--shadow-xs); } }
  @scope ([data-checkbox-format="gel"]) to ([data-checkbox-format]) { :scope/*data-checkbox-format*/ .sg-cbx:nth-of-type(2n) .sg-cbx__box{ animation-delay:-1.5s; } } @scope ([data-checkbox-format="gel"]) to ([data-checkbox-format]) { :scope/*data-checkbox-format*/ .sg-cbx:nth-of-type(3n) .sg-cbx__box{ animation-delay:-3s; } }
  @scope ([data-checkbox-format="gel"]) to ([data-checkbox-format]) { :scope/*data-checkbox-format*/ .sg-cbx__box::before{ content:""; position:absolute; inset:0; z-index:1; border-radius:inherit; pointer-events:none;
    background:linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 55%); } }
  @scope ([data-checkbox-format="gel"]) to ([data-checkbox-format]) { :scope/*data-checkbox-format*/ .sg-cbx:hover:not(.is-disabled) .sg-cbx__box{ animation-duration:var(--sg-checkbox-t-2000); } }

  /* F10 · PULSO — respira e brilha; a marca balança */
  @scope ([data-checkbox-format="pulse"]) to ([data-checkbox-format]) { :scope/*data-checkbox-format*/ .sg-cbx input:checked + .sg-cbx__box, :scope/*data-checkbox-format*/ .sg-cbx input:indeterminate + .sg-cbx__box{ animation:f10breath 2.6s var(--ease-in-out) infinite; } }
  @scope ([data-checkbox-format="pulse"]) to ([data-checkbox-format]) { :scope/*data-checkbox-format*/ .sg-cbx:nth-of-type(2n) input:checked + .sg-cbx__box{ animation-delay:-1.1s; } }
  @keyframes f10breath{ 0%,100%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--primary) 0%,transparent); transform:scale(1); } 50%{ box-shadow:0 0 12px 1px color-mix(in srgb,var(--primary) 45%,transparent); transform:scale(1.07); } }
  @scope ([data-checkbox-format="pulse"]) to ([data-checkbox-format]) { :scope/*data-checkbox-format*/ .sg-cbx input:checked + .sg-cbx__box .sg-cbx__tick, :scope/*data-checkbox-format*/ .sg-cbx input:indeterminate + .sg-cbx__box .sg-cbx__tick{ animation:f10bob 2.6s var(--ease-in-out) infinite; } }
  @keyframes f10bob{ 0%,100%{ transform:scale(1) translateY(0); } 50%{ transform:scale(1) translateY(-1.5px); } }