/* sg-field (foco) — GERADO por `manage.py port_card_css` (design/card_ports.py).
 * Não editar à mão.
 * As 10 animações de foco de components/forms/input.card.html (bundle 8cd72241, ZIP
 * 48ebf484759c), byte a byte, mais as duas regras de design que reagem ao foco em qualquer
 * animação. Fora: a 2ª regra do Anel (`body[data-anim="ring"] .d2 …`), que repete a 1ª e, com
 * dois eixos no mesmo seletor, viraria um escopo dentro do outro que nunca casa; e o movimento
 * reduzido, que mira o `.shell` do card (refeito em static/css/forms-field.css).
 * Mudanças mecânicas e reversíveis: as classes de input.css, e cada animação
 * (`body[data-anim="…"]`) vale no eixo data-field-fx; Acento (`.d8`) e Elevado (`.d9`) valem no
 * data-field. Sem o `body`, o seletor de animação pesa um tipo a menos (como no tooltip.css);
 * para a animação seguir vencendo o design, como no card, o design entra em `:where(:scope)`.
 * Tempos finitos viram tokens. */
  /* ═══════════════ 10 ANIMAÇÕES DE FOCO (axis global via body[data-anim]) ═══════════════ */
  /* a1 · ANEL (padrão) */
  @scope ([data-field-fx="ring"]) to ([data-field-fx]) { :scope/*data-field-fx*/ .sg-field:focus-within{ border-color:var(--border-focus); box-shadow:0 0 0 var(--ring-width) var(--ring); } }

  /* a2 · TRAÇO — borda se desenha do canto */
  @scope ([data-field-fx="trace"]) to ([data-field-fx]) { :scope/*data-field-fx*/ .sg-field:focus-within{ border-color:var(--border-focus); } }
  @scope ([data-field-fx="trace"]) to ([data-field-fx]) { :scope/*data-field-fx*/ .sg-field:focus-within .sg-field__fx{ box-shadow:inset 0 0 0 2px var(--primary); clip-path:inset(0 0 0 0); animation:fxTrace var(--sg-input-t-420) var(--ease-out); } }
  @keyframes fxTrace{ 0%{ clip-path:inset(0 100% 100% 0); } 50%{ clip-path:inset(0 0 100% 0); } 100%{ clip-path:inset(0 0 0 0); } }

  /* a3 · HOLOFOTE — brilho que pulsa uma vez */
  @scope ([data-field-fx="glow"]) to ([data-field-fx]) { :scope/*data-field-fx*/ .sg-field:focus-within{ border-color:var(--border-focus); box-shadow:0 0 0 3px var(--ring), 0 0 16px color-mix(in srgb, var(--primary) 40%, transparent); animation:fxGlow var(--sg-input-t-600) var(--ease-out); } }
  @keyframes fxGlow{ 0%{ box-shadow:0 0 0 0 var(--ring), 0 0 0 0 transparent; } }

  /* a4 · ONDA — anel emana para fora ao focar (no próprio shell, fora do clip) */
  @scope ([data-field-fx="sonar"]) to ([data-field-fx]) { :scope/*data-field-fx*/ .sg-field:focus-within{ border-color:var(--border-focus); box-shadow:0 0 0 var(--ring-width) var(--ring); animation:fxSonar var(--sg-input-t-700) var(--ease-out); } }
  @keyframes fxSonar{
    0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--primary) 55%, transparent), 0 0 0 var(--ring-width) var(--ring); }
    100%{ box-shadow:0 0 0 11px transparent, 0 0 0 var(--ring-width) var(--ring); }
  }

  /* a5 · PREENCHE — tinta sobe de baixo (atrás do texto) */
  @scope ([data-field-fx="fill"]) to ([data-field-fx]) { :scope/*data-field-fx*/ .sg-field:focus-within{ border-color:var(--border-focus); box-shadow:0 0 0 var(--ring-width) var(--ring); } }
  @scope ([data-field-fx="fill"]) to ([data-field-fx]) { :scope/*data-field-fx*/ .sg-field:focus-within .sg-field__fx{ background:linear-gradient(0deg, color-mix(in srgb, var(--primary) 18%, transparent), color-mix(in srgb, var(--primary) 6%, transparent)); transform:translateY(100%); animation:fxFill var(--sg-input-t-400) var(--ease-out) forwards; } }
  @keyframes fxFill{ to{ transform:translateY(0); } }

  /* a6 · ÍCONE — ícone cresce, cora e desliza */
  @scope ([data-field-fx="icon"]) to ([data-field-fx]) { :scope/*data-field-fx*/ .sg-field:focus-within{ border-color:var(--border-focus); box-shadow:0 0 0 var(--ring-width) var(--ring); } }
  @scope ([data-field-fx="icon"]) to ([data-field-fx]) { :scope/*data-field-fx*/ .sg-field:focus-within .sg-field__icon{ color:var(--primary); transform:scale(1.18); } }

  /* a7 · SUBLINHADO — traço cresce do centro embaixo */
  @scope ([data-field-fx="under"]) to ([data-field-fx]) { :scope/*data-field-fx*/ .sg-field:focus-within{ border-color:var(--border-focus); } }
  @scope ([data-field-fx="under"]) to ([data-field-fx]) { :scope/*data-field-fx*/ .sg-field:focus-within .sg-field__fx::after{ content:""; position:absolute; left:50%; right:50%; bottom:0; height:2px; background:var(--primary); animation:fxUnder var(--sg-input-t-320) var(--ease-out) forwards; } }
  @keyframes fxUnder{ to{ left:0; right:0; } }

  /* a8 · SALTO — campo dá um pulinho */
  @scope ([data-field-fx="hop"]) to ([data-field-fx]) { :scope/*data-field-fx*/ .sg-field:focus-within{ border-color:var(--border-focus); box-shadow:0 0 0 var(--ring-width) var(--ring); animation:fxHop var(--sg-input-t-400) var(--ease-spring); } }
  @keyframes fxHop{ 0%,100%{ transform:translateY(0); } 45%{ transform:translateY(-3px); } }

  /* a9 · SUAVE — só muda a cor da borda, sem anel */
  @scope ([data-field-fx="soft"]) to ([data-field-fx]) { :scope/*data-field-fx*/ .sg-field:focus-within{ border-color:var(--border-focus); } }

  /* a10 · CINTILAR — varredura de brilho cruza uma vez */
  @scope ([data-field-fx="shine"]) to ([data-field-fx]) { :scope/*data-field-fx*/ .sg-field:focus-within{ border-color:var(--border-focus); box-shadow:0 0 0 var(--ring-width) var(--ring); } }
  @scope ([data-field-fx="shine"]) to ([data-field-fx]) { :scope/*data-field-fx*/ .sg-field:focus-within .sg-field__fx{ background:linear-gradient(105deg, transparent 30%, color-mix(in srgb, var(--primary) 22%, transparent) 50%, transparent 70%); transform:translateX(-100%); animation:fxShine var(--sg-input-t-600) var(--ease-out); } }
  @keyframes fxShine{ to{ transform:translateX(100%); } }

  /* o acento (d8) reage ao foco em qualquer animação */
  @scope ([data-field="accent"]) to ([data-field]) { :where(:scope)/*data-field*/ .sg-field:focus-within::before{ height:70%; background:var(--primary); } }
  @scope ([data-field="raised"]) to ([data-field]) { :where(:scope)/*data-field*/ .sg-field:focus-within{ box-shadow:var(--shadow-md), 0 0 0 var(--ring-width) var(--ring); transform:translateY(-1px); } }