/* ===== NEXTFON · animations.css ===== */

/* scroll reveal base states */
[data-anim]{opacity:0;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
[data-anim="fade-up"]{transform:translateY(40px)}
[data-anim="fade-right"]{transform:translateX(-40px)}
[data-anim="fade-left"]{transform:translateX(40px)}
[data-anim="zoom"]{transform:scale(.92)}
[data-anim].in{opacity:1;transform:none}

/* stagger children a touch when marked */
.products__cards .pcard,.services__cards .scard,.how__steps .step,.testi__cards .tcard{
  transition-delay:calc(var(--i,0) * 70ms);
}

@keyframes load{to{width:100%}}
@keyframes ripple{to{transform:scale(4);opacity:0}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.08);opacity:1}}
@keyframes sheen{0%,100%{transform:translateX(-30%) rotate(20deg)}50%{transform:translateX(220%) rotate(20deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
@keyframes floaty{0%,100%{transform:rotate(-12deg) translateY(0)}50%{transform:rotate(-12deg) translateY(-14px)}}

.hero__phone .phone{animation:floaty 5s ease-in-out infinite}

/* ============================================================
   EXTRA ANIMATIONS — reveal variants, hovers, ambient motion
   ============================================================ */

/* --- more reveal variants --- */
[data-anim="fade-down"]{transform:translateY(-40px)}
[data-anim="flip"]{transform:perspective(800px) rotateX(-28deg);transform-origin:top}
[data-anim="blur"]{filter:blur(12px);transform:translateY(24px)}
[data-anim="pop"]{transform:scale(.8)}
[data-anim="rotate"]{transform:rotate(-6deg) scale(.9)}
[data-anim].in{filter:none}

/* --- keyframes --- */
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes popIn{0%{transform:scale(1)}40%{transform:scale(1.25) rotate(-8deg)}100%{transform:scale(1.12)}}
@keyframes spinDash{to{transform:rotate(360deg)}}
@keyframes gradientShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes shimmer{0%{background-position:-160% 0}100%{background-position:160% 0}}
@keyframes glowPulse{0%,100%{box-shadow:0 0 0 0 rgba(111,45,189,.28)}50%{box-shadow:0 0 22px 4px rgba(111,45,189,.30)}}
@keyframes underlineGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes starTwinkle{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes wobble{0%,100%{transform:rotate(0)}25%{transform:rotate(6deg)}75%{transform:rotate(-6deg)}}
@keyframes slideBg{to{background-position:200% center}}

/* --- top scroll progress bar --- */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:1000;
  background:linear-gradient(90deg,var(--purple),var(--orange));box-shadow:0 0 10px rgba(255,101,0,.5);transition:width .1s linear}

/* --- animated gradient on hero accent words --- */
.hero__title .txt-purple,.hero__title .txt-orange{
  background:linear-gradient(90deg,#6F2DBD,#b07bff,#FF6500,#6F2DBD);
  background-size:300% auto;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:slideBg 6s linear infinite}
.hero__title .txt-orange{background-image:linear-gradient(90deg,#FF6500,#ffb37a,#6F2DBD,#FF6500)}

/* --- section titles: animated underline on reveal --- */
.section-title,.testi__head h2,.services__head h2,.products__head h2{position:relative}
.section-title.in::after,.products__head [data-anim].in h2::after{}
.section-title::after{content:"";display:block;height:3px;width:64px;margin-top:.5rem;border-radius:3px;
  background:linear-gradient(90deg,var(--purple),var(--orange));transform:scaleX(0);transform-origin:left;transition:transform .7s .2s ease}
.section-title.center::after{margin-inline:auto;transform-origin:center}
.section-title.in::after{transform:scaleX(1)}

/* --- buttons: shine sweep + glow --- */
.btn::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:left .6s ease}
.btn:hover::after{left:160%}
.btn--wa:hover{animation:glowPulse 1.4s ease-in-out infinite}

/* --- cards: lift + glow + inner icon reaction --- */
.pcard,.scard,.tcard{will-change:transform}
.pcard:hover{box-shadow:0 26px 60px rgba(111,45,189,.22);border-color:rgba(111,45,189,.35)}
.scard:hover .scard__ic{animation:wobble .6s ease}
.pcard:hover .pcard__img{background:radial-gradient(120% 100% at 50% 0,#fff,#efe4ff)}
.tcard:hover{transform:translateY(-8px) scale(1.02)}
.tcard .stars{background:linear-gradient(90deg,var(--orange),#ffcf99,var(--orange));background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.tcard:hover .stars{animation:shimmer 1.2s linear infinite}
.tcard:hover .avatar{animation:popIn .5s ease forwards}

/* --- feature / stat / cta icons: hover pop --- */
.feat-ic,.stat__ic,.cta__ic,.scard__ic{transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.hero__features li:hover .feat-ic{transform:scale(1.15) rotate(-6deg)}
.stat:hover .stat__ic{transform:translateY(-4px) scale(1.1)}
.cta__item:hover .cta__ic{transform:scale(1.12) rotate(6deg)}

/* --- how-it-works: rotating dashed rings + number pop --- */
.step:hover .step__ic{animation:spinDash 4s linear infinite;border-color:var(--purple)}
.step:hover .step__num{animation:popIn .5s ease forwards}
.step__ic{transition:box-shadow .3s}
.step:hover .step__ic{box-shadow:0 0 0 6px rgba(111,45,189,.08)}

/* --- social icons hover --- */
.soc svg,.footer__col a svg,.soc--brand svg{transition:transform .3s}
.soc:hover svg,.soc--brand:hover svg{transform:scale(1.25) translateY(-2px)}

/* --- nav brand + logos subtle hover --- */
.brand__logo{transition:transform .35s,filter .35s}
.brand:hover .brand__logo{transform:scale(1.05)}

/* --- sell banner phone + check items --- */
.phone--sm{animation:floatY 4.5s ease-in-out infinite}
.sell__mid li{transition:transform .25s}
.sell__mid li:hover{transform:translateX(6px)}
.sell__mid li:hover .ic{animation:wobble .5s ease}

/* --- faq open reaction --- */
.faq__item{transition:box-shadow .3s,transform .3s}
.faq__item:hover{transform:translateY(-2px)}
.faq__item.open{animation:glowPulse 1.6s ease-in-out 1}

/* --- topbar items hover --- */
.topbar__item{transition:color .25s}
.topbar__item:hover{color:var(--purple)}

/* --- ambient float on hero feature icons (staggered) --- */
.hero__features li:nth-child(1) .feat-ic{animation:floatY 5s ease-in-out infinite}
.hero__features li:nth-child(2) .feat-ic{animation:floatY 5s ease-in-out .6s infinite}
.hero__features li:nth-child(3) .feat-ic{animation:floatY 5s ease-in-out 1.2s infinite}
.hero__features li:nth-child(4) .feat-ic{animation:floatY 5s ease-in-out 1.8s infinite}

/* ============================================================
   NEON MODE — glowing borders on boxes/images + neon text
   ============================================================ */
@keyframes neonPulse{
  0%,100%{box-shadow:0 0 6px rgba(111,45,189,.55),0 0 16px rgba(111,45,189,.30)}
  50%{box-shadow:0 0 16px rgba(255,101,0,.60),0 0 34px rgba(111,45,189,.55)}
}
@keyframes neonBorderMove{0%{background-position:0% 50%}100%{background-position:300% 50%}}
@keyframes textNeon{
  0%,100%{text-shadow:0 0 6px rgba(111,45,189,.45)}
  50%{text-shadow:0 0 14px rgba(111,45,189,.85),0 0 26px rgba(255,101,0,.55)}
}
@keyframes textNeonOrange{
  0%,100%{text-shadow:0 0 6px rgba(255,101,0,.5)}
  50%{text-shadow:0 0 16px rgba(255,101,0,.9),0 0 30px rgba(255,101,0,.5)}
}
@keyframes flicker{0%,18%,22%,80%,100%{opacity:1}20%,55%{opacity:.7}}

/* animated neon halo behind boxes */
.pcard,.scard,.tcard,.faq__item,.stats__inner,.cta__inner,.sell__inner,.step__ic,.pcard__img{
  position:relative;isolation:isolate}
.pcard::before,.scard::before,.tcard::before,.faq__item::before,
.stats__inner::before,.cta__inner::before,.sell__inner::before{
  content:"";position:absolute;inset:-2px;border-radius:inherit;z-index:-1;
  background:linear-gradient(120deg,#6F2DBD,#FF6500,#b07bff,#6F2DBD,#FF6500);
  background-size:300% 300%;filter:blur(8px);opacity:.28;
  animation:neonBorderMove 6s linear infinite;transition:opacity .35s}
.pcard:hover::before,.scard:hover::before,.tcard:hover::before,.faq__item:hover::before{opacity:.9}
.stats__inner::before,.cta__inner::before,.sell__inner::before{opacity:.5;filter:blur(12px)}

/* crisp neon ring on top of the box */
.pcard,.scard,.tcard{border-color:rgba(111,45,189,.45)}
.pcard:hover,.scard:hover,.tcard:hover{animation:neonPulse 1.6s ease-in-out infinite;border-color:#FF6500}

/* neon frame around product images */
.pcard__img{box-shadow:inset 0 0 0 1px rgba(111,45,189,.25),0 0 10px rgba(111,45,189,.15)}
.pcard:hover .pcard__img{box-shadow:inset 0 0 0 2px rgba(255,101,0,.7),0 0 22px rgba(111,45,189,.45)}

/* hero phone stronger neon */
.hero__phone .phone{box-shadow:0 30px 60px rgba(30,10,60,.4),inset 0 0 0 2px #444,0 0 26px rgba(111,45,189,.55),0 0 46px rgba(255,101,0,.35)}

/* step rings neon */
.step__ic{box-shadow:0 0 14px rgba(111,45,189,.30)}
.step:hover .step__ic{box-shadow:0 0 8px rgba(111,45,189,.5),0 0 24px rgba(255,101,0,.5)}

/* NEON TEXT */
.section-title,.testi__head h2,.services__head h2,.products__head h2,.hero__title{animation:textNeon 3.2s ease-in-out infinite}
.eyebrow{animation:textNeon 2.6s ease-in-out infinite}
.pcard__price{animation:textNeonOrange 2.4s ease-in-out infinite}
.stat__num{animation:textNeon 3s ease-in-out infinite}
.sell__phone,.cta__item strong{animation:textNeon 3.4s ease-in-out infinite}
.brand__logo{filter:drop-shadow(0 0 6px rgba(111,45,189,.35))}
.brand:hover .brand__logo{filter:drop-shadow(0 0 12px rgba(255,101,0,.6))}
.fab{box-shadow:0 12px 28px rgba(37,211,102,.5),0 0 22px rgba(37,211,102,.6)}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  [data-anim]{opacity:1;transform:none}
}