/*************************************************************************************/
/* Text sa zlava nasunie a zastavi sa akoby narazom */
    @keyframes slide-in-bounce {
      0% {
        opacity: 0;
        transform: translateX(-80px);
      }
      60% {
        opacity: 1;
        transform: translateX(20px);
      }
      80% {
        transform: translateX(-10px);
      }
      100% {
        transform: translateX(0);
      }
    }

    .animate-slide-in-bounce {
      animation: slide-in-bounce 0.6s ease-out;
    }
/* Text sa pred zobrazenim pretaca *******************************************************/
/* Toto treba dat prvku, aby sa maz z coho pretacat: style="transform-style: preserve-3d; transform: rotateX(-90deg) rotateY(10deg);" */
    @keyframes rotateFlipIn {
      to {
        transform: rotateX(0deg) rotateY(0deg);
        opacity: 1;
      }
    }

    .animate-rotateFlipIn {
      animation: rotateFlipIn 1.2s ease forwards;
    }
	/*************************************************************************************/
	/* Element pomaly rastie (od 0 do 100% (obycajne ciara) */
    @keyframes width-grow {
      from {
        width: 0;
      }
      to {
        width: 100%;
      }
    }

    .animate-width-grow {
      animation: width-grow 2s ease-out forwards;
    }

    /*** Text sa pri hover plynulo podciarkne, typicky text v <a> *********************/
    .animate-text-underline {
      --text-color: #0056b3;
      --hover-color: #003974;
      --underline-color: #0056b3;

      color: var(--text-color);
      text-decoration: none;
      font-weight: 500;
      position: relative;
      display: inline-block; /* dôležité: aby dekorácia šla len pod text */
      transition: color 0.2s ease;
    }

    .animate-text-underline::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -2px; /* vzdialenosť linky od textu */
      width: 100%;  /* dĺžka len podľa textu */
      height: 2px;
      background: var(--underline-color);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.25s ease;
    }

    .animate-text-underline:hover {
      color: var(--hover-color);
    }

    .animate-text-underline:hover::after {
      transform: scaleX(1);
    }

    /*** Odkaz v url, na ktory sa skocilo, 3x zablika ************************************/
    /*** napr. indexKontakt.html#id-kontakt3-Deak, tak zablika element <div id="id-kontakt3-Deak"> */
    @keyframes contact-highlight {
      0%   { background-color: #8cc6fd; } /* #fde663; } */
      50%  { background-color: #fff; }
      100% { background-color: #8cc6fd; } /* #fde663; } */
    }
    .highlight-once {
      animation: contact-highlight 1s ease-in-out 0s 3;
    }

	/*** animácia zatrasenia ****************************************************************/
    @keyframes animate-shake {
      0% { transform: rotate(0deg); }
      20% { transform: rotate(15deg); }
      40% { transform: rotate(-15deg); }
      60% { transform: rotate(10deg); }
      80% { transform: rotate(-10deg); }
      100% { transform: rotate(0deg); }
    }
    .animate-shake {
      animation: animate-shake 0.6s ease;
    }

    @keyframes animate-double-shake {
      0% { transform: rotate(0deg); }
      10% { transform: rotate(18deg); }
      20% { transform: rotate(-16deg); }
      30% { transform: rotate(14deg); }
      40% { transform: rotate(-12deg); }
      50% { transform: rotate(10deg); }
      60% { transform: rotate(-8deg); }
      70% { transform: rotate(6deg); }
      80% { transform: rotate(-4deg); }
      90% { transform: rotate(2deg); }
      100% { transform: rotate(0deg); }
    }
    .animate-double-shake {
      animation: animate-double-shake 0.8s ease;
    }