/* BTC charter v2 (D16) - motion icons. Needs the --btc-* tokens (tokens-web.css); fallbacks = slate and brass values.
   Rules: one cycle of 1.5-2.4 s on :hover / :focus-visible / :active (touch: .is-go set by btc-motion-icons.js on entering the view),
   translation <= 6 % of the 48-unit grid (2.8), at most two icons moving at once (JS), ambient loop >= 5 s only on .btc-icon--ambient,
   everything off under prefers-reduced-motion, .is-off (set by JS) pauses an icon that is off screen or over budget.
   Hover host: put .btc-icon-host on the link/button/card that contains the icon. Uses CSS nesting. */

.btc-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  overflow: visible;
  flex: none;
  color: var(--btc-texte-secondaire, #9aa7be);
}

/* palette: fills (letters = token), strokes (s*) */
.btc-icon .l { fill: var(--btc-laiton, #e4ba53); }
.btc-icon .lc { fill: var(--btc-laiton-clair, #f0daa2); }
.btc-icon .ls { fill: var(--btc-laiton-ombre, #96582b); }
.btc-icon .c { fill: var(--btc-cuivre, #c87941); }
.btc-icon .cs { fill: var(--btc-cuivre-ombre, #7e4a24); }
.btc-icon .p { fill: var(--btc-patine, #4cc2b2); }
.btc-icon .pc { fill: var(--btc-patine-clair, #72cfc3); }
.btc-icon .ps { fill: var(--btc-patine-ombre, #2b7e73); }
.btc-icon .pp { fill: var(--btc-patine-profond, #22635b); }
.btc-icon .m { fill: var(--btc-mousse, #6eb27c); }
.btc-icon .t { fill: var(--btc-parchemin, #ece0c8); }
.btc-icon .k { fill: var(--btc-fond-profond, #1e222a); }
.btc-icon .g { fill: var(--btc-carte, #2e3440); }
.btc-icon .e { fill: var(--btc-lisere, #4c566a); }
.btc-icon .h { fill: var(--btc-texte-secondaire, #9aa7be); }
.btc-icon .n { fill: currentColor; }
.btc-icon .sl { stroke: var(--btc-laiton, #e4ba53); }
.btc-icon .slc { stroke: var(--btc-laiton-clair, #f0daa2); }
.btc-icon .se { stroke: var(--btc-lisere, #4c566a); }

/* rest pose = what is drawn; hidden accents start invisible; pivots in user units (48 x 48 grid) */
.btc-icon .sp, .btc-icon .gl { opacity: 0; }
.btc-icon .gr { transform-origin: 24px 24px; }
.btc-icon .hm { transform-origin: 37px 8px; }
.btc-icon .sp { transform-origin: 15px 20px; }
.btc-icon .shd { transform-origin: 24px 44px; }
.btc-icon .lid { transform-origin: 8px 24px; }
.btc-icon .gl { transform-origin: 24px 21px; }
.btc-icon .bt { transform-origin: 24px 19px; }
.btc-icon .sw { transform-origin: 24px 10px; }
.btc-icon .nd { transform-origin: 24px 24px; }
.btc-icon .pr { transform-origin: 41px 19px; }

@keyframes btc-mi-spin { to { transform: rotate(360deg); } }
@keyframes btc-mi-hammer { 0%, 25% { transform: rotate(0); } 40% { transform: rotate(12deg); } 52% { transform: rotate(12deg); } 62% { transform: rotate(-26deg); } 100% { transform: rotate(0); } }
@keyframes btc-mi-spark { 0%, 60% { opacity: 0; transform: translate(0, 0); } 66% { opacity: 1; } 100% { opacity: 0; transform: translate(2.2px, -2.8px); } }
@keyframes btc-mi-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.8px); } }
@keyframes btc-mi-shadow { 0%, 100% { transform: scaleX(1); opacity: .6; } 50% { transform: scaleX(.78); opacity: .35; } }
@keyframes btc-mi-lid { 0%, 100% { transform: rotate(0); } 30%, 72% { transform: rotate(-34deg); } }
@keyframes btc-mi-glint { 0%, 22% { opacity: 0; transform: scale(.2); } 42%, 68% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.4); } }
@keyframes btc-mi-ballot { 0%, 10% { opacity: 1; transform: scaleY(1); } 60% { opacity: 1; transform: scaleY(0); } 80% { opacity: 0; transform: scaleY(0); } 100% { opacity: 1; transform: scaleY(1); } }
@keyframes btc-mi-sheet { 0%, 100% { transform: scaleY(1); } 30%, 40% { transform: scaleY(.9); } }
@keyframes btc-mi-roll { 0%, 100% { transform: translateY(0); } 30%, 40% { transform: translateY(-2.8px); } }
@keyframes btc-mi-lines { 0%, 100% { opacity: 1; } 30%, 40% { opacity: .1; } }
@keyframes btc-mi-needle { 0%, 100% { transform: rotate(0); } 22% { transform: rotate(36deg); } 44% { transform: rotate(-22deg); } 64% { transform: rotate(11deg); } 82% { transform: rotate(-4deg); } }
@keyframes btc-mi-drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(2px, -2px); } }
@keyframes btc-mi-prop { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.2); } }
@keyframes btc-mi-prop-burst { 0%, 25%, 100% { transform: scaleY(1); } 4%, 12%, 20% { transform: scaleY(.2); } 8%, 16% { transform: scaleY(1); } }

/* one cycle: the icon itself or its host (.btc-icon-host) is hovered / focused / pressed; .is-go = touch, entering the view */
.btc-icon:not(.btc-icon--ambient):is(:hover, :focus-visible, :active, .is-go),
.btc-icon-host:is(:hover, :focus-visible, :active, :focus-within) .btc-icon:not(.btc-icon--ambient) {
  & .gr { animation: btc-mi-spin 1.6s ease-in-out 1; }
  & .hm { animation: btc-mi-hammer 1.5s ease-in 1; }
  & .sp { animation: btc-mi-spark 1.5s ease-out 1; }
  & .bb { animation: btc-mi-bob 2.4s ease-in-out 1; }
  & .shd { animation: btc-mi-shadow 2.4s ease-in-out 1; }
  & .lid { animation: btc-mi-lid 2.2s cubic-bezier(.4, 0, .2, 1) 1; }
  & .gl { animation: btc-mi-glint 2.2s ease-out 1; }
  & .bt { animation: btc-mi-ballot 1.8s cubic-bezier(.4, 0, .2, 1) 1; }
  & .sw { animation: btc-mi-sheet 1.8s cubic-bezier(.4, 0, .2, 1) 1; }
  & .rl { animation: btc-mi-roll 1.8s cubic-bezier(.4, 0, .2, 1) 1; }
  & .ln { animation: btc-mi-lines 1.8s ease-out 1; }
  & .nd { animation: btc-mi-needle 2.2s ease-out 1; }
  & .ad { animation: btc-mi-drift 2.4s ease-in-out 1; }
  & .pr { animation: btc-mi-prop .5s linear 4; }
}

/* ambient loop: >= 5 s per cycle, hero and footer only */
.btc-icon--ambient {
  & .gr { animation: btc-mi-spin 9s linear infinite; }
  & .hm { animation: btc-mi-hammer 5.4s ease-in infinite; }
  & .sp { animation: btc-mi-spark 5.4s ease-out infinite; }
  & .bb { animation: btc-mi-bob 5s ease-in-out infinite; }
  & .shd { animation: btc-mi-shadow 5s ease-in-out infinite; }
  & .lid { animation: btc-mi-lid 6s cubic-bezier(.4, 0, .2, 1) infinite; }
  & .gl { animation: btc-mi-glint 6s ease-out infinite; }
  & .bt { animation: btc-mi-ballot 5.5s cubic-bezier(.4, 0, .2, 1) infinite; }
  & .sw { animation: btc-mi-sheet 5.5s cubic-bezier(.4, 0, .2, 1) infinite; }
  & .rl { animation: btc-mi-roll 5.5s cubic-bezier(.4, 0, .2, 1) infinite; }
  & .ln { animation: btc-mi-lines 5.5s ease-out infinite; }
  & .nd { animation: btc-mi-needle 6s ease-out infinite; }
  & .ad { animation: btc-mi-drift 6s ease-in-out infinite; }
  & .pr { animation: btc-mi-prop-burst 6s linear infinite; }
}

/* off screen or over the two-icon budget (class set by btc-motion-icons.js) */
.btc-icon.is-off * { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .btc-icon * { animation: none !important; }
}

/* where the icons replace a glyph (charter v2, 7.10) */
.btc-btn .btc-icon { width: 1.5em; height: 1.5em; vertical-align: middle; }
.btc-user-dropdown-admin .btc-icon { width: 1.15em; height: 1.15em; margin-right: .3em; vertical-align: -0.25em; }
.btc-footer-divider-icon { display: inline-flex; }
.btc-footer-divider-icon .btc-icon { width: 18px; height: 18px; }