/* ================================================================================ */
/*  Project: Digital Experience - Web
/*  Author: Digital Experience
/*  Date: Thu Apr 02 2026 19:12:58 GMT+0000 (Coordinated Universal Time)
/*  
/*  Copyright © 2026 Red Hat, Inc.
/*  https://www.redhat.com
/* ================================================================================ */

.bar-fill-animation,.svg-shape-animation,.teal-fill-animation{position:relative;display:inline-block}.bar-fill-animation svg,.svg-shape-animation svg{display:block;width:200px;max-width:100%;height:auto}body{overflow-x:hidden}.purple-stat-outer{transform:translateX(100%);transition:opacity 1.5s ease-out,transform 1.5s ease-out}.purple-stat-outer.animate-in{opacity:1;transform:translateX(0)}.purple-stat{border-radius:1000px;transition:width 2.5s cubic-bezier(.25,.46,.45,.94),border-radius 2.5s cubic-bezier(.25,.46,.45,.94);width:120%}.purple-stat-outer.animate-shrink .purple-stat{width:424px;max-width:100%}.purple-stat-text{width:100%;transition:width 1.5s cubic-bezier(.25,.46,.45,.94)}.teal-fill-animation{--sweep-angle:0deg}.teal-fill-animation img{display:block;max-width:100%}@supports not ((-webkit-mask-image:conic-gradient(from 0deg,#000,transparent)) or (mask-image:conic-gradient(from 0deg,#000,transparent))){.teal-fill-animation{opacity:0;transition:opacity 1.2s ease-out}.teal-fill-animation.animate-fill{opacity:1}}@supports ((-webkit-mask-image:conic-gradient(from 0deg,#000,transparent)) or (mask-image:conic-gradient(from 0deg,#000,transparent))){.teal-fill-animation{mask-image:conic-gradient(from 0deg at 50% 50%,#000 0deg,#000 var(--sweep-angle),transparent var(--sweep-angle),transparent 360deg);-webkit-mask-image:conic-gradient(from 0deg at 50% 50%,#000 0deg,#000 var(--sweep-angle),transparent var(--sweep-angle),transparent 360deg);mask-size:200% 200%;-webkit-mask-size:200% 200%;mask-position:center center;-webkit-mask-position:center center}.teal-fill-animation.animate-fill{--sweep-angle:360deg}}.bar-fill-animation svg{position:relative}.bar-fill-animation svg path[stroke],.bar-fill-animation svg rect[stroke]{stroke-width:1;opacity:1}@supports not ((-webkit-clip-path:polygon(0 0,100% 0)) or (clip-path:polygon(0 0,100% 0))){.bar-fill-animation svg path[fill],.bar-fill-animation svg rect[fill]{opacity:0;transition:opacity 1.2s ease-out}.bar-fill-animation.animate-fill svg path[fill],.bar-fill-animation.animate-fill svg rect[fill]{opacity:1}}@supports ((-webkit-clip-path:polygon(0 0,100% 0)) or (clip-path:polygon(0 0,100% 0))){.bar-fill-animation svg path[fill],.bar-fill-animation svg rect[fill]{-webkit-clip-path:polygon(0 100%,100% 100%,100% 100%,0 100%);clip-path:polygon(0 100%,100% 100%,100% 100%,0 100%);transition:clip-path 1.2s ease-out;transition:clip-path 1.2s ease-out,-webkit-clip-path 1.2s ease-out}.bar-fill-animation.animate-fill svg path[fill],.bar-fill-animation.animate-fill svg rect[fill]{-webkit-clip-path:polygon(0 0,100% 0,100% 100%,0 100%);clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}}.stat-band-2 .bar-fill-animation svg .bar-overlay-teal{--teal-clip-top:0%;-webkit-clip-path:inset(var(--teal-clip-top) 0 0 0);clip-path:inset(var(--teal-clip-top) 0 0 0)}.stat-band-2 .bar-fill-animation svg .bar-overlay-purple{--purple-clip-top:0%;-webkit-clip-path:inset(var(--purple-clip-top) 0 0 0);clip-path:inset(var(--purple-clip-top) 0 0 0)}.stat-band-2 .bar-fill-animation svg path[fill],.stat-band-2 .bar-fill-animation svg rect[fill]{-webkit-clip-path:none;clip-path:none;transition:none}.pig-fade-in{transform:translateY(30px);transition:opacity 1.2s ease-out,transform 1.2s ease-out}.pig-fade-in.animate-fade{opacity:1;transform:translateY(0)}.pig-fade-in img{display:block;max-width:100%}.stat-band-2 .pig-fade-in{transition:opacity 1.8s ease-out,transform 1.8s ease-out}.svg-shape-animation svg circle,.svg-shape-animation svg ellipse,.svg-shape-animation svg path,.svg-shape-animation svg polygon,.svg-shape-animation svg rect{transition:opacity .6s ease-out}.svg-shape-animation.animate-shapes svg circle,.svg-shape-animation.animate-shapes svg ellipse,.svg-shape-animation.animate-shapes svg path,.svg-shape-animation.animate-shapes svg polygon,.svg-shape-animation.animate-shapes svg rect{opacity:1}@media (max-width:767px){.purple-stat-outer.animate-shrink .purple-stat{width:100%}}