/* Depth and movement follow the values already rendered by each chart. */
.hero-visual{perspective:1100px}
.hero-board{transform-style:preserve-3d;animation:suga-board-3d 8s ease-in-out infinite;box-shadow:0 38px 88px #020617aa,0 0 42px #9a7bff38}
.hero-board::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,transparent 35%,#ffffff20 48%,transparent 60%);background-size:260% 100%;animation:suga-glint 6s ease-in-out infinite}
.hero-bars i{box-shadow:inset 3px 0 5px #ffffff35,5px 9px 13px #070c2c99}
.donut-holder{transform-style:preserve-3d;transition:transform .45s ease,filter .45s ease}
.donut-holder:has(circle.slice){transform:perspective(850px) rotateX(15deg) rotateY(-7deg);filter:drop-shadow(10px 25px 18px #05091eaa)}
.donut-holder:has(circle.slice)::before{content:"";position:absolute;inset:7%;border-radius:50%;background:radial-gradient(circle,#a78bfa55,transparent 66%);filter:blur(22px);transform:translateZ(-24px);pointer-events:none}
.donut-holder:has(circle.slice):hover{transform:perspective(850px) rotateX(9deg) rotateY(-2deg) translateY(-4px)}
.donut-holder circle.slice{animation:suga-slice-in .72s cubic-bezier(.17,.85,.22,1) both;animation-delay:calc(var(--slice-order,0)*85ms)}
.donut-holder.chart-pop{animation:suga-donut-pop .8s cubic-bezier(.17,.85,.22,1)}
.biz-donut[aria-label^="Despesas:"]{transform:perspective(850px) rotateX(17deg) rotateY(-8deg);box-shadow:inset 4px 5px 8px #ffffff45,12px 26px 20px #030715b8,0 0 36px #a78bfa50;transition:transform .45s ease,box-shadow .45s ease}
.biz-donut[aria-label^="Despesas:"]:hover{transform:perspective(850px) rotateX(10deg) rotateY(-2deg) translateY(-4px)}
.biz-donut[aria-label^="Despesas:"]::before{content:"";position:absolute;inset:2%;border-radius:50%;pointer-events:none;background:linear-gradient(125deg,#ffffff52,transparent 32%,transparent 68%,#ffffff16);z-index:1}
.biz-donut.chart-pop{animation:suga-biz-pop .8s cubic-bezier(.17,.85,.22,1)}
.categoryItem .miniTrack div,.biz-bar-fill{transform-origin:left center;animation:suga-bar-horizontal .8s cubic-bezier(.15,.85,.25,1) both}
.trendBars div{transform-origin:center bottom;animation:suga-bar-vertical .85s cubic-bezier(.15,.85,.25,1) both}
.trendMonth:nth-child(2) .trendBars div{animation-delay:.07s}.trendMonth:nth-child(3) .trendBars div{animation-delay:.14s}.trendMonth:nth-child(4) .trendBars div{animation-delay:.21s}.trendMonth:nth-child(5) .trendBars div{animation-delay:.28s}.trendMonth:nth-child(6) .trendBars div{animation-delay:.35s}
@keyframes suga-board-3d{0%,100%{transform:translateY(0) rotateX(8deg) rotateY(-9deg) rotateZ(-3deg)}50%{transform:translateY(-12px) rotateX(3deg) rotateY(-3deg) rotateZ(-1deg)}}
@keyframes suga-glint{0%,20%{background-position:110% 0}55%,100%{background-position:-110% 0}}
@keyframes suga-slice-in{from{opacity:0;filter:blur(5px)}to{opacity:1;filter:drop-shadow(0 0 4px currentColor)}}
@keyframes suga-donut-pop{from{opacity:.4;transform:perspective(850px) rotateX(35deg) rotateY(-16deg) scale(.77)}to{opacity:1;transform:perspective(850px) rotateX(15deg) rotateY(-7deg) scale(1)}}
@keyframes suga-biz-pop{from{opacity:.45;transform:perspective(850px) rotateX(38deg) rotateY(-18deg) scale(.78)}to{opacity:1;transform:perspective(850px) rotateX(17deg) rotateY(-8deg) scale(1)}}
@keyframes suga-bar-horizontal{from{transform:scaleX(.04)}to{transform:scaleX(1)}}
@keyframes suga-bar-vertical{from{transform:scaleY(.04)}to{transform:scaleY(1)}}
.motion-paused .hero-board,.motion-paused .hero-board::after,.motion-paused .donut-holder,.motion-paused .donut-holder circle.slice,.motion-paused .biz-donut,.motion-paused .categoryItem .miniTrack div,.motion-paused .biz-bar-fill,.motion-paused .trendBars div{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){.hero-board,.hero-board::after,.donut-holder,.donut-holder circle.slice,.biz-donut,.categoryItem .miniTrack div,.biz-bar-fill,.trendBars div{animation:none!important;transition:none!important}}