/* ══════════════════════════════════════════════════════
   ANIMATIONS PREMIUM v3 — FrenchHosting
   Scroll-driven + Interactive + Ambient
══════════════════════════════════════════════════════ */

/* ── SCROLL REVEAL BASE ── */
.scroll-reveal{opacity:0;transform:translateY(60px);transition:all .9s cubic-bezier(.16,1,.3,1)}
.scroll-reveal.visible{opacity:1;transform:none}

.reveal-left{opacity:0;transform:translateX(-80px);transition:all .9s cubic-bezier(.16,1,.3,1)}
.reveal-left.visible{opacity:1;transform:none}

.reveal-right{opacity:0;transform:translateX(80px);transition:all .9s cubic-bezier(.16,1,.3,1)}
.reveal-right.visible{opacity:1;transform:none}

.reveal-scale{opacity:0;transform:scale(.8);transition:all 1s cubic-bezier(.16,1,.3,1)}
.reveal-scale.visible{opacity:1;transform:scale(1)}

.reveal-rotate{opacity:0;transform:translateY(40px) rotate(-4deg);transition:all 1s cubic-bezier(.16,1,.3,1)}
.reveal-rotate.visible{opacity:1;transform:none}

.reveal-blur{opacity:0;transform:translateY(30px);filter:blur(12px);transition:all 1s cubic-bezier(.16,1,.3,1)}
.reveal-blur.visible{opacity:1;transform:none;filter:blur(0)}

/* ── STAGGER DELAYS ── */
.stagger-1{transition-delay:.06s!important}.stagger-2{transition-delay:.12s!important}
.stagger-3{transition-delay:.18s!important}.stagger-4{transition-delay:.24s!important}
.stagger-5{transition-delay:.30s!important}.stagger-6{transition-delay:.36s!important}
.stagger-7{transition-delay:.42s!important}.stagger-8{transition-delay:.48s!important}

