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

.wcs{
  --wcs-font-word:'Noto Naskh Arabic','Vazirmatn',Tahoma,serif;
  --wcs-font-ui:'Vazirmatn',Tahoma,sans-serif;
  --wcs-bg:#ffffff;
  --wcs-word:#12131a;
  --wcs-word-over:#ffffff;
  --wcs-card-h:88vh;
  --wcs-card-ratio:3/4;
  --wcs-speed:700ms;
  --wcs-word-size:52px;
  --wcs-word-pad:10px;
  --wcs-shift:0px;
  --wcs-slot-px:240px;
  --wcs-row-w:100%;

  position:relative;
  width:100%;
  min-height:var(--wcs-card-h);
  padding-block:4vh;
  background:var(--wcs-bg);
  font-family:var(--wcs-font-ui);
  overflow:hidden;
  isolation:isolate;
  display:flex;
  align-items:center;
  justify-content:center;
  touch-action:pan-y;
  cursor:grab;
}
.wcs *{ box-sizing:border-box; }
.wcs.is-dragging{ cursor:grabbing; }
.wcs.is-dragging *{ user-select:none; }

/* ---- ردیف کلمات (روی کارت) ---- */
.wcs__words{
  position:absolute;
  top:50%;
  left:50%;
  z-index:3;
  width:var(--wcs-row-w);
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  transform:translate(-50%,-50%) translateX(var(--wcs-shift));
  transition:transform var(--wcs-speed) cubic-bezier(.65,.01,.24,1);
  will-change:transform;
}
.wcs.is-instant .wcs__words,
.wcs.is-instant .wcs__word{ transition:none; }

.wcs__word{
  flex:0 0 var(--wcs-slot-px);
  max-width:var(--wcs-slot-px);
  padding-inline:var(--wcs-word-pad);
  border:0;
  background:none;
  cursor:pointer;
  text-align:center;
  font-family:var(--wcs-font-word);
  font-weight:500;
  font-size:var(--wcs-word-size);
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:var(--wcs-word);
  transition:color var(--wcs-speed) ease;
}
/* فقط کلمهٔ فعال رنگش فرق می‌کند */
.wcs__word.is-active{ color:var(--wcs-word-over); }
.wcs__word:focus-visible{ outline:2px solid currentColor; outline-offset:6px; }

/* ---- کارت مرکزی ---- */
.wcs__card{
  position:relative;
  z-index:2;
  height:var(--wcs-card-h);
  aspect-ratio:var(--wcs-card-ratio);
  max-width:86vw;
  overflow:hidden;
}
.wcs__media{
  position:absolute;
  inset:0;
  background-image:linear-gradient(160deg,#efe6d6,#e3d6c0 55%,#d9c9ae);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:0;
  transition:opacity var(--wcs-speed) ease;
}
.wcs__media.is-active{ opacity:1; }

.wcs__cta{
  position:absolute;
  z-index:4;
  bottom:clamp(16px,4%,44px);
  left:50%;
  transform:translateX(-50%);
  display:inline-block;
  background:#fff;
  color:#12131a;
  font-family:var(--wcs-font-ui);
  font-size:clamp(11px,.95vw,13px);
  font-weight:500;
  letter-spacing:.3px;
  padding:14px 32px;
  text-decoration:none;
  white-space:nowrap;
  transition:background .3s ease, color .3s ease, opacity .25s ease;
}
.wcs__cta:hover{ background:#12131a; color:#fff; }
.wcs__cta:focus-visible{ outline:2px solid #12131a; outline-offset:3px; }
.wcs__cta.is-fading{ opacity:0; }

@media (max-width:900px){
  .wcs{ --wcs-card-h:64vh; }
  .wcs__cta{ padding:12px 24px; }
}
@media (max-width:600px){
  .wcs{ --wcs-card-h:56vh; }
  .wcs__card{ max-width:78vw; }
}

@media (prefers-reduced-motion: reduce){
  .wcs__words,
  .wcs__media,
  .wcs__cta{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
  }
}