/* ---------- Hero: caixas se organizando nas prateleiras ---------- */
  @keyframes shelf-box-left{
    0%{ transform: translateX(-140px); opacity:0; }
    55%{ transform: translateX(10px); opacity:1; }
    70%{ transform: translateX(-5px); }
    85%{ transform: translateX(2px); }
    100%{ transform: translateX(0); opacity:1; }
  }
  @keyframes shelf-box-right{
    0%{ transform: translateX(140px); opacity:0; }
    55%{ transform: translateX(-10px); opacity:1; }
    70%{ transform: translateX(5px); }
    85%{ transform: translateX(-2px); }
    100%{ transform: translateX(0); opacity:1; }
  }
  .shelf-box-left{ animation: shelf-box-left 3.6s ease-out infinite; }
  .shelf-box-right{ animation: shelf-box-right 3.6s ease-out infinite; }

  /* ---------- Mockup: status piscando ---------- */
  @keyframes blink-yellow{
    0%, 100%{ opacity:1; box-shadow:0 0 0 0 rgba(242,153,74,.55); }
    50%{ opacity:.5; box-shadow:0 0 0 6px rgba(242,153,74,0); }
  }
  .blink-yellow{ animation: blink-yellow 1.4s ease-in-out infinite; }

  @keyframes blink-green{
    0%, 100%{ opacity:1; box-shadow:0 0 0 0 rgba(14,107,88,.55); }
    50%{ opacity:.6; box-shadow:0 0 0 6px rgba(14,107,88,0); }
  }
  .blink-green{ animation: blink-green 1.8s ease-in-out infinite; }

  @keyframes cam-blink{
    0%, 100%{ opacity:1; }
    50%{ opacity:.3; }
  }
  .cam-blink{ animation: cam-blink 1.2s ease-in-out infinite; }

  /* ---------- Timeline ---------- */
  .timeline-track{ position:relative; }
  .timeline-track::before{
    content:"";
    position:absolute;
    top:0; bottom:0; left:23px;
    width:2px;
    background:linear-gradient(180deg, #F2994A 0%, #0E6B58 100%);
  }
  @keyframes step-pulse{
    0%, 100%{ box-shadow:0 0 0 0 rgba(14,107,88,.5); }
    50%{ box-shadow:0 0 0 8px rgba(14,107,88,0); }
  }
  .step-pulse{ animation: step-pulse 2.4s ease-in-out infinite; }