@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: poppins;
  user-select: none;
  -webkit-user-drag: none;
}
body {
  background-color: #000;
  color: white;
  font-size: 12px;
}
a {
  text-decoration: none;
  color: white;
}
header {
  width: 1140px;
  height: 50px;
  max-width: 80%;
  display: flex;
  align-items: center;
  margin: auto;
  position: relative;
  z-index: 100;
  background-color: rgba(255, 255, 255, 0.034);
  backdrop-filter: blur(5px);
}
header a {
  margin-left: 40px;
  font-size: 1.1em;
}
.carousel {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  margin-top: -50px;
}
.carousel .list .item {
  position: absolute;
  inset: 0 0 0 0;
  /* inset used insted of top right bottom left */
}
.carousel .list .item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.carousel .list .item .content {
  position: absolute;
  top: 20%;
  width: 1140px;
  max-width: 80%;
  padding-right: 30%;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  text-shadow: 0 5px 10px #000;
}
.carousel .list .item .content .author {
  font-weight: bold;
  letter-spacing: 10px;
  text-transform: uppercase;
}
.carousel .list .item .content .title,
.carousel .list .item .content .topic {
  font-size: 5em;
  font-weight: bold;
  line-height: 1.3em;
}
.carousel .list .item .content .topic {
  color: rgb(219, 109, 30);
}
.carousel .list .item .content .buttons {
  display: grid;
  grid-template-columns: repeat(2, 130px);
  grid-template-rows: 40px;
  margin-top: 20px;
  grid-gap: 5px;
}
.carousel .list .item .content .buttons button {
  border: none;
  border-radius: 5px;
  background: #eee;
  letter-spacing: 3px;
  font-weight: 500;
  cursor: pointer;
}
.carousel .list .item .content .buttons button:nth-child(2) {
  background: transparent;
  border: solid 2px #eee;
  color: #eee;
}
.pagination {
  position: absolute;
  bottom: 50px;
  left: 50%;
  z-index: 100;
  width: max-content;
  /* max content : عشان العرض تاعها يكون مجموع عرض العناصر الي داخلها وتتوسع لحد ما تسعهن كلهن */
  display: flex;
  gap: 20px;
}
.pagination .item {
  width: 150px;
  height: 220px;
  flex-shrink: 0;
  /* عشان ما يتقلص بالشاشات الصغيرة  */
  position: relative;
}
.pagination .item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}
.pagination .item .content {
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  font-weight: bold;
  background-color: #ffffff14;
  backdrop-filter: blur(5px);
  padding: 5px;
  border-radius: 5px;
}
.arrows {
  position: absolute;
  top: 80%;
  right: 52%;
  width: 300px;
  max-width: 30%;
  display: flex;
  align-items: center;
  gap: 15px;
  z-index: 100;
}
.arrows button {
  width: 45px;
  height: 45px;
  padding: 5px;
  border-radius: 50%;
  border: none;
  outline: none;
  font-size: larger;
  font-weight: bold;
  background-color: #eee2;
  color: white;
  backdrop-filter: blur(5px);
  transition: 400ms;
  cursor: pointer;
}
.arrows button:hover {
  background-color: #eee9;
}

/* انا هون بشتغل على العنصر الاول بالليست لانو هو الي رح يكون اكتف دائما 
بمعنى انها مثلا لما اكبس على نكست فالعنصر الاول رح يتم نقله للاخير والعنصر الثاني رح ييجي مكان الاول
وهيك رح ياخذ كل الانيميشن الي انا مطبقها للاول 
يعني العنصر الاول بالليست هو الي دائما اكتف بينما لما اضغط نكست او بريف فالي بتغير هو ترتيب السلايدس */
.carousel .list .item:nth-child(1) {
  z-index: 1;
}
.carousel .list .item:nth-child(1) .author,
.carousel .list .item:nth-child(1) .title,
.carousel .list .item:nth-child(1) .topic,
.carousel .list .item:nth-child(1) .description,
.carousel .list .item:nth-child(1) .buttons {
  transform: translateY(50px);
  filter: blur(10px);
  opacity: 0;
  animation: showContent 500ms 1s linear 1 forwards;
}
@keyframes showContent {
  to {
    filter: blur(0);
    opacity: 1;
    transform: translateY(0);
  }
}
.carousel .list .item:nth-child(1) .author {
  animation-delay: 0.7s;
}
.carousel .list .item:nth-child(1) .title {
  animation-delay: 0.9s;
}
.carousel .list .item:nth-child(1) .topic {
  animation-delay: 1s;
}
.carousel .list .item:nth-child(1) .description {
  animation-delay: 1.3s;
}
.carousel .list .item:nth-child(1) .buttons {
  animation-delay: 1.6s;
}

