@import url('https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@400;500;600;700&family=Vazirmatn:wght@300;400;500;600;700;800&display=swap');

.whs{
  --whs-font-ui:'Vazirmatn', Tahoma, sans-serif;
  --whs-font-title:'Noto Naskh Arabic','Vazirmatn', Tahoma, serif;
  --whs-h: 88vh;
  position:relative;
  width:100%;
  height:var(--whs-h);
  overflow:hidden;
  background:#0b1220;
  direction:rtl;
  font-family:var(--whs-font-ui);
  isolation:isolate;
}
.whs *{ box-sizing:border-box; }

.whs__track{
  position:relative;
  width:100%;
  height:100%;
  cursor:grab;
  touch-action:pan-y;
}
.whs--dragging .whs__track{ cursor:grabbing; }
.whs--dragging *{ user-select:none; }

.whs__slide{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  transform:translateX(0);
  transition:opacity 1.15s ease, visibility 0s linear 1.15s, transform .64s cubic-bezier(.19,1,.22,1);
  z-index:1;
}
.whs__slide.is-active{
  opacity:1; visibility:visible;
  transition:opacity 1.15s ease, visibility 0s linear 0s, transform .64s cubic-bezier(.19,1,.22,1);
  z-index:2;
}

.whs__media{
  position:absolute; inset:0;
  background-image:linear-gradient(135deg,#0f1b30,#1f3358 55%,#2a4066);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  transform:scale(1.12);
  transition:transform 6.5s cubic-bezier(.19,1,.22,1);
  will-change:transform;
}
.whs__slide.is-active .whs__media{ transform:scale(1); }
.whs__slide.is-resetting .whs__media{ transition:none !important; }

.whs__scrim{
  position:absolute; inset:0;
  background:linear-gradient(to right, rgba(6,10,20,.04) 38%, rgba(6,10,20,.58) 100%);
  pointer-events:none;
}

.whs__content{
  position:absolute;
  inset-inline-start:0;
  top:50%;
  transform:translateY(calc(-50% + 22px));
  max-width:min(640px, 88%);
  padding-inline-start:clamp(24px,6vw,96px);
  padding-inline-end:24px;
  color:#fff;
  opacity:0;
  pointer-events:none;
  transition:opacity .9s ease .25s, transform .9s cubic-bezier(.19,1,.22,1) .25s;
}
.whs__slide.is-active .whs__content{
  opacity:1;
  transform:translateY(-50%);
  pointer-events:auto;
}

.whs__title{
  margin:0 0 20px;
  font-family:var(--whs-font-title);
  font-weight:600;
  font-size:clamp(30px, 5.2vw, 64px);
  line-height:1.3;
  text-wrap:balance;
}

.whs__subtitle{
  margin:0 0 28px;
  font-size:clamp(14px, 1.6vw, 17px);
  font-weight:400;
  color:rgba(255,255,255,.9);
}

.whs__cta{
  display:inline-flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
}
.whs__cta-bar{
  width:2px;
  align-self:stretch;
  min-height:52px;
  background:#fff;
  flex:none;
}
.whs__cta-label{
  background:#fff;
  color:#12131a;
  font-family:var(--whs-font-ui);
  font-weight:600;
  font-size:14px;
  letter-spacing:.5px;
  padding:18px 34px;
  transition:background .3s ease, color .3s ease;
}
.whs__cta:hover .whs__cta-label,
.whs__cta:focus-visible .whs__cta-label{
  background:#12131a;
  color:#fff;
}
.whs__cta:focus-visible{ outline:2px solid #fff; outline-offset:4px; }

.whs__nav{
  position:absolute;
  inset-inline-end:clamp(16px,3vw,40px);
  bottom:clamp(16px,3vw,40px);
  width:clamp(120px,14vw,190px);
  z-index:3;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.whs__thumb{
  display:block;
  width:100%;
  border:0;
  background:none;
  padding:0;
  cursor:pointer;
}
.whs__thumb-img{
  display:block;
  width:100%;
  aspect-ratio:16/10;
  background-image:linear-gradient(135deg,#0f1b30,#1f3358 55%,#2a4066);
  background-size:cover;
  background-position:center;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.whs__thumb:focus-visible{ outline:2px solid #fff; outline-offset:4px; }

.whs__dots{
  display:flex;
  align-items:center;
  gap:8px;
}
.whs__dot{
  position:relative;
  width:20px;
  height:3px;
  flex:none;
  padding:0;
  border:0;
  cursor:pointer;
  background:rgba(255,255,255,.32);
  transition:width .35s cubic-bezier(.19,1,.22,1);
}
.whs__dot.is-active{ width:44px; }
.whs__dot:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

.whs__dot-fill{
  position:absolute;
  inset-inline-start:0;
  top:0;
  bottom:0;
  width:0;
  background:#fff;
}
.whs__dot-fill.is-playing{
  animation-name:whs-fill;
  animation-timing-function:linear;
  animation-fill-mode:forwards;
  animation-duration:var(--whs-duration, 6500ms);
}
@keyframes whs-fill{ from{ width:0 } to{ width:100% } }

@media (max-width:640px){
  .whs__content{ max-width:92%; padding-inline-end:16px; }
  .whs__nav{ width:104px; gap:10px; }
  .whs__cta-bar{ min-height:44px; }
  .whs__cta-label{ padding:14px 22px; }
  .whs__dot{ width:16px; }
  .whs__dot.is-active{ width:34px; }
}

@media (prefers-reduced-motion: reduce){
  .whs__slide,
  .whs__media,
  .whs__content,
  .whs__dot,
  .whs__dot-fill{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
  }
}