/* ============================
   UPE Apple Scroll (Scoped)
   BOXED CARD MODE (left column)
   ============================ */

#upe-apple-scroll {
  position: relative;
  width: 100%;
  max-width: 520px; /* box width (match your left column) */
  height: 520px; /* box height (square card) */
  margin: 0; /* no centering - it sits in the column */
  background: transparent;
}

#upe-apple-scroll .upe-apple-pin {
  position: relative; /* NOT sticky full-page */
  top: auto;
  height: 100%;
  overflow: hidden;
  border-radius: 24px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.12);
}

#upe-apple-scroll .upe-apple-stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Slides */
#upe-apple-scroll .upe-apple-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateZ(0) scale(1.1);
  will-change: transform, opacity;
  background-size: cover;
  background-position: center;
  backface-visibility: hidden;
  filter: saturate(1.05) contrast(1.05);
}

/* ===================================================
   EDIT YOUR IMAGES HERE - Change the URLs below
   =================================================== */

/* Image 1 (shows first) */
#upe-apple-scroll .s1 {
  background-image: url("https://upegypt.com/wp-content/uploads/2026/02/Website-pictures-03-scaled.webp");
  opacity: 1;
  transform: translateZ(0) scale(1);
}

/* Image 2 (shows second) */
#upe-apple-scroll .s2 {
  background-image: url("https://upegypt.com/wp-content/uploads/2026/02/Website-pictures-02-scaled.webp");
}

/* Image 3 (shows third) */
#upe-apple-scroll .s3 {
  background-image: url("https://upegypt.com/wp-content/uploads/2026/02/Website-pictures-01-scaled.webp");
}

/* ===================================================
   Apple-style lighting overlays
   =================================================== */

#upe-apple-scroll .upe-apple-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0) 35%,
    rgba(0, 0, 0, 0.35) 100%
  );
  opacity: 0.55;
  will-change: opacity;
}

#upe-apple-scroll .upe-apple-glow {
  position: absolute;
  inset: -10%;
  pointer-events: none;
  background: radial-gradient(
    circle at 50% 55%,
    rgba(252, 177, 86, 0.22) 0%,
    rgba(252, 177, 86, 0) 55%
  );
  mix-blend-mode: screen;
  opacity: 0.6;
  will-change: opacity, transform;
}

#upe-apple-scroll .upe-apple-noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

/* Optional: smoother on very small screens */
@media (max-width: 768px) {
  #upe-apple-scroll {
    height: 420vh;
  }
}

/* Accessibility fallback - disable animation for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  #upe-apple-scroll {
    height: auto;
  }
  #upe-apple-scroll .upe-apple-pin {
    position: relative;
    height: auto;
  }
  #upe-apple-scroll .upe-apple-slide {
    position: relative;
    opacity: 1 !important;
    transform: none !important;
    min-height: 60vh;
  }
  #upe-apple-scroll .upe-apple-vignette,
  #upe-apple-scroll .upe-apple-glow,
  #upe-apple-scroll .upe-apple-noise {
    display: none;
  }
}