/* =============================================================
   WiseSeva Animations CSS v5.0 — Premium Light Mode
   ============================================================= */

/* =============================================
   CORE ENTRANCE KEYFRAMES
   ============================================= */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(32px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeDown {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.90); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes slideLeft {
    from { opacity: 0; transform: translateX(-50px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideRight {
    from { opacity: 0; transform: translateX(50px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes springIn {
    0%   { opacity: 0; transform: scale(0.75) translateY(20px); }
    60%  { opacity: 1; transform: scale(1.04) translateY(-4px); }
    100% { transform: scale(1) translateY(0); }
}

/* =============================================
   SCROLL-TRIGGERED ANIMATION CLASSES
   ============================================= */
.ws-animate {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}
.ws-animate.is-visible {
    opacity: 1;
    transform: none;
}

/* Direction variants */
.ws-animate--left    { transform: translateX(-40px) !important; }
.ws-animate--right   { transform: translateX(40px) !important; }
.ws-animate--scale   { transform: scale(0.88) !important; }
.ws-animate--fade    { transform: none !important; }
.ws-animate--left.is-visible,
.ws-animate--right.is-visible,
.ws-animate--scale.is-visible,
.ws-animate--fade.is-visible  { transform: none !important; }

/* Stagger delays */
.ws-animate--delay-1 { transition-delay: 0.08s; }
.ws-animate--delay-2 { transition-delay: 0.16s; }
.ws-animate--delay-3 { transition-delay: 0.24s; }
.ws-animate--delay-4 { transition-delay: 0.32s; }
.ws-animate--delay-5 { transition-delay: 0.40s; }
.ws-animate--delay-6 { transition-delay: 0.48s; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ws-animate { opacity: 1; transform: none; transition: none; }
}

/* =============================================
   SKELETON SHIMMER (override with themed version)
   ============================================= */
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* =============================================
   HERO PARTICLE / CANVAS
   ============================================= */
.ws-particle {
    position: absolute; border-radius: 50%;
    pointer-events: none; opacity: 0;
    animation: particleDrift 8s ease-in-out infinite;
}
@keyframes particleDrift {
    0%   { opacity: 0; transform: translateY(0) scale(0.5); }
    20%  { opacity: 0.6; }
    80%  { opacity: 0.3; }
    100% { opacity: 0; transform: translateY(-100px) scale(1.2); }
}

/* =============================================
   COUNTER ANIMATION
   ============================================= */
.ws-count-up { opacity: 0; }
.ws-count-up.is-visible { animation: fadeUp 0.6s ease forwards; }

/* =============================================
   CARD HOVER MICROINTERACTIONS
   ============================================= */
.ws-card, .ws-feature-card, .ws-article-card, .wsp-stat-card {
    will-change: transform;
}

/* Number pop on load */
.ws-card__value {
    animation: none;
    transition: color 0.3s ease;
}
.ws-card__value.is-updated {
    animation: numberPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes numberPop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.12); color: var(--ws-emerald); }
    100% { transform: scale(1); }
}

/* =============================================
   LOADING STATE
   ============================================= */
.ws-spinner {
    display: inline-block; width: 14px; height: 14px;
    border: 2px solid rgba(21,101,192,0.2);
    border-top-color: var(--ws-blue);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Full-page loader */
.ws-page-loader {
    position: fixed; inset: 0;
    background: var(--ws-bg); z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    transition: opacity 0.4s ease;
}
.ws-page-loader.is-hidden { opacity: 0; pointer-events: none; }

.ws-page-loader__ring {
    width: 48px; height: 48px;
    border: 4px solid var(--ws-bg-section);
    border-top-color: var(--ws-blue);
    border-right-color: var(--ws-emerald);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* =============================================
   TOAST NOTIFICATIONS
   ============================================= */
.ws-toast-container {
    position: fixed; bottom: var(--ws-space-8); left: 50%;
    transform: translateX(-50%); z-index: 9000;
    display: flex; flex-direction: column; gap: var(--ws-space-3);
    pointer-events: none;
}

.ws-toast {
    background: var(--ws-bg-dark);
    color: #fff; padding: var(--ws-space-3) var(--ws-space-6);
    border-radius: var(--ws-radius-md); font-size: var(--ws-text-sm);
    font-weight: 600; box-shadow: var(--ws-shadow-xl);
    pointer-events: all; display: flex; align-items: center; gap: var(--ws-space-3);
    animation: toastIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    max-width: 400px;
}
.ws-toast.is-hiding {
    animation: toastOut 0.25s ease forwards;
}
@keyframes toastIn {
    from { opacity: 0; transform: translateY(20px) scale(0.9); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toastOut {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0; transform: translateY(10px) scale(0.95); }
}
.ws-toast--success { border-left: 4px solid var(--ws-emerald); }
.ws-toast--error   { border-left: 4px solid #EF4444; }
.ws-toast--info    { border-left: 4px solid var(--ws-blue); }

/* =============================================
   PRICE TICKER MICROINTERACTION
   ============================================= */
.price-flash-up {
    animation: priceFlashUp 1.2s ease forwards;
}
.price-flash-down {
    animation: priceFlashDown 1.2s ease forwards;
}
@keyframes priceFlashUp {
    0%, 100% { background: transparent; }
    30%      { background: rgba(14,124,102,0.15); color: var(--ws-emerald); }
}
@keyframes priceFlashDown {
    0%, 100% { background: transparent; }
    30%      { background: rgba(239,68,68,0.10); color: #EF4444; }
}

/* =============================================
   HEADER SHRINK ON SCROLL
   ============================================= */
.ws-header {
    transition: height 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.ws-header.is-scrolled {
    box-shadow: 0 4px 24px rgba(15,23,42,0.10);
}

/* =============================================
   BUTTON RIPPLE EFFECT
   ============================================= */
.ws-btn {
    position: relative; overflow: hidden;
}
.ws-btn .ws-ripple {
    position: absolute; border-radius: 50%;
    background: rgba(255,255,255,0.35);
    transform: scale(0); animation: ripple 0.6s ease-out forwards;
    pointer-events: none;
}
@keyframes ripple {
    to { transform: scale(4); opacity: 0; }
}

/* =============================================
   MANDI PRICE CHANGE INDICATOR
   ============================================= */
.ws-price-up   { color: var(--ws-green); }
.ws-price-down { color: #EF4444; }
.ws-price-same { color: var(--ws-text-muted); }

/* =============================================
   DATA TABLE ROW ENTRANCE
   ============================================= */
.wsp-table tbody tr {
    animation: tableRowIn 0.3s ease forwards;
    animation-fill-mode: both;
}
.wsp-table tbody tr:nth-child(1)  { animation-delay: 0.02s; }
.wsp-table tbody tr:nth-child(2)  { animation-delay: 0.04s; }
.wsp-table tbody tr:nth-child(3)  { animation-delay: 0.06s; }
.wsp-table tbody tr:nth-child(4)  { animation-delay: 0.08s; }
.wsp-table tbody tr:nth-child(5)  { animation-delay: 0.10s; }
.wsp-table tbody tr:nth-child(6)  { animation-delay: 0.12s; }
.wsp-table tbody tr:nth-child(7)  { animation-delay: 0.14s; }
.wsp-table tbody tr:nth-child(8)  { animation-delay: 0.16s; }
.wsp-table tbody tr:nth-child(9)  { animation-delay: 0.18s; }
.wsp-table tbody tr:nth-child(10) { animation-delay: 0.20s; }
.wsp-table.is-loaded tbody tr     { animation: none; opacity: 1; }

@keyframes tableRowIn {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: translateX(0); }
}