/* =========================================================
   GLOBAL INTERACTION SYSTEM
========================================================= */

:root{

    --ease:
        cubic-bezier(.22,.61,.36,1);

}

/* =========================================================
   SMOOTH SCROLL
========================================================= */

html{

    scroll-behavior:smooth;

}

/* =========================================================
   GLOBAL TRANSITIONS
========================================================= */

a,
button,
.btn,
.card,
input,
textarea,
.badge,
.demo-card,
.publisher-card,
.trust-badge,
.feature-card,
.plan-card,
.option-content,
.plan-option-box{

    transition:

        transform .35s var(--ease),

        background .35s var(--ease),

        border-color .35s var(--ease),

        color .25s var(--ease),

        box-shadow .35s var(--ease),

        opacity .25s var(--ease);

}

/* =========================================================
   APP FEEL
========================================================= */

body{

    -webkit-font-smoothing:antialiased;

    text-rendering:optimizeLegibility;

    overflow-x:hidden;

}

/* =========================================================
   FLOATING BACKGROUND GLOW
========================================================= */

body::before{

    content:"";

    position:fixed;

    inset:auto;

    width:700px;
    height:700px;

    top:-260px;
    right:-260px;

    border-radius:50%;

    background:
        radial-gradient(
            rgba(86,45,212,.12),
            transparent 70%
        );

    filter:blur(80px);

    pointer-events:none;

    z-index:-1;

    animation:
        floatGlow 16s ease-in-out infinite;

}

body::after{

    content:"";

    position:fixed;

    width:500px;
    height:500px;

    left:-200px;
    bottom:-200px;

    border-radius:50%;

    background:
        radial-gradient(
            rgba(0,158,69,.08),
            transparent 70%
        );

    filter:blur(70px);

    pointer-events:none;

    z-index:-1;

    animation:
        floatGlowTwo 18s ease-in-out infinite;

}

/* =========================================================
   HERO FLOAT
========================================================= */

.hero-image,
.hero-visual,
.dashboard-preview,
.mockup,
.hero-card{

    animation:
        heroFloat 7s ease-in-out infinite;

}

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

.btn{

    position:relative;

    overflow:hidden;

    isolation:isolate;

}

.btn::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            120deg,
            transparent,
            rgba(255,255,255,.12),
            transparent
        );

    transform:
        translateX(-120%);

}

.btn:hover::before{

    animation:
        shine .9s ease;

}

.btn:hover{

    transform:
        translateY(-2px);

}

.btn:active{

    transform:
        scale(.98);

}

/* =========================================================
   NAV LINKS
========================================================= */

nav a{

    position:relative;

}

nav a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-6px;

    width:0;
    height:2px;

    border-radius:999px;

    background:var(--primary);

    transition:
        width .3s var(--ease);

}

nav a:hover::after{

    width:100%;

}

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

.demo-card:hover,
.feature-card:hover,
.plan-card:hover,
.publisher-card:hover,
.trust-badge:hover{

    transform:
        translateY(-8px);

}

/* =========================================================
   GLASS HOVER
========================================================= */

.demo-card,
.feature-card,
.plan-card,
.trust-badge{

    position:relative;

    overflow:hidden;

}

.demo-card::before,
.feature-card::before,
.plan-card::before,
.trust-badge::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.04),
            transparent 40%
        );

    opacity:0;

    transition:
        opacity .4s ease;

    pointer-events:none;

}

.demo-card:hover::before,
.feature-card:hover::before,
.plan-card:hover::before,
.trust-badge:hover::before{

    opacity:1;

}

/* =========================================================
   INPUTS
========================================================= */

input,
textarea{

    transition:

        border-color .3s ease,

        box-shadow .3s ease,

        transform .2s ease;

}

input:focus,
textarea:focus{

    transform:
        translateY(-1px);

}

/* =========================================================
   BADGES
========================================================= */

.badge{

    position:relative;

    overflow:hidden;

}

.badge::after{

    content:"";

    position:absolute;

    width:120%;
    height:100%;

    top:0;
    left:-120%;

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

    animation:
        badgeShine 5s linear infinite;

}

/* =========================================================
   ICON FLOAT
========================================================= */

.feature-icon,
.demo-icon,
.trust-icon,
.autotag-icon{

    transition:
        transform .35s var(--ease);

}

.feature-card:hover .feature-icon,
.demo-card:hover .demo-icon,
.trust-badge:hover .trust-icon{

    transform:
        rotate(-6deg)
        scale(1.08);

}

/* =========================================================
   SECTION FADE-IN
========================================================= */

section{

    animation:
        sectionFade .8s var(--ease);

}

/* =========================================================
   IMAGE HOVER
========================================================= */

img{

    transition:

        transform .6s var(--ease),

        filter .35s ease;

}

.demo-card:hover img,
.publisher-card:hover img{

    transform:
        scale(1.04);

}

/* =========================================================
   MARQUEE
========================================================= */

.publisher-track{

    will-change:transform;

}

/* =========================================================
   CTA GLOW
========================================================= */

.modern-cta{

    position:relative;

    overflow:hidden;

}

.modern-cta::before{

    content:"";

    position:absolute;

    inset:auto;

    width:300px;
    height:300px;

    right:-100px;
    top:-100px;

    background:
        radial-gradient(
            rgba(86,45,212,.18),
            transparent 70%
        );

    filter:blur(50px);

    animation:
        pulseGlow 6s ease-in-out infinite;

}

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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:transparent;

}

::-webkit-scrollbar-thumb{

    background:
        linear-gradient(
            180deg,
            var(--primary),
            #7c4dff
        );

    border-radius:999px;

}

/* =========================================================
   KEYFRAMES
========================================================= */

@keyframes heroFloat{

    0%,100%{

        transform:
            translateY(0px);

    }

    50%{

        transform:
            translateY(-10px);

    }

}

@keyframes shine{

    100%{

        transform:
            translateX(120%);

    }

}

@keyframes badgeShine{

    100%{

        left:120%;

    }

}

@keyframes floatGlow{

    0%,100%{

        transform:
            translateY(0px)
            translateX(0px);

    }

    50%{

        transform:
            translateY(20px)
            translateX(-20px);

    }

}

@keyframes floatGlowTwo{

    0%,100%{

        transform:
            translateY(0px)
            translateX(0px);

    }

    50%{

        transform:
            translateY(-20px)
            translateX(20px);

    }

}

@keyframes pulseGlow{

    0%,100%{

        opacity:.5;

        transform:
            scale(1);

    }

    50%{

        opacity:1;

        transform:
            scale(1.1);

    }

}

@keyframes sectionFade{

    from{

        opacity:0;

        transform:
            translateY(20px);

    }

    to{

        opacity:1;

        transform:
            translateY(0);

    }

}

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

@media(max-width:768px){

    body::before,
    body::after{

        opacity:.5;

        filter:blur(90px);

    }

    .hero-image,
    .hero-visual,
    .dashboard-preview{

        animation:none;

    }

}

/* =========================================================
   REDUCE MOTION
========================================================= */

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

    *{

        animation:none!important;

        transition:none!important;

        scroll-behavior:auto!important;

    }

}