/* ═══════════════════════════════════════════════
   TitanPips – Animations Stylesheet
   ═══════════════════════════════════════════════ */

/* ── COUNTER ANIMATION ── */
.count-up { display: inline-block; transition: all 0.5s; }

/* ── LOADING SPINNER ── */
.spinner-wrap {
    display: flex; align-items: center; justify-content: center;
    padding: 40px;
}
.spinner {
    width: 36px; height: 36px;
    border: 3px solid var(--border);
    border-top-color: var(--blue);
    border-radius: 50%;
    animation: pgSpin 0.75s linear infinite;
}
@keyframes pgSpin {
    to { transform: rotate(360deg); }
}
.spinner-sm { width: 20px; height: 20px; border-width: 2px; display: inline-block; }

/* ── PAGE TRANSITION ── */
.page-enter { animation: pgFadeIn 0.3s ease forwards; }
@keyframes pgFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── SLIDE UP ── */
.slide-up { animation: pgSlideUp 0.35s ease forwards; }
@keyframes pgSlideUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── FLOAT ANIMATION ── */
.float { animation: pgFloat 4s ease-in-out infinite; }
@keyframes pgFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* ── PULSE ── */
.pulse { animation: pgPulse 2s infinite; }
@keyframes pgPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(27,111,232,0.4); }
    50% { box-shadow: 0 0 0 10px rgba(27,111,232,0); }
}

/* ── SHAKE (FORM ERROR) ── */
.shake { animation: pgShake 0.4s ease; }
@keyframes pgShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

/* ── CHART LINE DRAW ── */
.chart-draw { animation: pgDraw 1.2s ease; }
@keyframes pgDraw {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
}

/* ── SKELETON PULSE ── */
.skeleton-line {
    background: linear-gradient(90deg, #edf0f7 25%, #e2e6ef 50%, #edf0f7 75%);
    background-size: 200% 100%;
    animation: pgSkeleton 1.5s infinite;
    border-radius: 6px;
    height: 14px;
}
@keyframes pgSkeleton {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── SUCCESS CHECK ── */
.success-check {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--green-pale);
    display: flex; align-items: center; justify-content: center;
    font-size: 28px;
    margin: 0 auto 16px;
    animation: pgBounceIn 0.5s ease;
}
@keyframes pgBounceIn {
    0% { transform: scale(0); opacity: 0; }
    70% { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}

/* ── RIPPLE EFFECT ── */
.ripple { position: relative; overflow: hidden; }
.ripple::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    animation: pgRipple 0.6s linear;
    background: rgba(255,255,255,0.3);
}
@keyframes pgRipple {
    to { transform: scale(4); opacity: 0; }
}

/* ── SCALE IN ── */
.scale-in { animation: pgScaleIn 0.3s ease forwards; }
@keyframes pgScaleIn {
    from { transform: scale(0.85); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* ── GLOW ── */
.glow-blue { box-shadow: 0 0 20px rgba(27,111,232,0.4) !important; }
.glow-green { box-shadow: 0 0 20px rgba(0,196,140,0.4) !important; }