/* ==========================================================================
   Quick Invoicing — motion layer
   Loaded after style.css and form.css, so rules here win on equal specificity.
   Everything degrades to a static page under prefers-reduced-motion (bottom).
   ========================================================================== */

/* ── keyframes ─────────────────────────────────────────── */
@keyframes navDrop{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}
@keyframes heroIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@keyframes idleFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes orbDrift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,-30px) scale(1.08)}66%{transform:translate(-30px,20px) scale(.94)}}
@keyframes shine{from{left:-60%}to{left:130%}}
@keyframes softPulse{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes rowIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:translateX(0)}}
@keyframes ringPulse{0%{box-shadow:0 0 0 0 rgba(74,222,128,.5)}70%{box-shadow:0 0 0 10px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
@keyframes checkDraw{to{stroke-dashoffset:0}}
@keyframes fadeUpSmall{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ── 1. scroll progress bar (injected by animations.js) ── */
#scrollProgress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:200;
  background:linear-gradient(90deg,#3b82f6,#60a5fa,#34d399);
  box-shadow:0 0 12px rgba(59,130,246,.6);
  transition:width .12s linear;
}

/* ── 2. navigation ─────────────────────────────────────── */
nav#topnav{animation:navDrop .6s cubic-bezier(.22,1,.36,1) both}
nav#topnav.scrolled{background:rgba(255,255,255,.97);height:auto}
.nav-inner{transition:height .3s cubic-bezier(.22,1,.36,1)}
nav#topnav.scrolled .nav-inner{height:60px}
.brand-logo-img{transition:transform .3s cubic-bezier(.22,1,.36,1)}
.logo:hover .brand-logo-img{transform:scale(1.06)}

/* Underline that grows from the centre on hover. */
.nav-links a{position:relative;padding-bottom:3px}
.nav-links a::after{
  content:'';position:absolute;left:50%;bottom:0;width:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--blue),var(--blue-light));
  transform:translateX(-50%);transition:width .28s cubic-bezier(.22,1,.36,1);
}
.nav-links a:hover::after{width:100%}

/* ── 3. hero entrance + ambience ───────────────────────── */
.hero-left > *{animation:heroIn .85s cubic-bezier(.22,1,.36,1) both}
.hero-left > *:nth-child(1){animation-delay:.10s}
.hero-left > *:nth-child(2){animation-delay:.20s}
.hero-left > *:nth-child(3){animation-delay:.32s}
.hero-left > *:nth-child(4){animation-delay:.44s}
.hero-left > *:nth-child(5){animation-delay:.56s}

/* Slow-drifting glow behind the hero. */
.hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(420px circle at 18% 22%,rgba(59,130,246,.30),transparent 62%),
    radial-gradient(380px circle at 82% 72%,rgba(52,211,153,.20),transparent 60%);
  animation:orbDrift 18s ease-in-out infinite;
}
.hero-grid{position:relative;z-index:1}

/* The mockup drops in, then breathes. */
.dash-wrap{animation:floatUp .8s ease both,idleFloat 7s ease-in-out 1.4s infinite}
.dash-menu-item{transition:background .25s,color .25s,border-color .25s}
.dash-kpi,.big-kpi{transition:transform .25s cubic-bezier(.22,1,.36,1),border-color .25s}
.dash-kpi:hover,.big-kpi:hover{transform:translateY(-3px);border-color:rgba(96,165,250,.4)}

.hero-badge span{animation:pulse 2s infinite,ringPulse 2.6s infinite}
.trust-item{transition:transform .25s cubic-bezier(.22,1,.36,1)}
.trust-item:hover{transform:translateY(-3px)}
.trust-item .tick{display:inline-block;transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.trust-item:hover .tick{transform:scale(1.35)}

/* ── 4. buttons: sweep of light on hover ───────────────── */
.btn-primary,.nav-cta,.btn-white,.price-btn.fill,.form-submit{
  position:relative;overflow:hidden;isolation:isolate;
  /* Inline anchors cannot clip a sweep, so blockify them. */
  display:inline-flex;align-items:center;justify-content:center;
}
.btn-primary::after,.nav-cta::after,.btn-white::after,.price-btn.fill::after{
  content:'';position:absolute;top:0;left:-60%;width:45%;height:100%;z-index:-1;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-20deg);
}
.btn-primary:hover::after,.nav-cta:hover::after,.btn-white:hover::after,.price-btn.fill:hover::after{animation:shine .75s ease}
.btn-ghost,.btn-outline-white{transition:background .25s,transform .25s cubic-bezier(.22,1,.36,1),border-color .25s}
.btn-ghost:hover,.btn-outline-white:hover{transform:translateY(-3px)}

