/* Spacing for the two extension store links. Original hover styles are inherited unchanged. */
.tool-card .store-link{margin-top:8px;display:inline-flex;align-items:center;gap:14px}

/* Only SVG paint changes. Button/card surfaces, corners and motion are inherited. */
.social-youtube{--symbol-color:#ff0033}
.social-facebook{--symbol-color:#1877f2}
.social-instagram{--symbol-color:#e4405f}
.social-whatsapp{--symbol-color:#25d366}
.social-mail{--symbol-color:#168bd4}
.social-symbol .social-outline,.social-symbol .social-color{transition:opacity .28s ease}
.social-symbol .social-outline{opacity:1}
.social-symbol .social-color{opacity:0}
.social-color .social-body{fill:var(--symbol-color);stroke:var(--symbol-color)}
.social-color .social-play{fill:#fff;stroke:#fff}
.social-color .social-detail{stroke:#fff}
.social-whatsapp .social-color :is(.social-solid,.social-ring){fill:var(--symbol-color);opacity:1}
.social-whatsapp .social-color .social-handset{fill:#fff}
:is(.social-links>[data-platform],.channel-card[data-platform]):is(:hover,:focus-visible,:focus-within) .social-outline{opacity:0}
:is(.social-links>[data-platform],.channel-card[data-platform]):is(:hover,:focus-visible,:focus-within) .social-color{opacity:1}
@media(prefers-reduced-motion:reduce){.social-symbol .social-outline,.social-symbol .social-color{transition:none}}

/* Keep hover enlargement centered, with no lateral or vertical drift. */
html .social-links>:is(a,button){translate:0 0;transform:scale(1);transform-origin:center;transition:transform .32s cubic-bezier(.2,.7,.25,1),background .25s,border-color .25s,color .25s}
html .social-links>:is(a,button):is(:hover,:focus-visible){transform:scale(1.06)}
html .social-links>:is(a,button):active{transform:scale(.96)}
/* Use a single transform for arrow movement and preserve the RTL reflection. */
html[dir] .arrow{--arrow-flip:1;translate:0 0;transform:translate3d(0,0,0) scaleX(var(--arrow-flip));transition:transform .24s cubic-bezier(.2,.7,.3,1)}
html[dir=rtl] .arrow{--arrow-flip:-1}
html[dir] :is(a:hover,button:hover,a:focus-visible,button:focus-visible) .arrow{translate:0 0;transform:translate3d(-2px,-2px,0) scaleX(var(--arrow-flip))}
html[dir=ltr] :is(a:hover,button:hover,a:focus-visible,button:focus-visible) .arrow{transform:translate3d(2px,-2px,0) scaleX(var(--arrow-flip))}
/* Labels are absolutely positioned, so showing one cannot move a control. */
[data-tooltip]{position:relative}
[data-tooltip]::after{
 content:attr(data-tooltip);position:absolute;left:50%;top:calc(100% + 10px);z-index:40;
 width:max-content;max-width:min(220px,calc(100vw - 32px));padding:6px 11px;
 border-radius:6px;background:#e8f2fc;color:#122b46;box-shadow:0 4px 18px #0002;
 font:500 12px/1.7 var(--font);text-align:center;white-space:normal;
 pointer-events:none;opacity:0;visibility:hidden;transform:translate(-50%,-4px);
 transition:opacity .16s ease,transform .16s ease,visibility 0s .16s;
}
.social-links>[data-tooltip]::after{top:auto;bottom:calc(100% + 10px);transform:translate(-50%,4px)}
[data-tooltip]:is(:hover,:focus-visible)::after{opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:.15s,.15s,0s}
html[data-theme=light] [data-tooltip]::after{background:#18344f;color:#fff}
@media(prefers-reduced-motion:reduce){
 html .social-links>:is(a,button):is(:hover,:focus-visible,:active){transform:none}
 html[dir] :is(a:hover,button:hover,a:focus-visible,button:focus-visible) .arrow{transform:translate3d(0,0,0) scaleX(var(--arrow-flip));transition:none}
 [data-tooltip]::after{transition:none}
}

/* Floating and hover separation use different properties; neither resets the other. */
@media(prefers-reduced-motion:no-preference){
 .architecture .stack{transform:translate3d(0,0,0);transition:transform .9s cubic-bezier(.2,.7,.25,1)}
 .architecture .stack-top{animation:moath-layer-drift 7s ease-in-out infinite}
 .architecture .stack-middle{animation:moath-layer-drift 8s -1.2s ease-in-out infinite}
 .tech-scene:hover .architecture .stack-top{transform:translate3d(0,-12px,0)}
 .tech-scene:hover .architecture .stack-bottom{transform:translate3d(0,10px,0)}
}
@keyframes moath-layer-drift{0%,100%{translate:0 0}50%{translate:0 -7px}}
@media(prefers-reduced-motion:reduce){html .architecture .stack{animation:none!important;transform:none!important;translate:0 0;transition:none}}