/* ============================================================
   HERO.CSS — Section d'accueil + fenêtre terminal réaliste
   ============================================================ */

/* ── Mise en page globale du Hero ───────────────────────── */
.hero-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: var(--navbar-height);
  position: relative;
  overflow: hidden;
}

/* Fond dégradé radial subtil (lueur en haut à gauche) */
.hero-section::before {
  content: '';
  position: absolute;
  top: -10%;
  left: -5%;
  width: 55%;
  height: 70%;
  background: radial-gradient(
    ellipse at center,
    rgba(58, 123, 213, 0.08) 0%,
    transparent 65%
  );
  pointer-events: none;
  z-index: 0;
}

/* Deuxième lueur en bas à droite (cyan) */
.hero-section::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: -5%;
  width: 45%;
  height: 60%;
  background: radial-gradient(
    ellipse at center,
    rgba(100, 255, 218, 0.05) 0%,
    transparent 65%
  );
  pointer-events: none;
  z-index: 0;
}

/* ── Conteneur deux colonnes ────────────────────────────── */
.hero-container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-16);
  padding-block: var(--space-20);
  width: 100%;
}

/* ── Colonne texte ──────────────────────────────────────── */
.hero-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Ligne "$  whoami" */
.hero-intro {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--accent-cyan);
  letter-spacing: 0.08em;
  margin: 0;
}

.hero-intro::before {
  /* Le $ est dans le HTML, pas besoin de pseudo-element */
}

/* Nom principal */
.hero-name {
  font-family: var(--font-sans);
  font-size: var(--fs-hero);
  font-weight: var(--fw-bold);
  color: var(--text-white);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  margin: 0;
}

/* Sous-titre typewriter */
.hero-title {
  font-family: var(--font-mono);
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  font-weight: var(--fw-regular);
  color: var(--text-secondary);
  line-height: 1.4;
  min-height: 2.2em; /* Évite le layout shift pendant le typewriter */
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
}

/* Curseur clignotant du typewriter */
.cursor {
  display: inline-block;
  color: var(--accent-cyan);
  font-weight: var(--fw-bold);
  animation: blink 1.1s step-end infinite;
  margin-left: 2px;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* Description sous le titre */
.hero-desc {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
  max-width: 480px;
  margin: 0;
}

/* CTA boutons */
.hero-cta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}

/* ═══════════════════════════════════════════════════════════
   FENÊTRE TERMINAL — Rendu ultra-réaliste
   ═══════════════════════════════════════════════════════════ */

.hero-terminal {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.terminal-window {
  width: 100%;
  max-width: 480px;
  background-color: var(--bg-terminal);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* Animation flottante */
  animation: float-terminal 5s ease-in-out infinite;
}

@keyframes float-terminal {
  0%, 100% { transform: translateY(0px);   }
  50%       { transform: translateY(-8px);  }
}

/* ── Barre de titre ─────────────────────────────────────── */
.terminal-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.75rem 1rem;
  background-color: var(--bg-terminal-bar);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
}

/* Dots de contrôle */
.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  cursor: default;
  transition: filter var(--transition-fast);
}

.terminal-window:hover .dot {
  filter: brightness(1.3);
}