/* فائدة النكست هون اني قلتله لما الكاروسيل الها كلاس نكست بتشتغل هاي الانيميشن الي عملتها للصورة وللباجينيشن بينما النصوص فوق فهي بكل الحالات بدها
تشتغل بنفس الطريقة ونفس الاسلوب بينما لما اكبس بريفيوس او نكست فالانيميشن والسلوك كلو بختلف بين الثنتين لهيك حسب شو بضغط بحط كلاس فلو ضغطت نكست بحطلها كلاس نكست ولو ضغطت برريف بحطلها كلاس بريف وبتشتغل 
الانيميشن الخاصة بكل كلاس وقتها
يعني لمل اضغط نكست بجيب العنصر الاول وبحطو بالاخير وبشغل الانيميشن هاي تاعت النكست ولما تكون بريف الها سلوك ثاني5
*/
.carousel.next .list .item:nth-child(1) img {
  position: absolute;
  width: 150px;
  height: 220px;
  left: 50%;
  bottom: 50px;
  border-radius: 20px;
  animation: showImage 500ms linear 1 forwards;
}
@keyframes showImage {
  to {
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    border-radius: 0;
  }
}
.carousel.next .pagination .item:nth-last-child(1) {
  width: 0;
  overflow: hidden;
  /* اوفر فلو عشان النص ميطلعش برا لما اصغر الايتم الاخير
  */
  animation: showLastItem 700ms forwards 1;
}
@keyframes showLastItem {
  to {
    width: 150px;
  }
}
.carousel.next .pagination {
  transform: translateX(150px);
  animation: paginationTransform 700ms forwards 1;
  /* عملت انيميشن للباجينيشن بحيث انها زحتها عمحور اكس بمقدار 150 بكسل وهو عرض الايتم وتزامنا مع اظهار الايتم بالنهاية ترجع الباجينيشن لمكانها الاصلي */
}
@keyframes paginationTransform {
  to {
    transform: translateX(0);
  }
}
.carousel.prev .list .item:nth-child(2) {
  z-index: 2;
}
.carousel.prev .list .item:nth-child(2) img {
  position: absolute;
  bottom: 0;
  left: 0;
  animation: outimage 500ms linear 1 forwards;
}
@keyframes outimage {
  to {
    width: 150px;
    height: 220px;
    border-radius: 20px;
    left: 50%;
    bottom: 50px;
  }
}
.carousel.prev .pagination .item:nth-child(1) {
  width: 0;
  overflow: hidden;
  animation: showLastItem 500ms linear forwards 1;
}
.carousel.prev .list .item:nth-child(2) .author,
.carousel.prev .list .item:nth-child(2) .title,
.carousel.prev .list .item:nth-child(2) .topic,
.carousel.prev .list .item:nth-child(2) .des,
.carousel.prev .list .item:nth-child(2) .buttons {
  animation: contetnOut 0.7s linear 1 forwards;
}
@keyframes contetnOut {
  to {
    transform: translateY(150px);
    filter: blur(20px);
    opacity: 0;
  }
}
.carousel.next .arrows button,
.carousel.prev .arrows button {
  pointer-events: none;
  /*  عشان اثناء الانيميشن مقدرش اكبس نكست او باك*/
}

.time{
  width: 0%;
  height: 5px;
  background-color:chocolate;
  position: absolute;
  z-index:100;
  top: 0;
  left: 0;

}
.carousel.next .time,
.carousel.prev .time {
width: 100%;
animation: timeRning 2s linear 1 forwards;
}
@keyframes timeRning {
  to{
    width:0%;
  }
}
@media (max-width:767px) {
  .carousel .list .item .content{
    padding-right: 0;
  }
  .carousel .list .item .content .title{
    font-size: 30px;
  }
}