/* ══════════════════════════════════════════════
   ANIMACIONE — të gjitha @keyframes
══════════════════════════════════════════════ */

/* ── SHIGJETAT E CEPAVE ── */
@keyframes cep-tl-anim {
    0%   { opacity:0; transform: rotate(225deg) translateX(0); }
    8%   { opacity:1; transform: rotate(225deg) translateX(0); }
    28%  { opacity:1; transform: rotate(225deg) translateX(-7px); }
    45%  { opacity:1; transform: rotate(225deg) translateX(0); }
    65%  { opacity:1; transform: rotate(225deg) translateX(-7px); }
    80%  { opacity:1; transform: rotate(225deg) translateX(0); }
    100% { opacity:0; transform: rotate(225deg) translateX(0); }
}
@keyframes cep-tr-anim {
    0%   { opacity:0; transform: rotate(315deg) translateX(0); }
    8%   { opacity:1; transform: rotate(315deg) translateX(0); }
    28%  { opacity:1; transform: rotate(315deg) translateX(-7px); }
    45%  { opacity:1; transform: rotate(315deg) translateX(0); }
    65%  { opacity:1; transform: rotate(315deg) translateX(-7px); }
    80%  { opacity:1; transform: rotate(315deg) translateX(0); }
    100% { opacity:0; transform: rotate(315deg) translateX(0); }
}
@keyframes cep-bl-anim {
    0%   { opacity:0; transform: rotate(135deg) translateX(0); }
    8%   { opacity:1; transform: rotate(135deg) translateX(0); }
    28%  { opacity:1; transform: rotate(135deg) translateX(-7px); }
    45%  { opacity:1; transform: rotate(135deg) translateX(0); }
    65%  { opacity:1; transform: rotate(135deg) translateX(-7px); }
    80%  { opacity:1; transform: rotate(135deg) translateX(0); }
    100% { opacity:0; transform: rotate(135deg) translateX(0); }
}
@keyframes cep-br-anim {
    0%   { opacity:0; transform: rotate(45deg) translateX(0); }
    8%   { opacity:1; transform: rotate(45deg) translateX(0); }
    28%  { opacity:1; transform: rotate(45deg) translateX(-7px); }
    45%  { opacity:1; transform: rotate(45deg) translateX(0); }
    65%  { opacity:1; transform: rotate(45deg) translateX(-7px); }
    80%  { opacity:1; transform: rotate(45deg) translateX(0); }
    100% { opacity:0; transform: rotate(45deg) translateX(0); }
}

/* ── OVERLAY COUNTDOWN ── */
@keyframes shfaq-controls {
    0%   { opacity: 0; transform: translateY(-50%) scale(0.85); }
    60%  { opacity: 1; transform: translateY(-50%) scale(1.05); }
    100% { opacity: 1; transform: translateY(-50%) scale(1); }
}
@keyframes shfaq-controls-ls {
    0%   { opacity: 0; transform: scale(0.85); }
    60%  { opacity: 1; transform: scale(1.05); }
    100% { opacity: 1; transform: scale(1); }
}

/* ── LOADING ── */
@keyframes kuti-bounce {
    0%,80%,100% { transform:scale(.6); opacity:.4; }
    40% { transform:scale(1.2); opacity:1; }
}