/* =========================================================
   REGENESIS — ANIMATION SYSTEM
   Cinematic / Anime Community UI
   ========================================================= */


/* =========================================================
   PAGE LOAD
========================================================= */

body {
    animation: pageFadeIn 0.7s ease both;
}

@keyframes pageFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


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

.topbar {
    animation: headerDrop 0.55s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes headerDrop {
    from {
        opacity: 0;
        transform: translateY(-25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================================
   REGENESIS LOGO
========================================================= */

.brand {
    animation: brandReveal 0.8s cubic-bezier(.2,.8,.2,1) 0.15s both;
}

@keyframes brandReveal {
    from {
        opacity: 0;
        transform: translateX(-50%) scale(0.75);
        filter: blur(8px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) scale(1);
        filter: blur(0);
    }
}

.brand-logo {
    animation:
        logoPulse 3s ease-in-out infinite,
        logoFloat 4s ease-in-out infinite;
}

@keyframes logoPulse {
    0%,
    100% {
        box-shadow:
            0 0 18px rgba(255, 8, 127, 0.22);
    }

    50% {
        box-shadow:
            0 0 30px rgba(255, 8, 127, 0.5),
            0 0 55px rgba(139, 92, 246, 0.18);
    }
}

@keyframes logoFloat {
    0%,
    100% {
        transform: skew(-7deg) translateY(0);
    }

    50% {
        transform: skew(-7deg) translateY(-2px);
    }
}


/* =========================================================
   SEARCH ICON
========================================================= */

.search-btn {
    animation: searchAppear 0.7s ease 0.35s both;
}

@keyframes searchAppear {
    from {
        opacity: 0;
        transform: scale(0.6) rotate(-20deg);
    }

    to {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}


/* =========================================================
   FILTERS
========================================================= */

.filters {
    animation: filtersReveal 0.65s ease 0.25s both;
}

@keyframes filtersReveal {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.filter {
    animation: filterPop 0.45s ease both;
}

.filter:nth-child(1) {
    animation-delay: 0.30s;
}

.filter:nth-child(2) {
    animation-delay: 0.37s;
}

.filter:nth-child(3) {
    animation-delay: 0.44s;
}

.filter:nth-child(4) {
    animation-delay: 0.51s;
}

@keyframes filterPop {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.92);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* =========================================================
   SECTION TITLE
========================================================= */

.section-header {
    animation: sectionReveal 0.7s ease 0.45s both;
}

@keyframes sectionReveal {
    from {
        opacity: 0;
        transform: translateX(-15px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.section-header h2 {
    position: relative;
}

.section-header h2::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -7px;

    width: 0;
    height: 2px;

    background: linear-gradient(
        90deg,
        var(--pink),
        transparent
    );

    animation: titleLine 1s ease 0.8s forwards;
}

@keyframes titleLine {
    to {
        width: 75px;
    }
}


/* =========================================================
   COMMUNITY CARDS
========================================================= */

.community-card {
    animation: communityReveal 0.7s cubic-bezier(.2,.8,.2,1) both;
}

.community-card:nth-child(1) {
    animation-delay: 0.5s;
}

.community-card:nth-child(2) {
    animation-delay: 0.62s;
}

.community-card:nth-child(3) {
    animation-delay: 0.74s;
}

.community-card:nth-child(4) {
    animation-delay: 0.86s;
}

@keyframes communityReveal {
    from {
        opacity: 0;
        transform:
            translateY(30px)
            scale(0.94);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}


/* =========================================================
   COMMUNITY IMAGE / COVER LIGHT
========================================================= */

.community-cover::before {
    animation: coverShadow 5s ease-in-out infinite;
}

@keyframes coverShadow {
    0%,
    100% {
        opacity: 0.8;
    }

    50% {
        opacity: 1;
    }
}


/* =========================================================
   COMMUNITY SYMBOL
========================================================= */

.community-symbol {
    animation:
        communityFloat 4s ease-in-out infinite,
        symbolGlow 3s ease-in-out infinite;
}

@keyframes communityFloat {
    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-8px) scale(1.04);
    }
}

@keyframes symbolGlow {
    0%,
    100% {
        filter:
            drop-shadow(
                0 0 8px rgba(255,255,255,0.25)
            );
    }

    50% {
        filter:
            drop-shadow(
                0 0 22px rgba(255,255,255,0.65)
            );
    }
}


/* =========================================================
   COMMUNITY HOVER
========================================================= */

.community-card:hover .community-cover {
    transform: scale(1.035);
}

.community-cover {
    transition:
        transform 0.5s cubic-bezier(.2,.8,.2,1);
}

.community-card:hover .community-symbol {
    animation:
        symbolSpin 0.7s ease,
        symbolGlow 2s ease-in-out infinite;
}

@keyframes symbolSpin {
    0% {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(-7deg) scale(1.12);
    }

    100% {
        transform: rotate(0deg) scale(1);
    }
}


/* =========================================================
   JOIN BUTTON
========================================================= */

.join-small {
    animation: joinIdle 3s ease-in-out infinite;
}

@keyframes joinIdle {
    0%,
    100% {
        box-shadow:
            0 0 0 rgba(255,8,127,0);
    }

    50% {
        box-shadow:
            0 0 16px rgba(255,8,127,0.12);
    }
}

.join-small:hover {
    animation: none;
}


/* =========================================================
   FEED REVEAL
========================================================= */

.feed {
    animation: feedReveal 0.8s ease 0.8s both;
}

@keyframes feedReveal {
    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================================
   POST ENTRANCE
========================================================= */

.post {
    animation: postReveal 0.7s ease both;
}

.post:nth-child(1) {
    animation-delay: 0.85s;
}

.post:nth-child(2) {
    animation-delay: 1s;
}

.post:nth-child(3) {
    animation-delay: 1.15s;
}

.post:nth-child(4) {
    animation-delay: 1.3s;
}

@keyframes postReveal {
    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================================
   AVATAR
========================================================= */

.avatar {
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.post:hover .avatar {
    transform: scale(1.04);

    box-shadow:
        0 0 20px rgba(255,255,255,0.08);
}


/* =========================================================
   VERIFIED BADGE
========================================================= */

.verified {
    animation: verifiedPulse 2.5s ease-in-out infinite;
}

@keyframes verifiedPulse {
    0%,
    100% {
        box-shadow:
            0 0 0 rgba(255,8,127,0);
    }

    50% {
        box-shadow:
            0 0 12px rgba(255,8,127,0.45);
    }
}


/* =========================================================
   POST CONTENT
========================================================= */

.post-content h3 {
    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.post:hover .post-content h3 {
    transform: translateX(2px);
}


/* =========================================================
   HASHTAGS
========================================================= */

.post-tags span {
    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.post-tags span:hover {
    color: var(--pink);

    transform: translateY(-1px);
}


/* =========================================================
   RATING STARS
========================================================= */

.rating span {
    display: inline-block;

    animation: starAppear 0.45s ease both;
}

.rating span:nth-child(1) {
    animation-delay: 1s;
}

.rating span:nth-child(2) {
    animation-delay: 1.08s;
}

.rating span:nth-child(3) {
    animation-delay: 1.16s;
}

.rating span:nth-child(4) {
    animation-delay: 1.24s;
}

.rating span:nth-child(5) {
    animation-delay: 1.32s;
}

@keyframes starAppear {
    from {
        opacity: 0;
        transform:
            scale(0)
            rotate(-45deg);
    }

    70% {
        transform:
            scale(1.25)
            rotate(8deg);
    }

    to {
        opacity: 1;
        transform:
            scale(1)
            rotate(0);
    }
}


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

.anime-mini-card {
    position: relative;

    overflow: hidden;
}

.anime-mini-card::after {
    content: "";

    position: absolute;

    top: -100%;
    left: -80%;

    width: 50%;
    height: 300%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.06),
            transparent
        );

    transform: rotate(25deg);

    transition: none;
}

.anime-mini-card:hover::after {
    animation: cardShine 0.8s ease;
}

@keyframes cardShine {
    from {
        left: -80%;
    }

    to {
        left: 140%;
    }
}


/* =========================================================
   ACTION BUTTONS
========================================================= */

.action {
    transition:
        transform 0.2s ease,
        color 0.2s ease;
}

.action:active {
    transform: scale(0.82);
}

.action.like.liked {
    animation: heartBeat 0.45s ease;
}

@keyframes heartBeat {
    0% {
        transform: scale(1);
    }

    35% {
        transform: scale(1.35);
    }

    65% {
        transform: scale(0.9);
    }

    100% {
        transform: scale(1);
    }
}


/* =========================================================
   POLL
========================================================= */

.poll-option {
    position: relative;

    overflow: hidden;
}

.poll-option::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 0;

    background:
        linear-gradient(
            90deg,
            rgba(255,8,127,0.08),
            transparent
        );

    transition:
        width 0.45s ease;
}

.poll-option:hover::before {
    width: 100%;
}


/* =========================================================
   CREATE BUTTON
========================================================= */

.create-btn {
    animation:
        createPulse 3s ease-in-out infinite,
        createAppear 0.8s cubic-bezier(.2,.8,.2,1) 1s both;
}

@keyframes createAppear {
    from {
        opacity: 0;
        transform:
            scale(0)
            rotate(-90deg);
    }

    to {
        opacity: 1;
        transform:
            scale(1)
            rotate(0);
    }
}

@keyframes createPulse {
    0%,
    100% {
        box-shadow:
            0 10px 35px rgba(255,8,127,0.28);
    }

    50% {
        box-shadow:
            0 10px 45px rgba(255,8,127,0.48),
            0 0 20px rgba(255,8,127,0.18);
    }
}

.create-btn:hover {
    animation: none;
}


/* =========================================================
   BOTTOM NAV
========================================================= */

.bottom-nav {
    animation: navSlideUp 0.65s cubic-bezier(.2,.8,.2,1) 0.7s both;
}

@keyframes navSlideUp {
    from {
        opacity: 0;
        transform:
            translateY(100%);
    }

    to {
        opacity: 1;
        transform:
            translateY(0);
    }
}


/* =========================================================
   BOTTOM NAV ITEMS
========================================================= */

.bottom-item {
    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.bottom-item:hover {
    transform: translateY(-2px);
}

.bottom-item.active span {
    animation: navIconGlow 2.5s ease-in-out infinite;
}

@keyframes navIconGlow {
    0%,
    100% {
        filter:
            drop-shadow(
                0 0 5px rgba(255,8,127,0.35)
            );
    }

    50% {
        filter:
            drop-shadow(
                0 0 14px rgba(255,8,127,0.8)
            );
    }
}


/* =========================================================
   SEARCH OPEN
========================================================= */

.search-box.show {
    animation:
        searchPanelOpen 0.3s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes searchPanelOpen {
    from {
        opacity: 0;
        transform:
            translateY(-15px);
    }

    to {
        opacity: 1;
        transform:
            translateY(0);
    }
}


/* =========================================================
   SEARCH INPUT
========================================================= */

.search-box input {
    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}

.search-box input:focus {
    transform: translateY(-1px);
}


/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #29292e;

    border-radius: 50px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--pink);
}


/* =========================================================
   LOADING MEMBER COUNT
========================================================= */

#regenesis-member-count {
    transition:
        opacity 0.3s ease;
}

#regenesis-member-count.loading {
    animation: countLoading 1.2s ease-in-out infinite;
}

@keyframes countLoading {
    0%,
    100% {
        opacity: 0.35;
    }

    50% {
        opacity: 1;
    }
}


/* =========================================================
   REDUCED MOTION
   Accessibility
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }

}