/* ═══════════════════════════════════════
   LEADERECOM — Animations & Transitions
═══════════════════════════════════════ */

/* ── SCROLL REVEAL ── */
.reveal{opacity:0;transform:translateY(32px);transition:opacity .65s cubic-bezier(.22,1,.36,1),transform .65s cubic-bezier(.22,1,.36,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-left{opacity:0;transform:translateX(-40px);transition:opacity .65s cubic-bezier(.22,1,.36,1),transform .65s cubic-bezier(.22,1,.36,1)}
.reveal-left.visible{opacity:1;transform:translateX(0)}
.reveal-right{opacity:0;transform:translateX(40px);transition:opacity .65s cubic-bezier(.22,1,.36,1),transform .65s cubic-bezier(.22,1,.36,1)}
.reveal-right.visible{opacity:1;transform:translateX(0)}
.reveal-scale{opacity:0;transform:scale(.92);transition:opacity .55s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1)}
.reveal-scale.visible{opacity:1;transform:scale(1)}
.delay-1{transition-delay:.1s}.delay-2{transition-delay:.2s}.delay-3{transition-delay:.3s}
.delay-4{transition-delay:.4s}.delay-5{transition-delay:.5s}.delay-6{transition-delay:.6s}

/* ── HERO ENTRANCE ── */
.hero-eyebrow{animation:fadeDown .7s .1s both cubic-bezier(.22,1,.36,1)}
.hero-h1     {animation:fadeUp   .8s .25s both cubic-bezier(.22,1,.36,1)}
.hero-p      {animation:fadeUp   .8s .4s  both cubic-bezier(.22,1,.36,1)}
.hero-actions{animation:fadeUp   .8s .55s both cubic-bezier(.22,1,.36,1)}
.hero-stats  {animation:fadeUp   .8s .7s  both cubic-bezier(.22,1,.36,1)}
.hero-right  {animation:fadeLeft .9s .5s  both cubic-bezier(.22,1,.36,1)}

@keyframes fadeDown{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeUp  {from{opacity:0;transform:translateY( 24px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeLeft{from{opacity:0;transform:translateX( 40px)}to{opacity:1;transform:translateX(0)}}

/* ── PARTICLES ── */
.hero-particles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.particle{
  position:absolute;border-radius:50%;
  animation:particleDrift linear infinite;
  opacity:0;
}
@keyframes particleDrift{
  0%  {opacity:0;transform:translateY(0) scale(0)}
  10% {opacity:1}
  90% {opacity:.3}
  100%{opacity:0;transform:translateY(-120px) scale(1)}
}

/* ── TYPEWRITER ── */
.hero-h1 .line2{
  overflow:hidden;white-space:nowrap;
  border-right:3px solid var(--orange);
  animation:
    fadeUp .8s .25s both cubic-bezier(.22,1,.36,1),
    typing 1s .9s steps(7,end) forwards,
    blink .75s 1.9s step-end 4,
    noBorder 0s 4.9s forwards;
  width:0;
}
@keyframes typing  {from{width:0}to{width:7ch}}
@keyframes blink   {0%,100%{border-color:var(--orange)}50%{border-color:transparent}}
@keyframes noBorder{to{border-right:none;width:auto}}

/* ── HERO GRID DRIFT ── */
.hero-grid-lines{animation:gridDrift 20s linear infinite}
@keyframes gridDrift{0%{background-position:0 0}100%{background-position:60px 60px}}

/* ── ACCENT BAR ── */
@keyframes barShift{0%{background-position:0%}100%{background-position:300%}}

/* ── FLOAT CARDS ── */
@keyframes float1{0%,100%{transform:translateY(0)}  50%{transform:translateY(-10px)}}
@keyframes float2{0%,100%{transform:translateY(0)}  50%{transform:translateY(-7px)}}
@keyframes float3{0%,100%{transform:translateY(0)}  50%{transform:translateY(-12px)}}

/* ── STEP LINE fill ── */
.steps-timeline.animated::before{
  background:linear-gradient(90deg,var(--blue) var(--progress,0%),var(--border) var(--progress,0%));
  transition:background .05s;
}

/* ── STEP CARDS stagger ── */
.step{opacity:0;transform:translateY(24px);transition:opacity .5s,transform .5s}
.steps-timeline.revealed .step             {opacity:1;transform:translateY(0)}
.steps-timeline.revealed .step:nth-child(1){transition-delay:.05s}
.steps-timeline.revealed .step:nth-child(2){transition-delay:.18s}
.steps-timeline.revealed .step:nth-child(3){transition-delay:.31s}
.steps-timeline.revealed .step:nth-child(4){transition-delay:.44s}

/* ── FEAT CARDS stagger ── */
.feat-grid .feat-card{opacity:0;transform:translateY(20px);transition:opacity .5s,transform .5s,border-color .25s}
.feat-grid.revealed .feat-card             {opacity:1;transform:translateY(0)}
.feat-grid.revealed .feat-card:nth-child(1){transition-delay:0s}
.feat-grid.revealed .feat-card:nth-child(2){transition-delay:.08s}
.feat-grid.revealed .feat-card:nth-child(3){transition-delay:.16s}
.feat-grid.revealed .feat-card:nth-child(4){transition-delay:.24s}
.feat-grid.revealed .feat-card:nth-child(5){transition-delay:.32s}
.feat-grid.revealed .feat-card:nth-child(6){transition-delay:.40s}
.feat-grid.revealed .feat-card:nth-child(7){transition-delay:.48s}
.feat-grid.revealed .feat-card:nth-child(8){transition-delay:.56s}
.feat-grid.revealed .feat-card:nth-child(9){transition-delay:.64s}
.feat-grid.revealed .feat-card:nth-child(10){transition-delay:.72s}

/* ── PRICING FEATURES stagger ── */
.pricing-features .pf{opacity:0;transform:translateY(16px);transition:opacity .45s,transform .45s}
.pricing-features.revealed .pf             {opacity:1;transform:translateY(0)}
.pricing-features.revealed .pf:nth-child(1){transition-delay:0s}
.pricing-features.revealed .pf:nth-child(2){transition-delay:.08s}
.pricing-features.revealed .pf:nth-child(3){transition-delay:.16s}
.pricing-features.revealed .pf:nth-child(4){transition-delay:.24s}
.pricing-features.revealed .pf:nth-child(5){transition-delay:.32s}
.pricing-features.revealed .pf:nth-child(6){transition-delay:.40s}

/* ── PRICE FLASH ── */
.price-xxl{transition:transform .3s}
.price-xxl.flash{animation:priceFlash .4s ease}
@keyframes priceFlash{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}

/* ── CTA ENTRANCE ── */
.cta-tag,.cta-h2,.cta-p,.cta-btns{opacity:0;transform:translateY(20px);transition:opacity .6s,transform .6s}
.cta-wrap.revealed .cta-tag {opacity:1;transform:translateY(0);transition-delay:.05s}
.cta-wrap.revealed .cta-h2  {opacity:1;transform:translateY(0);transition-delay:.15s}
.cta-wrap.revealed .cta-p   {opacity:1;transform:translateY(0);transition-delay:.25s}
.cta-wrap.revealed .cta-btns{opacity:1;transform:translateY(0);transition-delay:.35s}

/* ── RIPPLE ── */
.ripple{
  position:absolute;border-radius:50%;
  background:rgba(255,255,255,.3);
  transform:scale(0);animation:rippleAnim .5s linear;
  pointer-events:none;
}
@keyframes rippleAnim{to{transform:scale(4);opacity:0}}

/* ── BUTTON SWEEP ── */
.btn-pricing,.btn-cw{position:relative;overflow:hidden}
.btn-pricing::after,.btn-cw::after{
  content:'';position:absolute;inset:0;
  background:rgba(255,255,255,.15);
  transform:translateX(-100%);
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.btn-pricing:hover::after,.btn-cw:hover::after{transform:translateX(0)}

/* ── NAV SCROLL SHADOW ── */
.nav{transition:box-shadow .3s}
.nav.scrolled{box-shadow:0 2px 20px rgba(10,14,26,.08)}

/* ── STEP CIRCLE hover ── */
.step-circle{transition:background .3s,border-color .3s,transform .3s,color .3s}
.step:hover .step-circle            {transform:scale(1.1);border-color:var(--blue-light);color:var(--blue-light)}
.step:nth-child(4):hover .step-circle{border-color:var(--orange2);transform:scale(1.1)}

/* ── FAQ hover ── */
.faq-item{transition:border-color .2s,transform .2s}
.faq-item:hover{transform:translateX(4px)}
.faq-item.open{transform:translateX(0)}