/* OSAIT category icons v3 — Premium/Realistic with micro-animations.
Works on INLINE svg (injected by js/cat-svg.js from ![]()
). */
svg.cat-svg{display:inline-block;vertical-align:middle}
.c-menu__item-icon svg.cat-svg{width:auto;height:auto;max-width:100%;max-height:25px}
.h-menu__img-icon svg.cat-svg{width:auto;height:auto;max-width:100%;max-height:100%}
/* animated parts: geometry context */
.cat-svg [class*="a-"]{transform-box:fill-box;transform-origin:center}
.cat-svg .o-tl{transform-origin:0 0}
.cat-svg .o-tr{transform-origin:100% 0}
.cat-svg .o-bl{transform-origin:0 100%}
.cat-svg .o-br{transform-origin:100% 100%}
/* per-part animation variables */
.cat-svg .a-spin{--cat-anim:cat-spin 1.8s linear infinite}
.cat-svg .a-spinrev{--cat-anim:cat-spinrev 2.6s linear infinite}
.cat-svg .a-blink{--cat-anim:cat-blink 1.2s ease-in-out infinite}
.cat-svg .a-pulse{--cat-anim:cat-pulse 1.4s ease-in-out infinite}
.cat-svg .a-glow{--cat-anim:cat-glow 1.4s ease-in-out infinite}
.cat-svg .a-typing{--cat-anim:cat-typing .38s ease-in-out infinite alternate}
.cat-svg .a-press{--cat-anim:cat-press .45s ease-in-out infinite alternate}
.cat-svg .a-bob{--cat-anim:cat-bob 1.3s ease-in-out infinite alternate}
.cat-svg .a-pop{--cat-anim:cat-pop .7s ease-in-out infinite alternate}
.cat-svg .a-vibe{--cat-anim:cat-vibe .5s linear infinite}
.cat-svg .a-paper{--cat-anim:cat-paper 1s ease-in-out infinite alternate}
.cat-svg .a-swing{--cat-anim:cat-swing 1.1s ease-in-out infinite alternate}
.cat-svg .a-wave{--cat-anim:cat-wave 1s ease-in-out infinite alternate}
.cat-svg .a-shoot{--cat-anim:cat-shoot .9s ease-in-out infinite alternate}
.cat-svg .a-shootl{--cat-anim:cat-shootl .9s ease-in-out infinite alternate}
.cat-svg .a-drop{--cat-anim:cat-drop 1s ease-in-out infinite alternate}
.cat-svg .a-scan{--cat-anim:cat-scan 1.5s ease-in-out infinite}
.cat-svg .a-drip{--cat-anim:cat-drip 1.4s ease-in infinite}
.cat-svg .a-rise{--cat-anim:cat-rise 1.6s ease-out infinite}
.cat-svg .a-draw{--cat-anim:cat-draw 1.6s ease-in-out infinite alternate}
/* stagger helpers */
.cat-svg .a-d1{animation-delay:.15s!important}
.cat-svg .a-d2{animation-delay:.3s!important}
.cat-svg .a-d3{animation-delay:.45s!important}
.cat-svg .a-ty2{animation-delay:.12s!important}
/* reveal-on-hover parts (hands etc.) */
.cat-svg .h-appear{opacity:0;transition:opacity .25s ease}
/* TRIGGER: hover on the icon itself OR on the ancestor link / menu row */
svg.cat-svg:hover [class*="a-"],
a:has(.cat-svg):hover .cat-svg [class*="a-"],
.c-menu__item:hover .cat-svg [class*="a-"],
.c-menu__drop-li:hover .cat-svg [class*="a-"],
.h-menu__item:hover .cat-svg [class*="a-"],
/* v1.0.6: explicit triggers for mega-menu rows, homepage cards, left menu
(fallback for browsers without :has() — Safari<15.4, Firefox<121) */
.h-menu__img-link:hover .cat-svg [class*="a-"],
.h-menu__img-link-1:hover .cat-svg [class*="a-"],
.h-menu__img-li:hover .cat-svg [class*="a-"],
.h-menu__img-li-1:hover .cat-svg [class*="a-"],
.h-categ__link:hover .cat-svg [class*="a-"],
.l-menu__link:hover .cat-svg [class*="a-"]{animation:var(--cat-anim)}
a:has(.cat-svg):hover .cat-svg .h-appear,
.c-menu__item:hover .cat-svg .h-appear,
.c-menu__drop-li:hover .cat-svg .h-appear,
.h-menu__item:hover .cat-svg .h-appear,
svg.cat-svg:hover .h-appear,
/* v1.0.6: explicit row classes — works in browsers without :has() */
.h-menu__img-link:hover .cat-svg .h-appear,
.h-menu__img-link-1:hover .cat-svg .h-appear,
.h-menu__img-li:hover .cat-svg .h-appear,
.h-menu__img-li-1:hover .cat-svg .h-appear,
.h-categ__link:hover .cat-svg .h-appear,
.l-menu__link:hover .cat-svg .h-appear{opacity:1}
/* gentle scale polish on hover */
svg.cat-svg{transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
a:has(.cat-svg):hover .cat-svg,
.c-menu__item:hover .cat-svg,
.c-menu__drop-li:hover .cat-svg,
.h-menu__item:hover .cat-svg,
.h-menu__img-link:hover .cat-svg,
.h-menu__img-link-1:hover .cat-svg,
.h-menu__img-li:hover .cat-svg,
.h-menu__img-li-1:hover .cat-svg,
.h-categ__link:hover .cat-svg,
.l-menu__link:hover .cat-svg{transform:scale(1.12)}
@keyframes cat-spin{to{transform:rotate(360deg)}}
@keyframes cat-spinrev{to{transform:rotate(-360deg)}}
@keyframes cat-blink{0%,100%{opacity:1}50%{opacity:.15}}
@keyframes cat-pulse{0%,100%{opacity:.2}50%{opacity:1}}
@keyframes cat-glow{0%,100%{opacity:.25}50%{opacity:.95}}
@keyframes cat-typing{0%,100%{transform:translateY(0)}50%{transform:translateY(-3.5px)}}
@keyframes cat-press{0%,100%{transform:translateY(0)}50%{transform:translateY(2.5px)}}
@keyframes cat-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5px)}}
@keyframes cat-pop{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
@keyframes cat-vibe{0%,100%{transform:translate(-1.5px,0)}25%{transform:translate(1.5px,-.5px)}50%{transform:translate(-1px,.5px)}75%{transform:translate(1px,0)}}
@keyframes cat-paper{0%,100%{transform:translateY(0)}50%{transform:translateY(9px)}}
@keyframes cat-swing{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(14deg)}}
@keyframes cat-wave{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
@keyframes cat-shoot{0%,100%{transform:translateX(0)}50%{transform:translateX(9px)}}
@keyframes cat-shootl{0%,100%{transform:translateX(0)}50%{transform:translateX(-9px)}}
@keyframes cat-drop{0%,100%{transform:translateY(0)}50%{transform:translateY(9px)}}
@keyframes cat-scan{0%{transform:translateY(-9px);opacity:0}30%{opacity:.9}100%{transform:translateY(9px);opacity:0}}
@keyframes cat-drip{0%{transform:translateY(0);opacity:0}25%{opacity:1}100%{transform:translateY(15px);opacity:0}}
@keyframes cat-rise{0%{transform:translateY(0);opacity:0}25%{opacity:1}100%{transform:translateY(-13px);opacity:0}}
@keyframes cat-draw{from{stroke-dashoffset:46}to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
.cat-svg [class*="a-"]{animation:none!important}
.cat-svg .h-appear{opacity:1}
svg.cat-svg{transition:none}
}
/* v1.0.5 — size caps + inline subcategory icons (thin-line set) */
/* v1.0.6 — homepage cards: svg must render at the SAME size the theme ![]()
had.
Chrome lays out a dimensionless square SVG ![]()
at exactly 50% of the square
container (.h-categ__img, padding-top:100%). 50%/50% + inset:0 + margin:auto
reproduces that box pixel-perfectly -> img->svg swap is invisible (no "jump"). */
.h-categ__img svg.cat-svg{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;width:50%;height:50%}
.h-menu__img-ic,.h-menu__img-ic_icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:22px;height:22px;margin-right:7px}
.h-menu__img-ic svg.cat-svg,.h-menu__img-ic_icon svg.cat-svg{width:22px;height:22px}
.h-menu__img-ic img,.h-menu__img-ic_icon img{width:22px;height:22px;object-fit:contain}
.h-menu__img-link-1{flex-wrap:nowrap}
.m-menu__icon svg.cat-svg{width:auto;height:auto;max-height:30px;max-width:100%}
.l-menu__icon svg.cat-svg{width:auto;height:auto;max-width:100%;max-height:25px}
). */
svg.cat-svg{display:inline-block;vertical-align:middle}
.c-menu__item-icon svg.cat-svg{width:auto;height:auto;max-width:100%;max-height:25px}
.h-menu__img-icon svg.cat-svg{width:auto;height:auto;max-width:100%;max-height:100%}
/* animated parts: geometry context */
.cat-svg [class*="a-"]{transform-box:fill-box;transform-origin:center}
.cat-svg .o-tl{transform-origin:0 0}
.cat-svg .o-tr{transform-origin:100% 0}
.cat-svg .o-bl{transform-origin:0 100%}
.cat-svg .o-br{transform-origin:100% 100%}
/* per-part animation variables */
.cat-svg .a-spin{--cat-anim:cat-spin 1.8s linear infinite}
.cat-svg .a-spinrev{--cat-anim:cat-spinrev 2.6s linear infinite}
.cat-svg .a-blink{--cat-anim:cat-blink 1.2s ease-in-out infinite}
.cat-svg .a-pulse{--cat-anim:cat-pulse 1.4s ease-in-out infinite}
.cat-svg .a-glow{--cat-anim:cat-glow 1.4s ease-in-out infinite}
.cat-svg .a-typing{--cat-anim:cat-typing .38s ease-in-out infinite alternate}
.cat-svg .a-press{--cat-anim:cat-press .45s ease-in-out infinite alternate}
.cat-svg .a-bob{--cat-anim:cat-bob 1.3s ease-in-out infinite alternate}
.cat-svg .a-pop{--cat-anim:cat-pop .7s ease-in-out infinite alternate}
.cat-svg .a-vibe{--cat-anim:cat-vibe .5s linear infinite}
.cat-svg .a-paper{--cat-anim:cat-paper 1s ease-in-out infinite alternate}
.cat-svg .a-swing{--cat-anim:cat-swing 1.1s ease-in-out infinite alternate}
.cat-svg .a-wave{--cat-anim:cat-wave 1s ease-in-out infinite alternate}
.cat-svg .a-shoot{--cat-anim:cat-shoot .9s ease-in-out infinite alternate}
.cat-svg .a-shootl{--cat-anim:cat-shootl .9s ease-in-out infinite alternate}
.cat-svg .a-drop{--cat-anim:cat-drop 1s ease-in-out infinite alternate}
.cat-svg .a-scan{--cat-anim:cat-scan 1.5s ease-in-out infinite}
.cat-svg .a-drip{--cat-anim:cat-drip 1.4s ease-in infinite}
.cat-svg .a-rise{--cat-anim:cat-rise 1.6s ease-out infinite}
.cat-svg .a-draw{--cat-anim:cat-draw 1.6s ease-in-out infinite alternate}
/* stagger helpers */
.cat-svg .a-d1{animation-delay:.15s!important}
.cat-svg .a-d2{animation-delay:.3s!important}
.cat-svg .a-d3{animation-delay:.45s!important}
.cat-svg .a-ty2{animation-delay:.12s!important}
/* reveal-on-hover parts (hands etc.) */
.cat-svg .h-appear{opacity:0;transition:opacity .25s ease}
/* TRIGGER: hover on the icon itself OR on the ancestor link / menu row */
svg.cat-svg:hover [class*="a-"],
a:has(.cat-svg):hover .cat-svg [class*="a-"],
.c-menu__item:hover .cat-svg [class*="a-"],
.c-menu__drop-li:hover .cat-svg [class*="a-"],
.h-menu__item:hover .cat-svg [class*="a-"],
/* v1.0.6: explicit triggers for mega-menu rows, homepage cards, left menu
(fallback for browsers without :has() — Safari<15.4, Firefox<121) */
.h-menu__img-link:hover .cat-svg [class*="a-"],
.h-menu__img-link-1:hover .cat-svg [class*="a-"],
.h-menu__img-li:hover .cat-svg [class*="a-"],
.h-menu__img-li-1:hover .cat-svg [class*="a-"],
.h-categ__link:hover .cat-svg [class*="a-"],
.l-menu__link:hover .cat-svg [class*="a-"]{animation:var(--cat-anim)}
a:has(.cat-svg):hover .cat-svg .h-appear,
.c-menu__item:hover .cat-svg .h-appear,
.c-menu__drop-li:hover .cat-svg .h-appear,
.h-menu__item:hover .cat-svg .h-appear,
svg.cat-svg:hover .h-appear,
/* v1.0.6: explicit row classes — works in browsers without :has() */
.h-menu__img-link:hover .cat-svg .h-appear,
.h-menu__img-link-1:hover .cat-svg .h-appear,
.h-menu__img-li:hover .cat-svg .h-appear,
.h-menu__img-li-1:hover .cat-svg .h-appear,
.h-categ__link:hover .cat-svg .h-appear,
.l-menu__link:hover .cat-svg .h-appear{opacity:1}
/* gentle scale polish on hover */
svg.cat-svg{transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
a:has(.cat-svg):hover .cat-svg,
.c-menu__item:hover .cat-svg,
.c-menu__drop-li:hover .cat-svg,
.h-menu__item:hover .cat-svg,
.h-menu__img-link:hover .cat-svg,
.h-menu__img-link-1:hover .cat-svg,
.h-menu__img-li:hover .cat-svg,
.h-menu__img-li-1:hover .cat-svg,
.h-categ__link:hover .cat-svg,
.l-menu__link:hover .cat-svg{transform:scale(1.12)}
@keyframes cat-spin{to{transform:rotate(360deg)}}
@keyframes cat-spinrev{to{transform:rotate(-360deg)}}
@keyframes cat-blink{0%,100%{opacity:1}50%{opacity:.15}}
@keyframes cat-pulse{0%,100%{opacity:.2}50%{opacity:1}}
@keyframes cat-glow{0%,100%{opacity:.25}50%{opacity:.95}}
@keyframes cat-typing{0%,100%{transform:translateY(0)}50%{transform:translateY(-3.5px)}}
@keyframes cat-press{0%,100%{transform:translateY(0)}50%{transform:translateY(2.5px)}}
@keyframes cat-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5px)}}
@keyframes cat-pop{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
@keyframes cat-vibe{0%,100%{transform:translate(-1.5px,0)}25%{transform:translate(1.5px,-.5px)}50%{transform:translate(-1px,.5px)}75%{transform:translate(1px,0)}}
@keyframes cat-paper{0%,100%{transform:translateY(0)}50%{transform:translateY(9px)}}
@keyframes cat-swing{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(14deg)}}
@keyframes cat-wave{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
@keyframes cat-shoot{0%,100%{transform:translateX(0)}50%{transform:translateX(9px)}}
@keyframes cat-shootl{0%,100%{transform:translateX(0)}50%{transform:translateX(-9px)}}
@keyframes cat-drop{0%,100%{transform:translateY(0)}50%{transform:translateY(9px)}}
@keyframes cat-scan{0%{transform:translateY(-9px);opacity:0}30%{opacity:.9}100%{transform:translateY(9px);opacity:0}}
@keyframes cat-drip{0%{transform:translateY(0);opacity:0}25%{opacity:1}100%{transform:translateY(15px);opacity:0}}
@keyframes cat-rise{0%{transform:translateY(0);opacity:0}25%{opacity:1}100%{transform:translateY(-13px);opacity:0}}
@keyframes cat-draw{from{stroke-dashoffset:46}to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
.cat-svg [class*="a-"]{animation:none!important}
.cat-svg .h-appear{opacity:1}
svg.cat-svg{transition:none}
}
/* v1.0.5 — size caps + inline subcategory icons (thin-line set) */
/* v1.0.6 — homepage cards: svg must render at the SAME size the theme