/* Hindivine motion + luxury layer (Oct 2026).
   Only transform/opacity are animated, so it stays smooth on phones, tablets and desktops.
   Nothing is hidden unless lp-motion.js has started (html.lp-motion), and everything is
   switched off for visitors who ask their device for reduced motion. */

:root{--lpm-ease:cubic-bezier(.22,1,.36,1);--lpm-dur:.8s}

/* ---------- scroll reveal ---------- */
html.lp-motion .lpm{opacity:0!important;transform:translate3d(0,26px,0)!important;transition:opacity var(--lpm-dur) var(--lpm-ease),transform calc(var(--lpm-dur) + .1s) var(--lpm-ease)!important;transition-delay:calc(var(--lpm-d,0) * 80ms)!important;will-change:opacity,transform}
html.lp-motion .lpm.lpm-scale{transform:translate3d(0,18px,0) scale(.97)!important}
html.lp-motion .lpm.lpm-left{transform:translate3d(-26px,0,0)!important}
html.lp-motion .lpm.lpm-in{opacity:1!important;transform:none!important}
html.lp-motion .lpm.lpm-done{will-change:auto}

/* hero: gentle entrance on page load */
html.lp-motion .lpm-hero{opacity:0;transform:translate3d(0,18px,0);animation:lpmUp .9s var(--lpm-ease) forwards;animation-delay:calc(var(--lpm-d,0) * 110ms + 80ms)}
html.lp-motion .lpm-hero-img{opacity:0;transform:scale(.96);animation:lpmZoom 1.1s var(--lpm-ease) .25s forwards}
@keyframes lpmUp{to{opacity:1;transform:none}}
@keyframes lpmZoom{to{opacity:1;transform:none}}

/* ---------- luxury plates: stats ---------- */
html body .rg .stats .stat{position:relative;isolation:isolate;overflow:hidden;transition:transform .5s var(--lpm-ease)}
html body .rg .stats .stat::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(var(--hvr-A9E8D3,169,232,211),.65),rgba(var(--hvr-A9E8D3,169,232,211),.08) 40%,rgba(var(--hvr-46C9A1,70,201,161),.35) 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:1}
html body .rg .stats .stat b{text-shadow:0 0 24px rgba(var(--hvr-46C9A1,70,201,161),.35)}
html body .rg .stats .stat .si{transition:transform .6s var(--lpm-ease)}
/* light sweep across the plate */
html body .rg .stats .stat .lpm-sheen,html body .lp-sheen-host .lpm-sheen{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.16) 48%,transparent 66%);transform:translateX(-120%)}
html.lp-motion body .rg .stats .stat.lpm-in .lpm-sheen{animation:lpmSheen 1.6s var(--lpm-ease) calc(var(--lpm-d,0) * 120ms + .4s) 1 both}
@keyframes lpmSheen{to{transform:translateX(120%)}}

