/* Shared glyph motion, loaded only on the four revised marketing pages.
   Layout and icon artwork stay untouched. Transitions reverse from their
   current frame, so rapid pointer changes never queue another animation. */
body.apex-arrow-motion{--arrow-spring:cubic-bezier(.34,1.56,.64,1);--arrow-duration:340ms}
body.apex-arrow-motion .icon-arrow,
body.apex-arrow-motion .ugc-rail-control svg{
 --arrow-x:4px;--arrow-y:0px;
 transform:translate3d(0,0,0) scale(1);
 transform-origin:center;
 transition:transform var(--arrow-duration) var(--arrow-spring);
 transition-delay:0s;
}
body.apex-arrow-motion .icon-arrow--external{--arrow-x:3px;--arrow-y:-3px}
body.apex-arrow-motion .icon-arrow--back{--arrow-x:-4px}
body.apex-arrow-motion .ugc-rail-control svg{--arrow-x:2px}
body.apex-arrow-motion [data-ugc-rail-previous] svg{--arrow-x:-2px}
/* Only the glyph moves inside the small rail-control circle. */
body.apex-arrow-motion .ugc-rail-control:hover{transform:none}
body.apex-arrow-motion :is(a,button):focus-visible .icon-arrow,
body.apex-arrow-motion .ugc-rail-control:focus-visible svg{
 transform:translate3d(var(--arrow-x),var(--arrow-y),0) scale(1.1);
}
body.apex-arrow-motion :is(.video-details,.campaign-details) summary::after{
 transform:translateY(0) rotate(45deg) scale(1);
 transform-origin:center;
 transition:transform var(--arrow-duration) var(--arrow-spring);
}
body.apex-arrow-motion :is(.video-details,.campaign-details) details[open] summary::after{transform:translateY(0) rotate(225deg) scale(1)}
body.apex-arrow-motion :is(.video-details,.campaign-details) summary:focus-visible::after{transform:translateY(1px) rotate(45deg) scale(1.1)}
body.apex-arrow-motion :is(.video-details,.campaign-details) details[open] summary:focus-visible::after{transform:translateY(-1px) rotate(225deg) scale(1.1)}
@media(hover:hover) and (pointer:fine){
 body.apex-arrow-motion :is(a,button):not(:disabled):not([aria-disabled="true"]):hover .icon-arrow,
 body.apex-arrow-motion .ugc-rail-control:not(:disabled):hover svg{transform:translate3d(var(--arrow-x),var(--arrow-y),0) scale(1.1)}
 body.apex-arrow-motion :is(.video-details,.campaign-details) summary:hover::after{transform:translateY(1px) rotate(45deg) scale(1.1)}
 body.apex-arrow-motion :is(.video-details,.campaign-details) details[open] summary:hover::after{transform:translateY(-1px) rotate(225deg) scale(1.1)}
}
/* Keep state/shape clear without a persistent hover on touch screens. */
@media(hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){
 body.apex-arrow-motion .icon-arrow,
 body.apex-arrow-motion .ugc-rail-control svg{transform:none!important;transition:none!important}
 body.apex-arrow-motion :is(.video-details,.campaign-details) summary::after{transform:rotate(45deg)!important;transition:none!important}
 body.apex-arrow-motion :is(.video-details,.campaign-details) details[open] summary::after{transform:rotate(225deg)!important}
}