/* =========================================================
   COTTON QUALITY — HERO SLIDER (shared: site + admin preview)
   Scoped to .hero-slider / .hs-* only — safe to load anywhere.
   Animations: fade · zoom · slide-x · slide-y  (class on root)
   ========================================================= */

.hero-slider{
  /* knobs (set from PHP/JS) */
  --hs-h:560px;
  --hs-w:100%;
  --hs-speed:800ms;
  --hs-overlay:.45;
  --hs-radius:0px;
  --hs-ease:cubic-bezier(.22,.9,.28,1);
  --hs-ink:#fff;

  position:relative;
  width:var(--hs-w);
  max-width:100%;
  margin-inline:auto;
  font-family:'Tajawal',system-ui,sans-serif;
}
.hero-slider.is-boxed{--hs-radius:22px}

.hs-viewport{
  position:relative;
  height:var(--hs-h);
  overflow:hidden;
  border-radius:var(--hs-radius);
  background:#171211;
  isolation:isolate;
}

/* ---------- slides ---------- */
.hs-slide{
  position:absolute;inset:0;
  opacity:0;z-index:1;
  transition:opacity var(--hs-speed) var(--hs-ease), transform var(--hs-speed) var(--hs-ease);
  will-change:opacity,transform;
}
.hs-slide.is-active{opacity:1;z-index:3;transform:none}
.hs-slide.is-before,.hs-slide.is-after{z-index:2}

.hs-img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.02)}
.hs-shade{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(12,9,9,.28) 0%,rgba(12,9,9,.18) 42%,rgba(12,9,9,.62) 100%);
  opacity:var(--hs-overlay);
  transition:opacity var(--hs-speed) var(--hs-ease);
}
/* decorative corner glow — purely cosmetic */
.hs-slide::after{
  content:"";position:absolute;z-index:2;pointer-events:none;
  width:52%;aspect-ratio:1;border-radius:50%;
  inset-inline-end:-12%;inset-block-start:-26%;
  background:radial-gradient(circle,rgba(156,28,49,.34),transparent 68%);
  filter:blur(30px);
}

/* ---------- animation variants ---------- */
.hero-slider.anim-fade .hs-slide{opacity:0;transform:none}
.hero-slider.anim-fade .hs-slide.is-active{opacity:1}

.hero-slider.anim-zoom .hs-slide{opacity:0;transform:scale(1.14)}
.hero-slider.anim-zoom .hs-slide.is-active{opacity:1;transform:scale(1)}
.hero-slider.anim-zoom .hs-img{transform:none}

.hero-slider.anim-slide-x .hs-slide{opacity:1;transform:translateX(100%)}
.hero-slider.anim-slide-x .hs-slide.is-before{transform:translateX(-100%)}
.hero-slider.anim-slide-x .hs-slide.is-active{transform:translateX(0)}
.hero-slider.anim-slide-x.is-rtl .hs-slide{transform:translateX(-100%)}
.hero-slider.anim-slide-x.is-rtl .hs-slide.is-before{transform:translateX(100%)}

.hero-slider.anim-slide-y .hs-slide{opacity:1;transform:translateY(100%)}
.hero-slider.anim-slide-y .hs-slide.is-before{transform:translateY(-100%)}
.hero-slider.anim-slide-y .hs-slide.is-active{transform:translateY(0)}

/* ---------- slide content ---------- */
.hs-inner{
  position:absolute;inset:0;z-index:4;
  display:flex;align-items:center;
  padding-inline:clamp(22px,5.4vw,84px);
  padding-block:34px;
}
.hs-content{max-width:660px;color:var(--hs-ink)}
.hs-inner.pos-center{justify-content:center}
.hs-inner.pos-center .hs-content{text-align:center;margin-inline:auto}
.hs-inner.pos-start{justify-content:flex-start}
.hs-inner.pos-end{justify-content:flex-end}

.hs-title{
  margin:0 0 14px;
  font-family:'Tajawal',system-ui,sans-serif;
  font-size:clamp(1.7rem,4.2vw,3.3rem);
  font-weight:900;letter-spacing:-.5px;line-height:1.22;
  color:#fff;
  text-shadow:0 2px 22px rgba(0,0,0,.28);
}
.hs-sub{
  margin:0;
  font-size:clamp(.98rem,1.6vw,1.16rem);
  line-height:1.75;
  color:rgba(255,255,255,.88);
  max-width:56ch;
  text-shadow:0 1px 14px rgba(0,0,0,.25);
}
.hs-inner.pos-center .hs-sub{margin-inline:auto}
.hs-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.hs-inner.pos-center .hs-actions{justify-content:center}