/* ---------- luxury cards: hairline gradient border ---------- */
html body .rg section:not(.rg-scene-dark):not(.rg-scene-mesh):not(.hero) :is(.card,.pcard,.fcard,.kr-card,.relcard2,.feat,.doccard,.sidecard2):not(.split>.card:nth-child(2)){border:1px solid transparent!important;background:linear-gradient(#FFFFFF,#FFFFFF) padding-box,linear-gradient(140deg,rgba(var(--hvr-46C9A1,70,201,161),.55),rgba(var(--hvr-E2E9E5,226,233,229),.9) 38%,rgba(var(--hvr-E2E9E5,226,233,229),.9) 62%,rgba(var(--hvr-46C9A1,70,201,161),.38)) border-box!important}
html body .rg :is(.card,.pcard,.fcard,.kr-card,.relcard2,.feat,figure.yt,.bshot,.lp-wa-cta){transition:transform .5s var(--lpm-ease),box-shadow .5s var(--lpm-ease)}
html body .rg :is(.pill-ic,.fi2,.h-ic,.kr-ic,.ri,.si,.q-ic){transition:transform .55s var(--lpm-ease)}

/* ---------- hover (mouse and trackpad only, so phones never get stuck states) ---------- */
@media (hover:hover) and (pointer:fine){
  html body .rg :is(.card,.pcard,.fcard,.kr-card,.relcard2,.feat,.bshot):hover{transform:translateY(-5px)}
  html body .rg :is(.card,.pcard,.fcard,.feat):hover :is(.pill-ic,.fi2,.ri,.q-ic){transform:translateY(-2px) rotate(-6deg) scale(1.06)}
  html body .rg .kr-card:hover .kr-ic{transform:scale(1.08)}
  html body .rg .stats .stat:hover{transform:translateY(-4px)}
  html body .rg .stats .stat:hover .si{transform:rotate(-8deg) scale(1.08)}
  html body .rg figure.yt:hover{transform:translateY(-4px)}
  html body .rg figure.yt img{transition:transform .8s var(--lpm-ease)}
  html body .rg figure.yt:hover img{transform:scale(1.05)}
  html body .rg :is(.bshot,.is-fig,.shot) img{transition:transform .9s var(--lpm-ease)}
  html body .rg :is(.bshot,.is-fig,.shot):hover img{transform:scale(1.04)}
  html body :is(.btn,.hx-btn,.lp-wa-btn,.mbtn,.qsubmit){position:relative;overflow:hidden}
  html body :is(.btn,.hx-btn,.lp-wa-btn,.qsubmit)::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-18deg);transition:left .7s var(--lpm-ease);pointer-events:none}
  html body :is(.btn,.hx-btn,.lp-wa-btn,.qsubmit):hover::after{left:120%}
  html body :is(.btn,.hx-btn,.lp-wa-btn,.qsubmit){transition:transform .35s var(--lpm-ease),box-shadow .35s var(--lpm-ease),background .3s}
  html body :is(.btn,.hx-btn,.lp-wa-btn,.qsubmit):hover{transform:translateY(-2px)}
}
/* touch: quick press feedback */
@media (hover:none){
  html body :is(.btn,.hx-btn,.lp-wa-btn,.mbtn,.qsubmit,.kr-card,.lp-bar a){transition:transform .18s ease}
  html body :is(.btn,.hx-btn,.lp-wa-btn,.mbtn,.qsubmit,.kr-card,.lp-bar a):active{transform:scale(.97)}
}

/* WhatsApp: soft attention ring every few seconds */
html.lp-motion body .lp-bar .lp-bar-wa,html.lp-motion body .fl-btn.fl-wa{position:relative}
html.lp-motion body .lp-bar .lp-bar-wa::before,html.lp-motion body .fl-btn.fl-wa::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 rgba(var(--hvr-1E9E57,30,158,87),.55);animation:lpmRing 3.2s ease-out 2s infinite;pointer-events:none}
@keyframes lpmRing{0%{box-shadow:0 0 0 0 rgba(var(--hvr-1E9E57,30,158,87),.5)}55%,100%{box-shadow:0 0 0 12px rgba(var(--hvr-1E9E57,30,158,87),0)}}

/* header: smooth colour/size changes while scrolling */
html body .hx-nav .hx-nav-in{transition:background .4s ease,box-shadow .4s ease,transform .45s var(--lpm-ease),padding .4s var(--lpm-ease)!important}

/* section heading rule grows in */
html.lp-motion body .rg section.sec .h2::before{transform-origin:left;transform:scaleX(0);transition:transform 1s var(--lpm-ease) .2s}
html.lp-motion body .rg section.sec .rg-head.lpm-in .h2::before{transform:scaleX(1)}

/* reduced motion: everything visible, nothing moves */
@media (prefers-reduced-motion:reduce){
  html.lp-motion .lpm,html.lp-motion .lpm-hero,html.lp-motion .lpm-hero-img{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
  html body *{scroll-behavior:auto!important}
  html.lp-motion body .lp-bar .lp-bar-wa::before,html.lp-motion body .fl-btn.fl-wa::before{animation:none}
}
@media print{html.lp-motion .lpm,html.lp-motion .lpm-hero{opacity:1!important;transform:none!important}}