/* ==========================================
   FURPLAN EDITORIAL ARCHIVE STYLES
   Directory: /assets/css/
   File: furplan-archive-post.css
========================================== */

/* 1. The Elegant Filter (Category Underline Animation) */
.furplan-category-filter a {
    padding-bottom: 4px;
}
.furplan-category-filter a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background-color: #a40000;
    transition: width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.furplan-category-filter a:hover::after {
    width: 100%;
}
.furplan-category-filter a.active::after {
    width: 100%;
    background-color: #111111; 
}

/* 2. Line Clamp */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-4 { display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* 3. Pagination Styles */
.furplan-pagination { display: flex; align-items: center; gap: 0.5rem; }
.furplan-pagination .page-numbers {
    display: flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 10px;
    font-size: 0.75rem; font-weight: 700; color: #9ca3af; border: 1px solid transparent; border-radius: 4px; transition: all 0.3s ease;
}
.furplan-pagination .page-numbers:hover { color: #111111; border-color: #e5e7eb; }
.furplan-pagination .page-numbers.current { background-color: #111111; color: #ffffff; border-color: #111111; }

/* 4. Scroll Reveal Animation */
.reveal-on-scroll {
    opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; will-change: opacity, visibility;
}
.reveal-on-scroll.is-visible { opacity: 1; transform: translateY(0); }


/* ==========================================
   🌟 5. CURSOR IMAGE FOLLOWER (เติมส่วนนี้เข้าไป)
========================================== */
#cursor-image-follower {
    position: fixed;
    top: 0; 
    left: 0;
    width: 320px; 
    aspect-ratio: 4/3;
    z-index: 9999;
    pointer-events: none; /* ป้องกันเมาส์สะดุดรูป */
    opacity: 0; 
    visibility: hidden;
    transform: translate(-50%, -50%) scale(0.8);
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease;
    border-radius: 4px; 
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

#cursor-image-follower.is-visible {
    opacity: 1; 
    visibility: visible; 
    transform: translate(-50%, -50%) scale(1);
}

#follower-img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

/* ปิดการทำงานบนมือถือให้ชัวร์ 100% ป้องกันบั๊ก */
@media (max-width: 768px) {
    #cursor-image-follower { display: none !important; }
}