/* YallaCreator motion layer */
@keyframes mFloat{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-16px) rotate(calc(var(--r,0deg) + 2deg))}}
@keyframes mFloat2{0%,100%{transform:translateY(0)}50%{transform:translateY(14px)}}
@keyframes mPulse{0%{box-shadow:0 0 0 0 rgba(58,155,255,.55)}100%{box-shadow:0 0 0 18px rgba(58,155,255,0)}}
@keyframes mShine{0%{transform:translateX(-130%) skewX(-20deg)}60%,100%{transform:translateX(230%) skewX(-20deg)}}
@keyframes mGrad{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes mSpin{to{transform:rotate(360deg)}}
@keyframes mBlob{0%,100%{border-radius:42% 58% 60% 40%/45% 40% 60% 55%}50%{border-radius:58% 42% 40% 60%/55% 60% 40% 45%}}
@keyframes mRise{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:.9}100%{transform:translateY(-130px) scale(1.1);opacity:0}}
@keyframes mPop{0%{transform:scale(.4) rotate(-12deg);opacity:0}70%{transform:scale(1.12) rotate(3deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes mDash{to{stroke-dashoffset:0}}
@keyframes mConf{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--x),var(--y)) rotate(var(--rot));opacity:0}}
@keyframes mMarq{to{transform:translateX(-50%)}}

