/* Every glyph has a permanent orange detail and its own motion. */
.tools-app .app-brand-mark { display: block; width: 37px; height: 37px; overflow: visible; }
@media (max-height: 450px) and (min-width: 701px) {
  .tools-app .app-brand-mark { width: 32px; height: 32px; }
}
.tools-app .app-icon {
  color: var(--app-icon-ink, #465063);
  overflow: visible;
  transform-origin: center;
}
.tools-app .app-icon-accent {
  color: var(--app-icon-accent, var(--app-orange));
  stroke: currentColor;
}
.tools-app .app-icon-accent[stroke="none"] { stroke: none; }
.tools-app .app-icon > * { transform-box: fill-box; transform-origin: center; }
.tools-app .ai-send { --app-icon-ink: #fff; --app-icon-accent: #ffe0ba; }
.tools-app :is(.app-nav-link, .app-overflow-link, .app-button, .app-icon-button) {
  transition: background-color .18s ease, border-color .18s ease;
}
.tools-app :is(.app-nav-link, .app-overflow-link, .app-icon-button):not(:disabled):is(:focus-visible, :active) {
  background: var(--app-soft);
}
.tools-app .tool-card:focus-visible { border-color: var(--app-orange); }

/* Motion belongs to a glyph or to an independent part of it. */
[data-app-icon="cube"] { --app-glyph-motion: app-cube-turn; }
[data-app-icon="convert"] > path:first-child { --app-part-motion: app-converter-cube; }
[data-app-icon="convert"] .app-icon-accent { --app-part-motion: app-converter-swap; }
[data-app-icon="qr"] rect { --app-part-motion: app-qr-corner; }
[data-app-icon="qr"] rect:nth-child(2) { --app-part-delay: .09s; }
[data-app-icon="qr"] rect:nth-child(3) { --app-part-delay: .18s; }
[data-app-icon="qr"] .app-icon-accent { --app-part-motion: app-qr-scan; }
:is([data-tool-key="measure"], [data-tool-card="measure"], [data-tool-row="measure"]) [data-app-icon="ruler"] { --app-glyph-motion: app-thickness-check; }
[data-app-icon="chat"] .app-icon-accent { --app-part-motion: app-ai-spark; }
[data-app-icon="grid"] rect { --app-part-motion: app-grid-tile; }
[data-app-icon="grid"] rect:nth-child(2) { --app-part-delay: .08s; }
[data-app-icon="grid"] rect:nth-child(4) { --app-part-delay: .16s; }
[data-app-icon="grid"] rect:nth-child(3) { --app-part-delay: .24s; }
[data-app-icon="calculator"] path { --app-part-motion: app-calculator-key; }
[data-app-icon="calculator"] path:nth-child(3) { --app-part-delay: .1s; }
[data-app-icon="calculator"] path:nth-child(4) { --app-part-delay: .2s; }
[data-app-icon="calculator"] path:nth-child(5) { --app-part-delay: .3s; }
[data-app-icon="layers"] path:first-child { --app-part-motion: app-layer-top; }
[data-app-icon="layers"] path:last-child { --app-part-motion: app-layer-bottom; }
[data-app-icon="search"] { --app-glyph-motion: app-search-scan; }
[data-app-icon="magnifier"] { --app-glyph-motion: app-search-scan; }
[data-app-icon="search"] .app-model-search-cube { --app-part-motion: app-search-model-turn; }
[data-app-icon="split"] path:first-child { --app-part-motion: app-split-left; }
[data-app-icon="split"] path:nth-child(2) { --app-part-motion: app-split-right; }
[data-app-icon="skadis"] path { --app-part-motion: app-panel-assemble; }
[data-app-icon="skadis"] path:nth-child(3) { --app-part-delay: .08s; }
[data-app-icon="skadis"] path:nth-child(4) { --app-part-delay: .16s; }
[data-app-icon="hexagon"] path { --app-part-motion: app-honeycomb-assemble; --app-cell-x: -1.5px; --app-cell-y: -1px; }
[data-app-icon="hexagon"] path:nth-child(2) { --app-cell-x: 1.5px; }
[data-app-icon="hexagon"] path:nth-child(3) { --app-cell-x: 0px; --app-cell-y: 2px; }
[data-app-icon="image"] circle { --app-part-motion: app-image-flash; }
[data-app-icon="image"] .app-icon-accent { --app-part-motion: app-image-develop; }
[data-app-icon="ruler"] .app-icon-accent { --app-part-motion: app-ruler-measure; }
[data-app-icon="type"] .app-icon-accent { --app-part-motion: app-type-flip; }
[data-app-icon="box"] .app-icon-accent { --app-part-motion: app-box-open; }
[data-app-icon="book"] .app-icon-accent { --app-part-motion: app-book-page; transform-origin: left center; }
[data-app-icon="help"] .app-icon-accent { --app-part-motion: app-help-nod; }
[data-app-icon="plus"] { --app-glyph-motion: app-plus-form; }
[data-app-icon="more"] circle { --app-part-motion: app-more-wave; }
[data-app-icon="more"] circle:nth-child(2) { --app-part-delay: .12s; }
[data-app-icon="more"] circle:nth-child(3) { --app-part-delay: .24s; }
[data-app-icon="arrow"] { --app-glyph-motion: app-arrow-launch; }
[data-app-icon="close"] { --app-glyph-motion: app-close-turn; }
[data-app-icon="download"] .app-icon-accent { --app-part-motion: app-download-drop; }
[data-app-icon="external"] .app-icon-accent { --app-part-motion: app-external-go; }
[data-app-icon="boosty"] { --app-glyph-motion: app-boosty-lift; }
.tools-app [data-app-icon="boosty"] > g { transform-box: view-box; transform-origin: 0 0; }

@media (hover: hover) and (pointer: fine) {
  .tools-app :is(.app-nav-link, .app-overflow-link, .app-icon-button):not(:disabled):hover { background: var(--app-soft); }
  .tools-app .app-button:not(:disabled):hover { background: #fffaf5; border-color: #ffbd7a; }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .tools-app .app-brand-gear {
    transform-box: view-box; transform-origin: center;
  }
  .tools-app .app-brand.is-spinning .app-brand-gear { animation: app-brand-gear-spin 2.8s linear infinite; }
  .tools-app :where(button, a[href], .ai-mark):not(:disabled):not([aria-disabled="true"]):is(:hover, :focus-visible) .app-icon {
    animation-name: var(--app-glyph-motion, none);
    animation-duration: .72s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: both;
  }
  .tools-app :where(button, a[href], .ai-mark):not(:disabled):not([aria-disabled="true"]):is(:hover, :focus-visible) .app-icon > * {
    animation-name: var(--app-part-motion, none);
    animation-duration: .72s;
    animation-timing-function: ease-in-out;
    animation-delay: var(--app-part-delay, 0s);
    animation-fill-mode: both;
  }
}

@keyframes app-brand-gear-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes app-converter-cube { 0%, 100% { transform: perspective(40px) rotateY(0); scale: 1; } 50% { transform: perspective(40px) rotateY(-30deg); scale: .86; } }
@keyframes app-converter-swap { from { rotate: 0deg; } to { rotate: 180deg; } }
@keyframes app-qr-corner { 0%, 100% { scale: 1; } 40% { scale: .72; } 70% { scale: 1.08; } }
@keyframes app-qr-scan { 0%, 100% { opacity: 1; } 30% { opacity: .3; } 65% { opacity: 1; } }
@keyframes app-thickness-check { 0%, 100% { rotate: 0deg; scale: 1; } 35% { rotate: -8deg; scale: 1.08; } 70% { rotate: 4deg; scale: 1; } }
@keyframes app-cube-turn {
  0%, 100% { transform: perspective(80px) rotateY(0) rotateZ(0); }
  40% { transform: perspective(80px) rotateY(-28deg) rotateZ(-5deg); }
  72% { transform: perspective(80px) rotateY(15deg) rotateZ(3deg); }
}
@keyframes app-ai-spark {
  0%, 100% { transform: scale(1) rotate(0); opacity: 1; }
  35% { transform: scale(.65) rotate(-25deg); opacity: .55; }
  65% { transform: scale(1.24) rotate(25deg); opacity: 1; }
}
@keyframes app-grid-tile { 0%, 100% { scale: 1; } 45% { scale: .65; } 70% { scale: 1.08; } }
@keyframes app-calculator-key { 0%, 100% { opacity: 1; translate: 0; } 35% { opacity: .2; translate: 0 1px; } 65% { opacity: 1; translate: 0; stroke: var(--app-orange); } }
@keyframes app-layer-top { 0%, 100% { translate: 0; } 45%, 60% { translate: 0 -3px; } }
@keyframes app-layer-bottom { 0%, 100% { translate: 0; } 45%, 60% { translate: 0 2px; } }
@keyframes app-search-scan { 0%, 100% { translate: 0; rotate: 0deg; } 30% { translate: -2px 1px; rotate: -12deg; } 65% { translate: 2px -1px; rotate: 8deg; } }
@keyframes app-search-model-turn { 0%, 100% { transform: perspective(40px) rotateY(0) scale(1); } 40% { transform: perspective(40px) rotateY(-30deg) scale(.9); } 70% { transform: perspective(40px) rotateY(20deg) scale(1.06); } }
@keyframes app-split-left { 0%, 100% { translate: 0; } 45%, 65% { translate: -3px; } }
@keyframes app-split-right { 0%, 100% { translate: 0; } 45%, 65% { translate: 3px; } }
@keyframes app-panel-assemble { 0%, 100% { translate: 0; scale: 1; } 35% { translate: 0 -1.5px; scale: 1 .75; } 70% { translate: 0 .5px; scale: 1 1.08; } }
@keyframes app-honeycomb-assemble { 0%, 100% { translate: 0; scale: 1; } 45% { translate: var(--app-cell-x) var(--app-cell-y); scale: .9; } 75% { translate: 0; scale: 1.03; } }
@keyframes app-image-flash { 0%, 100% { scale: 1; opacity: 1; } 40% { scale: 2; opacity: .3; } }
@keyframes app-image-develop { 0%, 100% { translate: 0; opacity: 1; } 35% { translate: 0 2px; opacity: .3; } 70% { translate: 0 -1px; opacity: 1; } }
@keyframes app-ruler-measure { 0%, 100% { translate: 0; } 35% { translate: 2px -2px; } 70% { translate: -1px 1px; } }
@keyframes app-type-flip { 0%, 100% { transform: perspective(40px) rotateY(0); } 50% { transform: perspective(40px) rotateY(180deg); } }
@keyframes app-box-open { 0%, 100% { translate: 0; scale: 1; } 45%, 65% { translate: 0 -3px; scale: 1 .8; } }
@keyframes app-book-page { 0%, 100% { transform: skewY(0) scaleX(1); } 45% { transform: skewY(-12deg) scaleX(.15); } 70% { transform: skewY(5deg) scaleX(1); } }
@keyframes app-help-nod { 0%, 100% { rotate: 0deg; translate: 0; } 35% { rotate: 15deg; translate: 0 -1px; } 65% { rotate: -8deg; translate: 0; } }
@keyframes app-plus-form { 0%, 100% { rotate: 0deg; scale: 1; } 45% { rotate: 90deg; scale: .7; } 75% { rotate: 0deg; scale: 1.1; } }
@keyframes app-more-wave { 0%, 65%, 100% { translate: 0; } 32% { translate: 0 -4px; } }
@keyframes app-arrow-launch { 0%, 100% { translate: 0; } 25% { translate: 0 2px; } 60% { translate: 0 -4px; } }
@keyframes app-close-turn { from { rotate: 0deg; } to { rotate: 90deg; } }
@keyframes app-download-drop { 0%, 100% { translate: 0; } 45% { translate: 0 3px; } 70% { translate: 0 -1px; } }
@keyframes app-external-go { 0%, 100% { translate: 0; } 55% { translate: 3px -3px; } }
@keyframes app-boosty-lift { 0%, 100% { translate: 0; scale: 1; } 50% { translate: 0 -3px; scale: 1.08; } }

@media (prefers-reduced-motion: reduce) {
  .tools-app .tool-card:hover { transform: none; }
}