/* ===== v3 motion layer (loaded after site.css) ===== */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .2s ease-out both}
::view-transition-new(root){animation:vt-in .38s var(--ease) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-10px)}} @keyframes vt-in{from{opacity:0;transform:translateY(12px)}}
.progress{position:fixed;left:0;top:0;height:2px;width:100%;background:var(--g);transform-origin:left;transform:scaleX(0);z-index:70;box-shadow:0 0 12px var(--g)}
@supports (animation-timeline:scroll()){.progress{animation:grow linear both;animation-timeline:scroll(root)}}
@keyframes grow{to{transform:scaleX(1)}}
.cursor-glow{position:fixed;left:0;top:0;width:560px;height:560px;border-radius:50%;pointer-events:none;z-index:1;background:radial-gradient(circle,rgba(34,255,136,.09) 0%,rgba(34,255,136,.03) 40%,transparent 65%);opacity:0;transition:opacity .5s;will-change:transform}
body.has-pointer .cursor-glow{opacity:1}
.site-header{transition:background .3s,box-shadow .3s} .site-header.scrolled{background:rgba(5,8,7,.92);box-shadow:0 10px 40px rgba(0,0,0,.45)}
.menu a{position:relative} .menu a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--g);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease);box-shadow:0 0 10px var(--g)}
.menu a:not(.btn):hover::after,.menu a[aria-current="page"]::after{transform:scaleX(1)} .menu.open a::after{display:none}
.btn{overflow:hidden;transition:transform .18s var(--ease),box-shadow .2s,background .2s,color .2s,translate .35s var(--ease)}
.btn-primary::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);transform:translateX(-130%);transition:transform .7s var(--ease)}
@media (hover:hover) and (pointer:fine){.btn-primary:hover::before{transform:translateX(130%)}}
.btn>*{position:relative}

/* reveal variants */
.reveal{transition:opacity .8s var(--ease),transform .8s var(--ease),filter .8s var(--ease)}
h2.reveal{filter:blur(8px)} .reveal.in{filter:none}
.reveal[data-from="left"]{transform:translateX(-36px)} .reveal[data-from="right"]{transform:translateX(36px)} .reveal[data-from="scale"]{transform:scale(.94)}
.stagger>*{opacity:0}
.stagger.in>*{opacity:1;animation:up .7s var(--ease) backwards;animation-delay:calc(var(--i,0)*90ms)}
@keyframes up{from{opacity:0;transform:translateY(22px)}}
.no-js .stagger>*,.reduce .stagger>*{opacity:1}

/* hero: aurora, parallax, live line */
.aurora{position:absolute;left:50%;top:50%;width:150%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;mask-image:radial-gradient(circle,#000 20%,transparent 70%);-webkit-mask-image:radial-gradient(circle,#000 20%,transparent 70%);background:conic-gradient(from 180deg at 50% 50%,transparent 0 22%,rgba(34,255,136,.06) 34%,rgba(34,255,136,.2) 45%,rgba(34,255,136,.06) 56%,transparent 68% 100%);animation:spin 18s linear infinite;opacity:.8;pointer-events:none;will-change:transform}
@keyframes spin{to{transform:rotate(360deg)}}
.win,.phone,.note{transition:translate .7s var(--ease)}
.win{translate:calc(var(--px,0)*-.6px) calc(var(--py,0)*-.6px);transform:rotateY(calc(8deg + var(--ry,0)*1deg)) rotateX(calc(3deg - var(--rx,0)*1deg));transition:translate .7s var(--ease),transform .7s var(--ease)}
.phone{translate:calc(var(--px,0)*1px) calc(var(--py,0)*1px)} .note{translate:calc(var(--px,0)*1.7px) calc(var(--py,0)*1.7px)}
.note>div{transition:opacity .3s,transform .3s var(--ease)} .note.swap>div{opacity:0;transform:translateY(8px)}
.live-dot{margin-left:auto;width:8px;height:8px;border-radius:50%;background:var(--g);box-shadow:0 0 10px var(--g);animation:glowp 1.8s ease-in-out infinite}
.cal{position:relative} .now{position:absolute;left:52px;right:12px;top:86px;height:1px;background:var(--g);box-shadow:0 0 8px var(--g);animation:nowmove 48s linear infinite;opacity:.9}
.now i{position:absolute;left:-4px;top:-3.5px;width:8px;height:8px;border-radius:50%;background:var(--g)}
@keyframes nowmove{to{transform:translateY(200px)}}
.pick{animation:pickslot 8s var(--ease) infinite}

/* marquee row 2 */
.marq{padding:18px 0;display:grid;gap:14px} .marq-track.rev{animation-direction:reverse;animation-duration:56s}
.marq-track.rev span{font:500 .92rem var(--body);color:var(--mute)} .marq-track.rev b{color:var(--g)} .marq:hover .marq-track{animation-play-state:paused}

/* stats underline */
.stat i{display:block;height:3px;width:0;background:var(--g);margin:16px auto 0;border-radius:2px;box-shadow:0 0 12px var(--g);transition:width 1.2s var(--ease) .3s} .stats.in .stat i{width:44px}

/* tabs: auto progress + watermark + staggered benefits */
.tab{position:relative;overflow:hidden}
.auto .tab[aria-selected="true"]::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--g);transform-origin:left;animation:tabprog 4.5s linear forwards;box-shadow:0 0 10px var(--g)}
@keyframes tabprog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.panel{position:relative} .panel .wm{position:absolute;right:-30px;bottom:-30px;width:240px;height:240px;opacity:.05;transform:rotate(-10deg);pointer-events:none}
.panel .wm svg{width:100%;height:100%;stroke:var(--g);fill:none;stroke-width:1.2}
.panel.on .ben li{animation:up .55s var(--ease) both;animation-delay:calc(var(--i,0)*90ms + .1s)}

