* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at top,
            #17152c 0%,
            #090a12 40%,
            #040507 100%
        );

    color: white;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    overflow-x: hidden;
}


/* =========================
   ANIMATED BACKGROUND
========================= */

.anime-background {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    z-index: -1;
}


.anime-background::before {
    content: "";

    position: absolute;

    width: 200%;
    height: 200%;

    top: -50%;
    left: -50%;

    background-image:
        linear-gradient(
            rgba(162, 80, 255, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 74, 153, 0.03) 1px,
            transparent 1px
        );

    background-size: 70px 70px;

    transform: rotate(-12deg);

    animation: moveGrid 25s linear infinite;
}


@keyframes moveGrid {

    from {
        transform:
            rotate(-12deg)
            translate(0, 0);
    }

    to {
        transform:
            rotate(-12deg)
            translate(70px, 70px);
    }

}


/* MOVING GLOWS */

.glow {
    position: absolute;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    filter: blur(120px);

    opacity: 0.20;

    animation:
        floatingGlow 12s
        ease-in-out
        infinite alternate;
}


.glow-1 {
    background: #8c42ff;

    top: -150px;
    left: -150px;
}


.glow-2 {
    background: #ff326f;

    top: 35%;
    right: -200px;

    animation-delay: 3s;
}


.glow-3 {
    background: #176fff;

    bottom: -200px;
    left: 35%;

    animation-delay: 6s;
}


@keyframes floatingGlow {

    0% {
        transform:
            translate(0, 0)
            scale(1);
    }

    100% {
        transform:
            translate(100px, 80px)
            scale(1.3);
    }

}


/* =========================
   NAVBAR
========================= */

.navbar {
    width: 100%;

    padding:
        22px
        6%;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    border-bottom:
        1px solid
        rgba(255,255,255,0.07);

    backdrop-filter:
        blur(14px);

    background:
        rgba(5,6,12,0.5);

    position: relative;

    z-index: 10;
}


.logo {
    color: white;

    text-decoration: none;

    font-size: 19px;

    font-weight: bold;
}


.nav-links {
    display: flex;

    gap: 28px;
}


.nav-links a {
    color: #9c9ca8;

    text-decoration: none;

    transition: 0.3s;
}


.nav-links a:hover,
.nav-links a.active {
    color: #c96cff;
}


/* =========================
   HEADER
========================= */

.anime-header {
    min-height: 420px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding:
        70px
        20px
        40px;
}


.small-title {
    color: #c16cff;

    font-size: 12px;

    letter-spacing: 5px;

    margin-bottom: 12px;
}


.anime-header h1 {
    font-size:
        clamp(
            65px,
            10vw,
            130px
        );

    line-height: 1;

    letter-spacing:
        -7px;

    font-weight: 900;

    text-shadow:
        0 0 40px
        rgba(180,78,255,0.25);
}


.anime-header h1 span {

    background:
        linear-gradient(
            90deg,
            #b959ff,
            #ff4c91
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;
}


.description {
    color: #9999a7;

    margin-top: 18px;

    font-size: 15px;

    max-width: 600px;

    line-height: 1.6;
}


/* =========================
   CATEGORIES
========================= */

.categories {
    margin-top: 35px;

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 10px;
}


.category {
    border:
        1px solid
        rgba(255,255,255,0.10);

    color: #bcbcc8;

    background:
        rgba(255,255,255,0.04);

    padding:
        10px
        20px;

    border-radius: 100px;

    cursor: pointer;

    transition: 0.25s;
}


.category:hover {
    color: white;

    border-color:
        rgba(191,91,255,0.8);

    background:
        rgba(191,91,255,0.10);

    transform:
        translateY(-2px);
}


.category.active {

    color: white;

    border-color:
        transparent;

    background:
        linear-gradient(
            90deg,
            #8a47ff,
            #ff417f
        );

    box-shadow:
        0 5px 25px
        rgba(180,70,255,0.25);
}


/* =========================
   ANIME SECTION
========================= */

.anime-section {
    width: 100%;

    max-width: 1600px;

    margin: auto;

    padding:
        30px
        5%
        100px;
}


.section-title {
    display: flex;

    align-items: center;

    justify-content:
        space-between;

    margin-bottom: 25px;
}


.section-title p {
    font-size: 11px;

    letter-spacing: 3px;

    color: #b95aff;

    margin-bottom: 6px;
}


.section-title h2 {
    font-size: 30px;
}


/* =========================
   GRID
========================= */

.anime-grid {
    display: grid;

    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        );

    gap:
        35px
        22px;
}


