/* ── LIQUID TIMELINE (3D flip) ── */
.how-it-works{position:relative;padding-top:60px}
.how-it-works .section-title{
  position:relative;top:auto;left:auto;transform:none;
  z-index:auto;pointer-events:none;opacity:0;transition:opacity .5s ease;
  text-align:center;margin-bottom:12px;
}
.how-it-works .section-title.inview{opacity:1}
.how-it-works .section-title.scrolled{opacity:0}

/* ——— Card SVG art ——— */
.lt-art{width:100%;height:340px;margin-bottom:24px;overflow:visible}
.lt-art svg{width:100%;height:100%;display:block}
.lt-art svg *{transition:none}

/* SVG animation keyframes */
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadeUp{0%{opacity:0;transform:translateY(12px)}100%{opacity:1;transform:translateY(0)}}
@keyframes popIn{0%{opacity:0;transform:scale(0)}50%{opacity:1;transform:scale(1.18)}100%{opacity:1;transform:scale(1)}}
@keyframes ringExpand{0%{opacity:0.3;transform:scale(0.85)}100%{opacity:0;transform:scale(1.5)}}
@keyframes ringPulse{0%,100%{opacity:0.04}50%{opacity:0.12}}
@keyframes pulseGlow{0%,100%{opacity:0.12;transform:scale(1)}50%{opacity:0.3;transform:scale(1.12)}}
@keyframes progressFill{0%{width:0;opacity:1}100%{width:164px;opacity:1}}
@keyframes floatParticle{
  0%,100%{opacity:0;transform:translateY(0) translateX(0)}
  20%{opacity:0.35}
  50%{opacity:0.08;transform:translateY(-18px) translateX(6px)}
  80%{opacity:0.25}
}
@keyframes fadeRight{0%{opacity:0;transform:translateX(80px)}100%{opacity:1;transform:translateX(0)}}
@keyframes fadeLeft{0%{opacity:0;transform:translateX(-80px)}100%{opacity:1;transform:translateX(0)}}

/* Step 1 — List */
.s1-glow-ring{opacity:0}
.lt-slide.active .s1-glow-ring{animation:ringExpand 2.5s .3s ease-out infinite}
.lt-slide.active .s1-glow-ring + .s1-glow-ring{animation:ringExpand 2.5s .8s ease-out infinite}

.s1-crate{opacity:0}
.lt-slide.active .s1-crate{animation:fadeUp .5s .1s ease-out forwards}
.s1-crate-div{opacity:0}
.lt-slide.active .s1-crate-div{animation:fadeUp .3s .2s ease-out forwards}

.s1-item{opacity:0;transform-origin:center}
.lt-slide.active .s1-item-1{animation:popIn .35s .35s ease-out forwards}
.lt-slide.active .s1-item-2{animation:popIn .35s .55s ease-out forwards}
.lt-slide.active .s1-item-3{animation:popIn .35s .75s ease-out forwards}

.s1-progress-bg{opacity:0}
.lt-slide.active .s1-progress-bg{animation:fadeUp .3s .95s ease-out forwards}
.s1-progress-fill{opacity:0}
.lt-slide.active .s1-progress-fill{animation:progressFill .6s 1s ease-out forwards}

.s1-check{stroke-dasharray:60;stroke-dashoffset:60;opacity:0}
.lt-slide.active .s1-check{animation:draw .45s 1.4s ease-out forwards}

.s1-badge{opacity:0}
.lt-slide.active .s1-badge{animation:fadeUp .4s 1.7s ease-out forwards}

.s1-pt{opacity:0}
.lt-slide.active .s1-pt-1{animation:floatParticle 3s 1.8s ease-in-out infinite}
.lt-slide.active .s1-pt-2{animation:floatParticle 3.5s 2s ease-in-out infinite}
.lt-slide.active .s1-pt-3{animation:floatParticle 4s 2.2s ease-in-out infinite}
.lt-slide.active .s1-pt-4{animation:floatParticle 3.2s 2.4s ease-in-out infinite}
.lt-slide.active .s1-pt-5{animation:floatParticle 3.8s 2.6s ease-in-out infinite}
.lt-slide.active .s1-pt-6{animation:floatParticle 4.2s 2.8s ease-in-out infinite}

