/* All @keyframes used by the other stylesheets (loading, confetti/cracks, hint pulse, coin bump, level pulse, tutorial). */

  @keyframes confettiFall{
    0%{ transform: translateY(-12px) rotate(0deg); opacity:0; }
    8%{ opacity:.85; }
    90%{ opacity:.85; }
    100%{ transform: translateY(150px) rotate(300deg); opacity:0; }
  }

  @keyframes crackFade{
    0%, 100%{ opacity:0; }
    45%, 65%{ opacity:.4; }
  }

  @keyframes jvPulse{
    0%, 100%{ box-shadow:0 0 0 0 rgba(28,51,88,.5); }
    50%{ box-shadow:0 0 0 10px rgba(28,51,88,0); }
  }

  /* a finished location's wooden "Пройдено" plaque (.jl-plaque) dropping in diagonally and settling —
     see buildLocationPages()/journeyPlayLocationCompletionTransition() in travel.js */
  @keyframes jlPlaqueDrop{
    0%{ transform: translate(-50%,-50%) translateY(-160px) rotate(-42deg) scale(1.2); opacity:0; }
    55%{ transform: translate(-50%,-50%) translateY(8px) rotate(-10deg) scale(1.04); opacity:1; }
    78%{ transform: translate(-50%,-50%) translateY(-4px) rotate(-19deg) scale(0.99); }
    100%{ transform: translate(-50%,-50%) rotate(-16deg) scale(1); opacity:1; }
  }

  /* the old progress text / "Начать" button dissolving like ink once the plaque above lands on them */
  @keyframes jlInkDissolve{
    0%{ filter: blur(0px); opacity:1; transform: scale(1); }
    55%{ filter: blur(3px); opacity:.45; transform: scale(1.04); }
    100%{ filter: blur(9px); opacity:0; transform: scale(1.1); }
  }

  @keyframes hintPulse{
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,193,7,0.55); }
    50% { box-shadow: 0 0 0 7px rgba(255,193,7,0); }
  }

  @keyframes coinBump{ 0%{ transform: scale(1);} 40%{ transform: scale(1.18);} 100%{ transform: scale(1);} }

  /* the "Слово дня" badge on the main menu gently breathing — kept to a small scale range (see
     .word-of-day-badge in screens.css) so it never grows past the badge's own comfortable clearance
     around "Играть" and the screen edge */
  @keyframes wordOfDayBadgePulse{
    0%, 100%{ transform: translateY(-50%) scale(1); }
    50%{ transform: translateY(-50%) scale(1.08); }
  }

  @keyframes tutorialFlashKey{
    0%, 100% { box-shadow: none; }
    50% { box-shadow: 0 0 0 4px var(--gold); }
  }