/* ==========================================================
   Parvaz V9.7 — richer motion, Android-safe
   Only transform/opacity/background-position are animated on mobile.
   Mobile drawer rules are intentionally untouched.
   ========================================================== */

:root{--pv-motion-ease:cubic-bezier(.2,.8,.2,1);--pv-motion-spring:cubic-bezier(.16,1,.3,1)}

/* richer scroll reveal */
.reveal{
  opacity:0;
  transform:translate3d(0,34px,0) scale(.985);
  transition:
    opacity .78s var(--pv-motion-ease),
    transform .88s var(--pv-motion-spring)!important;
  transition-delay:var(--pv-delay,0ms)!important;
}
.reveal.visible{opacity:1;transform:translate3d(0,0,0) scale(1)}

/* home hero motion */
@keyframes pvPhoneFloat{0%,100%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(0,-13px,0) rotate(.35deg)}}
@keyframes pvCardLeftFloat{0%,100%{transform:translate3d(0,0,0) rotate(2.4deg)}50%{transform:translate3d(-5px,-10px,0) rotate(1.1deg)}}
@keyframes pvCardRightFloat{0%,100%{transform:translate3d(0,0,0) rotate(-2.2deg)}50%{transform:translate3d(6px,-9px,0) rotate(-1deg)}}
@keyframes pvTagBob{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-7px,0)}}
@keyframes pvPillBreath{0%,100%{transform:translateY(0);opacity:.9}50%{transform:translateY(-3px);opacity:1}}
@keyframes pvKickerDot{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.55);opacity:1}}
@keyframes pvGradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes pvSoftPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
@keyframes pvArrowNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(-4px)}}

.hero-phone{animation:pvPhoneFloat 5.6s ease-in-out infinite;will-change:transform}
.hero-card.left{animation:pvCardLeftFloat 6.8s ease-in-out infinite;will-change:transform}
.hero-card.right{animation:pvCardRightFloat 7.4s ease-in-out infinite;will-change:transform}
.hero-tag.t1{animation:pvTagBob 4.2s ease-in-out infinite}
.hero-tag.t2{animation:pvTagBob 4.8s ease-in-out .7s infinite}
.hero-pills span{animation:pvPillBreath 4.6s ease-in-out infinite}
.hero-pills span:nth-child(2){animation-delay:.5s}.hero-pills span:nth-child(3){animation-delay:1s}.hero-pills span:nth-child(4){animation-delay:1.5s}
.kicker i,.topline .live i{animation:pvKickerDot 2.5s ease-in-out infinite}
.hero h1 em{background-size:220% 220%;animation:pvGradientShift 7s ease infinite}

/* section/card interaction */
.flow-step,.audience-card,.story-card,.trust-card,.plan,.marketer-card,.company-mark,
.app-download-card,.tool-grid article,.marketer-flow-grid article,.install-steps article,
.value-card,.about-stat,.about-card,.plan-card,.faq-item{
  transition:transform .36s var(--pv-motion-spring),box-shadow .36s ease,border-color .36s ease!important;
}
@media(hover:hover) and (pointer:fine){
  .flow-step:hover,.audience-card:hover,.story-card:hover,.trust-card:hover,.plan:hover,.marketer-card:hover,
  .app-download-card:hover,.tool-grid article:hover,.marketer-flow-grid article:hover,.install-steps article:hover,
  .value-card:hover,.about-stat:hover,.about-card:hover,.plan-card:hover{
    transform:translate3d(0,-8px,0) scale(1.012);
  }
  .btn svg,.button svg,.header-cta svg,.instagram-link svg{transition:transform .25s ease}
  .btn:hover svg,.button:hover svg,.header-cta:hover svg,.instagram-link:hover svg{transform:translateX(-5px)}
}

/* subtle action shimmer without blur/filter */
.btn-primary,.btn-marketer,.header-cta,.button-primary,.button-dark,.button-light{position:relative;overflow:hidden;isolation:isolate}
.btn-primary:after,.btn-marketer:after,.header-cta:after,.button-primary:after,.button-dark:after,.button-light:after{
  content:"";position:absolute;inset:-2px auto -2px -46%;width:34%;pointer-events:none;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-18deg) translateX(-260%);
  animation:pvButtonShine 5.4s ease-in-out infinite;
}
@keyframes pvButtonShine{0%,62%{transform:skewX(-18deg) translateX(-260%)}82%,100%{transform:skewX(-18deg) translateX(520%)}}

