/**
 * saas_core_ui — animations.css
 * Animations · Transitions · Micro-interactions
 * Version: 1.0.0
 */

/* ================================================================
   ENTRANCE ANIMATIONS
================================================================ */

/* Fade in from below */
.sc-animate-fadeup {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .5s ease, transform .5s ease;
}
.sc-animate-fadeup.sc-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Fade in */
.sc-animate-fade {
    opacity: 0;
    transition: opacity .5s ease;
}
.sc-animate-fade.sc-visible { opacity: 1; }

/* Scale in */
.sc-animate-scalein {
    opacity: 0;
    transform: scale(.9);
    transition: opacity .3s ease, transform .3s ease;
}
.sc-animate-scalein.sc-visible {
    opacity: 1;
    transform: scale(1);
}

/* Slide in from right */
.sc-animate-slidein {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity .4s ease, transform .4s ease;
}
.sc-animate-slidein.sc-visible {
    opacity: 1;
    transform: translateX(0);
}

/* ================================================================
   CLICK / INTERACTION ANIMATIONS
================================================================ */

/* Button click bounce */
.sc-animate-click {
    transition: transform .1s ease;
}
.sc-animate-click:active {
    transform: scale(.96);
}

/* Copy done feedback */
.sc-animate-copydone {
    animation: scCopyDone .3s ease;
}
@keyframes scCopyDone {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* ================================================================
   SUCCESS ANIMATIONS
================================================================ */

/* Success pop */
.sc-animate-success {
    animation: scSuccessPop .4s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes scSuccessPop {
    0%   { transform: scale(.7); opacity: 0; }
    70%  { transform: scale(1.05); }
    100% { transform: scale(1); opacity: 1; }
}

/* Success checkmark */
.sc-animate-check {
    animation: scCheckAnim .4s ease;
}
@keyframes scCheckAnim {
    0%   { transform: scale(.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* ================================================================
   HOVER ANIMATIONS
================================================================ */

.sc-animate-hover {
    transition: transform .2s ease, box-shadow .2s ease;
}
.sc-animate-hover:hover {
    transform: translateY(-3px);
    box-shadow: var(--sc-shadow-md);
}

/* Lift small */
.sc-animate-lift:hover { transform: translateY(-2px); }

/* ================================================================
   REWARD / ATTENTION ANIMATIONS
================================================================ */

/* Gold pulse glow — for reward cards */
.sc-animate-reward {
    animation: scRewardPulse 2s infinite;
}
@keyframes scRewardPulse {
    0%,100% { box-shadow: var(--sc-shadow-sm); }
    50%     { box-shadow: 0 0 0 4px rgba(245,158,11,.25), var(--sc-shadow-md); border-color: var(--sc-gold); }
}

/* Gold step pulse (level unlocked) */
.sc-animate-gold-pulse {
    animation: scGoldPulse 2s infinite;
}
@keyframes scGoldPulse {
    0%    { box-shadow: 0 0 0 0 rgba(245,158,11,.6); }
    70%   { box-shadow: 0 0 0 12px rgba(245,158,11,0); }
    100%  { box-shadow: 0 0 0 0 rgba(245,158,11,0); }
}

/* Purple urgent pulse */
.sc-animate-urgent {
    animation: scUrgentPulse 2.5s infinite;
}
@keyframes scUrgentPulse {
    0%,100% { box-shadow: 0 4px 16px rgba(124,58,237,.1); }
    50%     { box-shadow: 0 4px 28px rgba(124,58,237,.25); }
}

/* Button heartbeat */
.sc-animate-heartbeat {
    animation: scHeartbeat 2s infinite;
}
@keyframes scHeartbeat {
    0%,100% { transform: scale(1); }
    50%     { transform: scale(1.04); }
}

/* ================================================================
   LOADER ANIMATIONS
================================================================ */

/* Spinner */
.sc-spinner {
    display: inline-block;
    width: 20px; height: 20px;
    border: 3px solid rgba(124,58,237,.2);
    border-top-color: var(--sc-primary);
    border-radius: 50%;
    animation: scSpin .7s linear infinite;
}
.sc-spinner-sm { width: 14px; height: 14px; border-width: 2px; }
.sc-spinner-lg { width: 32px; height: 32px; border-width: 4px; }
@keyframes scSpin { to { transform: rotate(360deg); } }

/* Dot blink (live indicator) */
.sc-animate-blink {
    animation: scBlink 1.4s infinite;
}
@keyframes scBlink {
    0%,100% { opacity: 1; }
    50%     { opacity: .3; }
}

/* Shake warning */
.sc-animate-shake {
    animation: scShake 1s infinite;
}
@keyframes scShake {
    0%,100% { transform: translateX(0); }
    25%     { transform: translateX(-3px); }
    75%     { transform: translateX(3px); }
}

/* ================================================================
   PROGRESS ANIMATIONS
================================================================ */

/* Progress bar line fill */
.sc-animate-linefill::after {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 100%;
    background: linear-gradient(90deg, var(--sc-warning), var(--sc-gold));
    animation: scLineFill 1.5s cubic-bezier(.25,.8,.25,1) forwards;
}
@keyframes scLineFill {
    from { width: 0%; }
    to   { width: 100%; }
}

/* Number counter spin (apply via JS) */
.sc-anim-num { display: inline-block; }

/* ================================================================
   MODAL / OVERLAY
================================================================ */
.sc-animate-modal {
    animation: scModalIn .28s ease;
}
@keyframes scModalIn {
    from { transform: scale(.92); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

/* ================================================================
   TICKER / MARQUEE
================================================================ */
.sc-animate-ticker-fade {
    transition: opacity .28s ease, transform .28s ease;
}

/* ================================================================
   STAGGER HELPERS (apply delay via inline style)
================================================================ */
/* usage: <div class="sc-animate-fadeup" style="transition-delay:.1s"> */

/* ================================================================
   TRANSITION UTILITIES
================================================================ */
.sc-transition      { transition: var(--sc-transition); }
.sc-transition-md   { transition: var(--sc-transition-md); }
.sc-transition-none { transition: none !important; }