/* Lynx mobile: animation keyframes and helper classes, shared by the app and the landing page's phones */
.lx-scroll::-webkit-scrollbar{display:none}
.lx-scroll{scrollbar-width:none}
.lx-press{transition:transform .15s}
.lx-press:active{transform:scale(.95)}
.lx-row{transition:background .15s}
.lx-row:active{background:var(--lx-bg)}
.lx-caret{display:inline-block;width:2px;height:.9em;background:var(--lx-accent);margin-left:3px;vertical-align:-.08em;animation:lxBlink 1s steps(1) infinite}
@keyframes lxBlink{50%{opacity:0}}
@keyframes lxFadeIn{from{opacity:0}}
@keyframes lxFadeOut{to{opacity:0}}
@keyframes lxRise{from{transform:translateY(105%)}}
@keyframes lxSink{to{transform:translateY(105%)}}
.lx-enter{animation:lxEnter .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes lxEnter{from{opacity:0;transform:translateY(14px)}}
.lx-pop{animation:lxPop .6s cubic-bezier(.25,1.2,.35,1) both}
@keyframes lxPop{from{opacity:0;transform:translateY(40px) scale(.96)}}
.lx-draw{stroke-dasharray:24;stroke-dashoffset:24;animation:lxDraw .5s .3s ease-out forwards}
@keyframes lxDraw{to{stroke-dashoffset:0}}
.lx-ring{position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 rgba(23,163,107,.35);animation:lxRing 1.4s .2s ease-out}
@keyframes lxRing{to{box-shadow:0 0 0 26px rgba(23,163,107,0)}}
.lx-shimmer{animation:lxShim 1.6s ease-in-out infinite}
@keyframes lxShim{50%{transform:translateX(4px);opacity:.5}}
.lx-scanline{position:absolute;left:14px;right:14px;height:3px;border-radius:2px;background:linear-gradient(90deg,transparent,#3D8BFF,transparent);box-shadow:0 0 18px 4px rgba(61,139,255,.6);animation:lxScan 1.8s ease-in-out infinite}
@keyframes lxScan{0%{top:18px}50%{top:228px}100%{top:18px}}
.lx-flash{animation:lxFlash 1.6s ease-out}
@keyframes lxFlash{from{background:rgba(11,107,255,.14)}}
.lx-qrbtn::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid rgba(11,107,255,.5);animation:lxPulse 2.4s ease-out infinite}
@keyframes lxPulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.lx-fill{animation:lxFill 1.4s cubic-bezier(.5,0,.3,1) infinite}
@keyframes lxFill{0%{clip-path:inset(100% 0 0 0)}60%,100%{clip-path:inset(0 0 0 0)}}
.lx-toast{animation:lxToast .5s cubic-bezier(.25,1.3,.4,1) both}
@keyframes lxToast{from{transform:translateY(-120%);opacity:0}}
.lx-shake{animation:lxShakeX .4s}
@keyframes lxShakeX{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.lx-spin{animation:lxSpin 1s linear infinite}
@keyframes lxSpin{to{transform:rotate(360deg)}}
.lx-breathe{animation:lxBreathe 2.2s ease-in-out infinite}
@keyframes lxBreathe{50%{transform:scale(1.06);opacity:.85}}
.lx-paper{background:#FBFAF6;color:#1B2238;font-family:ui-monospace,'SF Mono',Menlo,monospace}
.lx-teeth{height:10px;background:linear-gradient(-45deg,transparent 6px,#FBFAF6 0) 0 0/12px 10px repeat-x,linear-gradient(45deg,transparent 6px,#FBFAF6 0) 0 0/12px 10px repeat-x}
.lx-print{animation:lxPrint 1.1s cubic-bezier(.3,.8,.3,1) both}
@keyframes lxPrint{from{clip-path:inset(0 0 100% 0);transform:translateY(-30px)}}
.lx-stamp{animation:lxStamp .45s 1s cubic-bezier(.3,1.6,.5,1) both}
@keyframes lxStamp{from{transform:scale(2.4) rotate(-14deg);opacity:0}to{transform:scale(1) rotate(-14deg);opacity:1}}
.lx-tabpop{animation:lxTabPop .55s cubic-bezier(.3,1.7,.45,1)}
@keyframes lxTabPop{from{transform:scale(.7)}}
/* the cinematic intro (ported from lynx/styles.css, the Flutter app's LynxIntro) */
@keyframes lxiDrift{from{transform:translate(0,0) scale(1)}to{transform:translate(-3%,-4%) scale(1.08)}}
@keyframes lxiTwinkle{50%{opacity:.08}}
@keyframes lxiStreak{from{transform:rotate(-32deg) translateX(-55%);opacity:0}30%{opacity:1}to{transform:rotate(-32deg) translateX(55%);opacity:0}}
@keyframes lxiBladeA{from{transform:translate(230px,-380px) rotate(-28deg) scale(1.5);opacity:0}30%{opacity:1}to{transform:none;opacity:1}}
@keyframes lxiBladeB{from{transform:translate(-250px,360px) rotate(24deg) scale(1.5);opacity:0}30%{opacity:1}to{transform:none;opacity:1}}
@keyframes lxiBump{0%,100%{transform:scale(1)}35%{transform:scale(1.1)}}
@keyframes lxiFlash{0%{opacity:0;transform:scale(.4)}18%{opacity:1}100%{opacity:0;transform:scale(1.3)}}
@keyframes lxiShock{0%{transform:scale(.4);opacity:0}10%{opacity:1}100%{transform:scale(3.2);opacity:0}}
@keyframes lxiSpark{0%{transform:translate(0,0) scale(1);opacity:0}10%{opacity:1}100%{transform:translate(var(--x),var(--y)) scale(.3);opacity:0}}
@keyframes lxiOrbit{0%{transform:translateY(0) scale(.2);opacity:0}22%{transform:translateY(-138px) scale(1);opacity:1}72%{transform:translateY(-138px) scale(1);opacity:1}100%{transform:translateY(0) scale(.15);opacity:0}}
@keyframes lxiShine{from{transform:translateX(0)}to{transform:translateX(840px)}}
@keyframes lxiZoom{from{transform:scale(1);opacity:1}to{transform:scale(9);opacity:0}}
@keyframes lxiFadeOut{to{opacity:0}}
@keyframes lxiTrack{from{letter-spacing:.9em;padding-left:.9em}to{letter-spacing:.34em;padding-left:.34em}}
@keyframes lxiLetter{from{transform:translateY(34px) scale(.8);opacity:0}to{transform:none;opacity:1}}
@keyframes lxiRise{from{transform:translateY(14px);opacity:0}}
@keyframes lxSpin{to{transform:rotate(360deg)}}
.scr{position:absolute;inset:0}
.scr.push{animation:scrPush .42s cubic-bezier(.2,.8,.2,1) both}
.scr.pop{animation:scrPop .42s cubic-bezier(.2,.8,.2,1) both}
.scr.fade{animation:lxFadeIn .3s both}
@keyframes scrPush{from{transform:translateX(40%);opacity:0}}
@keyframes scrPop{from{transform:translateX(-30%);opacity:0}}

/* the Flutter app's welcome and story onboarding */
@keyframes lxRingOut{from{transform:scale(.6);opacity:.8}to{transform:scale(1.8);opacity:0}}
.lx-floaty{animation:lxFloaty 4s ease-in-out infinite}
@keyframes lxFloaty{50%{transform:translateY(-8px)}}
.lx-popin{animation:lxPopIn .5s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes lxPopIn{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}
.lx-tilt{transform:rotateX(14deg) rotateY(-18deg) rotateZ(-4deg);animation:lxTilt 5s ease-in-out infinite}
@keyframes lxTilt{50%{transform:translateY(-6px) rotateX(8deg) rotateY(10deg) rotateZ(-2deg)}}
.lx-slab{position:absolute;left:0;top:-10%;width:70%;height:120%;pointer-events:none;z-index:2;transform:skewX(-14deg);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  background:linear-gradient(90deg,transparent,rgba(110,155,255,.28) 40%,rgba(255,255,255,.22) 50%,rgba(110,155,255,.28) 60%,transparent);
  animation:lxSlab .55s cubic-bezier(.65,0,.35,1) both}
@keyframes lxSlab{from{translate:160% 0}to{translate:-160% 0}}
.lx-sheetup{animation:lxSheetUp .42s cubic-bezier(.2,.9,.2,1) both}
@keyframes lxSheetUp{from{transform:translateY(100%)}}

/* cards: frost spreads, designs flip, a new card is laser-minted and spins into the wallet */
.lx-frost{animation:lxFrost .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes lxFrost{from{clip-path:circle(0% at 50% 50%);opacity:.4}to{clip-path:circle(80% at 50% 50%);opacity:1}}
.lx-flipnext{animation:lxFlipNext .55s cubic-bezier(.3,1.2,.4,1) both}
.lx-flipprev{animation:lxFlipPrev .55s cubic-bezier(.3,1.2,.4,1) both}
@keyframes lxFlipNext{from{transform:rotateY(-80deg);opacity:0}}
@keyframes lxFlipPrev{from{transform:rotateY(80deg);opacity:0}}
.lx-spinout{animation:lxSpinOut .8s .45s cubic-bezier(.6,0,.4,1) both}
@keyframes lxSpinOut{to{transform:rotateY(360deg) translateY(-30px) scale(.6);opacity:0}}
.lx-laser{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.lx-laser::before{content:"";position:absolute;top:0;bottom:0;width:3px;left:-4%;background:#fff;box-shadow:0 0 14px 4px rgba(150,200,255,.9);animation:lxLaser .34s linear both}
.lx-laser i{position:absolute;left:0;width:4px;height:4px;border-radius:2px;background:#fff;box-shadow:0 0 6px #9CC8FF;animation:lxSpark2 .4s ease-out both}
@keyframes lxLaser{to{left:104%}}
@keyframes lxSpark2{from{left:0;opacity:1}to{left:100%;transform:translate(10px,-14px);opacity:0}}

/* receipts: confetti for a first, the LUKU house */
.lx-confetti{position:absolute;left:0;top:0;opacity:0;animation:lxConfetti 2.2s linear both}
@keyframes lxConfetti{0%{opacity:1;transform:translate(0,0) rotate(0);animation-timing-function:cubic-bezier(.1,.8,.3,1)}28%{opacity:1;transform:translate(var(--x),var(--y)) rotate(var(--r));animation-timing-function:cubic-bezier(.5,0,.9,.6)}85%{opacity:1}100%{opacity:0;transform:translate(calc(var(--x) * 1.4),calc(var(--y) + 620px)) rotate(calc(var(--r) * 3))}}
.lx-luku-bolt{animation:lxBolt .5s ease-out both}
@keyframes lxBolt{0%{opacity:0;transform:translateY(-10px) scale(.6)}35%{opacity:1;transform:none}55%{opacity:.4}70%,100%{opacity:1}}
.lx-luku-wire{stroke-dasharray:1;animation:lxWire .35s ease-out .25s both}
@keyframes lxWire{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.lx-luku-win{animation:lxWin .25s ease-out both}
@keyframes lxWin{from{fill:#2A3459;filter:none}to{}}
.lx-luku-glow{animation:lxLukuGlow 3.2s ease-in-out 1s infinite}
@keyframes lxLukuGlow{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}