/* ===================================================================
   Indian Loop Premium — animations.css
   Skeleton loading, fade-ins, hover micro-interactions.
   =================================================================== */

/* Skeleton */
.ilp-skel {
    background: linear-gradient(90deg, var(--ilp-muted) 25%, #ececf0 50%, var(--ilp-muted) 75%);
    background-size: 200% 100%;
    animation: ilpSkel 1.4s ease-in-out infinite;
    border-radius: var(--ilp-radius-sm);
}
@keyframes ilpSkel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
html[data-theme="dark"] .ilp-skel { background: linear-gradient(90deg, #18191e 25%, #25272d 50%, #18191e 75%); background-size: 200% 100%; }

.ilp-skel-card { height: 320px; border-radius: var(--ilp-radius); }
.ilp-skel-line { height: 14px; margin-bottom: 8px; }
.ilp-skel-line--80 { width: 80%; }
.ilp-skel-line--60 { width: 60%; }

/* Fade-in on viewport */
.ilp-fade-in { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
.ilp-fade-in.is-visible { opacity: 1; transform: translateY(0); }

/* Hover lift */
.ilp-lift { transition: transform var(--ilp-trans), box-shadow var(--ilp-trans); }
.ilp-lift:hover { transform: translateY(-3px); box-shadow: var(--ilp-shadow-md); }

/* Spin */
.ilp-spinner {
    width: 24px; height: 24px;
    border: 3px solid var(--ilp-line); border-top-color: var(--ilp-primary);
    border-radius: 50%; animation: ilpSpin .8s linear infinite;
}
@keyframes ilpSpin { to { transform: rotate(360deg); } }

/* Slide-in from left */
@keyframes ilpSlideInL { from { transform: translateX(-20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.ilp-slide-in-l { animation: ilpSlideInL .4s ease forwards; }

/* Pop-in */
@keyframes ilpPopIn { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.ilp-pop-in { animation: ilpPopIn .4s cubic-bezier(.34,1.56,.64,1) forwards; }