/* ============================================
   InstaRock — Visual Enhancements
   Scroll-to-top, card animations, fade-in, empty states
   Mobile-first | Sync: mobile, tablet, desktop
   ============================================ */

/* --- SCROLL-TO-TOP BUTTON --- */
#np-scroll-top{position:fixed;bottom:72px;left:20px;right:auto;z-index:9999;width:42px;height:42px;border-radius:50%;border:none;background:var(--np-gradient,linear-gradient(135deg,#833AB4,#DC143C,#F77737));color:#fff;font-size:17px;cursor:pointer;box-shadow:0 4px 16px rgba(220,20,60,.35);opacity:0;visibility:hidden;transform:translateY(12px) scale(.9);transition:opacity .3s ease,transform .3s ease,visibility .3s ease,box-shadow .3s ease;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
#np-scroll-top:hover{box-shadow:0 6px 24px rgba(220,20,60,.5);transform:translateY(-2px) scale(1.05)}
#np-scroll-top:active{transform:translateY(0) scale(.95)}
#np-scroll-top.np-visible{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
@media(min-width:641px){#np-scroll-top{bottom:80px;left:20px;width:48px;height:48px;font-size:20px}}

/* --- PAGE FADE-IN --- */
.np-page-fade{animation:npFadeIn .45s ease-out}
@keyframes npFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* --- CARD ENTRANCE ANIMATIONS --- */
.np-observe-card{opacity:0;transform:translateY(24px);transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1);will-change:opacity,transform}
.np-observe-card.np-visible{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.np-observe-card{opacity:1;transform:none;transition:none}}

/* stagger delay for card grids */
.np-card-grid .np-observe-card:nth-child(1){transition-delay:0ms}
.np-card-grid .np-observe-card:nth-child(2){transition-delay:60ms}
.np-card-grid .np-observe-card:nth-child(3){transition-delay:120ms}
.np-card-grid .np-observe-card:nth-child(4){transition-delay:180ms}
.np-card-grid .np-observe-card:nth-child(5){transition-delay:240ms}
.np-card-grid .np-observe-card:nth-child(6){transition-delay:300ms}
.np-card-grid .np-observe-card:nth-child(7){transition-delay:360ms}
.np-card-grid .np-observe-card:nth-child(8){transition-delay:420ms}

/* --- EMPTY STATES --- */
.np-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 24px;text-align:center;min-height:40vh}
.np-empty-state-icon{font-size:56px;margin-bottom:16px;opacity:.3;color:var(--text-soft,#4A5568)}
.np-empty-state h3{margin:0 0 8px;font-size:20px;font-weight:700;color:var(--text,#1A202C)}
.np-empty-state p{margin:0 0 20px;font-size:15px;color:var(--text-soft,#4A5568);max-width:400px;line-height:1.5}
.np-empty-state .np-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 24px;border-radius:var(--radius-pill,999px);font-size:14px;font-weight:700;text-decoration:none;color:#fff;background:var(--np-gradient,linear-gradient(135deg,#833AB4,#DC143C,#F77737));transition:opacity .2s,transform .2s}
.np-empty-state .np-btn:hover{opacity:.9;transform:scale(1.02)}
.np-empty-state .np-empty-search{margin-top:16px;width:100%;max-width:400px;display:flex;gap:8px}
.np-empty-state .np-empty-search input{flex:1;padding:10px 14px;border-radius:var(--radius-pill,999px);border:1px solid var(--border,#E8EDF5);background:var(--bg-card,#fff);color:var(--text,#1A202C);font-size:14px;outline:none;transition:border-color .2s}
.np-empty-state .np-empty-search input:focus{border-color:var(--np-primary,#DC143C)}
.np-empty-state .np-empty-search button{padding:10px 18px;border-radius:var(--radius-pill,999px);border:none;background:var(--np-gradient,linear-gradient(135deg,#833AB4,#DC143C,#F77737));color:#fff;font-size:14px;font-weight:700;cursor:pointer;transition:opacity .2s}
.np-empty-state .np-empty-search button:hover{opacity:.9}
/* 404 specific */
.np-empty-state-404 .np-empty-state-icon{font-size:80px;background:var(--np-gradient,linear-gradient(135deg,#833AB4,#DC143C,#F77737));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
/* Category empty override */
.cat-empty{text-align:center;padding:60px 24px;min-height:30vh}
.cat-empty p{font-size:16px;color:var(--text-soft,#4A5568);margin:0 0 16px}
.cat-empty a{display:inline-flex;align-items:center;gap:8px;padding:10px 24px;border-radius:var(--radius-pill,999px);font-weight:700;text-decoration:none;color:#fff;background:var(--np-gradient,linear-gradient(135deg,#833AB4,#DC143C,#F77737));transition:opacity .2s}
.cat-empty a:hover{opacity:.9}