.dot-red    { background-color: #ff5f57; box-shadow: 0 0 0 1px rgba(255, 95, 87, 0.3); }
.dot-yellow { background-color: #febc2e; box-shadow: 0 0 0 1px rgba(254, 188, 46, 0.3); }
.dot-green  { background-color: #28c840; box-shadow: 0 0 0 1px rgba(40, 200, 64, 0.3); }

/* Icônes au hover sur les dots */
.dot-red::before    { content: '×'; }
.dot-yellow::before { content: '−'; }
.dot-green::before  { content: '+'; }

.dot::before {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 900;
  color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity var(--transition-fast);
  line-height: 1;
}

.terminal-window:hover .dot::before {
  opacity: 1;
}

/* Titre centré de la barre */
.terminal-title {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.45);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  letter-spacing: 0.02em;
  pointer-events: none;
}

/* ── Corps du terminal ──────────────────────────────────── */
.terminal-body {
  padding: 1.25rem 1.4rem 1.5rem;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--terminal-font-size);
  line-height: 1.75;
  color: #abb2bf;
  overflow-x: auto;
  background-color: var(--bg-terminal);

  /* Grain de texture subtil */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='%230d1117'/%3E%3Crect x='0' y='0' width='1' height='1' fill='%23ffffff' opacity='0.015'/%3E%3C/svg%3E");
}

.terminal-body code {
  font-family: inherit;
  font-size: inherit;
}

/* ── Coloration syntaxique YAML dans le terminal ────────── */

/* Prompt "$ " */
.t-prompt {
  color: var(--accent-cyan);
  font-weight: var(--fw-semibold);
  user-select: none;
}

/* Commande tapée */
.t-cmd {
  color: #e6f1ff;
  font-weight: var(--fw-regular);
}

/* Clé YAML */
.t-key {
  color: #7dcfff;  /* Bleu clair — clés */
}

/* Valeur YAML */
.t-val {
  color: #9ece6a;  /* Vert — valeurs strings */
}

/* Valeur booléenne/numérique */
.t-num {
  color: #ff9e64;  /* Orange — nombres */
}

/* Commentaire YAML */
.t-comment {
  color: #565f89;  /* Gris — commentaires */
  font-style: italic;
}

/* Statut "available" */
.t-green {
  color: var(--accent-green);
  font-weight: var(--fw-semibold);
  text-shadow: 0 0 8px rgba(0, 255, 136, 0.4);
}

/* Curseur du terminal */
.t-cursor {
  display: inline-block;
  width: 8px;
  height: 14px;
  background-color: var(--accent-cyan);
  opacity: 0.8;
  vertical-align: text-bottom;
  animation: blink 1.2s step-end infinite;
  margin-left: 2px;
}

/* ── Scroll interne du terminal ─────────────────────────── */
.terminal-body::-webkit-scrollbar {
  height: 4px;
}

.terminal-body::-webkit-scrollbar-track {
  background: transparent;
}

.terminal-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-full);
}

/* ── Grille de points décorative (background pattern) ───── */
.hero-section .bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(100, 255, 218, 0.08) 1px, transparent 1px);
  background-size: 32px 32px;
  z-index: 0;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black, transparent);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black, transparent);
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — Hero
   ═══════════════════════════════════════════════════════════ */

/* Tablette */
@media (max-width: 900px) {
  .hero-container {
    grid-template-columns: 1fr;
    gap: var(--space-12);
    text-align: center;
  }

  .hero-text {
    align-items: center;
  }

  .hero-intro {
    text-align: left;
    /* On garde l'alignement du prompt à gauche même en centré */
    align-self: flex-start;
  }

  .hero-desc {
    max-width: 560px;
  }

  .hero-terminal {
    justify-content: center;
  }

  .terminal-window {
    max-width: 500px;
  }
}

/* Mobile */
@media (max-width: 600px) {
  .hero-section {
    padding-top: calc(var(--navbar-height) + var(--space-8));
    align-items: flex-start;
  }

  .hero-container {
    padding-block: var(--space-12) var(--space-10);
    gap: var(--space-10);
  }

  .hero-name {
    font-size: clamp(2.2rem, 9vw, 3rem);
  }

  .hero-title {
    font-size: var(--fs-base);
    justify-content: center;
  }

  .hero-cta {
    justify-content: center;
  }

  .terminal-window {
    max-width: 100%;
  }

  .terminal-body {
    font-size: 0.72rem;
    padding: 1rem;
  }

  /* Cacher le terminal sur très petit écran pour ne pas surcharger */
  @media (max-width: 380px) {
    .hero-terminal {
      display: none;
    }
  }
}