@import url('./components/navbar.css');
@import url('./components/hero.css');
@import url('./components/about.css');
@import url('./components/projects.css');
@import url('./components/contact.css');
@import url('./components/how-i-work.css');
@import url('./components/skills.css');
@import url('./components/footer.css');


/* CSS RESET */

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

/* GOOGLE FONTS */

:root{

    /* COLORS */

    --color-primary: #3B82F6;
    --color-primary-dark: #2563EB;

    --color-bg: #0F172A;
    --color-surface: #1E293B;

    --color-text: #F8FAFC;
    --color-text-muted: #94A3B8;

    --color-white: #FFFFFF;

    /* TYPOGRAPHY */

    --font-heading: 'Poppins', sans-serif;
    --font-body: 'Inter', sans-serif;

    /* SPACING */

    --section-padding: 100px;

    /* BORDER */

    --radius: 12px;

    /* TRANSITION */

    --transition: all .3s ease;

}

/* BASE STYLE */

html,
body{
    overflow-x: hidden;
}

html{
    scroll-behavior: smooth;

    scroll-padding-top: 90px;
}

body{
    background: var(--color-bg);

    color: var(--color-text);

    font-family: var(--font-body);

    line-height: 1.6;

    animation: pageFade .6s ease;
}

/* ========================================
   SCROLL PROGRESS BAR
======================================== */

.scroll-progress{

    position: fixed;

    top: 0;

    left: 0;

    width: 0;

    height: 3px;

    background: var(--color-primary);

    box-shadow: 0 0 10px rgba(59,130,246,.6);

    z-index: 9999;

    transition: width .1s linear;

}

main{
    padding-top: 2rem;
}

img{
    display: block;

    max-width: 100%;
}

a{
    color: inherit;

    text-decoration: none;

    transition: var(--transition);
}

ul{
    list-style: none;
}

button{
    border: none;

    cursor: pointer;

    font: inherit;
}

.container{
    width: min(90%, 1200px);

    margin-inline: auto;
}

section{
    padding: var(--section-padding) 0;
}

h1, h2, h3, h4, h5, h6{
    font-family: var(--font-heading);

    line-height: 1.2;
}

p{
    color: var(--color-text-muted);
}

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:.5rem;

    padding:.9rem 1.8rem;

    border-radius:999px;

    background:var(--color-primary);

    color:white;

    text-decoration:none;

    font-weight:600;

    border:none;

    cursor:pointer;

    position:relative;

    z-index:1;

    overflow:hidden;

    transition:
    transform .3s ease,
    box-shadow .3s ease,
    background .3s ease;

}

.btn:hover{

    transform:translateY(-4px);

    box-shadow:
    0 12px 30px rgba(59,130,246,.35);

}

.btn:active{

    transform: translateY(-1px) scale(.98);

}

.btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:50%;

    height:100%;

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

    transform:skewX(-25deg);

    transition:.5s ease;

}

.btn:hover::before{

    left:150%;

}

.reveal{
    opacity: 0;

    transform: translateY(50px);

    transition:
        opacity .8s ease,
        transform .8s ease;
}

.reveal.active{
    opacity: 1;

    transform: translateY(0);
}

/* ========================================
   BACK TO TOP
======================================== */

.back-to-top{

    position: fixed;

    right: 2rem;

    bottom: 2rem;

    width: 50px;

    height: 50px;

    border: none;

    border-radius: 50%;

    background: var(--color-surface);

    color: var(--color-primary);

    border: 1px solid rgba(59,130,246,.3);

    display: flex;

    justify-content: center;

    align-items: center;

    cursor: pointer;

    opacity: 0;

    visibility: hidden;

    transform: translateY(20px);

    transition: all .3s ease;

    z-index: 99999;

    box-shadow: 0 10px 25px rgba(59,130,246,.25);

}

.back-to-top.show{

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}

.back-to-top:hover{

    transform: translateY(-5px);

    background: var(--color-primary-dark);

}

.back-to-top i{

    font-size: 1.2rem;

    line-height: 1;

    color: white;

}

/* ========================================
   ACCESSIBILITY
======================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible{

    outline: 3px solid var(--color-primary);

    outline-offset: 4px;

    border-radius: .5rem;

}

::selection{

    background: var(--color-primary);

    color: var(--color-white);

}

/* ==========================
   PREMIUM CARD EFFECT
========================== */

.about-card,
.skill-card,
.project-card,
.process-card,
.contact-item{

    position:relative;

    overflow:hidden;

}

.about-card::before,
.skill-card::before,
.project-card::before,
.process-card::before,
.contact-item::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:60%;

    height:100%;

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

    transition:.6s ease;

}

.about-card:hover::before,
.skill-card:hover::before,
.project-card:hover::before,
.process-card:hover::before,
.contact-item:hover::before{

    left:150%;

}

.about-card > *,
.skill-card > *,
.project-card > *,
.process-card > *,
.contact-item > *{

    position:relative;

    z-index:1;

}

@keyframes float{

    0%,
    100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

}

@keyframes pageFade{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

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

    *{

        animation: none !important;

        transition: none !important;

        scroll-behavior: auto !important;

    }

}