/* index.css */

/* ===== HERO ===== */
.hero {
  min-height: calc(100vh - var(--nav-height));
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 4rem 8vw; gap: 3rem;
}

.hero-content { flex: 1; max-width: 560px; }

.hero-badge {
  display: inline-block; font-family: 'Share Tech Mono', monospace;
  font-size: 0.8rem; color: var(--accent);
  border: 1px solid var(--accent); padding: 0.3rem 1rem;
  border-radius: 20px; letter-spacing: 2px; margin-bottom: 1.5rem;
  animation: pulse-glow 3s infinite, fadeInUp 0.6s ease both;
  position: relative; overflow: hidden;
}

/* effet de balayage lumineux sur le badge */
.hero-badge::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(0,229,255,0.15) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: badgeSweep 3s ease-in-out infinite 1s;
}

@keyframes badgeSweep {
  0%   { transform: translateX(-100%); }
  50%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

.hero-name {
  font-family: 'Orbitron', monospace;
  font-size: clamp(3rem, 7vw, 5.5rem); font-weight: 900;
  line-height: 1.05; color: var(--text-main); margin-bottom: 1rem;
  animation: fadeInUp 0.8s ease both 0.1s;
}

.hero-name .glow {
  color: var(--accent); display: block;
  animation: nameGlow 4s ease-in-out infinite alternate;
}

@keyframes nameGlow {
  from { text-shadow: 0 0 20px rgba(0,229,255,0.5), 0 0 40px rgba(0,194,255,0.2); }
  to   { text-shadow: 0 0 40px rgba(0,229,255,0.9), 0 0 80px rgba(0,194,255,0.5), 0 0 120px rgba(0,229,255,0.2); }
}

.hero-tagline {
  font-size: 1rem; color: var(--text-dim); margin-bottom: 1.5rem;
  line-height: 1.6; animation: fadeInUp 0.9s ease both 0.2s;
}

.hero-tags { margin-bottom: 2rem; animation: fadeInUp 1s ease both 0.3s; }

.hero-cta {
  display: flex; gap: 1rem; flex-wrap: wrap;
  animation: fadeInUp 1.1s ease both 0.4s;
}

.btn-outline {
  background: transparent; color: var(--text-dim);
  border-color: rgba(148,184,212,0.3);
}
.btn-outline:hover { color: var(--accent); border-color: var(--accent); }

/* ===== HERO VISUAL – orbites ===== */
.hero-visual {
  flex: 0 0 380px; position: relative;
  width: 380px; height: 380px;
  display: flex; align-items: center; justify-content: center;
  animation: fadeInUp 0.8s ease both 0.2s;
}

/* Halo de fond derrière le logo */
.hero-visual::before {
  content: ''; position: absolute;
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,229,255,0.15) 0%, transparent 70%);
  animation: haloPulse 3s ease-in-out infinite;
}

@keyframes haloPulse {
  0%, 100% { transform: scale(1);   opacity: 0.6; }
  50%       { transform: scale(1.3); opacity: 1; }
}

.orbit-ring {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(0,194,255,0.2);
  animation: spin linear infinite;
}

.ring1 { width: 300px; height: 300px; animation-duration: 20s;
  box-shadow: 0 0 15px rgba(0,194,255,0.05) inset; }
.ring2 { width: 240px; height: 240px; animation-duration: 15s; animation-direction: reverse;
  border-color: rgba(124,58,237,0.25);
  box-shadow: 0 0 10px rgba(124,58,237,0.05) inset; }
.ring3 { width: 180px; height: 180px; animation-duration: 10s;
  border-color: rgba(0,229,255,0.2); border-style: dashed; }

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

.orbit-dot {
  position: absolute; width: 10px; height: 10px;
  background: var(--accent); border-radius: 50%;
  box-shadow: 0 0 12px var(--accent), 0 0 25px rgba(0,229,255,0.4);
}

