/*
|--------------------------------------------------------------------------
| KedaiPabz homepage: 2027 layer
|--------------------------------------------------------------------------
| Additive styles on top of the existing homepage classes. Remove the
| include line at the end of home/partials/content.blade.php to turn off.
*/

/* ---------- Hero: cinematic slow zoom, living gradient title, pointer glow ---------- */
.kp-home-hero{isolation:isolate}
.kp-home-hero-slide.is-active img{animation:kphKen 14s ease-out both}
@keyframes kphKen{from{transform:scale(1.12) translate3d(0,0,0)}to{transform:scale(1) translate3d(0,0,0)}}
.kp-home-hero-slider{will-change:transform}

.kp-home-hero-title-accent{
  background:linear-gradient(90deg,#c084fc,#f0abfc,#a78bfa,#e879f9,#c084fc);background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  animation:kphFlow 7s linear infinite;filter:drop-shadow(0 6px 26px rgba(192,38,211,.35))}
@keyframes kphFlow{to{background-position:300% 0}}

.kp-home-hero-glow{transition:transform .6s cubic-bezier(.2,.8,.2,1);transform:translate3d(var(--kph-gx,0px),var(--kph-gy,0px),0)}

/* Eyebrow dot: live pulse */
.kp-home-eyebrow-dot{animation:kphPing 2s cubic-bezier(0,0,.2,1) infinite}
@keyframes kphPing{0%{box-shadow:0 0 0 0 rgba(74,222,128,.55)}80%,100%{box-shadow:0 0 0 9px rgba(74,222,128,0)}}

/* Primary CTA: glowing, magnetic */
.kp-home-btn-primary{position:relative;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease}
.kp-home-btn-primary:hover{box-shadow:0 18px 50px rgba(124,58,237,.55),0 0 0 1px rgba(233,213,255,.25) inset}
.kp-home-btn-primary i{transition:transform .25s ease}
.kp-home-btn-primary:hover i{transform:translateX(4px)}

/* Metrics: glass + lift */
.kp-home-metric{transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s ease,background .35s ease}
.kp-home-metric:hover{transform:translateY(-3px);border-color:rgba(192,132,252,.35)}
.kp-home-metric-icon{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.kp-home-metric:hover .kp-home-metric-icon{transform:rotate(-8deg) scale(1.08)}

/* ---------- Search: animated hint + glow ---------- */
.kp-search-shell{transition:box-shadow .3s ease,border-color .3s ease}
.kp-search-shell:focus-within{box-shadow:0 0 0 3px rgba(168,85,247,.28),0 20px 50px rgba(124,58,237,.25)}
.kp-search-input::placeholder{transition:opacity .25s ease}
.kp-search-input.kph-fade::placeholder{opacity:0}

/* ---------- Store switch + category rail ---------- */
.kp-store-switch-indicator{transition:transform .45s cubic-bezier(.2,.8,.2,1),width .45s cubic-bezier(.2,.8,.2,1)!important}
.kp-category-rail{scroll-snap-type:x proximity;scroll-behavior:smooth;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 28px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 28px),transparent 100%)}
.kp-category-rail > *{scroll-snap-align:start}
.kp-category-rail.kph-grab{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}

/* ---------- Product cards ---------- */
.kp-product-card{transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease,border-color .45s ease}
.kp-product-card:hover{border-color:rgba(192,132,252,.45)}
.kp-product-image-stage{overflow:hidden}
.kp-product-image-stage img{transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .8s ease}
.kp-product-card:hover .kp-product-image-stage img{transform:scale(1.07);filter:saturate(1.15) brightness(1.05)}
.kp-product-name{transition:color .3s ease}
.kp-product-card:hover .kp-product-name{color:#f5f3ff}

/* Animated gradient ring around the hovered / pressed card */
.kph-ring{position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;z-index:4;opacity:0;
  background:conic-gradient(from var(--kph-a,0deg),#7c3aed,#c026d3,#a855f7,#22d3ee,#7c3aed);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  transition:opacity .4s ease;animation:kphSpin 4s linear infinite}
.kp-product-card:hover > .kph-ring,.kp-product-card:focus-visible > .kph-ring{opacity:1}
@property --kph-a{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes kphSpin{to{--kph-a:360deg}}

/* Badges and status */
.kp-service-price{font-variant-numeric:tabular-nums}

/* ---------- Section headers: animated kicker line ---------- */
.kph-kline{display:inline-block;vertical-align:middle;width:0;height:2px;margin-left:10px;border-radius:2px;
  background:linear-gradient(90deg,#a855f7,transparent);transition:width .9s cubic-bezier(.2,.8,.2,1)}
.kp-section-header.kph-in .kph-kline{width:42px}
.kp-section-link i{transition:transform .25s ease}
.kp-section-link:hover i{transform:translateX(4px)}

/* ---------- Wallet banner: 3D depth ---------- */
.kp-wallet-banner{transition:transform .6s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d}
.kp-wallet-banner.kph-tilting{transition:transform .1s linear}

/* ---------- Why cards: floating icons, staggered ---------- */
.kp-why-icon{animation:kphFloat 5s ease-in-out infinite}
.kp-why-card:nth-child(2) .kp-why-icon{animation-delay:-1.2s}
.kp-why-card:nth-child(3) .kp-why-icon{animation-delay:-2.4s}
.kp-why-card:nth-child(4) .kp-why-icon{animation-delay:-3.6s}
@keyframes kphFloat{50%{transform:translateY(-6px)}}
.kp-why-card{transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .4s ease}
.kp-why-card:hover{transform:translateY(-4px);border-color:rgba(192,132,252,.35)}

@media (prefers-reduced-motion:reduce){
  .kp-home-hero-slide.is-active img,.kp-home-hero-title-accent,.kp-home-eyebrow-dot,.kph-ring,.kp-why-icon{animation:none!important}
}