/* Loading animation styles for fifiloading */
:root{
  --loader-bg: #ffffff;
  --fifi-purple: #6C4BFF;
  --text-color: #2a2540;
}
.loader-overlay{
  position:fixed;inset:0;background:var(--loader-bg,#ffffff);display:flex;align-items:center;justify-content:center;z-index:9999;flex-direction:column;transition:opacity .5s ease,visibility .5s ease;}
.loader-overlay.loaded{opacity:0;visibility:hidden;pointer-events:none}
.loader-box{display:flex;flex-direction:column;align-items:center;gap:12px}
.loader-box{position:relative}
.loader-overlay .avatar{width:84px;height:84px;border-radius:50%;position:relative;overflow:hidden;transform:scale(.6);opacity:0;animation:scaleUp .7s cubic-bezier(.2,.9,.2,1) forwards .12s;display:flex;align-items:center;justify-content:center}
.loader-overlay .avatar video{width:100%;height:100%;object-fit:cover;display:block}

@keyframes scaleUp{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}

.loading-text{display:flex;gap:6px;align-items:baseline;font-family:'Baloo 2', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;font-weight:900;color:var(--fifi-purple);font-size:30px}
.loading-text span{display:inline-block;opacity:0;transform:translateY(8px);animation:letterIn .5s cubic-bezier(.2,.9,.2,1) forwards;font-weight:900}
.loading-text span.small{font-size:17px;align-self:baseline;transform-origin:left center;opacity:0;margin-left:6px;font-weight:700;transform:translateY(6px)}

/* letter reveal timing */
.loading-text span:nth-child(1){animation-delay:.6s}
.loading-text span:nth-child(2){animation-delay:.9s}
.loading-text span:nth-child(3){animation-delay:1.2s}
.loading-text span:nth-child(4){animation-delay:1.5s}
.loading-text span.small{animation-delay:1.8s;opacity:0;transform:translateY(6px) scale(.9);}

@keyframes letterIn{to{opacity:1;transform:translateY(0) scale(1)}}

/* soft bounce for the whole loader */
.loader-box{animation:softBounce 3s ease-in-out forwards}
@keyframes softBounce{0%{transform:translateY(0)}40%{transform:translateY(-6px)}65%{transform:translateY(0)}100%{transform:translateY(0)}}

/* small responsive tweak */
@media (max-width:480px){.loader-overlay .avatar{width:64px;height:64px}.loading-text{font-size:18px}}