/* ============================================
   EFFETS VISUELS HERO — EDD Portfolio
   À importer dans ton style.css principal
   ============================================ */

/* ── RESPECT REDUCED MOTION ──
   Tous les effets sont désactivés proprement
   pour les utilisateurs qui le demandent      */
@media (prefers-reduced-motion: reduce) {
  .hero-fadein,
  .scan-grid,
  .hex-particle { animation: none !important; opacity: 1 !important; }
  #custom-cursor { display: none !important; }
}


/* ════════════════════════════════════════════
   1. FADE-IN SÉQUENTIEL
   Applique .hero-fadein sur chaque élément
   du hero, puis .delay-1 .delay-2 etc.
   pour décaler leur apparition.
   ════════════════════════════════════════════ */

.hero-fadein {
  opacity: 0;
  transform: translateY(12px);
  animation: fadein-up 0.6s ease forwards;
}

/* Délais — ajoute autant que nécessaire */
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.25s; }
.delay-3 { animation-delay: 0.4s; }
.delay-4 { animation-delay: 0.55s; }
.delay-5 { animation-delay: 0.7s; }
.delay-6 { animation-delay: 0.85s; }
.delay-7 { animation-delay: 1.0s; }

@keyframes fadein-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Utilisation dans ton HTML :
   <div class="hero-badge hero-fadein delay-1">...</div>
   <h1 class="hero-title hero-fadein delay-2">...</h1>
   <p class="hero-subtitle hero-fadein delay-3">...</p>
   <div class="hero-ctas hero-fadein delay-4">...</div>
   <div class="hero-stats hero-fadein delay-5">...</div>
*/


/* ════════════════════════════════════════════
   2. GRILLE DE SCAN EN FOND
   Place un <div class="scan-grid"> comme
   premier enfant de ton .hero
   ════════════════════════════════════════════ */

.scan-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;

  /* Lignes horizontales très fines */
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(201, 168, 76, 0.03) 3px,
    rgba(201, 168, 76, 0.03) 4px
  );

  /* Ligne de scan qui descend en boucle */
  animation: scan 8s linear infinite;
}

/* Ligne brillante qui défile */
.scan-grid::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(201, 168, 76, 0.12) 20%,
    rgba(201, 168, 76, 0.25) 50%,
    rgba(201, 168, 76, 0.12) 80%,
    transparent
  );
  animation: scanline 8s linear infinite;
  top: -2px;
}

@keyframes scan {
  0%   { background-position: 0 0; }
  100% { background-position: 0 80px; }
}

@keyframes scanline {
  0%   { top: -2px; opacity: 0; }
  5%   { opacity: 1; }
  95%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* Assure-toi que le contenu du hero
   passe par-dessus la grille :
   .hero { position: relative; }
   et tous les enfants directs du hero
   ont position: relative; z-index: 1;  */


/* ════════════════════════════════════════════
   3. CURSEUR PERSONNALISÉ
   Le JS ci-dessous crée l'élément #custom-cursor
   automatiquement. Rien à ajouter dans le HTML.
   ════════════════════════════════════════════ */

#custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: transform 0.08s ease, opacity 0.3s ease;
}

/* Masque le curseur natif sur tout le site */
* { cursor: none !important; }

/* Sauf sur les éléments interactifs
   où on veut un retour visuel différent  */
a, button, input, textarea, select, [role="button"] {
  cursor: none !important;
}

/* État hover — le curseur grossit */
#custom-cursor.hovered svg {
  transform: scale(1.5);
  transition: transform 0.15s ease;
}
#custom-cursor svg {
  transition: transform 0.15s ease;
}


/* ════════════════════════════════════════════
   4. PARTICULES HEXAGONALES
   Le JS injecte un <canvas id="hex-canvas">
   automatiquement dans le hero.
   Rien à ajouter dans le HTML.
   ════════════════════════════════════════════ */

#hex-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  animation: hex-appear 1.5s ease 0.3s forwards;
}

@keyframes hex-appear {
  to { opacity: 1; }
}


/* ════════════════════════════════════════════
   5. REVEAL AU SCROLL — SECTION À PROPOS
   Le JS bascule .in-view quand la section
   entre dans le viewport au scroll.
   ════════════════════════════════════════════ */

.about-letter {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.about-letter.in-view {
  opacity: 1;
  transform: translateX(0);
}