/* Atayeb — small hover-polish layer, on top of the original site CSS. */

.prod,
.pro,
.produ,
.bul,
.stage,
.qlist,
.feature-item,
.value-item,
.principle {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.prod:hover,
.pro:hover,
.produ:hover,
.bul:hover,
.stage:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
}

.qlist:hover,
.feature-item:hover,
.principle:hover {
  transform: translateX(4px);
}

.btn-catalog,
.btn-download,
.btn-view,
.btn-send,
.btn-brand,
.btn-prod {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.btn-catalog:hover,
.btn-download:hover,
.btn-view:hover,
.btn-send:hover,
.btn-brand:hover,
.btn-prod:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
}

.value-header {
  transition: background-color 0.3s ease;
}

.brand-logo {
  transition: transform 0.3s ease;
}

.navbar-brand:hover .brand-logo {
  transform: scale(1.06) rotate(-2deg);
}

@keyframes vp-pulse-ring {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55);
  }
  70% {
    box-shadow: 0 0 0 22px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

.vp-center span {
  animation: vp-pulse-ring 2.4s ease-out infinite;
}

.vp-center:hover span {
  animation-play-state: paused;
}

/* Curtain-reveal wrap: put around any <img> to sweep a white panel across it once.
   Radius/shadow are matched per image so the clip lines up with that image's
   own rounded corners — add a rule here when wrapping a new one. */
.img-reveal {
  position: relative;
  overflow: hidden;
}

.img-reveal:has(.main-about-img) {
  border-radius: 36px;
  box-shadow: 0px 28px 70px 0px #0f562926;
}

.img-reveal:has(.about-img),
.story .img-reveal {
  border-radius: 32px;
}

.img-reveal:has(.control-img) {
  border-radius: 24px;
}

.img-reveal:has(.sp) {
  border-radius: 20px;
}

.contact-img1 .img-reveal {
  border-radius: 36px;
  box-shadow: 0px 32px 80px 0px #0f56292b;
}

.contact-img2 .img-reveal {
  border-radius: 28px;
  box-shadow: 0px 18px 52px 0px #0f562933;
}

/* Let contact-img2's curtain sweep a beat after contact-img1's since they sit side by side. */
.contact-img2 .img-reveal.panel-play .panel {
  animation-delay: 0.3s;
}

/* الستارة أعرض من الغلاف بـ 2px من كل جهة وبتنكمش بـ scaleX بدل ما نحرّك left/width:
   تحريك left+width بالنسب كان يقرّب حوافها لكسور بكسل، فيضل خط رفيع من الصورة
   ظاهر على طرف الغلاف (يمين بالعربي، شمال بالإنجليزي حسب وين وقعت الكسور).
   الـ overflow: hidden على الغلاف بيقص الزيادة فما بتبين. */
.img-reveal .panel {
  position: absolute;
  inset: -2px;
  background: white;
  z-index: 10;
  pointer-events: none;
  transform-origin: right center;
  transform: scaleX(0);
  will-change: transform;
}

.img-reveal.panel-play .panel {
  animation: panel 1s;
  animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
  /* keep the panel fully covering through any animation-delay (e.g. the
     staggered contact-img2 below) instead of flashing the image first */
  animation-fill-mode: backwards;
}

@keyframes panel {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}