/* scene art comes alive */
.scene-art.visible,.company-mark.visible{animation:pvSoftPulse 7.5s ease-in-out 1.05s infinite}
.scene-copy.visible .section-label,.section-head.visible .section-label{animation:pvArrowNudge 3.2s ease-in-out 1.1s infinite}

/* sub pages — automatic entry classes added by JS */
.pv-motion-item{opacity:0;transform:translate3d(0,28px,0) scale(.988);transition:opacity .7s var(--pv-motion-ease),transform .82s var(--pv-motion-spring);transition-delay:var(--pv-delay,0ms)}
.pv-motion-item.pv-motion-in{opacity:1;transform:translate3d(0,0,0) scale(1)}

/* marketer dashboard */
@keyframes pvDashboardFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-9px,0)}}
@keyframes pvBarGrow{from{transform:scaleY(.12);opacity:.45}to{transform:scaleY(1);opacity:1}}
@keyframes pvSalePop{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
.marketer-main-hero .dashboard-card{animation:pvDashboardFloat 6.2s ease-in-out infinite;will-change:transform}
.dashboard-card .chart-bars i{transform-origin:center bottom;animation:pvBarGrow .8s var(--pv-motion-spring) both;animation-delay:calc(var(--pv-i,0) * 85ms + 480ms)}
.last-sale .sale-icon{animation:pvSalePop 2.8s ease-in-out infinite}

/* download/app/logo life */
@keyframes pvLogoFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-5px) rotate(2deg)}}
.app-download-card img,.download-contact img,.footer-brand img{animation:pvLogoFloat 5.2s ease-in-out infinite}

/* desktop can take a little more motion */
@media(min-width:1051px){
  .scene-ripple{animation-duration:5.2s!important}
  .map-pulse{animation-duration:1.9s!important}
}

/* Mobile: visible motion, but only compositor-friendly properties. */
@media(max-width:1050px){
  .reveal{transform:translate3d(0,24px,0) scale(.992);transition-duration:.62s,.72s!important}
  .hero-phone{animation-duration:6.8s;animation-name:pvPhoneFloat}
  .hero-card.left{animation:pvCardLeftFloat 8.2s ease-in-out infinite!important}
  .hero-tag{animation-duration:5.4s!important}
  .hero-pills span{animation:none}
  .scene-art.visible,.company-mark.visible{animation:none}
  .marketer-main-hero .dashboard-card{animation:pvDashboardFloat 7.6s ease-in-out infinite}
  .pv-motion-item{transform:translate3d(0,20px,0);transition-duration:.58s,.68s}
  .btn-primary:after,.btn-marketer:after,.header-cta:after,.button-primary:after,.button-dark:after,.button-light:after{animation-duration:7s}
}

/* Older/weak devices get entrance motion only, not continuous loops. */
.low-power .hero-phone,.low-power .hero-card,.low-power .hero-tag,.low-power .kicker i,.low-power .topline .live i,
.low-power .marketer-main-hero .dashboard-card,.low-power .last-sale .sale-icon,.low-power .app-download-card img,
.low-power .download-contact img,.low-power .footer-brand img,.low-power .btn-primary:after,.low-power .btn-marketer:after,
.low-power .header-cta:after,.low-power .button-primary:after,.low-power .button-dark:after,.low-power .button-light:after{
  animation:none!important;
}
.low-power .reveal{transition:opacity .4s ease,transform .45s ease!important;opacity:0!important;transform:translate3d(0,12px,0)!important}
.low-power .reveal.visible{opacity:1!important;transform:none!important}

@media(prefers-reduced-motion:reduce){
  .reveal,.pv-motion-item{opacity:1!important;transform:none!important;transition:none!important}
  .hero-phone,.hero-card,.hero-tag,.hero-pills span,.kicker i,.topline .live i,.hero h1 em,
  .scene-art,.company-mark,.section-label,.marketer-main-hero .dashboard-card,.dashboard-card .chart-bars i,
  .last-sale .sale-icon,.app-download-card img,.download-contact img,.footer-brand img,
  .btn-primary:after,.btn-marketer:after,.header-cta:after,.button-primary:after,.button-dark:after,.button-light:after{
    animation:none!important;
  }
}