/* ── NAV ENTRANCE ── */
.nav-float-wrap{animation:navDrop .8s .1s cubic-bezier(.16,1,.3,1) both}
@keyframes navDrop{from{opacity:0;transform:translateX(-50%) translateY(-30px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* ── NAV CTA GLOW ── */
.btn-cta{animation:ctaGlow 3s ease-in-out infinite}
@keyframes ctaGlow{
  0%,100%{box-shadow:0 4px 20px rgba(245,158,11,.4),inset 0 1px 0 rgba(255,255,255,.2)}
  50%{box-shadow:0 8px 35px rgba(245,158,11,.7),0 0 15px rgba(244,63,94,.25),inset 0 1px 0 rgba(255,255,255,.25)}
}

/* ── HERO GRADIENT TEXT SHIMMER ── */
.h1g{background-size:200% 200%;animation:gradShimmer 6s ease infinite}
@keyframes gradShimmer{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* ── HERO KICKER CURSOR ── */
.h-kicker{border-right:2px solid rgba(167,139,250,.6);animation:fadeUp .7s ease both,blink .7s step-end infinite}
@keyframes blink{0%,100%{border-right-color:rgba(167,139,250,.6)}50%{border-right-color:transparent}}

/* ── BUTTON SHINE SWEEP ── */
.btn-main,.btn-ghost,.btn-cta{position:relative;overflow:hidden}
.btn-main::after,.btn-cta::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);border-radius:inherit}
.btn-main:hover::after,.btn-cta:hover::after{animation:shine .7s ease forwards}
@keyframes shine{from{left:-100%}to{left:100%}}

/* ── GLASS PANEL FLOAT ── */
.hero-panel.visible{animation:panelFloat 6s ease-in-out infinite}
@keyframes panelFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* ── CHART BARS GROW ── */
.cbar{transform-origin:bottom;transform:scaleY(0);transition:transform .6s cubic-bezier(.34,1.56,.64,1)}
.cbar.bar-visible{transform:scaleY(1)}

/* ── STATS HOVER RIPPLE ── */
.sb{overflow:hidden;position:relative}
.sb::before{content:'';position:absolute;top:50%;left:50%;width:0;height:0;background:radial-gradient(circle,rgba(167,139,250,.12),transparent 70%);border-radius:50%;transform:translate(-50%,-50%);transition:width .6s,height .6s;z-index:0}
.sb:hover::before{width:300px;height:300px}

/* ── SERVICE CARDS 3D TILT ── */
.svc{transition:all .4s cubic-bezier(.16,1,.3,1)!important;transform-style:preserve-3d}
.svc:hover{transform:perspective(800px) rotateX(2deg) rotateY(-3deg) translateY(-10px)!important;box-shadow:0 24px 70px rgba(245,158,11,.18),inset 0 1px 0 rgba(255,255,255,.12)!important}
.svc:hover .sv-ico{animation:iconPop .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes iconPop{0%{transform:scale(1) rotate(0)}40%{transform:scale(1.25) rotate(-10deg)}70%{transform:scale(.92) rotate(4deg)}100%{transform:scale(1) rotate(0)}}
.svc:hover .sv-p{background:linear-gradient(90deg,#A78BFA,#FB7185,#A78BFA);background-size:200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:priceShim 2s linear infinite}
@keyframes priceShim{0%{background-position:-200% 0}100%{background-position:200% 0}}

/* ── FEATURE ICON GLOW ON HOVER ── */
.feat-g:hover .fg-ico{background:rgba(245,158,11,.15);border-color:rgba(245,158,11,.25);box-shadow:0 0 24px rgba(245,158,11,.25),inset 0 1px 0 rgba(255,255,255,.15);transform:scale(1.1)}

/* ── ACCORDION SMOOTH ── */
.a-body{transition:max-height .45s cubic-bezier(.16,1,.3,1)}
.a-it.on .a-body p{animation:contentIn .5s .1s ease both}
@keyframes contentIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.a-arr{transition:all .35s cubic-bezier(.34,1.56,.64,1)!important}
.a-it.on .a-arr{transform:rotate(45deg) scale(1.1)!important}

/* ── TESTIMONIAL AVATAR POP ── */
.tst:hover .tst-av{animation:avPop .5s cubic-bezier(.34,1.56,.64,1);box-shadow:0 0 24px rgba(245,158,11,.35)}
@keyframes avPop{0%{transform:scale(1)}50%{transform:scale(1.2)}100%{transform:scale(1)}}

/* ── TESTIMONIAL SHIMMER ── */
.tst::after{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.03),transparent);transform:skewX(-15deg);transition:none;pointer-events:none;border-radius:inherit}
.tst:hover::after{animation:cardShimmer 1.2s ease forwards}
@keyframes cardShimmer{from{left:-100%}to{left:150%}}

/* ── GUARANTEE EMOJI BOUNCE ── */
.grt-it:hover .grt-ico{animation:emBounce .6s cubic-bezier(.34,1.56,.64,1)}
@keyframes emBounce{0%{transform:scale(1) translateY(0)}30%{transform:scale(1.35) translateY(-8px)}50%{transform:scale(.88) translateY(2px)}100%{transform:scale(1) translateY(0)}}

/* ── CTA RAINBOW BORDER ── */
.cta-wrap::before{height:3px!important;background:linear-gradient(90deg,transparent,#6366f1,#f43f5e,#06b6d4,#10b981,#f59e0b,#6366f1,transparent)!important;background-size:300%!important;animation:rainbow 3.5s linear infinite!important}
@keyframes rainbow{0%{background-position:0% 50%}100%{background-position:300% 50%}}

/* ── SECTION DIVIDER GLOW ── */
.section.alt::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,#6366f1,#f43f5e,#06b6d4,transparent);background-size:200%;animation:secLine 6s linear infinite}
@keyframes secLine{0%{background-position:-200% 0}100%{background-position:200% 0}}

/* ── DROPDOWNS ANIMATED ── */
.ni.open .gdrop{animation:dropIn .35s cubic-bezier(.16,1,.3,1) both!important}
.ni.open .sdrop{animation:dropInS .35s cubic-bezier(.16,1,.3,1) both!important}
@keyframes dropIn{from{opacity:0;transform:translateX(-50%) translateY(12px) scale(.94);filter:blur(6px)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1);filter:blur(0)}}
@keyframes dropInS{from{opacity:0;transform:translateY(12px) scale(.94);filter:blur(6px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
.ni.open .ddi,.ni.open .sdi{animation:itemIn .3s cubic-bezier(.16,1,.3,1) both}
.ni.open .ddi:nth-child(1),.ni.open .sdi:nth-child(1){animation-delay:.04s}
.ni.open .ddi:nth-child(2),.ni.open .sdi:nth-child(2){animation-delay:.08s}
.ni.open .ddi:nth-child(3),.ni.open .sdi:nth-child(3){animation-delay:.12s}
.ni.open .ddi:nth-child(4),.ni.open .sdi:nth-child(4){animation-delay:.16s}
.ni.open .ddi:nth-child(5),.ni.open .sdi:nth-child(5){animation-delay:.2s}
.ni.open .ddi:nth-child(6),.ni.open .sdi:nth-child(6){animation-delay:.24s}
@keyframes itemIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}

/* ── ONLINE PILL ENHANCED ── */
.op-dot{animation:statusPulse 2s ease-in-out infinite!important}
@keyframes statusPulse{0%{transform:scale(1);box-shadow:0 0 6px #10B981}50%{transform:scale(1.5);box-shadow:0 0 18px #10B981,0 0 35px rgba(16,185,129,.25)}100%{transform:scale(1);box-shadow:0 0 6px #10B981}}

/* ── CURSOR GLOW ── */
.cursor-glow{position:fixed;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(99,102,241,.06),transparent 70%);pointer-events:none;z-index:0;transform:translate(-50%,-50%);will-change:left,top}

/* ── PARTICLES ── */
.particle{position:fixed;border-radius:50%;pointer-events:none;z-index:0;animation:rise linear infinite}
@keyframes rise{0%{transform:translateY(100vh) scale(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(-10vh) scale(1);opacity:0}}

/* ── SCROLL PROGRESS BAR ── */
.scroll-progress{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,#6366f1,#f43f5e,#06b6d4);z-index:10000;transform-origin:left;transform:scaleX(0);transition:transform .1s linear;box-shadow:0 0 10px rgba(99,102,241,.5)}

/* ── SCROLL INDICATOR ── */
.scroll-indicator{position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.6rem;z-index:10;animation:fadeIn 1.5s 2s both;transition:all .4s}
.scroll-indicator .mouse{width:26px;height:40px;border:2px solid rgba(255,255,255,.2);border-radius:13px;position:relative}
.scroll-indicator .wheel{width:4px;height:9px;background:rgba(167,139,250,.7);border-radius:2px;position:absolute;top:7px;left:50%;transform:translateX(-50%);animation:wheel 1.5s ease-in-out infinite}
@keyframes wheel{0%{transform:translateX(-50%) translateY(0);opacity:1}100%{transform:translateX(-50%) translateY(15px);opacity:0}}
.scroll-indicator .scroll-text{font-size:.58rem;text-transform:uppercase;letter-spacing:.18em;color:rgba(255,255,255,.25);font-family:'Fira Code',monospace}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ── FOOTER LINKS ANIMATED UNDERLINE ── */
.f-col a{position:relative}
.f-col a::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:1px;background:linear-gradient(90deg,#6366f1,#f43f5e);transition:width .3s cubic-bezier(.16,1,.3,1)}
.f-col a:hover::after{width:100%}

/* ── FOOTER BADGES ── */
.f-bg{transition:all .3s cubic-bezier(.16,1,.3,1)}
.f-bg:hover{background:rgba(245,158,11,.08);border-color:rgba(245,158,11,.15);color:rgba(255,255,255,.6);transform:translateY(-3px);box-shadow:0 6px 16px rgba(245,158,11,.15)}

/* ── SECTION NUMBER REVEAL ── */
.section-number{transition:opacity 1s ease;opacity:0}
.section-number.visible{opacity:1}

/* ── ANIMATED ROTATING BORDER (for special cards) ── */
@property --angle{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes rotateBorder{to{--angle:360deg}}

/* ── REDUCED MOTION ── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .scroll-reveal,.reveal-left,.reveal-right,.reveal-scale,.reveal-rotate,.reveal-blur{opacity:1!important;transform:none!important;filter:none!important}
}