/* motion layer */
.ap-stage::before,.ap-stage::after{content:none}
.ap-fx-stripes{position:absolute;right:-6%;top:-4%;width:46%;height:108%;overflow:hidden;transform:skewX(-14deg);pointer-events:none}
.ap-fx-stripes i{position:absolute;left:0;right:0;top:-140px;bottom:-140px;background:repeating-linear-gradient(-58deg,var(--y) 0 34px,transparent 34px 70px)}
.ap-fx-flag{position:absolute;left:4%;bottom:6px;width:62%;height:22px;overflow:hidden;transform:skewX(-30deg);opacity:.8;pointer-events:none}
.ap-fx-flag i{position:absolute;top:0;bottom:0;left:-44px;right:-44px;background:conic-gradient(#fff 25%,#0C111D 0 50%,#fff 0 75%,#0C111D 0) 0 0/22px 22px}
.ap-fx-glow{position:absolute;width:520px;height:520px;left:40%;top:-10%;border-radius:50%;background:radial-gradient(circle,rgba(0,179,194,.22),transparent 65%);pointer-events:none;z-index:0}
.ap-fx-glow.ap-v{left:-10%;top:40%;background:radial-gradient(circle,rgba(91,43,209,.2),transparent 65%)}
.ap-hero .ap-wrap{z-index:1}
.ap-fx-sparks{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.ap-phone{transform-style:preserve-3d;will-change:transform}
.ap-fx-tilt{transform-style:preserve-3d}

.ap-btn-y{position:relative;overflow:hidden}
.ap-btn-y::after{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);transform:translateX(-160%) skewX(-18deg);pointer-events:none}

.ap-fx-bar{position:fixed;left:0;top:0;height:3px;width:100%;background:var(--y);transform-origin:0 50%;transform:scaleX(0);z-index:60;pointer-events:none}
.ap-hdr{transition:background .25s,box-shadow .25s}
.ap-hdr.ap-fx-tight{background:rgba(6,12,20,.97);box-shadow:0 8px 24px rgba(0,0,0,.45)}
.ap-hdr .ap-site{transition:transform .25s;transform-origin:0 50%}
.ap-hdr.ap-fx-tight .ap-site{transform:scale(.92)}

.ap-story .ap-ring{position:relative;overflow:hidden;background:none}
.ap-story .ap-ring::before{content:"";position:absolute;inset:-30%;background:conic-gradient(var(--y-g1),var(--y-g2),var(--teal),var(--y-g1))}
.ap-story.ap-seen .ap-ring::before{background:#2c3d4e}
.ap-story img{position:relative}

.ap-fx-tick{overflow:hidden;border-block:1px solid #18293a;background:#0a141e;padding:12px 0}
.ap-fx-tick div{display:flex;width:max-content}
.ap-fx-tick span{flex:0 0 auto;padding:0 26px;font:800 italic 20px/1 "Roboto Condensed";text-transform:uppercase;color:#cfd6df;white-space:nowrap}
.ap-fx-tick span::after{content:"\00AB";margin-left:26px;color:var(--y)}
.ap-fx-tick span:nth-child(3n+2){color:var(--y)}

.ap-game .ap-thumb{transition:transform .25s,box-shadow .25s;transform-style:preserve-3d}
.ap-game:hover .ap-thumb{box-shadow:0 0 0 2px var(--teal),0 14px 30px rgba(0,179,194,.25)}
.ap-tcard{transition:transform .3s,box-shadow .3s}
.ap-tcard:hover{box-shadow:0 0 0 2px var(--teal),0 20px 40px rgba(0,0,0,.45)}
.ap-fx-in{transform:translateY(22px) scale(.97)}
.ap-fx-in.ap-fx-on{transform:none;transition:transform .6s cubic-bezier(.2,.8,.2,1)}

.ap-copy{position:relative}
.ap-copy .ap-ok{display:none;position:absolute;left:50%;top:-34px;background:var(--teal);color:#04121a;font-weight:700;font-size:14px;padding:5px 10px;transform:translateX(-50%);pointer-events:none;white-space:nowrap}
.ap-copy.ap-done .ap-ok{display:block;animation:fxPop .25s ease-out}

.ap-faq details[open] p,.ap-toc[open] ol{animation:fxDrop .3s ease-out}
.ap-calc output b{display:inline-block}
.ap-calc output b.ap-fx-bump{animation:fxBump .35s ease-out}

@media (prefers-reduced-motion:no-preference){
  .ap-fx-stripes i{animation:fxStripe 3.2s linear infinite}
  .ap-fx-flag i{animation:fxFlag 1.1s linear infinite}
  .ap-fx-glow{animation:fxBreath 9s ease-in-out infinite alternate}
  .ap-fx-glow.ap-v{animation-duration:12s}
  .ap-btn-y::after{animation:fxShine 4.6s ease-in-out 1.2s infinite}
  .ap-story .ap-ring::before{animation:fxSpin 6s linear infinite}
  .ap-story.ap-seen .ap-ring::before{animation:none}
  .ap-fx-tick div{animation:fxMarq 32s linear infinite}
  .ap-fx-tick:hover div{animation-play-state:paused}
  .ap-stage .ap-phone{animation:fxPhoneIn .9s cubic-bezier(.2,.8,.2,1) both,float 6s ease-in-out 1s infinite}
  .ap-stage .ap-notif.ap-n1{animation:fxNoteL .7s .5s cubic-bezier(.2,.8,.2,1) both}
  .ap-stage .ap-notif.ap-n2{animation:fxNoteR .7s .8s cubic-bezier(.2,.8,.2,1) both}
  .ap-tabbar .ap-tb-play i{animation:fxTab 2.4s ease-in-out 1s 3}
}
@keyframes fxStripe{to{transform:translateY(132.1px)}}
@keyframes fxFlag{to{transform:translateX(44px)}}
@keyframes fxBreath{from{transform:translate(0,0) scale(1)}to{transform:translate(-60px,40px) scale(1.18)}}
@keyframes fxShine{0%{transform:translateX(-160%) skewX(-18deg)}35%,100%{transform:translateX(330%) skewX(-18deg)}}
@keyframes fxSpin{to{transform:rotate(360deg)}}
@keyframes fxMarq{to{transform:translateX(-50%)}}
@keyframes fxPhoneIn{from{transform:translateX(90px) rotate(6deg)}to{transform:translateX(0) rotate(-2deg)}}
@keyframes fxNoteL{from{transform:translateX(-30px) scale(.9)}to{transform:none}}
@keyframes fxNoteR{from{transform:translateX(30px) scale(.9)}to{transform:none}}
@keyframes fxTab{0%,100%{transform:skewX(-10deg) scale(1)}50%{transform:skewX(-10deg) scale(1.12)}}
@keyframes fxDrop{from{transform:translateY(-6px)}to{transform:none}}
@keyframes fxPop{from{transform:translate(-50%,8px) scale(.8)}to{transform:translateX(-50%)}}
@keyframes fxBump{0%{transform:scale(1)}40%{transform:scale(1.15)}100%{transform:scale(1)}}
@media (max-width:600px){.ap-fx-stripes{right:0}.ap-fx-glow{width:340px;height:340px}}
@media (prefers-reduced-motion:reduce){.ap-fx-in{transform:none}.ap-fx-bar{display:none}}