/* =========================================================
   REGENESIS
   ANIMATION & MOTION SYSTEM
   ========================================================= */


/* =========================================================
   01. PAGE LOADER
   ========================================================= */

@keyframes loaderSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* =========================================================
   02. PAGE LOADER LOGO
   ========================================================= */

@keyframes logoPulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow:
            0 0 20px rgba(124, 92, 255, 0.2);
    }

    50% {
        transform: scale(1.05);
        box-shadow:
            0 0 45px rgba(124, 92, 255, 0.45);
    }
}

.loader-logo {
    animation: logoPulse 2s ease-in-out infinite;
}


/* =========================================================
   03. PULSE DOT
   ========================================================= */

@keyframes pulseDot {

    0% {
        transform: scale(0.8);
        opacity: 0.6;
    }

    50% {
        transform: scale(1.15);
        opacity: 1;
    }

    100% {
        transform: scale(0.8);
        opacity: 0.6;
    }
}

.pulse-dot {
    animation:
        pulseDot 1.6s ease-in-out infinite;
}


/* =========================================================
   04. HERO BACKGROUND
   ========================================================= */

@keyframes heroBreathing {

    0% {
        transform: scale(1.04);
    }

    50% {
        transform: scale(1.08);
    }

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

.hero-background {
    animation:
        heroBreathing 14s ease-in-out infinite;
}


/* =========================================================
   05. HERO CONTENT ENTRANCE
   ========================================================= */

@keyframes heroFadeUp {

    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

.hero-badge {
    animation:
        heroFadeUp 0.8s 0.15s ease both;
}

.hero-content h1 {
    animation:
        heroFadeUp 0.9s 0.3s ease both;
}

.hero-content > p {
    animation:
        heroFadeUp 0.9s 0.45s ease both;
}

.hero-buttons {
    animation:
        heroFadeUp 0.9s 0.6s ease both;
}

.hero-stats {
    animation:
        heroFadeUp 0.9s 0.75s ease both;
}


/* =========================================================
   06. HERO TEXT GLOW
   ========================================================= */

@keyframes textGlow {

    0%,
    100% {
        filter:
            drop-shadow(
                0 0 0 rgba(124, 92, 255, 0)
            );
    }

    50% {
        filter:
            drop-shadow(
                0 0 12px rgba(124, 92, 255, 0.18)
            );
    }
}

.hero-content h1 span {
    animation:
        textGlow 4s ease-in-out infinite;
}


/* =========================================================
   07. SCROLL INDICATOR
   ========================================================= */

@keyframes scrollBounce {

    0%,
    100% {
        transform: translate(-50%, 0);
    }

    50% {
        transform: translate(-50%, 8px);
    }
}

.hero-scroll {
    animation:
        scrollBounce 2s ease-in-out infinite;
}


/* =========================================================
   08. BUTTON FLOAT
   ========================================================= */

@keyframes buttonGlow {

    0%,
    100% {
        box-shadow:
            0 10px 30px rgba(124, 92, 255, 0.22);
    }

    50% {
        box-shadow:
            0 15px 40px rgba(124, 92, 255, 0.35);
    }
}

.hero-buttons .primary-button {
    animation:
        buttonGlow 3s ease-in-out infinite;
}


/* =========================================================
   09. FEATURE CARD REVEAL
   ========================================================= */

@keyframes cardReveal {

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

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

.feature-card {
    animation:
        cardReveal 0.7s ease both;
}

.feature-card:nth-child(1) {
    animation-delay: 0.05s;
}

.feature-card:nth-child(2) {
    animation-delay: 0.12s;
}

.feature-card:nth-child(3) {
    animation-delay: 0.19s;
}

.feature-card:nth-child(4) {
    animation-delay: 0.26s;
}

.feature-card:nth-child(5) {
    animation-delay: 0.33s;
}

.feature-card:nth-child(6) {
    animation-delay: 0.40s;
}


/* =========================================================
   10. FEATURE CARD ICON
   ========================================================= */

@keyframes iconFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

.feature-card:hover .feature-icon {
    animation:
        iconFloat 1.2s ease-in-out infinite;
}


/* =========================================================
   11. FEATURE CARD LIGHT
   ========================================================= */

@keyframes cardLight {

    0% {
        transform:
            translateX(-120%)
            rotate(20deg);
    }

    100% {
        transform:
            translateX(180%)
            rotate(20deg);
    }
}

.feature-card {
    isolation: isolate;
}

.feature-card::after {
    content: "";

    position: absolute;

    top: -30%;
    left: -70%;

    width: 45%;
    height: 160%;

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

    transform: rotate(20deg);

    pointer-events: none;

    opacity: 0;
}

.feature-card:hover::after {
    opacity: 1;

    animation:
        cardLight 0.8s ease forwards;
}


/* =========================================================
   12. FEATURE CARD NUMBER
   ========================================================= */

.feature-card-content > span {
    transition:
        color 0.3s ease,
        transform 0.3s ease;
}

.feature-card:hover
.feature-card-content > span {
    color: var(--brand-light);

    transform: translateX(3px);
}


/* =========================================================
   13. ARROW ANIMATION
   ========================================================= */

@keyframes arrowMove {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(5px);
    }
}

.feature-card:hover
.feature-card-content strong i {
    animation:
        arrowMove 0.8s ease-in-out infinite;
}


/* =========================================================
   14. SECTION LABEL
   ========================================================= */

@keyframes labelGlow {

    0%,
    100% {
        text-shadow:
            0 0 0 rgba(155, 131, 255, 0);
    }

    50% {
        text-shadow:
            0 0 15px rgba(155, 131, 255, 0.25);
    }
}

.section-label {
    animation:
        labelGlow 4s ease-in-out infinite;
}


/* =========================================================
   15. COMMUNITY LOADING
   ========================================================= */

@keyframes loadingPulse {

    0%,
    100% {
        opacity: 0.45;
    }

    50% {
        opacity: 1;
    }
}

.feed-loading p {
    animation:
        loadingPulse 1.5s ease-in-out infinite;
}


/* =========================================================
   16. LOADING SPINNER
   ========================================================= */

.loading-spinner {
    animation:
        loaderSpin 0.8s linear infinite;
}


/* =========================================================
   17. SEARCH BOX
   ========================================================= */

@keyframes searchAppear {

    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.98);
    }

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

.search-overlay.active .search-box {
    animation:
        searchAppear 0.35s ease both;
}


/* =========================================================
   18. MOBILE NAVIGATION
   ========================================================= */

@keyframes mobileNavItem {

    from {
        opacity: 0;
        transform: translateX(15px);
    }

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

.mobile-navigation.active
.mobile-nav-link {
    animation:
        mobileNavItem 0.4s ease both;
}

.mobile-navigation.active
.mobile-nav-link:nth-child(1) {
    animation-delay: 0.05s;
}

.mobile-navigation.active
.mobile-nav-link:nth-child(2) {
    animation-delay: 0.08s;
}

.mobile-navigation.active
.mobile-nav-link:nth-child(3) {
    animation-delay: 0.11s;
}

.mobile-navigation.active
.mobile-nav-link:nth-child(4) {
    animation-delay: 0.14s;
}

.mobile-navigation.active
.mobile-nav-link:nth-child(5) {
    animation-delay: 0.17s;
}

.mobile-navigation.active
.mobile-nav-link:nth-child(6) {
    animation-delay: 0.20s;
}

.mobile-navigation.active
.mobile-nav-link:nth-child(7) {
    animation-delay: 0.23s;
}

.mobile-navigation.active
.mobile-nav-link:nth-child(8) {
    animation-delay: 0.26s;
}

.mobile-navigation.active
.mobile-nav-link:nth-child(9) {
    animation-delay: 0.29s;
}

.mobile-navigation.active
.mobile-nav-link:nth-child(10) {
    animation-delay: 0.32s;
}


/* =========================================================
   19. NOTIFICATION BADGE
   ========================================================= */

@keyframes notificationPulse {

    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.15);
    }

    70% {
        transform: scale(0.95);
    }

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

.notification-count:not([hidden]) {
    animation:
        notificationPulse 2s ease-in-out infinite;
}


/* =========================================================
   20. CTA BACKGROUND
   ========================================================= */

@keyframes ctaGlow {

    0% {
        transform: scale(0.95);
        opacity: 0.55;
    }

    50% {
        transform: scale(1.08);
        opacity: 1;
    }

    100% {
        transform: scale(0.95);
        opacity: 0.55;
    }
}

.cta-background {
    animation:
        ctaGlow 9s ease-in-out infinite;
}


/* =========================================================
   21. CTA CONTENT
   ========================================================= */

.cta-content {
    animation:
        heroFadeUp 0.9s 0.15s ease both;
}


/* =========================================================
   22. FOOTER SOCIAL BUTTON
   ========================================================= */

@keyframes socialFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}