/* Traînes lumineuses sur les points */
.orbit-dot::after {
  content: ''; position: absolute;
  top: 50%; left: 50%; width: 20px; height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  transform: translateY(-50%);
  opacity: 0.6;
}

.d1 { animation: orbitD1 20s linear infinite; }
.d2 { width: 8px; height: 8px; background: #a78bfa;
  box-shadow: 0 0 12px #a78bfa; animation: orbitD2 15s linear infinite; }
.d3 { width: 6px; height: 6px; animation: orbitD3 10s linear infinite; }

@keyframes orbitD1 { from{transform:rotate(0deg) translateX(150px);} to{transform:rotate(360deg) translateX(150px);} }
@keyframes orbitD2 { from{transform:rotate(120deg) translateX(120px);} to{transform:rotate(480deg) translateX(120px);} }
@keyframes orbitD3 { from{transform:rotate(240deg) translateX(90px);} to{transform:rotate(600deg) translateX(90px);} }

.hero-logo-wrap {
  text-align: center; z-index: 2;
  background: var(--card-bg); border: 2px solid var(--glass-border);
  border-radius: 20px; padding: 2rem 2.5rem;
  backdrop-filter: blur(14px);
  animation: pulse-glow 3s infinite, fadeInUp 1s ease both 0.5s;
  transition: transform 0.3s ease;
}

.hero-logo-wrap:hover { transform: scale(1.04); }

.hero-logo {
  font-family: 'Orbitron', monospace; font-size: 2.5rem; font-weight: 900;
  color: var(--accent); text-shadow: 0 0 20px rgba(0,229,255,0.7);
}

.hero-logo-sub {
  font-family: 'Share Tech Mono', monospace; font-size: 0.7rem;
  color: var(--text-dim); letter-spacing: 3px; margin-top: 0.3rem;
}

/* ===== NAV CARDS ===== */
.nav-card {
  display: block; background: var(--card-bg);
  border: 1px solid var(--glass-border); border-radius: 16px;
  padding: 1.8rem; text-decoration: none; color: var(--text-main);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  text-align: center; position: relative; overflow: hidden;
}

/* ligne du haut */
.nav-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0; transition: opacity 0.4s;
}

/* halo de fond coloré qui apparaît au hover */
.nav-card::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0,229,255,0.06) 0%, transparent 70%);
  opacity: 0; transition: opacity 0.4s;
}

.nav-card:hover { border-color: rgba(0,229,255,0.45); transform: translateY(-6px) scale(1.01); box-shadow: 0 20px 50px rgba(0,194,255,0.18); }
.nav-card:hover::before { opacity: 1; }
.nav-card:hover::after  { opacity: 1; }

.nav-card-icon {
  font-size: 2.5rem; margin-bottom: 0.8rem;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: inline-block;
}
.nav-card:hover .nav-card-icon { transform: scale(1.2) rotate(-5deg); }

.nav-card h3 {
  font-family: 'Orbitron', monospace; font-size: 0.95rem;
  color: var(--blue-bright); margin-bottom: 0.5rem;
  transition: color 0.3s;
}
.nav-card:hover h3 { color: var(--accent); }

.nav-card p { font-size: 0.82rem; color: var(--text-dim); line-height: 1.5; }

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .hero { flex-direction: column; text-align: center; padding: 3rem 2rem; }
  .hero-visual { width: 260px; height: 260px; flex: none; }
  .ring1 { width: 220px; height: 220px; }
  .ring2 { width: 170px; height: 170px; }
  .ring3 { width: 120px; height: 120px; }
  @keyframes orbitD1 { from{transform:rotate(0deg) translateX(110px);} to{transform:rotate(360deg) translateX(110px);} }
  @keyframes orbitD2 { from{transform:rotate(120deg) translateX(85px);} to{transform:rotate(480deg) translateX(85px);} }
  @keyframes orbitD3 { from{transform:rotate(240deg) translateX(60px);} to{transform:rotate(600deg) translateX(60px);} }
}