/* =========================================================
   IMPORTS
   ========================================================= */
@import url("header.css");
@import url("footer.css");
@import url("home.css");
@import url("about.css");
@import url("project.css");

/* =========================================================
   FONTS
   ========================================================= */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500&display=swap");

/* =========================================================
   RESET & CONFIGURAÇÕES GLOBAIS
   ========================================================= */

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

:root {
  /* Dark Mode (Padrão) */
  --bg-color: #0d0d0d;
  --text-color: #ffffff;
  --secondary-text: #666666;
  --mono-font: "JetBrains Mono", monospace;
  --accent-blue: #2563eb;
  --nav-bg: rgba(13, 13, 13, 0.8);
  --border-color: #222;
}

/* Light Mode */
body.light-mode {
  --bg-color: #f5f5f5;
  --text-color: #0d0d0d;
  --secondary-text: #888888;
  --nav-bg: rgba(245, 245, 245, 0.8);
  --border-color: #ddd;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: var(--mono-font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  line-height: 1.5;
  cursor: auto;
}

body.loaded {
  opacity: 1;
}

::selection {
  background: var(--accent-blue);
  color: #fff;
}

/* =========================================================
   GLOBAL FADE-IN ANIMATION
======================================================== */

.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1s forwards;
}

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

/* Delays escalonados */
.fade-in-delay-1 {
  animation-delay: 0.2s;
}
.fade-in-delay-2 {
  animation-delay: 0.4s;
}
.fade-in-delay-3 {
  animation-delay: 0.6s;
}
.fade-in-delay-4 {
  animation-delay: 0.8s;
}
.fade-in-delay-5 {
  animation-delay: 1s;
}
/* Overlay de transição */
.page-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-color);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.page-loader.active {
  opacity: 1;
  pointer-events: all;
}

.page-loader .spinner {
  width: 40px;
  height: 40px;
  border: 2px solid var(--border-color);
  border-top-color: var(--accent-blue);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

body {
  opacity: 0;
  transition: opacity 0.4s ease;
}

body.loaded {
  opacity: 1;
}