/* Shared motion language. Reveal animations never change the default visible state. */
:root {
    --motion-fast: 180ms;
    --motion-base: 320ms;
    --motion-reveal: 650ms;
    --motion-ease: cubic-bezier(.22, 1, .36, 1);
    --motion-distance: 18px;
    --motion-stagger: 65ms;
}
@keyframes sf-rise {
    from { opacity: .15; transform: translate3d(0,var(--motion-distance),0); }
    to { opacity: 1; transform: translate3d(0,0,0); }
}
@keyframes sf-cursor { 0%,45% { opacity: .65; } 50%,100% { opacity: 0; } }
@keyframes sf-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes sf-dropdown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.sf-revealing { animation: sf-rise var(--motion-reveal) var(--motion-ease) both; }
.nav-dropdown[open] > div { animation: sf-dropdown var(--motion-base) var(--motion-ease); }
.button,.product-card,.article-card,.utility-icon,.icon,input,select,textarea {
    transition-duration: var(--motion-base);
    transition-timing-function: var(--motion-ease);
}
.button { transition-property: transform,box-shadow,background-color,border-color; }
.button:active { transform: translateY(1px); box-shadow: none; }
.button .icon-arrow { transition: transform var(--motion-fast) var(--motion-ease); }
.button:is(:hover,:focus-visible) .icon-arrow { transform: translateX(4px); }
.product-card .icon { transition: transform var(--motion-base) var(--motion-ease); }
.product-card:is(:hover,:focus-visible) .icon { transform: translateY(-3px) rotate(-3deg); }
.product-card:is(:hover,:focus-visible) .icon path { stroke-dasharray: 1; animation: sf-draw 700ms var(--motion-ease); }
.article-card > img,.highlight img { transition: transform var(--motion-reveal) var(--motion-ease); }
@media(hover:hover) {
    .article-card:hover > img { transform: scale(1.035); }
    .highlight:hover img { transform: scale(1.025); }
}
nav > a { position: relative; }
nav > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform var(--motion-base) var(--motion-ease); }
nav > a:is(:hover,:focus-visible)::after { transform: scaleX(1); }
@media(prefers-reduced-motion:reduce) {
    .sf-revealing { animation: none; }
    .product-card:is(:hover,:focus-visible) .icon,.article-card:hover > img,.highlight:hover img { transform: none; }
}