/* ==============================
   موجات الفوتر SVG
   ============================== */
.store-footer {
  position: relative;
}

.waves-svg-wrapper {
  position: absolute;
  top: -70px;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  pointer-events: none;
}

.waves-svg {
  display: block;
  width: 100%;
  height: 70px;
}

.wave-parallax > use {
  animation: waveMove 25s cubic-bezier(.55, .5, .45, .5) infinite;
}

.wave-layer--1 {
  fill: #4fbdd9;
  opacity: 0.7;
  animation-duration: 7s;
  animation-delay: -2s;
}

.wave-layer--2 {
  fill: #4fbdd9;
  opacity: 0.5;
  animation-duration: 10s;
  animation-delay: -3s;
}

.wave-layer--3 {
  fill: #4fbdd9;
  opacity: 0.3;
  animation-duration: 13s;
  animation-delay: -4s;
}

.wave-layer--4 {
  fill: #4fbdd9;
  opacity: 1;
  animation-duration: 20s;
  animation-delay: -5s;
}

@keyframes waveMove {
  0%   { transform: translate3d(-90px, 0, 0); }
  100% { transform: translate3d(85px, 0, 0); }
}

/* ==============================
   Scroll Animation Classes
   ============================== */
.banner--fixed img {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.banner--fixed img.visible {
  opacity: 1;
  transform: scale(1);
}

salla-slider.photos-slider {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

salla-slider.photos-slider.visible {
  opacity: 1;
  transform: translateY(0);
}

.lazy__bg {
  opacity: 0;
  transition: opacity 0.8s ease;
}

.lazy__bg.visible {
  opacity: 1;
}

.s-product-card-vertical {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.s-product-card-vertical.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==============================
   موبايل
   ============================== */
@media (max-width: 768px) {
  .waves-svg-wrapper {
    top: -40px;
  }

  .waves-svg {
    height: 40px;
  }
}