@import url("reset.css");
@import url("variables.css");
@import url("buttons.css");
@import url("animations.css");

@import url("navbar.css");
@import url("hero.css");
@import url("featured-project.css");
@import url("about.css");
@import url("projects.css");
@import url("roadmap.css");
@import url("footer.css");

/* ===========================
   GLOBAL STYLES
=========================== */

html{

    scroll-behavior:smooth;

}

body{

    margin:0;

    background:var(--background);

    color:var(--text-primary);

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

    overflow-x:hidden;

}
/* Full-screen Loader Overlay */
.loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #0d0d0d;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

/* Loader Content Container */
.loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Pulsing Cherry Animation */
.cherry-pulse {
  animation: cherryBounce 1.4s infinite ease-in-out alternate;
}

@keyframes cherryBounce {
  0% {
    transform: scale(0.92);
    filter: drop-shadow(0 0 5px rgba(255, 45, 85, 0.4));
  }
  100% {
    transform: scale(1.08);
    filter: drop-shadow(0 0 25px rgba(255, 45, 85, 0.9));
  }
}

/* Text Styling */
.loader-title {
  color: #ffffff;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 1.1rem;
  letter-spacing: 0.25em;
  margin: 1.5rem 0 1rem 0;
  text-transform: uppercase;
  opacity: 0.9;
}

/* Progress Bar Outer Track */
.progress-bar-container {
  width: 160px;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

/* Progress Bar Fill */
.progress-bar {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #FF2D55, #ff6b8b);
  border-radius: 4px;
  transition: width 0.2s ease-out;
}

/* Class to hide the loader smoothly */
.loader-overlay.hidden {
  opacity: 0;
  visibility: hidden;
}

main{

    width:100%;

}

section{

    width:100%;

    position:relative;

}

img{

    display:block;

    max-width:100%;

}

a{

    text-decoration:none;

    color:inherit;

}

.container{

    width:min(1200px,92%);

    margin:auto;

}

/* ===========================
   SECTION TAG
=========================== */

.section-tag{

    display:inline-flex;

    align-items:center;

    gap:.6rem;

    padding:.5rem 1rem;

    border-radius:999px;

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

    border:1px solid rgba(255,255,255,.08);

    color:var(--accent);

    font-size:.85rem;

    letter-spacing:.08em;

    text-transform:uppercase;

}

/* ===========================
   HEADINGS
=========================== */

h1{

    font-size:clamp(3rem,8vw,6rem);

    line-height:1;

    margin:0;

}

h2{

    font-size:clamp(2rem,5vw,4rem);

    margin:0;

}

h3{

    margin:0;

}

p{

    line-height:1.8;

    color:var(--text-secondary);

}

/* ===========================
   TEXT HIGHLIGHT
=========================== */

span{

    color:inherit;

}

.hero-title span,
h2 span{

    color:var(--accent);

}

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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#090909;

}

::-webkit-scrollbar-thumb{

    background:var(--accent);

    border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--accent-light);

}