/* ShareCardLink - card page (n.php) effects layer.
   Sabse LAST me load karein. Card ke apne rang/layout ko nahi chhedta,
   sirf motion aur depth jodta hai. */

:root{
  --cu-accent:rgba(46,168,255,.35);
}

/* ---------- 1. entry animation ---------- */
@keyframes cuUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes cuPop{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:none}}

.cu-up{opacity:0;animation:cuUp .6s cubic-bezier(.22,1,.36,1) forwards}
.cu-pop{opacity:0;animation:cuPop .5s cubic-bezier(.34,1.56,.64,1) forwards}

/* ---------- 2. scroll reveal ---------- */
.cu-rv{
  opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
.cu-rv.cu-in{opacity:1;transform:none}

/* ---------- 3. social icons ---------- */
.social-box,.shar_btns i,.upi_icon{
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), filter .3s, box-shadow .3s;
}
.social-box:hover,.shar_btns:hover i,.upi_icon:hover{
  transform:translateY(-5px) scale(1.12);
  filter:brightness(1.12);
}
.social-box:active,.shar_btns:active i{transform:scale(.94)}

/* ---------- 4. buttons / boxes: shine sweep (displacement style) ---------- */
.big_btns,.contact-box,.btn2,.create_card_btn,.order_box,.upi_box,.menu_item,.product_s{
  position:relative;overflow:hidden;
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s;
}
.big_btns:hover,.contact-box:hover,.btn2:hover,.create_card_btn:hover,
.order_box:hover,.upi_box:hover,.product_s:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(0,0,0,.18);
}
.big_btns::after,.contact-box::after,.btn2::after,.create_card_btn::after,
.order_box::after,.upi_box::after,.product_s::after{
  content:"";position:absolute;top:0;left:-45%;width:40%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-18deg);transition:left .7s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}
.big_btns:hover::after,.contact-box:hover::after,.btn2:hover::after,
.create_card_btn:hover::after,.order_box:hover::after,
.upi_box:hover::after,.product_s:hover::after{left:135%}

/* ---------- 5. bottom menu ---------- */
.menu_item{transition:transform .28s cubic-bezier(.34,1.56,.64,1), opacity .25s}
.menu_item:hover{transform:translateY(-4px)}
.menu_item:active{transform:scale(.92)}

/* ---------- 6. gallery / product images ---------- */
.img_gall img,.product_s img{
  transition:transform .55s cubic-bezier(.22,1,.36,1), filter .4s;
  will-change:transform;
}
.img_gall img:hover,.product_s img:hover{transform:scale(1.07);filter:saturate(1.15)}

/* ---------- 7. video embeds ---------- */
.embed-wrap{
  position:relative;border-radius:14px;overflow:hidden;
  box-shadow:0 12px 34px rgba(0,0,0,.2);
  transition:transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s;
}
.embed-wrap:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(0,0,0,.28)}
.embed-wrap iframe,.embed-video{display:block;width:100%;border:0}

/* ---------- 8. share sheet ---------- */
.share_box{
  animation:cuPop .35s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 24px 60px rgba(0,0,0,.35)!important;
}

/* ---------- 9. view counter ---------- */
.view_counter{transition:transform .3s}
.view_counter:hover{transform:scale(1.1)}

/* ---------- 10. contact rows ---------- */
.contact_d,.contact_details{transition:background .3s, transform .28s}
.contact_d:hover,.contact_details:hover{transform:translateX(4px)}

/* ---------- 11. scroll progress ---------- */
#cu-prog{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:99999;
  background:linear-gradient(90deg,#00e0c6,#2ea8ff,#7b5cff);
  box-shadow:0 0 10px rgba(46,168,255,.55);
  transition:width .1s linear;pointer-events:none;
}

/* ---------- 12. tap ripple ---------- */
.cu-ripple{
  position:absolute;border-radius:50%;pointer-events:none;
  background:rgba(255,255,255,.45);transform:scale(0);opacity:.85;
  animation:cuRipple .6s ease-out forwards;
}
@keyframes cuRipple{to{transform:scale(2.6);opacity:0}}

/* ---------- accessibility ---------- */
@media (prefers-reduced-motion:reduce){
  .cu-up,.cu-pop,.cu-rv{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
}

/* print pe kuch bhi extra na aaye */
@media print{#cu-prog{display:none}}