/* =========================
   ANIME CARD
========================= */

.anime-card {
    min-width: 0;

    transition:
        transform
        0.35s ease;
}


.anime-card:hover {
    transform:
        translateY(-10px);
}


/* LONG POSTER */

.poster {
    width: 100%;

    aspect-ratio:
        2 / 3;

    position: relative;

    overflow: hidden;

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            #1f1b30,
            #0a0a10
        );

    border:
        1px solid
        rgba(255,255,255,0.08);

    box-shadow:
        0 12px 40px
        rgba(0,0,0,0.35);

    transition:
        0.35s;
}


.poster img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition:
        transform
        0.5s ease,
        filter
        0.5s ease;
}


.anime-card:hover .poster {

    border-color:
        rgba(
            195,
            92,
            255,
            0.7
        );

    box-shadow:
        0 15px 50px
        rgba(
            160,
            65,
            255,
            0.20
        );
}


.anime-card:hover .poster img {

    transform:
        scale(1.07);

    filter:
        brightness(0.65);
}


/* RATING */

.rating {
    position: absolute;

    top: 12px;
    right: 12px;

    padding:
        7px
        10px;

    border-radius: 8px;

    background:
        rgba(
            5,
            5,
            8,
            0.80
        );

    backdrop-filter:
        blur(10px);

    font-size: 13px;

    color: #ffd75a;
}


/* CARD OVERLAY */

.card-overlay {
    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    opacity: 0;

    background:
        linear-gradient(
            transparent,
            rgba(
                8,
                5,
                15,
                0.75
            )
        );

    transition:
        0.35s;
}


.anime-card:hover
.card-overlay {
    opacity: 1;
}


.card-overlay button {

    padding:
        11px
        20px;

    border: 0;

    border-radius: 9px;

    color: white;

    font-weight: bold;

    cursor: pointer;

    background:
        linear-gradient(
            90deg,
            #984cff,
            #ff3e85
        );

    transform:
        translateY(20px);

    opacity: 0;

    transition:
        0.35s;
}


.anime-card:hover
.card-overlay button {

    transform:
        translateY(0);

    opacity: 1;
}


/* ANIME INFO */

.anime-info {
    padding:
        14px
        4px;
}


.anime-info h3 {
    font-size: 16px;

    margin-bottom: 7px;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;
}


.anime-info p {
    color: #7f7f8c;

    font-size: 13px;
}


/* =========================
   TABLET
========================= */

@media (
    max-width: 1100px
) {

    .anime-grid {
        grid-template-columns:
            repeat(
                4,
                minmax(0,1fr)
            );
    }

}


/* =========================
   SMALL TABLET
========================= */

@media (
    max-width: 800px
) {

    .anime-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0,1fr)
            );
    }

    .nav-links {
        gap: 12px;
    }

}


/* =========================
   MOBILE
========================= */

@media (
    max-width: 550px
) {

    .anime-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );

        gap:
            25px
            12px;
    }

    .anime-header {
        min-height:
            350px;
    }

    .nav-links {
        display: none;
    }

}


.back-button {
    display: inline-block;
    margin-top: 30px;
    margin-left: 6%;
    padding: 14px 26px;

    color: white;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;

    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;

    backdrop-filter: blur(10px);
    transition: 0.3s ease;

    position: relative;
    z-index: 20;
}

.back-button:hover {
    transform: translateX(-6px);
    background: rgba(185, 90, 255, 0.18);
    border-color: #b95aff;
    box-shadow: 0 0 25px rgba(185, 90, 255, 0.25);
}

