/* Loader style   */
.site-intro {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(10, 15, 30, 0.9);
      backdrop-filter: blur(10px);
      color: var(--accent-color);
      z-index: 9999;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      transition: opacity 1.2s ease, visibility 1.2s ease;
      font-family: 'Poppins', sans-serif;
      pointer-events: none;
    }

    .site-intro.fade-out {
      opacity: 0;
      visibility: hidden;
    }

    .intro-content {
      text-align: center;
      animation: introFadeIn 1.5s ease-out;
    }

    .intro-heading {
      font-size: clamp(2rem, 5vw, 3.2rem);
      font-weight: 600;
      margin-bottom: 20px;
      animation: slideUp 1.2s ease forwards;
      animation-delay: 0.0s;
    }

    .intro-subtext {
      font-size: clamp(1rem, 2vw, 1.4rem);
      color: rgba(255, 255, 255, 0.7);
      animation: slideUp 1.9s ease forwards;
      animation-delay: 0.2s;
    }
 @keyframes introFadeIn {
      from {
        opacity: 0;
        transform: scale(0.95);
      }

      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    @keyframes slideUp {
      from {
        opacity: 0;
        transform: translateY(40px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

/* STYLE DO ANIMACJI WEJŚCIA */
    /* Ogólna klasa do ukrycia elementu zanim zostanie pokazany */
    .hidden {
      opacity: 0;
      transform: translateY(20px);
      transition: all 0.8s ease-out;
    }

    /* Kiedy element staje się widoczny */
    .visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* Slide in from left */

    .slide-in-left {
      opacity: 1;
      transform: translateX(0);
    }

    /* Slide in from right */
    .slide-in-rights {
      animation: slideinrights 1.5s ease-in-out;
    }

    @keyframes slideinrights {
      from {
        transform: translateX(80px);
      }

      to {
        transform: translateX(0);
      }
    }

    /* Fade-in only (no movement) */
    .fadeInUp {
      animation: fadeInUp 2s ease;
    }

    .zoom-in {
      animation: zoomIn 1.9s ease-in-out forwards;
    }

    /* Fade In Up */
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateX(-40px);
      }

      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    /* Zoom In */
    @keyframes zoomIn {
      from {
        opacity: 0;
        transform: scale(0.2);
      }

      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    /* right */
    .backOutRight {
      -webkit-animation: backOutRight 1.9s ease-in-out forwards;
      animation: backOutRight 1.9s ease-in-out forwards;
    }

    @-webkit-keyframes backOutRight {
      0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0;
      }

      20% {
        -webkit-transform: translateX(0px) scale(0.7);
        transform: translateX(0px) scale(0.7);
        opacity: 0.7;
      }

      100% {
        -webkit-transform: translateX(2000px) scale(0.7);
        transform: translateX(2000px) scale(0.7);
        opacity: 1;
      }
    }

    @keyframes backOutRight {
      0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0;
      }

      20% {
        -webkit-transform: translateX(0px) scale(0.7);
        transform: translateX(0px) scale(0.7);
        opacity: 0.7;
      }

      100% {
        -webkit-transform: translateX(2000px) scale(1);
        transform: translateX(2000px) scale(1);
        opacity: 1;
      }
    }


    /* Back entrances */
    .backInDown {
      -webkit-animation: backInDown 1.2s both;
      animation: backInDown 1.2s both;
    }

    @-webkit-keyframes backInDown {
      0% {
        -webkit-transform: translateY(-200px) scale(0.7);
        transform: translateY(-200px) scale(0.7);
        opacity: 0.7;
      }

      80% {
        -webkit-transform: translateY(0px) scale(0.7);
        transform: translateY(0px) scale(0.7);
        opacity: 0.7;
      }

      100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
      }
    }

    @keyframes backInDown {
      0% {
        -webkit-transform: translateY(-200px) scale(0.7);
        transform: translateY(-200px) scale(0.7);
        opacity: 0.7;
      }

      80% {
        -webkit-transform: translateY(0px) scale(0.7);
        transform: translateY(0px) scale(0.7);
        opacity: 0.7;
      }

      100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
      }
    }

    /* bounce */

    .bounce {
      animation: bounce 1.2s both;
    }

    @keyframes bounce {

      from,
      20%,
      53%,
      to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }

      40%,
      43% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
        transform: translate3d(0, -30px, 0) scaleY(1.1);
      }

      70% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
        transform: translate3d(0, -15px, 0) scaleY(1.05);
      }

      80% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: translate3d(0, 0, 0) scaleY(0.95);
        transform: translate3d(0, 0, 0) scaleY(0.95);
      }

      90% {
        -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
        transform: translate3d(0, -4px, 0) scaleY(1.02);
      }

    }

    /* backInRight */
    @-webkit-keyframes backInRight {
      0% {
        -webkit-transform: translateX(2000px);
        transform: translateX(2000px);
        opacity: 0.02;
      }

      40% {
        opacity: 0.5;
      }

      80% {
        opacity: 0.7;
      }

      100% {
        opacity: 1;
      }
    }

    @keyframes backInRight {
      0% {
        -webkit-transform: translateX(2000px);
        transform: translateX(2000px);
        opacity: 0.00;
      }

      40% {
        opacity: 0.4;
      }

      80% {
        opacity: 0.7;
      }

      100% {
        opacity: 1;
      }
    }

    .backInRight {
      -webkit-animation: backInRight 1.2s both;
      animation: backInRight 1.2s both;
    }

    /* shake */
    @-webkit-keyframes shakeX {

      from,
      to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }

      10%,
      30%,
      50%,
      70%,
      90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
      }

      20%,
      40%,
      60%,
      80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
      }
    }

    @keyframes shakeX {

      from,
      to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }

      10%,
      30%,
      50%,
      70%,
      90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
      }

      20%,
      40%,
      60%,
      80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
      }
    }

    .shakeX {
      -webkit-animation: shakeX 1.9s both;
      animation: shakeX 1.9s both;
    }

    @-webkit-keyframes flipInX {
      from {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
      }

      40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
      }

      60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
      }

      80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
      }

      to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
      }
    }

    @keyframes flipInX {
      from {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
      }

      40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
      }

      60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
      }

      80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
      }

      to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
      }
    }

    .flipInX {

      -webkit-animation: flipInX 1.1s both;
      animation: flipInX 1.1s both;
    }