/* Step 2 — Match (Radar) */
.s2-ring{opacity:0}
.lt-slide.active .s2-ring{animation:ringPulse 3.5s .1s ease-in-out infinite}

.s2-node-l,.s2-node-r{opacity:0}
.lt-slide.active .s2-node-l{animation:popIn .4s .25s ease-out forwards}
.lt-slide.active .s2-node-r{animation:popIn .4s .45s ease-out forwards}

.s2-glow-l,.s2-glow-r{opacity:0}
.lt-slide.active .s2-glow-l{animation:pulseGlow 2s .6s ease-in-out infinite}
.lt-slide.active .s2-glow-r{animation:pulseGlow 2s .8s ease-in-out infinite}

.s2-sweep{opacity:0}
.lt-slide.active .s2-sweep{animation:radarSweep 2.5s .1s ease-out infinite}

.s2-connect{stroke-dasharray:400;stroke-dashoffset:400}
.lt-slide.active .s2-connect{animation:draw 1s .7s cubic-bezier(0.16,1,0.3,1) forwards}

.s2-center-pulse{opacity:0}
.lt-slide.active .s2-center-pulse{animation:popIn .3s 1.4s ease-out forwards}
.s2-center-ring{opacity:0}
.lt-slide.active .s2-center-ring{animation:ringExpand 2s 1.4s ease-out infinite}

.s2-label{opacity:0}
.lt-slide.active .s2-label{animation:fadeUp .4s 1.7s ease-out forwards}

@keyframes radarSweep{
  0%{opacity:0.1;transform:rotate(-30deg);transform-origin:400px 175px}
  100%{opacity:0;transform:rotate(180deg);transform-origin:400px 175px}
}

/* Step 3 — Swap */
.s3-platform-l,.s3-platform-r{opacity:0}
.lt-slide.active .s3-platform-l{animation:fadeUp .4s .1s ease-out forwards}
.lt-slide.active .s3-platform-r{animation:fadeUp .4s .15s ease-out forwards}

.s3-item-l{opacity:0}
.lt-slide.active .s3-item-l{animation:fadeRight .6s .25s cubic-bezier(0.16,1,0.3,1) forwards}
.s3-item-r{opacity:0}
.lt-slide.active .s3-item-r{animation:fadeLeft .6s .35s cubic-bezier(0.16,1,0.3,1) forwards}

.s3-arrow-top{stroke-dasharray:400;stroke-dashoffset:400}
.lt-slide.active .s3-arrow-top{animation:draw .9s .5s ease-out forwards}
.s3-arrow-bot{stroke-dasharray:400;stroke-dashoffset:400}
.lt-slide.active .s3-arrow-bot{animation:draw .9s .7s ease-out forwards}
.s3-arrow-head-t,.s3-arrow-head-b{opacity:0}
.lt-slide.active .s3-arrow-head-t{animation:fadeUp .2s 1.1s ease-out forwards}
.lt-slide.active .s3-arrow-head-b{animation:fadeUp .2s 1.2s ease-out forwards}

.s3-center{opacity:0}
.lt-slide.active .s3-center{animation:popIn .35s 1.3s ease-out forwards}
.s3-center-glow{opacity:0}
.lt-slide.active .s3-center-glow{animation:ringExpand 2s 1.3s ease-out infinite}

.s3-check{stroke-dasharray:60;stroke-dashoffset:60;opacity:0}
.lt-slide.active .s3-check{animation:draw .4s 1.6s ease-out forwards}

.s3-label{opacity:0}
.lt-slide.active .s3-label{animation:fadeUp .4s 1.9s ease-out forwards}

/* Full-viewport slides with 3D perspective */
.lt-stage{perspective:900px;perspective-origin:50% 40%}
.lt-slide{
  min-height:0;display:flex;align-items:center;justify-content:center;
  padding:20px 40px;
  position:relative;
}
.lt-slide strong{color:var(--text);font-weight:700}

