/* Animated line icons (build/templates/icons.j2). Spec: DESIGN.md "Animated icons".
   Entrance = a reveal: strokes draw in, 480 ms on the site's decelerate curve, 60 ms apart (stagger under 400 ms), starting
   220 ms after the card lands; the red accent follows last with a 3% overshoot. Ambient = one slow sine loop per icon,
   2.8 to 4.6 s, a few px, starting after the draw. Hover lifts the tile 2 px. Everything below is drawn and still for
   reduced motion, the ADA "stop animations" option, and without JavaScript. */
.ic-tile { display: grid; place-items: center; flex: none; width: 76px; height: 76px; border-radius: 20px; background: linear-gradient(145deg, rgba(40, 55, 139, .11), rgba(40, 55, 139, .03)); box-shadow: inset 0 0 0 1px rgba(40, 55, 139, .09); }
.ic { width: 56px; height: 56px; overflow: visible; fill: none; stroke: var(--gts-navy); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; transition: transform 180ms var(--ease); }
.ic .a { stroke: var(--gts-red); }
.ic .f { fill: #fff; }
.ic .dot { fill: var(--gts-red); stroke: none; }
.ic .tx { fill: var(--gts-navy); stroke: none; font: 700 11px/1 Inter, system-ui, sans-serif; }
.ic .pop, .ic [class*="amb-"] { transform-box: fill-box; transform-origin: center; }

/* draw-in */
.js [data-reveal] .ic .d { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.js [data-reveal].is-in .ic .d { stroke-dashoffset: 0; opacity: 1; transition: stroke-dashoffset 480ms var(--ease) calc(220ms + var(--k, 0) * 60ms), opacity 0s linear calc(220ms + var(--k, 0) * 60ms); }
.js [data-reveal] .ic .pop, .js [data-reveal] .ic .dot, .js [data-reveal] .ic .tx { opacity: 0; }
.js [data-reveal].is-in .ic .pop, .js [data-reveal].is-in .ic .dot { animation: ic-pop 340ms cubic-bezier(.2, 0, 0, 1) 640ms both; }
.js [data-reveal].is-in .ic .tx { opacity: 1; transition: opacity 240ms var(--ease) 600ms; }
@keyframes ic-pop { 0% { opacity: 0; scale: .86; } 65% { opacity: 1; scale: 1.03; } 100% { opacity: 1; scale: 1; } }

/* ambient: sine ease-in-out, started after the draw (1.4 s) */
.js [data-reveal].is-in .ic .amb-float { animation: ic-pop 340ms cubic-bezier(.2, 0, 0, 1) 640ms both, ic-float var(--ad, 4s) ease-in-out 1.4s infinite alternate; }
.js [data-reveal].is-in .ic .amb-pulse { animation: ic-pop 340ms cubic-bezier(.2, 0, 0, 1) 640ms both, ic-pulse var(--ad, 3.4s) ease-in-out 1.4s infinite alternate; }
.js [data-reveal].is-in .ic .amb-sweep { animation: ic-pop 340ms cubic-bezier(.2, 0, 0, 1) 640ms both, ic-sweep var(--ad, 4.6s) ease-in-out 1.4s infinite alternate; }
.js [data-reveal].is-in .ic .amb-blink { animation: ic-blink var(--ad, 2.8s) ease-in-out calc(1s + var(--dl, 0s)) infinite alternate; }
.js [data-reveal].is-in .ic path.amb-pulse, .js [data-reveal].is-in .ic rect.amb-pulse { animation: ic-pulse var(--ad, 3.4s) ease-in-out 1.4s infinite alternate; }
.js [data-reveal].is-in .ic .amb-spin { animation: ic-spin var(--ad, 24s) linear infinite; transform-box: view-box; transform-origin: 32px 32px; }
@keyframes ic-float { to { transform: translateY(-2.5px); } }
@keyframes ic-pulse { to { transform: scale(1.07); } }
@keyframes ic-sweep { from { transform: translate(0, 0) rotate(0); } to { transform: translate(-3px, -2px) rotate(-4deg); } }
@keyframes ic-blink { from { opacity: .25; } to { opacity: 1; } }
@keyframes ic-spin { to { transform: rotate(360deg); } }

/* hover (cards) */
.cards .card:hover .ic { transform: translateY(-2px) scale(1.05); }

/* placement */
.card .ic-tile { margin-bottom: 20px; }
.point .ic-tile { width: 68px; height: 68px; border-radius: 18px; margin-bottom: 16px; }
.point .ic { width: 50px; height: 50px; }
.step--card .step__side { display: grid; gap: 12px; justify-items: start; align-content: start; }
.step--card .step__inner { grid-template-columns: 76px minmax(0, 1fr); gap: 0 22px; }
.step--card .step__side .ic-tile { width: 72px; height: 72px; border-radius: 18px; }
.step--card .step__side .ic { width: 52px; height: 52px; }
@media (max-width: 640px) { .ic-tile { width: 64px; height: 64px; border-radius: 17px; } .ic { width: 46px; height: 46px; } .step--card .step__inner { grid-template-columns: 52px minmax(0, 1fr); gap: 0 14px; } .step--card .step__side .ic-tile { width: 52px; height: 52px; border-radius: 14px; } .step--card .step__side .ic { width: 38px; height: 38px; } .point .ic-tile { width: 60px; height: 60px; } .point .ic { width: 44px; height: 44px; } }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] .ic .d { stroke-dashoffset: 0; opacity: 1; }
  .js [data-reveal] .ic .pop, .js [data-reveal] .ic .dot, .js [data-reveal] .ic .tx { opacity: 1; }
  .js [data-reveal].is-in .ic *, .js [data-reveal] .ic * { animation: none !important; transition: none !important; }
  .cards .card:hover .ic { transform: none; }
}
html.a11y-still .ic, html.a11y-still .ic * { animation: none !important; transition: none !important; }
html.a11y-still .js [data-reveal] .ic .d, html.a11y-still [data-reveal] .ic .d { stroke-dashoffset: 0; opacity: 1; }
html.a11y-still [data-reveal] .ic .pop, html.a11y-still [data-reveal] .ic .dot, html.a11y-still [data-reveal] .ic .tx { opacity: 1; }
@media print { .ic-tile { display: none; } }