@font-face {
  font-family: "Poetsen One";
  src: url('assets/PoetsenOne-Regular.ttf') format('truetype');
}
:root{
  --czerwony: #FF586A;
}
/* Styl podstawowy interstitiala */
html, body {
    margin: 0;
    padding: 0;
    width: 320px;
    height: 480px;
    overflow: hidden;
     background: white;
    position: relative;
    font-family: "Poetsen One", sans-serif;

  }

  .tlo{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('assets/tlo.png') no-repeat center center;
    background-size: cover;
   }


   .content{
    position: absolute;
    width: 100%;
    text-align: center;
    padding-top: 10px;
   
   }

   .logo{
    width: 264px !important;
    height: 80px !important;
    object-fit: contain;
   }

   .ops {
    font-size: 15px;
    color: black;
    padding: 0 10px;
    margin-top: 1px;
    padding-top: 0px;
    padding-bottom: 20px;
    margin-bottom: 0px;
}

.kontener{
  height: 300px;
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.kolko1{
  position: absolute;
  z-index: 3;
  top: 0px;
  width: 241px;
  height: 260px;
  animation: floatUpDown 5s ease-in-out infinite alternate;

}

.kolko2{
  position: absolute;
  z-index: 2;
  bottom: 10px;
  animation: floatUpDown 15s ease-in-out infinite alternate backwards;

  right: 5px
}

.kolko3{
  position: absolute;
  z-index: 1;
  bottom: 10px;
  animation: floatUpDown 10s ease-in-out infinite alternate;
  left: 10px
}

.kolko4{
  position: absolute;
  z-index: 2;
  bottom: 20px;
  animation: floatUpDown 8s ease-in-out infinite alternate;

  left: 5px
}

.kolko5{
  position: absolute;
  z-index: 3;
  bottom: 0px;
  width: 95px;
  height: 95px;
  animation: kolko5 8s ease-in-out infinite backwards;

 }

 .linia{
  position: absolute;
  z-index: 3;
 }

 .zdjecielewa{
  position: absolute;
  z-index: 3;
  left: -10px;
  top: 0px;
  animation: zdjecia 8s ease-in-out infinite backwards;

 }


 .zdjecieprawa{
  position: absolute;
  z-index: 3;
  right: 5px;
  top: 10px;
  animation: zdjecia 8s ease-in-out infinite forwards alternate;

 }

 .przyciski {
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 15px;
  z-index: 9;
  transform: rotate(3deg);
}


button{
  border: none;
  cursor: pointer;
  font-family: "Poetsen One", sans-serif;

}
 .przycisk1{
  padding: 10px 25px;
  background: var(--czerwony);
  color: white;
  border: none;
  font-size: 16px;
  border-radius: 30px;
  margin-bottom: 5px;
  animation: pulseShadow 3s infinite ease-in-out , growShrink 1s infinite ease-in-out;

 }
 .przycisk2{
  padding:5px 10px;
  background: var(--czerwony);
  color: white ;
   font-size: 15px;
  border-radius: 30px;
 }

.prawyopis{
  text-align: right;
  position: absolute;
 bottom:-5px;
 right: 15px;
font-size: 12px;
z-index: 10;
}

.lewelogo{
  position: absolute;
  left: 2px;
  bottom: 2px;
}

@keyframes fadeInMoveUp {
  from {
    opacity: 0;
    transform: translateY(20px); /* starts slightly lower */
  }
  to {
    opacity: 1;
    transform: translateY(0); /* moves into place */
  }
}

.fade-in-logotyp {
  animation: zoomInMoveDown 2s forwards;
}

.fade-in-opis {
  animation: fadeInMoveUp 1s 0.5s backwards;
}

.fade-in-box {
  animation: fadeInMoveUp 1s 1s backwards;   /* 1s opóźnienia */
}

.fade-in-footer {
  animation: fadeInMoveUp 1s 1.5s backwards; /* 1.5s opóźnienia */
}


@keyframes floatUpDown {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-25px); /* move up */
  }
  100% {
    transform: translateY(5px);  /* move down */
  }
}

@keyframes zdjecia {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px); /* move up */
  }
  100% {
    transform: translateY(0px);  /* move down */
  }
}

@keyframes kolko5 {
  0% {
    transform: translateY(-45px);
  }
  50% {
    transform: translateY(-0px); /* move up */
  }
  100% {
    transform: translateY(-40px);  /* move down */
  }
}


@keyframes fadeRight {
  from {
    transform: translateX(40px);
    transform: translateY(40px); /* start shifted right */
  }
  to {
     transform: translateX(0);
    transform: translateY(0); /* start shifted right */
    /* end in place */
  }
}

@keyframes fadeLeft {
  from {
    opacity: 0;
    transform: translateX(-30px); /* start shifted right */
  }
  to {
    opacity: 1;
    transform: translateX(0);    /* end in place */
  }
}

@keyframes pulseShadow {
  0% {
    box-shadow: 0 0 0 0 #ff586960; /* start glow */
  }
  70% {
    box-shadow: 0 0 0 15px rgba(76, 175, 80, 0); /* expand & fade */
  }
  100% {
    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); /* reset */
  }
}



@keyframes growShrink {
  0% {
    transform: scale(1);   /* normal size */
  }
  50% {
    transform: scale(1.1); /* increase size */
  }
  100% {
    transform: scale(1);   /* back to normal */
  }
}


@keyframes shrinkOnce {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.8); /* shrink */
  }
  100% {
    transform: scale(1);
  }
}

.strzlkaprawo{
  position: absolute;
  right: 10px;
  z-index: 1000;
  animation: zdjecia 20s ease-in-out infinite forwards alternate,
  fadeRight 5s ease-out forwards,
  shakeLoop 4s ease-in-out infinite;
  bottom: 110px;
}



.strzalkalewo{
  position: absolute;
  left: 5px;
  z-index: 1000;
  animation: zdjecia 15s ease-in-out infinite backwards,
  fadeLeft 3s ease-out forwards,
  shakeLoop 6s ease-in-out infinite;
  ;

  bottom: 80px;
}



@keyframes zoomInMoveDown {
  from {
    transform: scale(0) translateY(-30px); /* small + from top */
   }
  to {
    transform: scale(1) translateY(0);     /* full size + in place */
   }
}


  


@keyframes shakeLoop {
  0%   { transform: translateX(0); }
  2%   { transform: translateX(-5px); }
  4%   { transform: translateX(5px); }
  6%   { transform: translateX(-5px); }
  8%   { transform: translateX(5px); }
  10%  { transform: translateX(0); }
  100% { transform: translateX(0); } /* rest of time = waiting */
}