/* Decorative motion uses transforms and respects the visitor's motion preference. */
body.catalog-home .site-hero{position:relative;isolation:isolate}
body.catalog-home .site-hero::before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:-30px -10px;background:radial-gradient(ellipse at 75% 35%,#c4b5fd50,transparent 55%),radial-gradient(ellipse at 25% 70%,#99f6e42a,transparent 50%);animation:aurora-drift 16s ease-in-out infinite alternate}
body.catalog-home .site-hero__grad{background-size:200% 100%;animation:gradient-drift 12s ease-in-out infinite alternate}
.catalog-brand img{transition:transform .4s cubic-bezier(.2,.8,.2,1),filter .4s}.catalog-brand a:hover img{transform:rotate(-8deg) scale(1.08);filter:drop-shadow(0 4px 9px #7c3aed40)}
#toolCatalog .tool-card{background:linear-gradient(155deg,#fff 65%,var(--tint));border-color:#ffffffd9;box-shadow:0 4px 16px #23325206,inset 0 0 0 1px #d9e0eb77;transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s,border-color .28s}
#toolCatalog .tool-card>*:not(.tool-card__cursor-glow){position:relative;z-index:2}
#toolCatalog .tool-card__cursor-glow{position:absolute;z-index:1;left:50%;top:50%;width:128px;height:128px;display:grid;place-items:center;color:var(--accent);pointer-events:none;opacity:0;filter:blur(18px) saturate(2.8) brightness(1.25);transform:translate(-50%,-50%) translate(var(--pointer-shift-x,0%),var(--pointer-shift-y,0%)) scale(3.25);transition:opacity .2s ease-out;will-change:transform,opacity}
#toolCatalog .tool-card__cursor-glow::before{content:"";position:absolute;inset:14%;border-radius:50%;background:currentColor;opacity:.18}
#toolCatalog .tool-card__cursor-glow svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
#toolCatalog .tool-card:is(:hover,:focus-visible) .tool-card__cursor-glow{opacity:.52}
#toolCatalog .tool-card:hover,#toolCatalog .tool-card:focus-visible{transform:translateY(-6px);border-color:var(--accent);box-shadow:0 16px 32px #23325212,inset 0 0 0 1px #ffffff99}
.tool-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,transparent 20%,#ffffff80 45%,transparent 65%);transform:translateX(-110%);opacity:0}
.tool-card{overflow:hidden}
@media(hover:hover){.tool-card:hover::after{animation:card-sheen .8s ease-out}}
#toolCatalog .tool-card__icon{width:54px;height:54px;border-radius:17px;background:linear-gradient(145deg,#fff,var(--tint));border:1px solid #ffffff;box-shadow:0 5px 11px #23325207,inset 0 -2px 3px var(--tint);transition:transform .3s,box-shadow .3s;position:relative}
#toolCatalog .sleek-icon{width:31px;height:31px;stroke-width:1.55;overflow:visible}
.sleek-icon .icon-base{opacity:.8}.sleek-icon .icon-detail{stroke-width:1.9;transform-box:view-box;transform-origin:12px 12px}
.tool-card__arrow{transition:transform .25s,color .25s}
.tool-card:hover .tool-card__arrow,.tool-card:focus-visible .tool-card__arrow{transform:translate(3px,-3px);color:var(--accent)}
.tool-card:hover .tool-card__icon,.tool-card:focus-visible .tool-card__icon{transform:translateY(-2px);box-shadow:0 8px 18px #23325210}
.tool-card:is(.is-looping,:hover,:focus-visible) .icon-detail{animation:icon-pulse 1.6s ease-in-out infinite}
.tool-card[data-motion=compress]:is(.is-looping,:hover,:focus-visible) .icon-detail{animation:icon-compress 1.6s ease-in-out infinite}
.tool-card[data-motion=slide]:is(.is-looping,:hover,:focus-visible) .icon-detail,.tool-card[data-motion=flow]:is(.is-looping,:hover,:focus-visible) .icon-detail{animation:icon-slide 1.6s ease-in-out infinite}
.tool-card[data-motion=drop]:is(.is-looping,:hover,:focus-visible) .icon-detail{animation:icon-drop 1.6s ease-in-out infinite}
.tool-card[data-motion=scan]:is(.is-looping,:hover,:focus-visible) .icon-detail{animation:icon-scan 2s ease-in-out infinite}
.tool-card[data-motion=tilt]:is(.is-looping,:hover,:focus-visible) .sleek-icon{animation:icon-tilt 2s ease-in-out infinite}
.tool-card[data-motion=search]:is(.is-looping,:hover,:focus-visible) .icon-detail{animation:icon-search 2s ease-in-out infinite}
.tool-card[data-motion=rotate]:is(.is-looping,:hover,:focus-visible) .icon-detail,.tool-card[data-motion=gauge]:is(.is-looping,:hover,:focus-visible) .icon-detail{animation:icon-gauge 2s ease-in-out infinite}
.tool-card[data-motion=check]:is(.is-looping,:hover,:focus-visible) .icon-detail,.tool-card[data-motion=write]:is(.is-looping,:hover,:focus-visible) .icon-detail,.tool-card[data-motion=draw]:is(.is-looping,:hover,:focus-visible) .icon-detail{stroke-dasharray:60;animation:icon-draw 2.4s ease-in-out infinite}
.tool-card[data-motion=spark]:is(.is-looping,:hover,:focus-visible) .icon-detail{animation:icon-spark 2s ease-in-out infinite}
.tool-card[data-motion=lift]:is(.is-looping,:hover,:focus-visible) .icon-detail,.tool-card[data-motion=float]:is(.is-looping,:hover,:focus-visible) .icon-detail{animation:icon-lift 2s ease-in-out infinite}
.tool-card[data-motion=unlock]:is(.is-looping,:hover,:focus-visible) .icon-detail{animation:icon-unlock 1.8s ease-in-out infinite}
.card-arriving{animation:card-arrive .65s cubic-bezier(.2,.8,.2,1) var(--arrival-delay,0ms) backwards}
@keyframes card-arrive{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes aurora-drift{from{transform:translate(-8px,0) scale(.98)}to{transform:translate(14px,8px) scale(1.03)}}
@keyframes gradient-drift{from{background-position:0% 50%}to{background-position:100% 50%}}
@keyframes card-sheen{0%{opacity:0;transform:translateX(-110%)}25%{opacity:.55}100%{opacity:0;transform:translateX(110%)}}
@keyframes icon-pulse{50%{opacity:.65;transform:scale(.94)}}
@keyframes icon-compress{50%{transform:scale(.75)}}
@keyframes icon-slide{50%{transform:translateX(1.7px)}}
@keyframes icon-drop{50%{transform:translateY(2px)}}
@keyframes icon-scan{0%,100%{transform:translateY(-6px);opacity:.4}50%{transform:translateY(6px);opacity:1}}
@keyframes icon-tilt{0%,100%{transform:rotate(0)}35%{transform:rotate(-5deg)}70%{transform:rotate(4deg)}}
@keyframes icon-search{50%{transform:translate(-1.8px,-1.8px)}}
@keyframes icon-gauge{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(14deg)}}
@keyframes icon-draw{0%,10%{stroke-dashoffset:60;opacity:.35}50%,100%{stroke-dashoffset:0;opacity:1}}
@keyframes icon-spark{50%{transform:scale(1.12) rotate(7deg)}}
@keyframes icon-lift{50%{transform:translateY(-2px)}}
@keyframes icon-unlock{50%{transform:scale(1.12);opacity:.7}}
@media(prefers-reduced-motion:reduce){body.catalog-home .site-hero::before,body.catalog-home .site-hero__grad,.card-arriving,.tool-card::after,.tool-card .sleek-icon,.tool-card .icon-detail{animation:none!important}.tool-card,.tool-card__icon,.tool-card__arrow,.catalog-brand img{transition:none!important}.tool-card:hover,.tool-card:focus-visible,.tool-card:hover .tool-card__icon{transform:none!important}.tool-card__cursor-glow{display:none!important}}
@media(hover:none),(pointer:coarse){#toolCatalog .tool-card__cursor-glow{display:none}}
.tool-card[data-motion=scale]:is(.is-looping,:hover,:focus-visible) .icon-detail{animation:icon-expand 1.8s ease-in-out infinite}
.tool-card[data-motion=split]:is(.is-looping,:hover,:focus-visible) .icon-detail{animation:icon-split 1.8s ease-in-out infinite}
@keyframes icon-expand{50%{transform:scale(1.2)}}
@keyframes icon-split{50%{transform:scaleX(1.18);opacity:.65}}
@media(hover:none) and (prefers-reduced-motion:no-preference){.card-arriving .sleek-icon{animation:icon-welcome 1.2s ease-in-out var(--arrival-delay,0ms) 1}}
@keyframes icon-welcome{0%,100%{transform:translateY(0)}35%{transform:translateY(-3px) rotate(-4deg)}65%{transform:translateY(-1px) rotate(3deg)}}
/* Loop only visible icons; stagger their timing so the grid stays calm. */
#toolCatalog .tool-card:is(.is-looping,:hover,:focus-visible) .icon-detail,
#toolCatalog .tool-card[data-motion=tilt]:is(.is-looping,:hover,:focus-visible) .sleek-icon{animation-duration:var(--loop-duration,3.5s);animation-delay:var(--loop-offset,0s);animation-iteration-count:infinite}
#toolCatalog .catalog-title-row{display:flex;flex-wrap:wrap;align-items:center}
#toolCatalog .catalog-title-row h2{margin-right:auto}
#toolCatalog .catalog-motion-toggle{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 14px;min-height:44px;border:1px solid #d5d9e8;border-radius:999px;background:#ffffffb8;color:#5b54a5;font-size:12px;font-weight:650;line-height:1;cursor:pointer;white-space:nowrap;box-shadow:none;touch-action:manipulation}
#toolCatalog .catalog-motion-toggle::before{content:'Ⅱ';font-size:12px;font-weight:800}
#toolCatalog .catalog-motion-toggle[aria-pressed=true]::before{content:'▷'}
#toolCatalog .catalog-motion-toggle:focus-visible{outline:3px solid #6366f1;outline-offset:3px}
#toolCatalog .catalog-motion-toggle:disabled{cursor:default;opacity:.7}
html.motion-paused .site-hero::before,html.motion-paused .site-hero__grad,html.motion-paused .tool-card .sleek-icon,html.motion-paused .tool-card .icon-detail,
html.motion-hidden .site-hero::before,html.motion-hidden .site-hero__grad,html.motion-hidden .tool-card .sleek-icon,html.motion-hidden .tool-card .icon-detail{animation-play-state:paused!important}
@media(max-width:420px){#toolCatalog .catalog-title-row{flex-direction:row;gap:8px}#toolCatalog .catalog-title-row h2{flex:1 1 100%}#toolCatalog .catalog-title-row p{margin-right:auto}}
@media(prefers-reduced-motion:reduce){#toolCatalog .tool-card .icon-detail,#toolCatalog .tool-card .sleek-icon{animation:none!important}}