/* ============================================
   SPINNING BORDER ANIMATION - HYBRID HOUDINI & TRANSFORM FALLBACK
   ============================================ */

/* Register custom property for angle animation */
@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/* Keyframes for spinning property animation */
@keyframes spinProperty {
    0% {
        --angle: 0deg;
    }
    100% {
        --angle: 360deg;
    }
}

/* Keyframes for fallback transform rotation */
@keyframes spinRotate {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* ============================================
   SERIES CARDS ONLY (in grid/browse pages)
   ============================================ */

.grid .card,
.grid .manga-card,
.grid .series-card,
.manga-grid .card,
.manga-grid .manga-card,
.manga-grid .series-card,
.series-grid .card,
.series-grid .manga-card,
.series-grid .series-card,
.browse-grid .card,
.browse-grid .manga-card,
.browse-grid .series-card {
    position: relative;
    z-index: 1;
    overflow: hidden !important;
    border-radius: 12px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
}

/* Spinning border line using ::before pseudo-element */
.grid .card::before,
.grid .manga-card::before,
.grid .series-card::before,
.manga-grid .card::before,
.manga-grid .manga-card::before,
.manga-grid .series-card::before,
.series-grid .card::before,
.series-grid .manga-card::before,
.series-grid .series-card::before,
.browse-grid .card::before,
.browse-grid .manga-card::before,
.browse-grid .series-card::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 250%;
    height: 250%;
    z-index: -1;
    border-radius: 50%;
    background: conic-gradient(
        from var(--angle),
        transparent 0deg,
        transparent 70deg,
        #BC13FE 120deg,
        #3B82F6 180deg,
        #BC13FE 240deg,
        transparent 290deg,
        transparent 360deg
    );
    /* Animation removed to fix lag */
    will-change: transform;
}

/* Ensure card content container clips properly with 2px inset gap */
.grid .card::after,
.grid .manga-card::after,
.grid .series-card::after,
.manga-grid .card::after,
.manga-grid .manga-card::after,
.manga-grid .series-card::after,
.series-grid .card::after,
.series-grid .manga-card::after,
.series-grid .series-card::after,
.browse-grid .card::after,
.browse-grid .manga-card::after,
.browse-grid .series-card::after {
    content: '';
    position: absolute;
    inset: 2px;
    background: #0f172a;
    border-radius: 10px;
    z-index: -1;
}

/* Card hover effects */
.grid .card:hover,
.grid .manga-card:hover,
.grid .series-card:hover,
.manga-grid .card:hover,
.manga-grid .manga-card:hover,
.manga-grid .series-card:hover,
.series-grid .card:hover,
.series-grid .manga-card:hover,
.series-grid .series-card:hover,
.browse-grid .card:hover,
.browse-grid .manga-card:hover,
.browse-grid .series-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 
        0 0 20px rgba(188, 19, 254, 0.4),
        0 0 40px rgba(59, 130, 246, 0.3);
}

.grid .card:hover::before,
.manga-grid .card:hover::before,
.series-grid .card:hover::before,
.browse-grid .card:hover::before {
    /* Hover speed up removed */
}

/* Ensure card covers render with smooth top rounded corners */
.card-cover,
.card img,
.series-card img,
.manga-card img {
    border-radius: 8px 8px 0 0;
    width: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.card:hover .card-cover,
.card:hover img {
    transform: scale(1.03);
}

/* ============================================
   DETAILS PAGE ONLY
   ============================================ */

.series-detail-page .detail-card,
.series-detail-page .info-section,
.series-detail-page .chapter-list,
.series-detail-page .comments-section {
    position: relative;
    z-index: 1;
    overflow: hidden !important;
    border-radius: 14px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.series-detail-page .detail-card::before,
.series-detail-page .info-section::before,
.series-detail-page .chapter-list::before,
.series-detail-page .comments-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 250%;
    height: 250%;
    z-index: -1;
    border-radius: 50%;
    background: conic-gradient(
        from var(--angle),
        transparent 0deg,
        transparent 70deg,
        #BC13FE 120deg,
        #3B82F6 180deg,
        #BC13FE 240deg,
        transparent 290deg,
        transparent 360deg
    );
    /* Animation removed to fix lag */
    will-change: transform;
}

.series-detail-page .detail-card::after,
.series-detail-page .info-section::after,
.series-detail-page .chapter-list::after,
.series-detail-page .comments-section::after {
    content: '';
    position: absolute;
    inset: 2px;
    background: #0f172a;
    border-radius: 12px;
    z-index: -1;
}

.series-detail-page .detail-card:hover,
.series-detail-page .info-section:hover,
.series-detail-page .chapter-list:hover,
.series-detail-page .comments-section:hover {
    box-shadow: 
        0 0 20px rgba(188, 19, 254, 0.4),
        0 0 40px rgba(59, 130, 246, 0.25);
}

/* ============================================
   ALL-IN-ONE PAGE ONLY
   ============================================ */

.all-in-one-page .content-card,
.all-in-one-page .section-card {
    position: relative;
    z-index: 1;
    overflow: hidden !important;
    border-radius: 14px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.all-in-one-page .content-card::before,
.all-in-one-page .section-card::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 250%;
    height: 250%;
    z-index: -1;
    border-radius: 50%;
    background: conic-gradient(
        from var(--angle),
        transparent 0deg,
        transparent 70deg,
        #BC13FE 120deg,
        #3B82F6 180deg,
        #BC13FE 240deg,
        transparent 290deg,
        transparent 360deg
    );
    /* Animation removed to fix lag */
    will-change: transform;
}

.all-in-one-page .content-card::after,
.all-in-one-page .section-card::after {
    content: '';
    position: absolute;
    inset: 2px;
    background: #0f172a;
    border-radius: 12px;
    z-index: -1;
}