/* رباط بوک  robatbook */

 /*
 با bounce اصلا کاری نداریم
 bounce: پرش جهش the way a character or object moves (jumps) quickly up and down repeatedly until it stops
 */

 /*
 these are the same and are two different syntaxes for defining keyframes in CSS animations.
from {opacity: 0;}
to {opacity: 1;}
or
0% { opacity: 0; }
100% { opacity: 1; }
 */

 /* flash : gradualy is fades out and then fades in */
 /* مهم in front of @keyframes we are declaring the animation name */
 @keyframes flash-animation {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

/* just assign this class to desired items */
.flash-once-animation {
  animation-name: flash-animation;
  animation-duration: 0.3s;
  animation-timing-function: linear;
  animation-delay: 0s;
  /* animation-iteration-count: 1;   by default is 1 */
}

/* ***************************** */

/*
pulse : an element is scaled up and down repeatedly, creating a pulsating effect ضربان
بزرگ و کوچک شدن مداوم مثل قلب
*/
@keyframes pulse-animation {
 0% { transform: scale(1); }
 50% { transform: scale(1.2); /* scale(0.9) or scale(1.5); */ }
 100% { transform: scale(1); }
}

.infinit-pulse-animation {
  /* animation: bounce-animation 1.5s infinite; */
  animation-name: pulse-animation;
  animation-duration: 1s;
  animation-delay: 0s;
  animation-iteration-count: infinite;
 }

 /* ***************************** */
/*
نام های مختلف برای انیمیشن افکت نشعشع اطراف یک دایره
a rounded shadow is expanding outward from a circle and fading out,
 create a wave-like motion or expansion from a central point, similar to ripples in water.
radiate : تشعشع
ripple: موج
glow : درخشیدن
*/

@keyframes red-radiation-animation {
  0% { box-shadow: 0 0 0 0 rgba(255, 20, 147, 1); }
  70% { box-shadow: 0 0 0 10px rgba(255, 20, 147, 0); }
 }
 /* @@@@@@@@ مهم مهم مهم مهم @@@@@@@@@@@@@@
 در خط دوم بالا، به جای %70
 هر چه درصد بالاتری بزاریم مثلا 100درصد باعث میشه سرعت انیمیشن تشعشع دایره ای کمتر بشه و نازیبا
 هر چه درصد کمتری بزاریم مثلا 50 درصد باعث میشه که انیمیشن تشعشع دایره ای خیلی سریعتر انجام بشه
 نکته دوم:
 در همان خط دوم، box-shadow: 0 0 10px
10px عدد
را هر چه بیشتر بزاریم باعث میشه که شعاع دایره در انتهای انیمیشن بزرگتر بشه
 */

/* just assign this class to your circles */
.infinit-red-radiation-animation {
  animation: red-radiation-animation 1.5s ease-out 0s infinite;
  /* decreasing 1.3s increases speed of radiation */
  /* 0s is delay before start animation */
 }

 /* ***************************** */
  @keyframes blue-radiation-animation {
    0% { box-shadow: 0 0 0 0 rgba(30, 136, 229, 0.7); }
    80% { box-shadow: 0 0 0 15px rgba(30, 136, 229, 0); }
 }

 .blue-radiation-animation-infinit {
  animation-name: blue-radiation-animation;
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
  animation-delay: 0s;
  animation-iteration-count: infinite;
    /* خلاصه شده : animation: blue-radiation-animation 1.5s ease-out 0s infinite; */
 }

  /* ***************************** */
  @keyframes white-radiation-animation {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
    80% { box-shadow: 0 0 0 15px rgba(255, 255, 255, 0); }
 }

 .white-radiation-animation-infinit {
  animation-name: white-radiation-animation;
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
  animation-delay: 0s;
  animation-iteration-count: infinite;
    /* خلاصه شده : animation: blue-radiation-animation 1.5s ease-out 0s infinite; */
 }

/* ***************************** */

 /* best names:
gradual-color-fill-animation, toast-color-fill-animation, color-fill-animation
color-fill-animation, toast-bar-color-span-animation,
*/
/* نام صحیحتر این ست
gradual-expand-animation
زیرا اصلا اینجا رنگ المان را تعین نمی کنیم
toast bar بلکه یک مستطیل رنگی داریم به عنوان یک
 عرضش در ابتدا صفر است
و سپس در طی 7 ثانیه عرضش 100% خواهد شد
و به این شکل به نظر میرسه که رنگ داره پر میشه درون یک مستطیل
در صورتی که اینطور نیست و از ابتدا یک مستطیل رنگی داریم
که داره عرضش به تدریج زیاد میشه

*/
@keyframes gradual-color-fill-animation {
  from { width: 0; }
  to { width: 100%; }
 }

 .gradual-color-fill-animation {
    animation-name: gradual-color-fill-animation;
    animation-duration: 7s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    /* forwars is for: when rectangle becomes 99% width, it doesnt revert back to 0 % wdith */
 }

 /* ***************************** */

  /* ***************************** */

@keyframes search-start-page-boxes-animation {
  from {opacity: 0;}
  to {opacity: 1; background-color: #f9eace;}
 }

@-webkit-keyframes search-start-page-boxes-animation {
  from {opacity: 0;}
  to {opacity: 1; background-color: #f9eace;}
}

@-moz-keyframes search-start-page-boxes-animation {
  from {opacity: 0;}
  to {opacity: 1; background-color: #f9eace;}
}

@-ms-keyframes search-start-page-boxes-animation {
  from {opacity: 0;}
  to {opacity: 1; background-color: #f9eace;}
}

@-o-keyframes search-start-page-boxes-animation {
  from {opacity: 0;}
  to {opacity: 1; background-color: #f9eace;}
}