/* bento: self-building visuals */
.b3{grid-column:span 4} .b4{grid-column:span 2}
.browser .sk{transform:scaleX(0);transform-origin:left}
.bento.in .browser .sk{animation:build .7s var(--ease) forwards,shine 2.4s linear infinite;animation-delay:.3s}
.bento.in .browser .sk:nth-child(2){animation-delay:.55s}.bento.in .browser .sk:nth-child(3){animation-delay:.8s}.bento.in .browser .sk.g{animation:build .5s var(--ease) 1.1s forwards}
@keyframes build{to{transform:scaleX(1)}}
.chat .bub{opacity:0} .bento.in .chat .bub{opacity:1;animation:up .6s var(--ease) backwards;animation-delay:calc(var(--i,0)*.35s + .4s)}
.bars{display:flex;align-items:flex-end;gap:8px;height:120px;margin-top:auto;padding-top:22px}
.bars i{flex:1;height:var(--h);border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,var(--g),var(--g2));opacity:.45;transform:scaleY(0);transform-origin:bottom}
.bars i:nth-child(6){opacity:1;box-shadow:0 0 24px var(--glow)}
.bento.in .bars i{animation:bar .8s var(--ease) forwards;animation-delay:calc(var(--i)*90ms + .3s)}
@keyframes bar{to{transform:scaleY(1)}}

/* timeline: dots light in sequence + mini scenes */
.dot{border-color:var(--line);color:var(--mute);box-shadow:none}
.tl.in .dot{animation:lit .5s var(--ease) both;animation-delay:calc(var(--i,0)*.5s + .3s)}
@keyframes lit{to{border-color:var(--g);color:var(--g);box-shadow:0 0 30px rgba(34,255,136,.35)}}
.mini{margin-top:18px;padding:14px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.02)}
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px} .days span{text-align:center;font-size:.74rem;padding:8px 0;border-radius:8px;border:1px solid var(--line)}
.build{height:8px;border-radius:999px;background:#16221c;overflow:hidden;margin:8px 0} .build i{display:block;height:100%;background:var(--g);transform:scaleX(0);transform-origin:left;animation:fill 5s var(--ease) infinite;box-shadow:0 0 14px var(--g)}
@keyframes fill{0%{transform:scaleX(0)}70%,90%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
.mini.center{display:grid;place-items:center;min-height:64px}
.ck{width:56px;height:56px;border-radius:50%;background:var(--g);display:grid;place-items:center;box-shadow:0 0 40px var(--glow)} .ck svg{width:28px;height:28px;stroke:#03130a;stroke-width:3.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ck.pulse{animation:glowp 2.4s ease-in-out infinite}

/* neon aurora */
.neon>*{position:relative;z-index:1}
.neon.spin::before{content:"";position:absolute;inset:-60%;background:conic-gradient(from 0deg,transparent 0 30%,rgba(34,255,136,.05) 40%,rgba(34,255,136,.22) 50%,rgba(34,255,136,.05) 60%,transparent 70% 100%);animation:spin 16s linear infinite;will-change:transform}

@media (prefers-reduced-motion:reduce){
  .aurora,.now,.live-dot,.neon.spin::before,.build i,.ck.pulse,.pick,.marq-track{animation:none!important} .cursor-glow{display:none}
  .stagger.in>*,.panel.on .ben li,.bento.in .browser .sk,.bento.in .chat .bub,.bento.in .bars i,.tl.in .dot{animation:none!important;opacity:1;transform:none}
  .browser .sk,.bars i{transform:none} .dot{border-color:var(--g);color:var(--g)} .reveal{filter:none!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}
@media (max-width:980px){.bento .b3,.bento .b4{grid-column:span 6}}

html{overflow-x:hidden} .note{max-width:min(320px,calc(100% - 4px))}
@media (max-width:980px){.reveal[data-from="left"],.reveal[data-from="right"]{transform:translateY(26px)}}
.reveal.in[data-from]{transform:none}