/* Dynamic anime cards generated from anime-data.js */
.anime-card-link {
    display: block;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.card-overlay .view-details {
    padding: 11px 20px;
    border-radius: 9px;
    color: white;
    font-weight: bold;
    background: linear-gradient(90deg, #984cff, #ff3e85);
    transform: translateY(20px);
    opacity: 0;
    transition: 0.35s;
}

.anime-card:hover .card-overlay .view-details {
    transform: translateY(0);
    opacity: 1;
}


/* =========================
   MANGA COLLAGE BACKGROUND
   26 user-supplied anime images, duplicated for a seamless loop.
========================= */

.anime-background {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -3;
    background: #07080d;
    pointer-events: none;
}

/* Disable the old moving grid so the manga panels stay clean. */
.anime-background::before {
    content: none;
}

.manga-collage-track {
    position: absolute;
    inset: -5vh auto -5vh 0;
    height: 110vh;
    display: flex;
    width: max-content;
    will-change: transform;
    transform: translate3d(-50%, 0, 0);
    animation: mangaScrollRight 88s linear infinite;
}

.manga-collage-set {
    flex: 0 0 auto;
    height: 110vh;
    display: grid;
    grid-template-rows: repeat(6, minmax(0, 1fr));
    grid-template-columns: repeat(14, clamp(115px, 10.8vw, 205px));
    background: #060606;
    overflow: hidden;
}

.manga-panel {
    position: relative;
    overflow: hidden;
    min-width: 0;
    min-height: 0;
    border: clamp(2px, 0.24vw, 5px) solid #050505;
    background: #111;
    transform: translateZ(0);
}

.manga-panel img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    filter: grayscale(1) contrast(1.28) brightness(0.76);
    transform: scale(1.045);
}

/* Small angled cuts make the grid read more like manga panels. */
.manga-panel:nth-child(4n + 1) { clip-path: polygon(0 1%, 100% 0, 97% 100%, 1% 96%); }
.manga-panel:nth-child(4n + 2) { clip-path: polygon(2% 0, 98% 2%, 100% 97%, 0 100%); }
.manga-panel:nth-child(4n + 3) { clip-path: polygon(0 0, 100% 3%, 99% 100%, 3% 98%); }
.manga-panel:nth-child(4n)     { clip-path: polygon(1% 3%, 100% 0, 98% 98%, 0 100%); }

/* Fine manga-paper grain over every panel. */
.manga-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-radial-gradient(circle at 25% 25%, rgba(255,255,255,0.09) 0 0.7px, transparent 0.8px 3.2px),
        linear-gradient(115deg, rgba(255,255,255,0.05), transparent 32%, rgba(0,0,0,0.12));
    mix-blend-mode: soft-light;
    opacity: 0.42;
}

