/* HealthOps — لمسات سكرول احترافية: قسم منتج مُثبّت (pinned)، عمق/إمالة الهيرو */

/* ============================================================
   1) قسم المنتج المُثبّت (Pinned product showcase)
   ============================================================ */
.hop-stage{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,#fff 0%,var(--bg-soft,#F4F5FB) 100%);
}
.hop-stage-head{
  text-align:center;max-width:680px;margin:0 auto;
  padding-top:clamp(72px,10vw,104px);
}
.hop-stage-head h2{font-size:clamp(28px,4vw,42px);margin-top:14px}
.hop-stage-head p{color:var(--muted);margin-top:14px;font-size:17px}

.hop-stage-pin{
  min-height:100vh;display:flex;align-items:center;
  padding:clamp(30px,6vw,56px) 0;
}
.hop-stage-grid{
  display:grid;grid-template-columns:1fr 1.08fr;gap:clamp(34px,5vw,60px);
  align-items:center;width:100%;
}

/* العمود النصّي: الخطوات مكدّسة في خلية واحدة */
.hop-stage-copy{display:grid}
.hop-step{
  grid-area:1/1;opacity:0;transform:translateY(28px);
  transition:opacity .55s ease,transform .6s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}
.hop-step.is-active{opacity:1;transform:none;pointer-events:auto}
.hop-step-eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:800;
  color:var(--c,var(--primary-700));
  background:color-mix(in srgb,var(--c,#5D5FEF) 10%,#fff);
  border:1px solid color-mix(in srgb,var(--c,#5D5FEF) 24%,#fff);
  padding:7px 15px;border-radius:999px;letter-spacing:.01em;
}
.hop-step-eyebrow svg{width:15px;height:15px}
.hop-step h3{font-size:clamp(24px,3vw,34px);margin-top:18px;line-height:1.22}
.hop-step p{color:var(--muted);font-size:clamp(16px,2vw,18px);margin-top:14px;line-height:1.8;max-width:520px}
.hop-step-list{display:flex;flex-direction:column;gap:11px;margin-top:20px}
.hop-step-list div{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--text)}
.hop-step-list svg{width:18px;height:18px;color:var(--c,var(--primary));flex:none}
.hop-step .hop-step-cta{margin-top:24px;display:inline-flex}
.hop-step-img{display:none}

/* العمود البصري المثبّت */
.hop-stage-visual{position:relative}
.hop-stage-visual::before{
  content:"";position:absolute;inset:-14% -10% -6% -10%;z-index:-1;
  background:radial-gradient(58% 56% at 50% 32%,
            color-mix(in srgb,var(--stage-c,#5D5FEF) 30%,transparent),transparent 70%);
  filter:blur(26px);opacity:.85;transition:background .6s ease;
}
.hop-stage-frame{
  position:relative;border-radius:18px;overflow:hidden;background:#fff;
  border:1px solid var(--border);
  box-shadow:0 36px 84px rgba(30,31,75,.20),0 0 0 1px rgba(93,95,239,.05);
  aspect-ratio:1280/848;
}
.hop-stage-frame .shot-bar{
  display:flex;gap:6px;padding:11px 14px;background:var(--bg-soft);
  border-bottom:1px solid var(--border);
}
.hop-stage-frame .shot-bar i{width:10px;height:10px;border-radius:50%;background:#cfd2e6}
.hop-stage-imgs{position:relative;width:100%;height:calc(100% - 34px)}
.hop-stage-imgs img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:top center;
  opacity:0;transform:scale(1.05);
  transition:opacity .6s ease,transform .9s cubic-bezier(.22,1,.36,1);
}
.hop-stage-imgs img.is-active{opacity:1;transform:scale(1)}

/* شريط مؤشرات الخطوات */
.hop-stage-rail{display:flex;gap:9px;justify-content:center;margin-top:24px}
.hop-stage-rail button{
  width:36px;height:5px;border:0;padding:0;border-radius:99px;cursor:pointer;
  background:var(--border-strong);transition:background .4s ease,transform .3s ease;
}
.hop-stage-rail button:hover{transform:scaleY(1.6)}
.hop-stage-rail button.is-active{background:var(--stage-c,var(--primary))}

@media(max-width:920px){
  .hop-stage-grid{grid-template-columns:1fr;gap:30px}
}

/* احتياطي: الجوال / تقليل الحركة → عرض مكدّس بسيط بصور لكل خطوة */
.hop-stage-static{padding-bottom:clamp(40px,8vw,72px)}
.hop-stage-static .hop-stage-pin{min-height:0;display:block;padding:18px 0 0}
.hop-stage-static .hop-stage-grid{display:block}
.hop-stage-static .hop-stage-visual{display:none}
.hop-stage-static .hop-stage-rail{display:none}
.hop-stage-static .hop-stage-copy{display:block}
.hop-stage-static .hop-step{
  position:static;opacity:1;transform:none;pointer-events:auto;
  padding:26px 0;border-top:1px solid var(--border);
}
.hop-stage-static .hop-step:first-child{border-top:0;padding-top:6px}
.hop-stage-static .hop-step-img{
  display:block;margin-top:18px;width:100%;border-radius:14px;
  border:1px solid var(--border);box-shadow:var(--shadow-md);
}

/* ============================================================
   2) عمق وإمالة 3D للقطات الهيرو (سطح المكتب فقط)
   ============================================================ */
@media (hover:hover) and (min-width:921px){
  .hero .hero-shot{perspective:1300px}
  .hero .hop-float .shot-frame{
    transform:perspective(1300px) rotateX(var(--hop-rx,0deg)) rotateY(var(--hop-ry,-2deg));
    transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease;
    transform-style:preserve-3d;will-change:transform;
  }
  .hero .hop-float .shot-frame img{transform:translateZ(28px);backface-visibility:hidden}
  .hero .hop-float:hover .shot-frame{
    transform:perspective(1300px) rotateX(var(--hop-rx,0deg)) rotateY(var(--hop-ry,0deg)) translateY(-4px);
    box-shadow:0 46px 100px rgba(30,31,75,.28),0 0 0 1px rgba(93,95,239,.14);
  }
}

@media(prefers-reduced-motion:reduce){
  .hop-step{transition:none}
  .hop-stage-imgs img{transition:opacity .3s ease}
  .hero .hop-float .shot-frame img{transform:none}
}