/* scroll reveal */
.mv{opacity:0;transform:translateY(34px) scale(.98);transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.mv.l{transform:translateX(-46px)}.mv.r{transform:translateX(46px)}.mv.z{transform:scale(.8)}
.mv.in{opacity:1;transform:none}

/* hero */
.hero{position:relative}
.hero .hero-left>*{animation:mRise2 .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes mRise2{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.hero .hero-left>*:nth-child(1){animation-delay:.05s}.hero .hero-left>*:nth-child(2){animation-delay:.18s}.hero .hero-left>*:nth-child(3){animation-delay:.3s}.hero .hero-left>*:nth-child(4){animation-delay:.42s}.hero .hero-left>*:nth-child(5){animation-delay:.54s}
.hero-kicker{position:relative;animation:mRise2 .9s both,mPulse 2.4s 1s infinite!important}
.hero h1 .gradient,.rf-hero h1 .gradient,.section-head h2 .gradient{background:linear-gradient(90deg,#1257c4,#3a9bff,#7cc4ff,#1257c4);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:mGrad 5s linear infinite}
.blobby{animation:mBlob 9s ease-in-out infinite}
.hero-portrait.one{--r:-4deg;animation:mFloat 6s ease-in-out infinite}
.hero-portrait.two{--r:5deg;animation:mFloat2 7s ease-in-out infinite}
.m-orb{position:absolute;border-radius:50%;pointer-events:none;z-index:0;background:radial-gradient(circle at 30% 30%,#fff,#8fc8ff 45%,#2f86f0);opacity:.55;filter:blur(.5px);animation:mFloat var(--t,8s) ease-in-out infinite}
.hero .container,.rf-hero .container{position:relative;z-index:1}
.hero-chip{position:absolute;z-index:3;background:linear-gradient(180deg,#fff,#e8f3ff);border:1px solid #bcd8fb;border-radius:14px;padding:9px 14px;font-weight:800;font-size:13px;color:#0e3f8e;box-shadow:0 14px 30px rgba(20,90,200,.22);animation:mFloat var(--t,6s) ease-in-out infinite;white-space:nowrap}
.hero-chip b{color:#1d74ee}

/* buttons shine */
.btn{position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s}
.btn:hover{transform:translateY(-3px) scale(1.03)}
.btn:not(.outline):not(.light):after{content:"";position:absolute;top:0;left:0;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);animation:mShine 3.4s ease-in-out infinite;pointer-events:none}

/* cards hover + tilt */
.creator-card,.campaign-card,.how-card,.price-box,.role-card,.rf-step,.rf-card,.rf-coin{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.creator-card:hover,.campaign-card:hover,.how-card:hover,.price-box:hover,.rf-step:hover{transform:translateY(-8px);box-shadow:0 26px 54px rgba(20,100,220,.25)}
.role-card:hover{transform:translateY(-6px) scale(1.01)}
.how-number{transition:transform .5s}.how-card:hover .how-number{transform:scale(1.25) rotate(-6deg)}
.price-icon{animation:mFloat2 4.5s ease-in-out infinite}
.trust-logo{transition:transform .3s}.trust-logo:hover{transform:scale(1.12)}
.cta-panel{position:relative;overflow:hidden}
.cta-panel:before{content:"";position:absolute;width:420px;height:420px;right:-120px;top:-180px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.35),transparent 65%);animation:mFloat 7s ease-in-out infinite}
.eyebrow:before{animation:mPulse 2.2s infinite}

/* ===== Refer & Earn ===== */
.rf-hero{position:relative;overflow:hidden;background:radial-gradient(circle at 80% 20%,#cfe6ff 0,transparent 42%),radial-gradient(circle at 10% 70%,#e3f1ff 0,transparent 42%),linear-gradient(180deg,#eaf4ff,#fff)!important}
.rf-hero h1,.rf-hero p,.rf-hero .eyebrow,.rf-hero>.container>.btn{animation:mRise2 .9s cubic-bezier(.2,.7,.2,1) both}
.rf-hero .eyebrow{animation-delay:.05s}.rf-hero h1{animation-delay:.15s}.rf-hero p{animation-delay:.3s}.rf-hero>.container>.btn{animation-delay:.45s}
.rf-coin{position:relative;background:linear-gradient(180deg,#fff,#eaf4ff);border:1px solid #cfe3fb;animation:mPop .8s cubic-bezier(.2,.9,.3,1.2) both}
.rf-coin:nth-child(1){animation-delay:.6s}.rf-coin:nth-child(3){animation-delay:.85s}
.rf-coin b{background:linear-gradient(90deg,#1257c4,#3a9bff,#1257c4)!important;background-size:200% auto!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent;animation:mGrad 4s linear infinite;font-variant-numeric:tabular-nums}
.rf-coin:hover{transform:translateY(-10px) rotate(-2deg) scale(1.05)}
.rf-plus{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;background:linear-gradient(180deg,#58b0ff,#1257c4);color:#fff;box-shadow:0 10px 24px rgba(20,100,220,.35);animation:mPop .6s .75s both,mPulse 2.4s 1.5s infinite}
.rf-plus.cl{font-size:26px}
.rf-fly{position:absolute;z-index:0;pointer-events:none;font-size:var(--s,34px);animation:mFloat var(--t,7s) ease-in-out infinite;filter:drop-shadow(0 10px 14px rgba(20,90,200,.25));opacity:.9}
.rf-sec{overflow:hidden}
.rf-steps{position:relative}
.rf-steps:before{content:"";position:absolute;left:6%;right:6%;top:51px;height:3px;border-radius:3px;background:linear-gradient(90deg,#3a9bff,#9fd0ff,#3a9bff);background-size:200% 100%;animation:mGrad 3s linear infinite;opacity:.45;z-index:0}
.rf-step{position:relative;z-index:1;background:linear-gradient(180deg,#fff,#f1f8ff);border-color:#cfe3fb}
.rf-step i{background:linear-gradient(180deg,#58b0ff,#1257c4);box-shadow:0 10px 22px rgba(20,100,220,.35);animation:mFloat2 4s ease-in-out infinite;color:#fff}
.rf-step:nth-child(2) i{animation-delay:.4s}.rf-step:nth-child(3) i{animation-delay:.8s}.rf-step:nth-child(4) i{animation-delay:1.2s}
.rf-sec.alt{background:linear-gradient(180deg,#eef6ff,#fff)}
.rf-card.a{background:linear-gradient(135deg,#dcecff,#f3f9ff);border:1px solid #cfe3fb}.rf-card.b{background:linear-gradient(135deg,#fff0e0,#fffaf3);border:1px solid #fbe0c4}
.rf-card:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:0 24px 50px rgba(20,100,220,.2)}
.rf-card li{list-style:none;position:relative;padding-left:4px}.rf-card ul{padding-left:6px}
.rf-card li:before{content:"\2713";display:inline-grid;place-items:center;width:18px;height:18px;margin-right:8px;border-radius:50%;background:#1d74ee;color:#fff;font-size:11px;font-weight:800}
.rf-marq{overflow:hidden;background:linear-gradient(180deg,#58b0ff,#1257c4);color:#fff;padding:14px 0;font-weight:800;letter-spacing:.5px;white-space:nowrap}
.rf-marq div{display:inline-block;animation:mMarq 22s linear infinite}.rf-marq span{margin:0 26px}
.conf{position:fixed;width:9px;height:14px;border-radius:2px;pointer-events:none;z-index:9999;animation:mConf 1.3s ease-out forwards}
@media(max-width:860px){.rf-steps:before{display:none}.hero-chip{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.mv{opacity:1;transform:none}}