/* Full-coverage manga tiling. Every grid cell is occupied, so no large black gaps appear. */
.manga-panel:nth-child(1)  { grid-column: 1;      grid-row: 1 / span 3; }
.manga-panel:nth-child(2)  { grid-column: 1;      grid-row: 4 / span 3; }
.manga-panel:nth-child(3)  { grid-column: 2;      grid-row: 1 / span 2; }
.manga-panel:nth-child(4)  { grid-column: 2;      grid-row: 3 / span 2; }
.manga-panel:nth-child(5)  { grid-column: 2;      grid-row: 5 / span 2; }
.manga-panel:nth-child(6)  { grid-column: 3 / span 2; grid-row: 1 / span 3; }
.manga-panel:nth-child(7)  { grid-column: 3;      grid-row: 4 / span 3; }
.manga-panel:nth-child(8)  { grid-column: 4;      grid-row: 4 / span 3; }
.manga-panel:nth-child(9)  { grid-column: 5;      grid-row: 1 / span 4; }
.manga-panel:nth-child(10) { grid-column: 5;      grid-row: 5 / span 2; }
.manga-panel:nth-child(11) { grid-column: 6 / span 2; grid-row: 1 / span 2; }
.manga-panel:nth-child(12) { grid-column: 6;      grid-row: 3 / span 4; }
.manga-panel:nth-child(13) { grid-column: 7;      grid-row: 3 / span 2; }
.manga-panel:nth-child(14) { grid-column: 7;      grid-row: 5 / span 2; }
.manga-panel:nth-child(15) { grid-column: 8;      grid-row: 1 / span 3; }
.manga-panel:nth-child(16) { grid-column: 8;      grid-row: 4 / span 3; }
.manga-panel:nth-child(17) { grid-column: 9;      grid-row: 1 / span 2; }
.manga-panel:nth-child(18) { grid-column: 10;     grid-row: 1 / span 2; }
.manga-panel:nth-child(19) { grid-column: 9 / span 2; grid-row: 3 / span 4; }
.manga-panel:nth-child(20) { grid-column: 11;     grid-row: 1 / span 2; }
.manga-panel:nth-child(21) { grid-column: 11;     grid-row: 3 / span 4; }
.manga-panel:nth-child(22) { grid-column: 12 / span 2; grid-row: 1 / span 3; }
.manga-panel:nth-child(23) { grid-column: 12;     grid-row: 4 / span 3; }
.manga-panel:nth-child(24) { grid-column: 13;     grid-row: 4 / span 3; }
.manga-panel:nth-child(25) { grid-column: 14;     grid-row: 1 / span 3; }
.manga-panel:nth-child(26) { grid-column: 14;     grid-row: 4 / span 3; }

/* Slightly different crops make the collage feel composed instead of repetitive. */
.manga-panel:nth-child(3n + 1) img { object-position: 50% 24%; }
.manga-panel:nth-child(4n + 2) img { object-position: 50% 36%; }
.manga-panel:nth-child(5n) img     { object-position: 50% 18%; }
.manga-panel:nth-child(7n) img     { transform: scale(1.09); }

/* Dark/readable center plus the red accent from the page's original look. */
.manga-collage-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    background:
        radial-gradient(ellipse at 50% 40%, rgba(6,8,16,0.76) 0%, rgba(6,8,16,0.58) 30%, rgba(6,8,16,0.25) 60%, rgba(6,8,16,0.15) 100%),
        radial-gradient(circle at 78% 48%, rgba(255,40,72,0.22) 0%, rgba(255,40,72,0.08) 22%, transparent 47%),
        linear-gradient(180deg, rgba(4,5,10,0.22) 0%, rgba(4,5,10,0.44) 52%, rgba(4,5,10,0.74) 100%);
}

@keyframes mangaScrollRight {
    from {
        transform: translate3d(-50%, 0, 0);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

/* Keep foreground content readable on top of the collage. */
.navbar,
.back-button,
.anime-header,
.anime-search,
.anime-section {
    position: relative;
    z-index: 2;
}

/* The search already uses fixed positioning on desktop; keep that behavior. */
.anime-search {
    position: fixed;
}

@media (max-width: 1050px) {
    .manga-collage-track,
    .manga-collage-set {
        height: 108vh;
    }

    .manga-collage-track {
        inset-block: -4vh;
        animation-duration: 78s;
    }

    .manga-collage-set {
        grid-template-columns: repeat(14, clamp(100px, 15vw, 175px));
    }
}

@media (max-width: 760px) {
    .manga-collage-track {
        animation-duration: 68s;
    }

    .manga-collage-set {
        grid-template-rows: repeat(6, minmax(0, 1fr));
        grid-template-columns: repeat(14, clamp(90px, 27vw, 145px));
    }

    .manga-collage-overlay {
        background:
            radial-gradient(ellipse at 50% 38%, rgba(6,8,16,0.79) 0%, rgba(6,8,16,0.63) 37%, rgba(6,8,16,0.36) 68%, rgba(6,8,16,0.22) 100%),
            linear-gradient(180deg, rgba(4,5,10,0.26) 0%, rgba(4,5,10,0.54) 100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .manga-collage-track {
        animation: none;
        transform: translate3d(-25%, 0, 0);
    }
}