/* ==========================================
   HOGZMANN ANIMATIONS
========================================== */

/* Smooth scrolling */
html{
    scroll-behavior:smooth;
}

/* Global transitions */
*{
    transition:
        background-color .3s ease,
        color .3s ease,
        border-color .3s ease,
        box-shadow .3s ease,
        transform .3s ease;
}


/* ==========================================
   FLOATING CLOCK
========================================== */

@keyframes float{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0px);

    }

}

.hero-clock{

    animation:float 5s ease-in-out infinite;

}



/* ==========================================
   RGB GLOW
========================================== */

@keyframes rgbGlow{

    0%{

        filter:blur(40px) hue-rotate(0deg);

    }

    50%{

        filter:blur(70px) hue-rotate(120deg);

    }

    100%{

        filter:blur(40px) hue-rotate(360deg);

    }

}

.rgb-glow{

    animation:rgbGlow 10s linear infinite;

}



/* ==========================================
   HERO TEXT
========================================== */

.hero h1{

    animation:fadeUp .8s ease forwards;

}

.hero p{

    animation:fadeUp 1.2s ease forwards;

}

.hero-buttons{

    animation:fadeUp 1.5s ease forwards;

}



/* ==========================================
   FADE UP
========================================== */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}



/* ==========================================
   SECTION FADE
========================================== */

.fade-section{

    opacity:0;

    transform:translateY(60px);

    transition:all .8s ease;

}

.fade-section.show{

    opacity:1;

    transform:translateY(0);

}



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

.feature-card{

    overflow:hidden;

    position:relative;

}

.feature-card::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:4px;

    background:linear-gradient(
        90deg,
        #6DAA2C,
        #DDB11F
    );

    transition:.5s;

}

.feature-card:hover::before{

    left:0;

}

.feature-card:hover{

    transform:translateY(-15px);

}



/* ==========================================
   GALLERY
========================================== */

.gallery-item{

    cursor:pointer;

}

.gallery-item img{

    transition:transform .6s ease;

}

.gallery-item:hover img{

    transform:scale(1.12);

}



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

.btn-primary{

    position:relative;

    overflow:hidden;

}

.btn-primary::after{

    content:"";

    position:absolute;

    width:0;

    height:100%;

    left:50%;

    top:0;

    background:rgba(255,255,255,.15);

    transition:.4s;

}

.btn-primary:hover::after{

    width:220%;

    left:-60%;

}



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

.header{

    transition:.35s;

}

.header.scrolled{

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

}



/* ==========================================
   SPEC CARD
========================================== */

.spec-card:hover{

    transform:

        translateY(-10px)

        scale(1.03);

}



/* ==========================================
   CONTACT CARD
========================================== */

.contact-card:hover{

    transform:translateY(-10px);

}



/* ==========================================
   FOOTER LINKS
========================================== */

.footer-grid a{

    position:relative;

}

.footer-grid a::after{

    content:"";

    position:absolute;

    bottom:-3px;

    left:0;

    width:0;

    height:2px;

    background:#6DAA2C;

    transition:.3s;

}

.footer-grid a:hover::after{

    width:100%;

}



/* ==========================================
   LOADER
========================================== */

.loader{

    animation:loaderHide .8s ease 1.5s forwards;

}

@keyframes loaderHide{

    to{

        opacity:0;

        visibility:hidden;

    }

}



/* ==========================================
   SCROLL BUTTON
========================================== */

#scrollTop{

    transition:.3s;

}

#scrollTop:hover{

    transform:translateY(-5px) scale(1.08);

}



/* ==========================================
   IMAGE SHADOW
========================================== */

.hero-clock{

    filter:drop-shadow(0 40px 60px rgba(0,0,0,.15));

}



/* ==========================================
   ICON BOUNCE
========================================== */

.feature-card:hover .icon{

    animation:bounce .7s;

}

@keyframes bounce{

    0%{

        transform:scale(1);

    }

    30%{

        transform:scale(1.25);

    }

    60%{

        transform:scale(.92);

    }

    100%{

        transform:scale(1);

    }

}



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

.cta{

    background-size:200% 200%;

    animation:gradientMove 10s linear infinite;

}

@keyframes gradientMove{

    0%{

        background-position:left;

    }

    50%{

        background-position:right;

    }

    100%{

        background-position:left;

    }

}



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

.logo img:hover{

    transform:rotate(-3deg) scale(1.05);

}



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

.hero-clock:hover{

    transform:scale(1.03);

}



/* ==========================================
   CARD SHINE
========================================== */

.feature-card::after{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.5),

        transparent

    );

    transform:skewX(-20deg);

}

.feature-card:hover::after{

    animation:shine .9s;

}

@keyframes shine{

    to{

        left:160%;

    }

}