/* ═══════════════════════════════════════════════════════
   YallaPOS — Landing scroll reveal + parallax
   Homepage sections below hero only.
═══════════════════════════════════════════════════════ */

/* ── Parallax image wrappers ── */
.sp-img-parallax {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  will-change: transform;
}

.sp-img-fade {
  z-index: 1;
}

.sp-img-parallax .sp-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transform-origin: center center;
  will-change: transform;
}

.sp-hero-wrap .sp-img-parallax--hero {
  position: relative;
  width: 100%;
  height: 100%;
}

.sp-hero-wrap .sp-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
  transform-origin: center center;
  will-change: transform;
}

.sp-wide-img {
  will-change: transform;
}

/* ── Base reveal ── */
.sp-reveal {
  opacity: 0;
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--sp-reveal-i, 0) * 100ms);
}

.sp-reveal--up {
  transform: translateY(32px);
}

.sp-reveal--left {
  transform: translateX(-40px) scale(0.97);
}

.sp-reveal--right {
  transform: translateX(40px) scale(0.97);
}

.sp-reveal--scale {
  transform: scale(1.06);
}

.sp-reveal--scale-soft {
  transform: translateY(32px) scale(0.98);
}

.sp-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Demo stats use shorter stagger steps */
#demo-request .dr-stat.sp-reveal {
  transition-delay: calc(var(--sp-reveal-i, 0) * 80ms);
}

#demo-request .dr-form-card.sp-reveal {
  transition-delay: calc(var(--sp-reveal-i, 0) * 100ms + 120ms);
}

/* Wide card inner stagger */
.sp-wide-body > .sp-reveal {
  transition-delay: calc(var(--sp-reveal-i, 0) * 80ms + 200ms);
}

/* ── Image scale settle inside bento cells ── */
.sp-cell .sp-img-parallax .sp-bg-img {
  transform: scale(1.14);
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--sp-reveal-i, 0) * 100ms + 80ms);
}

.sp-cell.is-visible .sp-img-parallax .sp-bg-img {
  transform: scale(1);
}

/* Hero scale clip */
.sp-hero-wrap.sp-reveal {
  overflow: hidden;
}

/* Parallax — translate on wrapper / wide img only (scale stays on .sp-bg-img) */
.sp-img-parallax[data-parallax-active="true"] {
  transform: translate3d(0, var(--sp-parallax-y, 0px), 0);
}

.sp-wide-img[data-parallax-active="true"] {
  transform: scale(1.08) translate3d(0, var(--sp-parallax-y, 0px), 0);
}

/* ── RTL: flip horizontal entrance directions ── */
[dir="rtl"] .sp-reveal--left {
  transform: translateX(40px) scale(0.97);
}

[dir="rtl"] .sp-reveal--right {
  transform: translateX(-40px) scale(0.97);
}

[dir="rtl"] .sp-reveal.is-visible {
  transform: none;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .sp-reveal {
    opacity: 1;
    transform: none !important;
    transition: none !important;
  }

  .sp-cell .sp-img-parallax .sp-bg-img {
    transform: none !important;
    transition: none !important;
  }

  .sp-img-parallax[data-parallax-active="true"],
  .sp-wide-img[data-parallax-active="true"] {
    transform: none !important;
  }
}