/* 3D card — scroll-driven perspective animation via JS classes */
.lt-card{
  width:100%;max-width:840px;
  position:relative;
  transform-style:preserve-3d;
  transition:
    transform 1.4s cubic-bezier(0.16,1.08,0.3,1),
    opacity .8s cubic-bezier(0.16,1,0.3,1),
    filter .6s;
  will-change:transform,opacity;
}
.light .lt-card{
  padding:36px 44px;
  border-radius:var(--radius-xl);
  background:var(--glass2);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(16px);
}
.lt-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:rgba(56,189,248,0.08);
  opacity:0;transition:opacity .8s;
}
.lt-card::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;
  opacity:0;transition:opacity .6s;
  box-shadow:inset 0 0 60px rgba(56,189,248,0.03);
}
.light .lt-card::after{display:block}

/* ——— 3D scroll states ——— */
/* Deep behind — not yet visible, far in 3D */
.lt-slide.behind .lt-card{
  transform:perspective(1000px) rotateX(20deg) translateY(80px) translateZ(-100px);
  opacity:0;filter:blur(4px);pointer-events:none;
}
/* Active — fully settled in flat view */
.lt-slide.active .lt-card{
  transform:perspective(1000px) rotateX(0) translateY(0) translateZ(0);
  opacity:1;filter:blur(0);
}
.light .lt-slide.active .lt-card::before{opacity:1}
.light .lt-slide.active .lt-card.highlight{
  border-color:rgba(56,189,248,0.25);
  box-shadow:0 0 100px rgba(56,189,248,0.08),0 20px 60px rgba(0,0,0,0.12);
}
/* Above — gone, flipped backward into 3D */
.lt-slide.above .lt-card{
  transform:perspective(1000px) rotateX(-20deg) translateY(-80px) translateZ(-100px);
  opacity:0;filter:blur(4px);pointer-events:none;
}

.light .lt-card:hover{
  border-color:var(--glass-border-hover);
}
.light .lt-card:hover::after{opacity:1}

/* ——— Staggered content entrance ——— */
.lt-card .lt-number,
.lt-card .lt-art,
.lt-card .lt-number,
.lt-card h3,
.lt-card p{
  will-change:transform,opacity;
}
.lt-art{transition:opacity .6s .05s ease,transform .6s .05s ease}
.lt-number{font-size:28px;font-weight:900;letter-spacing:-1px;color:var(--accent);opacity:0.4;line-height:1;margin-bottom:6px}
.light .lt-number{opacity:0.6}
.lt-slide.behind .lt-card .lt-number,
.lt-slide.behind .lt-card .lt-art,
.lt-slide.behind .lt-card h3,
.lt-slide.behind .lt-card p{
  transform:translateY(20px);opacity:0;
}
.lt-slide.above .lt-card .lt-number,
.lt-slide.above .lt-card .lt-art,
.lt-slide.above .lt-card h3,
.lt-slide.above .lt-card p{
  transform:translateY(-14px);opacity:0;
}
.lt-slide.active .lt-card .lt-number{
  transition:transform .7s .05s cubic-bezier(0.16,1,0.3,1),opacity .5s .05s;
}
.lt-slide.active .lt-card h3{
  font-size:clamp(1.3rem,2.5vw,1.6rem);font-weight:800;
  letter-spacing:-0.4px;margin-bottom:10px;color:var(--text);
}
.lt-card p{
  font-size:15px;color:var(--text2);line-height:1.7;max-width:52ch;
}

/* responsive collapse */
@media(max-width:900px){
  .lt-slide{
    padding:20px 16px;
  }
  .lt-art{height:200px}
  .light .lt-card{
    transform:none!important;opacity:1!important;
    padding:28px 20px;
  }
  .lt-slide.behind .lt-card,
  .lt-slide.above .lt-card{
    transform:none!important;opacity:1!important;pointer-events:auto!important;
    filter:none!important
  }
  .how-it-works .section-title{position:relative;opacity:1}
}