.hs-btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 26px;border-radius:99px;
  font-weight:800;font-size:.95rem;letter-spacing:.2px;
  transition:transform .3s var(--hs-ease), box-shadow .3s var(--hs-ease), background .3s;
}
.hs-btn-primary{background:#9C1C31;color:#fff;box-shadow:0 12px 28px rgba(156,28,49,.34)}
.hs-btn-primary:hover{background:#7d1527;transform:translateY(-3px)}
.hs-btn-ghost{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.4);backdrop-filter:blur(6px)}
.hs-btn-ghost:hover{background:rgba(255,255,255,.24);transform:translateY(-3px)}

/* content entrance when slide becomes active (restarts on class toggle) */
.hs-slide .hs-title,.hs-slide .hs-sub,.hs-slide .hs-actions{opacity:0}
.hs-slide.is-active .hs-title{animation:hsRise .75s .12s var(--hs-ease) both}
.hs-slide.is-active .hs-sub{animation:hsRise .75s .24s var(--hs-ease) both}
.hs-slide.is-active .hs-actions{animation:hsRise .75s .36s var(--hs-ease) both}
@keyframes hsRise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

/* ---------- arrows ---------- */
.hs-arrow{
  position:absolute;z-index:6;
  inset-block-start:50%;transform:translateY(-50%);
  width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.34);
  color:#fff;cursor:pointer;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background .25s, transform .25s var(--hs-ease), opacity .25s;
  opacity:.9;
}
.hs-arrow:hover{background:#9C1C31;border-color:#9C1C31;transform:translateY(-50%) scale(1.07);opacity:1}
.hs-arrow.prev{inset-inline-start:18px}
.hs-arrow.next{inset-inline-end:18px}
.hs-arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
[dir="rtl"] .hs-arrow svg{transform:scaleX(-1)}

/* ---------- dots ---------- */
.hs-dots{
  position:absolute;z-index:6;
  inset-inline:0;inset-block-end:18px;
  display:flex;justify-content:center;gap:8px;
}
.hs-dot{
  position:relative;width:10px;height:10px;border-radius:99px;
  border:none;padding:0;cursor:pointer;
  background:rgba(255,255,255,.42);
  transition:width .35s var(--hs-ease), background .3s;
  overflow:hidden;
}
.hs-dot:hover{background:rgba(255,255,255,.75)}
.hs-dot.is-active{width:34px;background:rgba(255,255,255,.3)}
.hs-dot.is-active::after{
  content:"";position:absolute;inset:0;
  background:#9C1C31;
  transform-origin:inline-start;
  animation:hsFill var(--hs-int,5s) linear forwards;
}
.hero-slider.no-autoplay .hs-dot.is-active::after{animation:none;background:transparent}
@keyframes hsFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- responsive (site) ---------- */
@media (max-width:900px){
  .hs-viewport{height:min(var(--hs-h),86vw)}
  .hs-arrow{width:40px;height:40px}
  .hs-arrow.prev{inset-inline-start:10px}
  .hs-arrow.next{inset-inline-end:10px}
}
@media (max-width:640px){
  .hero-slider{--hs-w:100%!important;--hs-radius:0px}
  .hs-viewport{height:min(var(--hs-h),112vw);min-height:360px}
  .hs-inner{padding-inline:20px;padding-block:26px;align-items:flex-end}
  .hs-title{font-size:clamp(1.55rem,7vw,2.1rem)}
  .hs-sub{font-size:.94rem}
  .hs-actions{margin-top:18px}
  .hs-btn{padding:11px 20px;font-size:.88rem}
  .hs-dots{inset-block-end:12px}
  .hs-slide::after{display:none}
}

@media (prefers-reduced-motion:reduce){
  .hs-slide,.hs-btn,.hs-arrow,.hs-dot{transition-duration:.01ms!important}
  .hs-slide.is-active .hs-title,
  .hs-slide.is-active .hs-sub,
  .hs-slide.is-active .hs-actions{animation-duration:.01ms!important}
  .hs-dot.is-active::after{animation:none}
}