@layer infine.base {
/* Filter pill entry/exit animations
   To try a different pair, change --pill-enter and --pill-exit below.
   CSS hot-reloads instantly — no rebuild needed.

   Available pairs:
     flipInX       / flipOutX
     bounceIn      / bounceOut
     bounceInUp    / bounceOutDown
     fadeInUp      / fadeOutDown
     zoomIn        / zoomOut
     slideInUp     / slideOutDown
*/
.infine-filter-pill {
    --animate-duration: 0.8s;
    --pill-enter: bounceInUp;
    --pill-exit:  bounceOutDown;
    animation-duration: var(--animate-duration);
    animation-fill-mode: both;
    backface-visibility: visible;
}
.infine-filter-pill.pill-enter {
    animation-name: var(--pill-enter);
}
.infine-filter-pill.pill-exit {
    animation-duration: calc(var(--animate-duration) * 0.75);
    animation-name: var(--pill-exit);
}

@keyframes flipInX {
    from { transform: perspective(400px) rotate3d(1,0,0,90deg); animation-timing-function: ease-in; opacity: 0; }
    40%  { transform: perspective(400px) rotate3d(1,0,0,-20deg); animation-timing-function: ease-in; }
    60%  { transform: perspective(400px) rotate3d(1,0,0,10deg); opacity: 1; }
    80%  { transform: perspective(400px) rotate3d(1,0,0,-5deg); }
    to   { transform: perspective(400px); }
}
@keyframes flipOutX {
    from { transform: perspective(400px); }
    30%  { transform: perspective(400px) rotate3d(1,0,0,-20deg); opacity: 1; }
    to   { transform: perspective(400px) rotate3d(1,0,0,90deg); opacity: 0; }
}
@keyframes bounceIn {
    from, 20%, 40%, 60%, 80%, to { animation-timing-function: cubic-bezier(0.215,0.61,0.355,1); }
    0%   { opacity: 0; transform: scale3d(0.3,0.3,0.3); }
    20%  { transform: scale3d(1.1,1.1,1.1); }
    40%  { transform: scale3d(0.9,0.9,0.9); }
    60%  { opacity: 1; transform: scale3d(1.03,1.03,1.03); }
    80%  { transform: scale3d(0.97,0.97,0.97); }
    to   { opacity: 1; transform: scale3d(1,1,1); }
}
@keyframes bounceOut {
    20%      { transform: scale3d(0.9,0.9,0.9); }
    50%, 55% { opacity: 1; transform: scale3d(1.1,1.1,1.1); }
    to       { opacity: 0; transform: scale3d(0.3,0.3,0.3); }
}
@keyframes bounceInUp {
    from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215,0.61,0.355,1); }
    from { opacity: 0; transform: translate3d(0,40px,0) scaleY(1.1); }
    60%  { opacity: 1; transform: translate3d(0,-10px,0) scaleY(0.95); }
    75%  { transform: translate3d(0,5px,0) scaleY(0.98); }
    90%  { transform: translate3d(0,-3px,0) scaleY(0.995); }
    to   { transform: translate3d(0,0,0); }
}
@keyframes bounceOutDown {
    20%      { transform: translate3d(0,5px,0) scaleY(0.98); }
    40%, 45% { opacity: 1; transform: translate3d(0,-10px,0) scaleY(0.95); }
    to       { opacity: 0; transform: translate3d(0,40px,0) scaleY(1.1); }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translate3d(0,12px,0); }
    to   { opacity: 1; transform: translate3d(0,0,0); }
}
@keyframes fadeOutDown {
    from { opacity: 1; }
    to   { opacity: 0; transform: translate3d(0,12px,0); }
}
@keyframes zoomIn {
    from { opacity: 0; transform: scale3d(0.5,0.5,0.5); }
    50%  { opacity: 1; }
    to   { transform: scale3d(1,1,1); }
}
@keyframes zoomOut {
    from { opacity: 1; }
    50%  { opacity: 0; transform: scale3d(0.5,0.5,0.5); }
    to   { opacity: 0; }
}
@keyframes slideInUp {
    from { transform: translate3d(0,12px,0); opacity: 0; }
    to   { transform: translate3d(0,0,0); opacity: 1; }
}
@keyframes slideOutDown {
    from { transform: translate3d(0,0,0); opacity: 1; }
    to   { transform: translate3d(0,12px,0); opacity: 0; }
}
@keyframes pulse {
    from, to { transform: scale3d(1, 1, 1); }
    50%      { transform: scale3d(1.04, 1.04, 1.04); }
}
.animate__pulse {
    animation-name: pulse;
    animation-duration: 0.35s;
    animation-timing-function: ease-in-out;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--mantine-font-family);
}
}