/*
 * ==========================================
 *              PORTFOLIO STYLES
 * ==========================================
 * 
 * TABLE OF CONTENTS:
 * 1. Imports & Core Setup
 * 2. Canvas & Background
 * 3. Sections & Transitions
 * 4. Components (Cards, Bars, etc.)
 * 5. Navigation
 * 6. Text Effects
 * 7. GitHub Projects
 * 8. Scroll Snap & Layout
 * 9. Responsive Design
 */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Fira+Code:wght@400;500&display=swap");

body {
  margin: 0;
  padding: 0;
  font-family: "Inter", sans-serif;
  background-color: #050505;
  overflow-x: hidden;
  color: white;
  height: 750vh; /* Hauteur cruciale pour le scroll */
}

/* 
 * ----------------------------------------
 * 2. CANVAS & BACKGROUND
 * ----------------------------------------
 */
#canvas-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* 
 * ----------------------------------------
 * 3. SECTIONS & TRANSITIONS
 * ----------------------------------------
 */
/* --- Sections & Animations --- */
.content-section {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  z-index: 10;
  padding: 2rem;
}

.content-section.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.content-section.hidden-up {
  opacity: 0;
  transform: translateY(-50px) scale(0.95);
}

.content-section.hidden-down {
  opacity: 0;
  transform: translateY(50px) scale(0.95);
}

/* Alignement des sections (remplace les styles inline) */
.content-section.align-start {
  justify-content: flex-start;
}

.content-section.align-end {
  justify-content: flex-end;
}

/* 
 * ----------------------------------------
 * 4. COMPONENTS
 * ----------------------------------------
 */
/* --- Components --- */
.glass-card {
  background: rgba(10, 10, 10, 0.4);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1rem;
  padding: 2rem;
  max-width: 600px;
  width: 100%;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
}

.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
  width: 0%;
  z-index: 100;
  box-shadow: 0 0 10px #3b82f6;
  transition: width 0.1s linear;
}

/* 
 * ----------------------------------------
 * 5. NAVIGATION
 * ----------------------------------------
 */
/* --- Navigation --- */
.nav-dots {
  position: fixed;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  transition: all 0.4s;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.dot.active {
  background: #3b82f6;
  box-shadow: 0 0 15px #3b82f6;
  transform: scale(1.5);
  border-color: #3b82f6;
}

/* 
 * ----------------------------------------
 * 6. TEXT EFFECTS
 * ----------------------------------------
 */
/* --- Text Effects --- */
.text-glow-blue {
  text-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}
.text-glow-violet {
  text-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
}
.text-glow-white {
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

/* 
 * ----------------------------------------
 * 7. GITHUB PROJECTS
 * ----------------------------------------
 */
/* --- Fix pour la liste des projets GitHub --- */
#github-projects {
  /* Limite la hauteur à 60% de l'écran pour garder le titre visible */
  max-height: 60vh;

  /* Active le scroll vertical À L'INTÉRIEUR de la div */
  overflow-y: auto;
  overflow-x: hidden;

  /* Un peu d'espace pour le scroll */
  padding-right: 10px;
  padding-bottom: 20px;
}

/* Personnalisation de la scrollbar pour qu'elle soit jolie */
#github-projects::-webkit-scrollbar {
  width: 6px;
}

#github-projects::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

#github-projects::-webkit-scrollbar-thumb {
  background: #3b82f6;
  border-radius: 4px;
}

#github-projects::-webkit-scrollbar-thumb:hover {
  background: #8b5cf6;
}

/* 
 * ----------------------------------------
 * 8. SCROLL SNAP & LAYOUT
 * ----------------------------------------
 */
/* --- Scroll Snap Configuration --- */
html {
  /* On active le snap sur le HTML car c'est lui qui scrolle */
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Inter", sans-serif;
  background-color: #050505;
  color: white;
  overflow-x: hidden;
  /* On laisse le contenu définir la hauteur */
  height: auto;
}

/* Le conteneur qui donne la hauteur à la page */
.scroll-snap-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* On remet le conteneur dans le flux pour qu'il crée la hauteur */
  z-index: -1;
  pointer-events: none;
}

/* Chaque "écran" virtuel */
.snap-area {
  /* 150vh crée la distance que tu voulais pour la lenteur */
  height: 150vh;
  width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.snap-area:last-child {
  height: 100vh;
}

/* 
 * ----------------------------------------
 * 9. RESPONSIVE DESIGN
 * ----------------------------------------
 */
/* --- OPTIMISATIONS MOBILE (Responsive) --- */
@media (max-width: 768px) {
  /* 1. Rendre le scroll naturel sur mobile */
  .snap-area {
    height: 100vh !important; /* On force une hauteur d'écran standard */
  }

  /* 2. Adapter la typographie */
  h1 {
    font-size: 3.5rem !important; /* Plus petit pour éviter les coupures */
    line-height: 1.1;
  }

  .text-6xl {
    font-size: 2.5rem !important;
  }
  .text-5xl {
    font-size: 2rem !important;
  }

  /* 3. Recentrer et adapter les cartes */
  .glass-card {
    margin: 0 !important; /* Enlève les marges gauche/droite */
    width: 90% !important; /* Prend presque toute la largeur */
    padding: 1.5rem !important;
    max-height: 70vh; /* Évite que la carte soit plus haute que l'écran */
    overflow-y: auto; /* Permet de scroller DANS la carte si besoin */
  }

  /* 4. Ajuster les sections */
  .content-section {
    padding: 1rem;
    justify-content: center !important; /* Tout centrer */
    align-items: center;
  }

  /* 5. Déplacer les points de navigation */
  .nav-dots {
    right: 15px; /* Plus près du bord */
    gap: 1rem;
  }

  .dot {
    width: 12px; /* Plus gros pour le doigt */
    height: 12px;
  }

  /* 6. Fixer la barre d'adresse mobile qui saute */
  body {
    /* Évite le bug du scroll horizontal sur mobile */
    width: 100vw;
    overflow-x: hidden;
  }
}