.footer-socials a:hover {
    animation:
        socialFloat 0.8s ease-in-out infinite;
}


/* =========================================================
   23. BUTTON PRESS
   ========================================================= */

.primary-button:active,
.secondary-button:active,
.login-button:active,
.view-all-button:active {
    transform: scale(0.97);
}


/* =========================================================
   24. LINK UNDERLINE EFFECT
   ========================================================= */

.footer-column a {
    position: relative;
}

.footer-column a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -3px;

    width: 0;
    height: 1px;

    background: var(--brand-light);

    transition:
        width 0.25s ease;
}

.footer-column a:hover::after {
    width: 100%;
}


/* =========================================================
   25. HEADER BRAND HOVER
   ========================================================= */

.brand-logo {
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.brand:hover .brand-logo {
    transform:
        rotate(-4deg)
        scale(1.05);

    box-shadow:
        0 0 35px rgba(124,92,255,0.4);
}


/* =========================================================
   26. HEADER ICON HOVER
   ========================================================= */

.header-icon i {
    transition:
        transform 0.25s ease;
}

.header-icon:hover i {
    transform: scale(1.12);
}


/* =========================================================
   27. EVENT CARD READY STATE
   ========================================================= */

.event-card,
.community-post {
    animation:
        cardReveal 0.6s ease both;
}


/* =========================================================
   28. SCROLL REVEAL SYSTEM
   ========================================================= */

.reveal {
    opacity: 0;

    transform:
        translateY(35px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.reveal.visible {
    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================================
   29. REVEAL FROM LEFT
   ========================================================= */

.reveal-left {
    opacity: 0;

    transform:
        translateX(-40px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.reveal-left.visible {
    opacity: 1;

    transform:
        translateX(0);
}


/* =========================================================
   30. REVEAL FROM RIGHT
   ========================================================= */

.reveal-right {
    opacity: 0;

    transform:
        translateX(40px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.reveal-right.visible {
    opacity: 1;

    transform:
        translateX(0);
}


/* =========================================================
   31. SCALE REVEAL
   ========================================================= */

.reveal-scale {
    opacity: 0;

    transform:
        scale(0.92);

    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}

.reveal-scale.visible {
    opacity: 1;

    transform:
        scale(1);
}


/* =========================================================
   32. STAGGER HELPERS
   ========================================================= */

.delay-1 {
    transition-delay: 0.1s;
}

.delay-2 {
    transition-delay: 0.2s;
}

.delay-3 {
    transition-delay: 0.3s;
}

.delay-4 {
    transition-delay: 0.4s;
}

.delay-5 {
    transition-delay: 0.5s;
}


/* =========================================================
   33. REDUCED MOTION
   ========================================================= */

@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;
    }

    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-scale {
        opacity: 1;
        transform: none;
    }
}


/* =========================================================
   34. MOBILE MOTION OPTIMIZATION
   ========================================================= */

@media (max-width: 700px) {

    .hero-background {
        animation-duration: 20s;
    }

    .feature-card:hover {
        transform: translateY(-3px);
    }

    .hero-buttons .primary-button {
        animation: none;
    }

    .cta-background {
        animation-duration: 12s;
    }
}