/* ── 5. cards & icons ──────────────────────────────────── */
.feat-icon,.mod-card-icon{transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.feat-card:hover .feat-icon,.mod-card:hover .mod-card-icon{transform:scale(1.14) rotate(-6deg)}
.feat-card h3,.feat-card p{transition:color .25s}
.feat-card:hover h3{color:var(--blue)}

.hiw-num{transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s}
.hiw-step:hover .hiw-num{transform:scale(1.1) translateY(-3px);box-shadow:0 14px 28px rgba(37,99,235,.45)}

.price-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:#bfdbfe}
.price-card.pop:hover{transform:scale(1.03) translateY(-6px)}

.import-item{transition:transform .25s cubic-bezier(.22,1,.36,1),border-color .25s,box-shadow .25s}
.import-item:hover{transform:translateX(6px)}

.mod-tab{transition:transform .2s,background .2s,color .2s,border-color .2s}
.mod-tab:hover{transform:translateY(-2px)}

/* ── 6. scroll reveal — extra variants ─────────────────── */
.reveal,.reveal-left,.reveal-right{will-change:opacity,transform}
.reveal.show,.reveal-left.show,.reveal-right.show{will-change:auto}
.reveal-scale{opacity:0;transform:scale(.94);transition:.75s cubic-bezier(.22,1,.36,1)}
.reveal-scale.show{opacity:1;transform:scale(1)}
.reveal-blur{opacity:0;filter:blur(8px);transform:translateY(18px);transition:.8s cubic-bezier(.22,1,.36,1)}
.reveal-blur.show{opacity:1;filter:blur(0);transform:translateY(0)}

/* ── 7. dashboard showcase: chart + table come alive ───── */
/* Target heights live here so the chart still renders correctly without JS;
   animations.js adds .js-chart, which is what collapses the bars to zero. */
.bar.b1{--h:45%}.bar.b2{--h:60%}.bar.b3{--h:35%}.bar.b4{--h:80%}
.bar.b5{--h:55%}.bar.b6{--h:70%}.bar.b7{--h:90%}
.chart-bars.js-chart .bar{
  height:0!important;transform-origin:bottom;
  transition:height .9s cubic-bezier(.22,1,.36,1),opacity .2s;
}
.chart-bars.js-chart.grown .bar{height:var(--h)!important}
.chart-bars .bar:nth-child(1){transition-delay:.05s}
.chart-bars .bar:nth-child(2){transition-delay:.12s}
.chart-bars .bar:nth-child(3){transition-delay:.19s}
.chart-bars .bar:nth-child(4){transition-delay:.26s}
.chart-bars .bar:nth-child(5){transition-delay:.33s}
.chart-bars .bar:nth-child(6){transition-delay:.40s}
.chart-bars .bar:nth-child(7){transition-delay:.47s}
.chart-bars .bar:hover{opacity:.75}

.mini-table-row.cascade{animation:rowIn .5s cubic-bezier(.22,1,.36,1) both}
.mini-table-row{transition:background .2s}
.action-btn{transition:transform .2s,background .2s}
.action-btn:hover{transform:translateY(-1px);background:rgba(59,130,246,.35)}

/* "Pending" keeps breathing until it clears. */
.status-badge.pend,.sbadge.p{animation:softPulse 2.4s ease-in-out infinite}

/* ── 8. FBR section ────────────────────────────────────── */
.fbr-card{transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s}
.fbr-card:hover{transform:translateY(-6px)}

/* The lifecycle plays through once, one step at a time. */
.fbr-step{transition:background .45s,padding-left .45s cubic-bezier(.22,1,.36,1)}
.fbr-step-num{transition:transform .45s cubic-bezier(.34,1.56,.64,1),background .45s,color .45s,box-shadow .45s}
.fbr-step.lit{background:rgba(59,130,246,.08);padding-left:10px}
.fbr-step.lit .fbr-step-num{
  transform:scale(1.12);background:rgba(59,130,246,.55);color:#fff;
  box-shadow:0 0 0 6px rgba(59,130,246,.12);
}
.fbr-step.lit h4{color:#fff}

/* ── 8b. cascade for lists inside a revealing block ────── */
.cascade-hold{opacity:0}
.cascade-in{animation:rowIn .55s cubic-bezier(.22,1,.36,1) both}

/* ── 9. FAQ: height instead of display:none ────────────── */
.faq-a{
  display:block;max-height:0;padding-top:0;padding-bottom:0;opacity:0;
  transition:max-height .45s cubic-bezier(.22,1,.36,1),padding .45s cubic-bezier(.22,1,.36,1),opacity .3s;
}
.faq-item.open .faq-a{max-height:340px;padding-bottom:20px;opacity:1}
.faq-item{transition:border-color .3s,box-shadow .3s,transform .3s cubic-bezier(.22,1,.36,1)}
.faq-item:hover{border-color:#bfdbfe}
.faq-item.open{border-color:var(--blue-light);box-shadow:0 8px 26px rgba(37,99,235,.10)}
.faq-q{transition:color .25s}
.faq-item.open .faq-q{color:var(--blue)}

/* ── 10. footer ────────────────────────────────────────── */
.footer-col ul li a{display:inline-block;transition:color .2s,transform .2s cubic-bezier(.22,1,.36,1)}
.footer-col ul li a:hover{transform:translateX(5px);color:#93c5fd}

/* ── 11. demo form micro-interactions ──────────────────── */
.demo-card{transition:box-shadow .4s}
.form-group{transition:transform .25s cubic-bezier(.22,1,.36,1)}
.form-group:focus-within{transform:translateY(-2px)}
.form-group label{transition:color .25s}
.form-group:focus-within label{color:var(--blue)}
.form-alert{animation:fadeUpSmall .45s cubic-bezier(.22,1,.36,1) both}
.form-error{animation:fadeUpSmall .3s ease both}
.form-submit{transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s,opacity .2s}
.demo-points li{transition:transform .25s cubic-bezier(.22,1,.36,1)}
.demo-points li:hover{transform:translateX(5px)}
.demo-contact-icon{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
a.demo-contact-item:hover .demo-contact-icon{transform:scale(1.12) rotate(-8deg)}

/* Tick drawn on the success alert. */
.form-alert.ok .check-mark{width:18px;height:18px;vertical-align:-3px;margin-right:7px}
.form-alert.ok .check-mark path{stroke-dasharray:26;stroke-dashoffset:26;animation:checkDraw .55s .15s ease forwards}

/* ── 12. back to top (injected by animations.js) ───────── */
#backTop{
  position:fixed;right:24px;bottom:24px;width:46px;height:46px;z-index:120;
  display:flex;align-items:center;justify-content:center;
  border:0;border-radius:50%;cursor:pointer;font-size:18px;color:#fff;
  background:linear-gradient(135deg,#3b82f6,#2563eb);
  box-shadow:0 10px 26px rgba(37,99,235,.45);
  opacity:0;visibility:hidden;transform:translateY(16px) scale(.85);
  transition:opacity .3s,transform .35s cubic-bezier(.34,1.56,.64,1),visibility .3s;
}
#backTop.show{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
#backTop:hover{transform:translateY(-4px) scale(1.06);box-shadow:0 16px 32px rgba(37,99,235,.55)}
@media(max-width:640px){#backTop{right:16px;bottom:16px;width:42px;height:42px}}

/* ── 13. stats bar ─────────────────────────────────────── */
.stat-item{transition:transform .3s cubic-bezier(.22,1,.36,1)}
.stat-item:hover{transform:translateY(-4px)}
.stat-num{display:inline-block}

/* ── reduced motion: everything above stands down ──────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .reveal,.reveal-left,.reveal-right,.reveal-scale,.reveal-blur{
    opacity:1!important;transform:none!important;filter:none!important;
  }
  .chart-bars.js-chart .bar{height:var(--h)!important}
  #scrollProgress{display:none}
}