/* ============================================================
 * SAI CINEMATIC SHOWCASE
 * Full-bleed cross-fading product showcase — inspired by the
 * client's reference reels (studio-lit shots, slow Ken-Burns drift,
 * elegant title cards). Reuses the theme's own design tokens
 * (--sai-*) defined in style.css so it always matches the brand,
 * whatever the color palette happens to be at the time.
 * ============================================================ */

.sai-cinema{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  background:#0D0D0D;
  isolation:isolate;
}
.sai-cinema--short{  height:50vh; min-height:340px; }
.sai-cinema--normal{ height:72vh; min-height:420px; }
.sai-cinema--tall{   height:88vh; min-height:520px; }

.sai-cinema-stage{ position:relative; width:100%; height:100%; }

.sai-cinema-slide{
  position:absolute; inset:0;
  margin:0;
  opacity:0;
  visibility:hidden;
  transition:opacity 1.1s cubic-bezier(.4,0,.2,1);
  will-change:opacity;
}
.sai-cinema-slide.is-active{
  opacity:1;
  visibility:visible;
  z-index:2;
}

.sai-cinema-slide img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1.06);
  transition:transform 8s linear;
}
/* Ken-Burns: only the ACTIVE slide's image is given the "settled"
   scale, animated over the slide's dwell time — every other slide
   sits pre-zoomed so there's never a hard jump when it becomes active. */
.sai-cinema-slide.is-active img{ transform:scale(1); }

.sai-cinema::after{
  /* Bottom gradient so the caption stays legible over any photo */
  content:"";
  position:absolute; inset:0;
  z-index:3; pointer-events:none;
  background:linear-gradient(to top, rgba(10,10,10,.82) 0%, rgba(10,10,10,.25) 42%, transparent 68%);
}

.sai-cinema-caption{
  position:absolute; z-index:4;
  right:0; bottom:0; left:0;
  padding:34px 40px;
  text-align:right;
  direction:rtl;
}
.sai-cinema-eyebrow{
  display:inline-block;
  font-family:'Cairo','Tajawal',sans-serif;
  font-size:12px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--sai-accent-soft,#F6CE7C);
  opacity:0;
  transform:translateY(10px);
  transition:opacity .7s ease .15s, transform .7s cubic-bezier(.16,.8,.24,1) .15s;
}
.sai-cinema-title{
  margin:8px 0 0;
  font-family:'Cairo','Tajawal',sans-serif;
  font-weight:700;
  font-size:clamp(22px,3.4vw,40px);
  color:#F2E8D9;
  opacity:0;
  transform:translateY(18px);
  transition:opacity .8s ease .25s, transform .8s cubic-bezier(.16,.8,.24,1) .25s;
}
.sai-cinema-slide.is-active .sai-cinema-eyebrow,
.sai-cinema-slide.is-active .sai-cinema-title{
  opacity:1;
  transform:translateY(0);
}

/* ---------------- Dots / swatch navigation ---------------- */
.sai-cinema-dots{
  position:absolute; z-index:5;
  left:50%; bottom:20px;
  transform:translateX(-50%);
  display:flex; gap:10px;
  padding:8px 10px;
  border-radius:999px;
  background:rgba(10,10,10,.35);
  backdrop-filter:blur(6px);
}
.sai-cinema-dot{
  --swatch:var(--sai-accent,#F0B23C);
  width:12px; height:12px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.55);
  background:var(--swatch);
  padding:0;
  cursor:pointer;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.sai-cinema-dot:hover{ transform:scale(1.15); }
.sai-cinema-dot.is-active{
  border-color:#fff;
  box-shadow:0 0 0 3px rgba(255,255,255,.18);
  transform:scale(1.2);
}

@media (max-width:768px){
  .sai-cinema{ border-radius:12px; }
  .sai-cinema--normal{ height:60vh; }
  .sai-cinema--tall{   height:70vh; }
  .sai-cinema-caption{ padding:22px 20px; }
}

@media (prefers-reduced-motion:reduce){
  .sai-cinema-slide,
  .sai-cinema-slide img,
  .sai-cinema-eyebrow,
  .sai-cinema-title{ transition:none !important; }
  .sai-cinema-slide.is-active img{ transform:scale(1) !important; }
}