/* ------------------------------------------------------------------
 * Hover animations for the line icons (menus, columns such as the home benefits, counts row, GTM diagram).
 * inc/areas/icons.php prints each icon as inline <svg class="cb-anim cb-anim--{kind}">
 * so its parts (grouped by compare/build-anim-icons.js) can move on their own.
 * Motions play when the whole row/card around the icon is hovered.
 * ------------------------------------------------------------------ */

/* Sizing: these rules used to target the <img>. */
.cb-menu-item .icon svg.cb-anim { width: 100%; height: 100%; display: block; }
.integration-counts--item svg.cb-anim { width: 42px; height: 42px; display: inline-block; }
#gtm-diagram .gtm-hub--core svg.cb-anim { width: 44px; height: 44px; display: block; }
@media (max-width: 767px) { .integration-counts--item svg.cb-anim { width: 28px; height: 28px; } }

.cb-anim { overflow: visible; }
/* On a dark or brand-colored section the gray lines turn white (fills keep their colors). */
:is(.has-primary-background-color, .has-night-background-color, .has-main-background-color) svg.cb-anim { fill: #fff; }
.cb-anim g { transform-box: fill-box; transform-origin: 50% 50%; }

:is(.cb-menu-item, .wp-block-column, .integration-counts--item, .gtm-hub-wrap):hover .cb-anim {

	/* Bars grow up one after another; counts version then pops the dots and draws the trend line */
	.a-bar { transform-origin: 50% 100%; animation: cb-grow-y .55s cubic-bezier(.3,1.4,.5,1) both; }
	.a-bar2 { animation-delay: .12s; }
	.a-bar3 { animation-delay: .24s; }
	.a-pop1 { animation: cb-pop .35s cubic-bezier(.3,1.6,.5,1) .35s both; }
	.a-line1 { transform-origin: 0% 100%; animation: cb-grow .3s ease-out .5s both; }
	.a-pop2 { animation: cb-pop .35s cubic-bezier(.3,1.6,.5,1) .7s both; }
	.a-line2 { transform-origin: 0% 0%; animation: cb-grow .3s ease-out .85s both; }
	.a-pop3 { animation: cb-pop .35s cubic-bezier(.3,1.6,.5,1) 1.05s both; }

	/* Journey: the stops light up in order along the path */
	&.cb-anim--journey .a-pop { animation: cb-pulse .45s ease-out both; }
	&.cb-anim--journey .a-pop2 { animation-delay: .15s; }
	&.cb-anim--journey .a-pop3 { animation-delay: .3s; }
	&.cb-anim--journey .a-pop4 { animation-delay: .45s; }

	/* Bullseye: crosshair ticks close in, center dot pulses */
	.a-tick-t { animation: cb-nudge-down .5s ease-in-out both; }
	.a-tick-b { animation: cb-nudge-up .5s ease-in-out both; }
	.a-tick-l { animation: cb-nudge-right .5s ease-in-out both; }
	.a-tick-r { animation: cb-nudge-left .5s ease-in-out both; }
	.a-dot { animation: cb-pulse .5s ease-out .25s both; }

	/* Newspaper: lines of text type out, picture pops */
	.a-txt { transform-origin: 0% 50%; animation: cb-grow-x .3s ease-out both; }
	.a-txt2 { animation-delay: .06s; } .a-txt3 { animation-delay: .12s; } .a-txt4 { animation-delay: .18s; } .a-txt5 { animation-delay: .24s; } .a-txt6 { animation-delay: .3s; }
	.a-pic { animation: cb-pulse-soft .4s ease-out .15s both; }

	/* Target: arrow flies in and the board wobbles on impact */
	.a-arrow { animation: cb-fly-in .45s cubic-bezier(.5,0,.8,.5) both; }
	.a-target { animation: cb-wobble .4s ease-out .4s both; }

	/* Paper plane flies off and comes back around */
	.a-plane { animation: cb-fly-away .9s ease-in-out both; }

	/* Magnifier sweeps around, searching */
	.a-lens { animation: cb-search .8s ease-in-out both; }

	/* Coins: the front coin flips, the back one hops */
	.a-coin-front { animation: cb-coin-flip .6s ease-in-out both; }
	.a-coin-back { animation: cb-hop .35s ease-out .15s both; }

	/* Lock: the shackle lifts open and snaps shut, keyhole pulses */
	.a-shackle { animation: cb-lift .6s ease-in-out both; }
	.a-keyhole { animation: cb-pulse .45s ease-out .4s both; }

	/* Rosette turns a little, the check pops */
	.a-rosette { animation: cb-turn .6s ease-in-out both; }
	.a-ok { animation: cb-pulse .45s ease-out .2s both; }

	/* Bulb: the filament flickers on */
	.a-filament { animation: cb-blink .6s ease-in-out both; }

	/* Clock: the hands sweep around the center of the face */
	.a-hand { transform-box: view-box; transform-origin: 25px 25px; }
	.a-hand-min { animation: cb-rotate .8s ease-in-out both; }
	.a-hand-hr { animation: cb-hour .8s ease-in-out both; }

	/* Globe spins (the meridians squeeze and open) */
	.a-meridians { animation: cb-coin-flip .7s ease-in-out both; }

	/* Monitor lifts */
	.a-monitor { animation: cb-lift .5s ease-in-out both; }

	/* People hop one after another */
	.a-person { animation: cb-hop .35s ease-out both; }
	.a-person2 { animation-delay: .1s; }
	.a-person3 { animation-delay: .2s; }

	/* Return: the arrowhead nudges back */
	.a-arrowhead { animation: cb-nudge-left .5s ease-in-out both; }

	/* Rocket lifts off and settles, the trail flickers */
	.a-rocket { animation: cb-launch .6s ease-in-out both; }
	.a-flame { animation: cb-blink .6s ease-in-out both; }

	/* Scales tip one way, then the other */
	.a-beam { transform-box: view-box; transform-origin: 25px 10px; animation: cb-wobble .7s ease-in-out both; }

	/* Trophy hops */
	.a-cup { animation: cb-hop .4s ease-out both; }

	/* Cart rolls forward, wheels spin, items hop */
	.a-cart { animation: cb-roll .7s ease-in-out both; }
	.a-wheel { animation: cb-spin .7s ease-in-out both; }
	.a-item { animation: cb-hop .35s ease-out both; }
	.a-item1 { animation-delay: .1s; }
	.a-item2 { animation-delay: .18s; }
	.a-item3 { animation-delay: .26s; }

	/* Shield: check mark draws in */
	.a-check { animation: cb-wipe .45s ease-out .1s both; }
	.a-shield { animation: cb-pulse-soft .5s ease-out both; }

	/* Toolbox: handle lifts, latches flip */
	.a-handle { animation: cb-lift .5s ease-in-out both; }
	.a-latch { transform-origin: 50% 0%; animation: cb-flip-y .5s ease-in-out both; }

	/* Megaphone: shouts twice */
	.a-mega { transform-origin: 90% 60%; animation: cb-shout .7s ease-in-out both; }

	/* Cookie: wobbles, chips pop, crumbs bounce off */
	.a-cookie { animation: cb-wobble .5s ease-out both; }
	.a-chip { animation: cb-pulse .35s ease-out both; }
	.a-chip2 { animation-delay: .06s; } .a-chip3 { animation-delay: .12s; } .a-chip4 { animation-delay: .18s; } .a-chip5 { animation-delay: .24s; }
	.a-crumb1 { animation: cb-crumb .6s ease-out both; }
	.a-crumb2 { animation: cb-crumb .6s ease-out .1s both; }

	/* Plug: prongs push out twice */
	.a-prong { animation: cb-prong .6s ease-in-out both; }
	.a-prong2 { animation-delay: .06s; }

	/* Handshake: shakes */
	.a-hands { transform-origin: 50% 60%; animation: cb-shake .7s ease-in-out both; }

	/* Head: question mark hops and tilts */
	.a-q { transform-origin: 50% 100%; animation: cb-q .6s ease-in-out both; }

	/* Money: back bills fan out and stay open while hovered */
	.a-bill-front { transform: rotate(-6deg); }
	.a-bill-back1 { transform: rotate(12deg); }
	.a-bill-back2 { transform: rotate(28deg); }

	/* Map: line draws itself in, then the arrow pops on */
	.a-draw { animation: cb-draw 1s ease-in-out both; }
	&.cb-anim--draw .a-arrow { transform-origin: 30% 50%; animation: cb-pop .35s cubic-bezier(.3,1.6,.5,1) .9s both; }

	/* Server: drives slide out, light blinks */
	.a-slot { animation: cb-slide-out .5s ease-in-out both; }
	.a-slot2 { animation-delay: .1s; }
	.a-led { animation: cb-blink .6s steps(1) both; }

	/* Film: sprocket holes roll, play button pulses */
	.a-holes { animation: cb-film .5s linear 2 both; }
	.a-play { animation: cb-pulse .5s ease-out .2s both; }

	/* Book: a page turns */
	.a-page { animation: cb-page .7s ease-in-out both; }

	/* Tag swings on its string */
	.a-swing { animation: cb-swing .9s ease-in-out both; }
	.a-swing-back { animation-delay: .05s; }

	/* Chain: links pull apart and snap back */
	.a-link1 { animation: cb-link1 .5s ease-in-out both; }
	.a-link2 { animation: cb-link2 .5s ease-in-out both; }
}

/* Resting states that need setup */
.cb-anim--bills .a-bill { transform-box: view-box; transform-origin: 5px 31px; transition: transform .45s cubic-bezier(.3,1.5,.5,1); }
.cb-anim--bills .a-bill-back1 { transform: rotate(7deg); }
.cb-anim--bills .a-bill-back2 { transform: rotate(14deg); }
.cb-anim--draw .a-draw { stroke-dasharray: 100; stroke-dashoffset: 0; }
.cb-anim--book .a-page { transform-box: view-box; transform-origin: 25.5px 25px; clip-path: inset(0 0 0 50%); opacity: 0; }
.cb-anim--tag .a-swing { transform-box: view-box; transform-origin: 39.7px 15.5px; }

@keyframes cb-grow-y { from { transform: scaleY(.15); } to { transform: scaleY(1); } }
@keyframes cb-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes cb-grow { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes cb-pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes cb-pulse { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.4); } }
@keyframes cb-pulse-soft { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.06); } }
@keyframes cb-nudge-down { 50% { transform: translateY(5px); } }
@keyframes cb-nudge-up { 50% { transform: translateY(-5px); } }
@keyframes cb-nudge-right { 50% { transform: translateX(5px); } }
@keyframes cb-nudge-left { 50% { transform: translateX(-5px); } }
@keyframes cb-fly-in { from { transform: translate(12px, -12px); opacity: 0; } 30% { opacity: 1; } to { transform: none; } }
@keyframes cb-wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 60% { transform: rotate(4deg); } }
@keyframes cb-fly-away { 0% { transform: none; } 45% { transform: translate(30px, -30px) scale(.6); opacity: 0; } 55% { transform: translate(-30px, 30px) scale(.6); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes cb-roll { 0%, 100% { transform: none; } 50% { transform: translateX(4px); } }
@keyframes cb-spin { 0% { transform: rotate(0); } 50% { transform: rotate(200deg); } 100% { transform: rotate(0); } }
@keyframes cb-hop { 50% { transform: translateY(-4px); } }
@keyframes cb-coin-flip { 50% { transform: scaleX(.1); } }
@keyframes cb-turn { 50% { transform: rotate(25deg); } }
@keyframes cb-rotate { to { transform: rotate(360deg); } }
@keyframes cb-hour { to { transform: rotate(30deg); } }
@keyframes cb-launch { 50% { transform: translate(3px, -3px); } }
@keyframes cb-search { 25% { transform: translate(-4px, -3px); } 50% { transform: translate(0, -5px); } 75% { transform: translate(3px, -2px); } }
@keyframes cb-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes cb-lift { 50% { transform: translateY(-4px); } }
@keyframes cb-flip-y { 50% { transform: scaleY(-1); } }
@keyframes cb-shout { 0%, 50%, 100% { transform: none; } 20%, 70% { transform: scale(1.1) rotate(-5deg); } }
@keyframes cb-crumb { 40% { transform: translate(3px, -5px) rotate(40deg); } 100% { transform: none; } }
@keyframes cb-prong { 0%, 50%, 100% { transform: none; } 25%, 75% { transform: translate(3px, -3px); } }
@keyframes cb-shake { 0%, 100% { transform: none; } 20%, 60% { transform: translateY(-3px) rotate(-4deg); } 40%, 80% { transform: translateY(2px) rotate(3deg); } }
@keyframes cb-q { 0%, 100% { transform: none; } 30% { transform: translateY(-4px) rotate(-12deg); } 60% { transform: translateY(-2px) rotate(10deg); } }
@keyframes cb-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes cb-slide-out { 50% { transform: translateX(4px); } }
@keyframes cb-blink { 0%, 50% { opacity: 1; } 25%, 75% { opacity: .15; } }
@keyframes cb-film { from { transform: none; } to { transform: translateX(-5px); } }
@keyframes cb-page { 0% { transform: none; opacity: 1; } 99% { transform: scaleX(-1); opacity: 1; } 100% { transform: scaleX(-1); opacity: 0; } }
@keyframes cb-swing { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(12deg); } 55% { transform: rotate(-8deg); } 80% { transform: rotate(4deg); } }
@keyframes cb-link1 { 50% { transform: translate(-3px, 3px); } }
@keyframes cb-link2 { 50% { transform: translate(3px, -3px); } }

@media (prefers-reduced-motion: reduce) {
	.cb-anim *, :is(.cb-menu-item, .wp-block-column, .integration-counts--item, .gtm-hub-wrap):hover .cb-anim * { animation: none !important; transition: none !important; }
}