/* ===== KIEMMONEY · Hiệu ứng hiện dần khi cuộn + card chuyển động ===== */
/* Chỉ bật khi JS đã chạy (html.sr-on) để không bị ẩn nội dung nếu JS lỗi */
html.sr-on [data-sr]{
  opacity:0;
  translate:0 34px;
  scale:.96;
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),translate .7s cubic-bezier(.2,.7,.2,1),scale .7s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--sr-d,0ms);
  will-change:opacity,translate,scale;
}
html.sr-on [data-sr="left"]{translate:-40px 0}
html.sr-on [data-sr="right"]{translate:40px 0}
html.sr-on [data-sr="zoom"]{translate:0 0;scale:.85}
html.sr-on [data-sr].sr-in{opacity:1;translate:0 0;scale:1}

/* Tắt animation cũ (ppFadeUp) trên các phần tử đã dùng hiệu ứng mới để không bị chồng */
html.sr-on .intro-page [data-sr],
html.sr-on .guest-intro-details [data-sr]{animation:none!important}

/* Card: nổi lên + biểu tượng chuyển động sau khi hiện */
.kp-card,.kp-prize,.kp-stat,.kp-steps li,.intro-feature,.intro-prize,.intro-steps li{
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),translate .7s cubic-bezier(.2,.7,.2,1),scale .7s cubic-bezier(.2,.7,.2,1),
             transform .25s ease,box-shadow .25s ease;
}
@keyframes srIconBob{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -5px;rotate:-6deg}}
@keyframes srPopIn{0%{scale:.2;rotate:-25deg}60%{scale:1.2;rotate:8deg}100%{scale:1;rotate:0deg}}
@keyframes srShine{0%,60%{left:-60%}100%{left:140%}}
@keyframes srPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,225,124,.0)}50%{box-shadow:0 0 0 7px rgba(255,225,124,.45)}}

.sr-in .kp-ico,.kp-card.sr-in .kp-ico,.kp-prize.sr-in .kp-ico{animation:srPopIn .7s cubic-bezier(.2,.8,.2,1) both,srIconBob 3.6s ease-in-out .9s infinite}
.kp-grid3>:nth-child(2).sr-in .kp-ico{animation-delay:.1s,1.2s}
.kp-grid3>:nth-child(3).sr-in .kp-ico{animation-delay:.2s,1.5s}
.intro-feature.sr-in .intro-icon{animation:srPopIn .7s cubic-bezier(.2,.8,.2,1) both,srIconBob 3.6s ease-in-out .9s infinite}
.intro-prize.sr-in>span{animation:srPopIn .7s cubic-bezier(.2,.8,.2,1) both,srIconBob 4s ease-in-out 1s infinite}
.kp-step-n.sr-in,.kp-steps li.sr-in .kp-step-n{animation:srPopIn .6s cubic-bezier(.2,.8,.2,1) both,srPulse 2.6s ease-in-out 1s infinite}
.kp-num{display:inline-block}
.kp-card.sr-in .kp-num{animation:srIconBob 4s ease-in-out 1.2s infinite}

/* Vệt sáng lướt qua card khi rê chuột / chạm */
.kp-card,.kp-prize,.intro-feature,.intro-prize{position:relative;overflow:hidden}
.kp-card::after,.kp-prize::after,.intro-feature::after,.intro-prize::after{
  content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,225,124,.45),transparent);transform:skewX(-18deg);opacity:0;
}
@media (hover:hover){
  .kp-card:hover,.kp-prize:hover,.kp-stat:hover,.kp-steps li:hover{transform:translate(-4px,-4px);box-shadow:8px 8px 0 0 #000}
  .kp-card:hover::after,.kp-prize:hover::after,.intro-feature:hover::after,.intro-prize:hover::after{opacity:1;animation:srShine .9s ease}
  .kp-card:hover .kp-ico,.kp-prize:hover .kp-ico{animation:srPopIn .5s ease both}
}
.kp-card:active,.kp-prize:active,.intro-feature:active,.intro-prize:active{transform:translate(2px,2px)}

/* Thanh tiến độ cuộn mỏng ở đầu trang giới thiệu */
#srBar{position:fixed;left:0;top:0;height:4px;width:100%;z-index:9998;background:#ffe17c;border-bottom:1px solid #000;
  transform-origin:left;transform:scaleX(0);pointer-events:none;opacity:0;transition:opacity .25s}
html.sr-on #srBar.on{opacity:1}

@media (prefers-reduced-motion:reduce){
  html.sr-on [data-sr]{opacity:1!important;translate:0 0!important;scale:1!important;transition:none!important}
  .sr-in .kp-ico,.intro-feature.sr-in .intro-icon,.intro-prize.sr-in>span,.kp-card.sr-in .kp-num,.kp-steps li.sr-in .kp-step-n{animation:none!important}
  .kp-card::after,.kp-prize::after,.intro-feature::after,.intro-prize::after{display:none}
  #srBar{display:none}
}