/* ============================================================
   ANIMATIONS.CSS — Keyframes, effets grain, transitions
   ============================================================ */

@layer animations {

  /* === GRAIN SHIFT === */
  @keyframes grainShift {
    0%  { transform: translate(0,0); }
    10% { transform: translate(-2%,-3%); }
    20% { transform: translate(3%,1%); }
    30% { transform: translate(-1%,4%); }
    40% { transform: translate(2%,-2%); }
    50% { transform: translate(-3%,2%); }
    60% { transform: translate(1%,-4%); }
    70% { transform: translate(-2%,3%); }
    80% { transform: translate(3%,-1%); }
    90% { transform: translate(-1%,2%); }
    100%{ transform: translate(2%,-3%); }
  }

  /* === PULSE DOT (badge "disponible") === */
  @keyframes pulseDot {
    0%,100% { box-shadow: 0 0 0 0 rgba(0,245,195,0.5); }
    50%      { box-shadow: 0 0 0 5px rgba(0,245,195,0); }
  }

  /* === SCROLL HINT === */
  @keyframes scrollPulse {
    0%,100% { opacity: .3; transform: scaleY(1); }
    50%      { opacity: 1; transform: scaleY(0.6) translateY(15px); }
  }

  /* === HERO NAME LINES (JS-driven, déclaré ici pour référence) === */
  /* Les spans dans .hero-name .line commencent à translateY(110%)
     et sont animés via JS (voir animations.js) */

  /* === CANVAS FADE-IN === */
  @keyframes canvasFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  #hero-canvas { animation: canvasFadeIn 1.2s ease forwards; }

  /* === NAVBAR ENTRANCE === */
  @keyframes navSlideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
  }
  #navbar { animation: navSlideDown .8s var(--ease-expo) both; }

  /* === MODAL OPEN (classe .open gérée par JS) === */
  /* Les transitions sont définies inline dans components.css */

  /* === GRADIENT BORDER ANIMATION (futur usage) === */
  @keyframes borderGlow {
    0%,100% { --grad-angle: 135deg; }
    50%      { --grad-angle: 315deg; }
  }

  /* === FLOAT (éléments décoratifs) === */
  @keyframes floatY {
    0%,100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
  }

  /* === SHIMMER (loading states) === */
  @keyframes shimmer {
    from { background-position: -200% 0; }
    to   { background-position:  200% 0; }
  }
  .shimmer {
    background: linear-gradient(90deg, var(--surface) 25%, rgba(240,240,250,0.05) 50%, var(--surface) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
  }
}