/* Motion. Entrances, route drawing, scroll reveals, counters. All of it switches off under prefers-reduced-motion. */
@property --p { syntax: '<number>'; inherits: false; initial-value: 0; }

:root { --ease: cubic-bezier(.2, .8, .2, 1); --ease-pop: cubic-bezier(.3, 1.5, .5, 1); }

@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes fadeRight { from { opacity: 0; transform: translateX(-18px); } }
@keyframes lineUp { from { transform: translateY(108%); } }
@keyframes barGrow { from { transform: scaleX(0); } }
@keyframes growY { from { transform: scaleY(0); } }
@keyframes growX { from { transform: scaleX(0); } }
@keyframes pop { from { opacity: 0; transform: scale(.4); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(36px); } }
@keyframes draw { 0% { stroke-dashoffset: 1; opacity: 0; } 1% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes ripple { from { transform: scale(1); opacity: .6; } to { transform: scale(3); opacity: 0; } }
@keyframes ghostDrift { from { transform: translateX(-1.5%); } to { transform: translateX(3%); } }
@keyframes cdIn { from { opacity: 0; transform: translateY(34px) scale(.88); } }
@keyframes sweep { from { transform: translateX(-120%); } to { transform: translateX(260%); } }
@keyframes passIn { from { opacity: 0; transform: translateY(60px) rotate(-3deg); } }
@keyframes confetti { 0% { transform: translate3d(0, -20px, 0) rotate(0); opacity: 1; } 100% { transform: translate3d(var(--cx), 105vh, 0) rotate(var(--cr)); opacity: .9; } }
@keyframes drawCheck { from { stroke-dasharray: 30; stroke-dashoffset: 30; } to { stroke-dasharray: 30; stroke-dashoffset: 0; } }
@keyframes cornerPulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes tick { from { opacity: 0; transform: scale(.3) rotate(-30deg); } }

/* ---------- page + hero entrance ---------- */
#app > * { animation: fadeIn .45s ease-out; }

.ln { display: block; overflow: hidden; padding: .03em 0 .05em; margin: -.03em 0 -.05em; }
.ln > span { display: block; animation: lineUp .9s var(--ease) backwards; animation-delay: calc(.18s + var(--i, 0) * .13s); }
.panel--black .bar, .bar { transform-origin: left center; animation: barGrow .9s var(--ease) .05s backwards; }
.fx { animation: fadeUp .85s var(--ease) backwards; animation-delay: calc(.35s + var(--fxd, 0) * .1s); }
.ghost { animation: ghostDrift 26s ease-in-out infinite alternate; will-change: transform; }

.banner { position: relative; overflow: hidden; }
.banner::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 28%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent); transform: translateX(-120%); animation: sweep 1.5s ease-in-out .9s 1 forwards; pointer-events: none; }
.banner__big { animation: fadeUp .8s var(--ease) .15s backwards; }
.banner__tag, .banner__main p, .banner__cta { animation: fadeIn .8s ease-out .35s backwards; }

.hdr__nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--lime); transform: scaleX(0); transform-origin: left; transition: transform .28s var(--ease); }
.hdr__nav a:hover::after { transform: scaleX(1); }
.hdr__nav a.is-on::after { transform: scaleX(1); animation: barGrow .6s var(--ease) .25s backwards; }

.btn .ico, .pill .ico { transition: transform .25s var(--ease); }
.btn:hover .ico:last-child { transform: translateX(5px); }
.pill:hover .ico:first-child { transform: translateX(-4px); }
.btn { position: relative; overflow: hidden; }
.btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(-130%); }
.btn:hover::before { transform: translateX(130%); transition: transform .7s ease; }

/* ---------- route map ---------- */
.rmap__grid { animation: fadeIn 1s ease-out backwards; }
.rmap__blocks rect { animation: fadeIn .8s ease-out backwards; }
.rmap__blocks rect:nth-child(1) { animation-delay: .1s; } .rmap__blocks rect:nth-child(2) { animation-delay: .25s; }
.rmap__blocks rect:nth-child(3) { animation-delay: .4s; } .rmap__blocks rect:nth-child(4) { animation-delay: .55s; }
.rmap__blocks rect:nth-child(5) { animation-delay: .7s; } .rmap__blocks rect:nth-child(6) { animation-delay: .85s; }
.rmap__blocks rect:nth-child(7) { animation-delay: 1s; }
.rmap__artery { stroke-dasharray: 1; }
.rmap__out, .rmap__backbg, .rmap__back { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; animation: draw 1.7s cubic-bezier(.55, 0, .25, 1) .4s forwards; }
.rmap__backbg, .rmap__back { animation-delay: 2.1s; }
.rmap__km circle, .rmap__km text, .rmap__turn, .rmap__sf, .rmap__lab, .rmap__key { transform-box: fill-box; transform-origin: center; animation: pop .55s var(--ease-pop) backwards; }
.rmap__sf { animation-delay: .2s; }
.rmap__lab { animation: fadeIn .6s ease-out .5s backwards; }
.rmap__key { animation: fadeUp .7s var(--ease) .3s backwards; }
.rmap__km circle:nth-of-type(1), .rmap__km text:nth-of-type(1) { animation-delay: .65s; }
.rmap__km circle:nth-of-type(2), .rmap__km text:nth-of-type(2) { animation-delay: 1.2s; }
.rmap__turn { animation-delay: 2.0s; }
.rmap__ripple { fill: var(--lime); stroke: none; transform-box: fill-box; transform-origin: center; animation: ripple 2.6s ease-out 1s infinite backwards; }
.rmap__ripple--2 { animation-delay: 2.3s; }
.rmap__walker circle { fill: #fff; stroke: #000; stroke-width: 3; }

.hero__card { animation: slideUp .9s var(--ease) .8s backwards; }
.cd-anim .cdl { transform-box: fill-box; transform-origin: 50% 100%; animation: cdIn .75s cubic-bezier(.2, .9, .3, 1.15) backwards; animation-delay: calc(var(--d0, .9s) + var(--k) * 55ms); }
.start__logo .cd-anim { --d0: .35s; }
.alog__cd .cd-anim { --d0: .5s; }

/* ---------- scroll reveal ---------- */
.rv { opacity: 0; transform: translateY(30px); transition: opacity .75s var(--ease), transform .75s var(--ease), background .2s; transition-delay: var(--d, 0ms); }
.rv.is-in { opacity: 1; transform: none; }
.rvs { opacity: 0; transform: translateX(-24px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0ms); }
.rvs.is-in { opacity: 1; transform: none; }
.how__grid .num, .trio__i .num, .flow__list .num { transition: transform .5s var(--ease-pop) calc(var(--d, 0ms) + 150ms); }
.rv:not(.is-in) .num { transform: scale(.4); }
.tile .circ { transition: transform .25s var(--ease), background .2s; }
.tile:hover { z-index: 1; }

/* ---------- registration + thank you ---------- */
.stepper li { animation: fadeRight .6s var(--ease) backwards; animation-delay: calc(.5s + var(--i, 0) * .12s); }
.stepper li:nth-child(1) { --i: 0; } .stepper li:nth-child(2) { --i: 1; } .stepper li:nth-child(3) { --i: 2; }
.reg__r > * { animation: fadeUp .7s var(--ease) backwards; }
.reg__r > *:nth-child(1) { animation-delay: .15s; } .reg__r > *:nth-child(2) { animation-delay: .25s; }
.reg__r > *:nth-child(3) { animation-delay: .35s; } .reg__r > *:nth-child(4) { animation-delay: .45s; }
.reg__r > *:nth-child(n+5) { animation-delay: .55s; }
.field.is-err .input { animation: shake .4s ease-in-out; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.ticks li { animation: fadeRight .6s var(--ease) backwards; }
.ticks li:nth-child(1) { animation-delay: .7s; } .ticks li:nth-child(2) { animation-delay: .85s; } .ticks li:nth-child(3) { animation-delay: 1s; }
.ticks .ico { animation: tick .5s var(--ease-pop) backwards; }
.ticks li:nth-child(1) .ico { animation-delay: .8s; } .ticks li:nth-child(2) .ico { animation-delay: .95s; } .ticks li:nth-child(3) .ico { animation-delay: 1.1s; }
.teamcard { animation: slideUp .7s var(--ease) 1.15s backwards; }
.wa { animation: slideUp .7s var(--ease) 1.3s backwards; }
.thanks .reg__r > .pass { animation: passIn 1s var(--ease) .3s backwards; transform-origin: 50% 100%; }
.pass__st li { animation: pop .5s var(--ease-pop) backwards; }
.pass__st li:nth-child(1) { animation-delay: 1.1s; } .pass__st li:nth-child(2) { animation-delay: 1.25s; } .pass__st li:nth-child(3) { animation-delay: 1.4s; }
.confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 60; }
.confetti i { position: absolute; top: 0; width: 10px; height: 16px; opacity: 0; animation: confetti var(--t, 2.6s) cubic-bezier(.3, .6, .5, 1) var(--dl, 0s) forwards; }
.ind__fill { transition: width .25s var(--ease); }
.mail__win { animation: slideUp .8s var(--ease) .15s backwards; }

/* ---------- promoter phone ---------- */
.phone { animation: slideUp .9s var(--ease) .1s backwards; }
.pstage__info > * { animation: fadeUp .8s var(--ease) backwards; }
.vf__c { animation: cornerPulse 2.2s ease-in-out infinite; }
.sim__b { animation: fadeRight .5s var(--ease) backwards; }
.sim__b:nth-of-type(1) { animation-delay: .3s; } .sim__b:nth-of-type(2) { animation-delay: .4s; } .sim__b:nth-of-type(3) { animation-delay: .5s; }
.res__ic { animation: pop .6s var(--ease-pop) .15s backwards; }
.res__ic .ico { animation: drawCheck .6s ease-out .4s backwards; }
.res__top h2, .res__top .label { animation: fadeUp .6s var(--ease) .25s backwards; }
.res__card { animation: slideUp .6s var(--ease) .3s backwards; }
.res__act { animation: slideUp .6s var(--ease) .45s backwards; }
.res--bad .res__ic { animation-name: pop, shake; animation-duration: .6s, .5s; animation-delay: .15s, .75s; animation-fill-mode: backwards, none; }
.rec li { animation: fadeRight .45s var(--ease) backwards; }
.rec li:nth-child(1) { animation-delay: .1s; } .rec li:nth-child(2) { animation-delay: .16s; } .rec li:nth-child(3) { animation-delay: .22s; }
.rec li:nth-child(4) { animation-delay: .28s; } .rec li:nth-child(5) { animation-delay: .34s; } .rec li:nth-child(n+6) { animation-delay: .4s; }

/* ---------- admin ---------- */
.adm__main .adm__top { animation: fadeUp .6s var(--ease) backwards; }
.adm__nav a { animation: fadeRight .5s var(--ease) backwards; }
.adm__nav a:nth-child(1) { animation-delay: .1s; } .adm__nav a:nth-child(2) { animation-delay: .16s; } .adm__nav a:nth-child(3) { animation-delay: .22s; }
.adm__nav a:nth-child(4) { animation-delay: .28s; } .adm__nav a:nth-child(5) { animation-delay: .34s; } .adm__nav a:nth-child(6) { animation-delay: .4s; }
.kpi__bar i { transform-origin: left; transform: scaleX(0); transition: transform 1.3s var(--ease) .3s; }
.is-in .kpi__bar i, .kpi__bar.is-in i { transform: scaleX(1); }
.bar-c i { transform-origin: bottom; transform: scaleY(0); transition: transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 38ms + .2s); }
.is-in .bar-c i { transform: scaleY(1); }
.dbar i { transform-origin: left; transform: scaleX(0); transition: transform 1.1s var(--ease); transition-delay: calc(var(--i, 0) * 60ms + .2s); }
.is-in .dbar i { transform: scaleX(1); }
.pbar i { transform-origin: left; animation: growX 1s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 50ms + .25s); }
.ring { animation: ringFill 1.6s var(--ease) .3s backwards; }
@keyframes ringFill { from { --p: 0; } }
.feed li { opacity: 0; transform: translateX(-16px); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--i, 0) * 70ms + .3s); }
.is-in .feed li { opacity: 1; transform: none; }
.live i { animation: pulse 1.8s infinite; }
.team { animation: pop .5s var(--ease-pop) backwards; animation-delay: calc(var(--i, 0) * 40ms); }
.cm__poster, .cm__mail, .cm__wa { transition: transform .35s var(--ease); }
.cm:hover .cm__poster, .cm:hover .cm__mail, .cm:hover .cm__wa { transform: translateY(-4px); }
.bub { animation: slideUp .5s var(--ease) backwards; }
.bub:nth-child(1) { animation-delay: .3s; } .bub:nth-child(2) { animation-delay: .9s; }
tbody tr { transition: background .15s; }
.drawer__box { animation: slide .35s var(--ease); }
.rolebtn { animation: fadeUp .7s var(--ease) backwards; }
.rolebtn:nth-of-type(1) { animation-delay: .4s; } .rolebtn:nth-of-type(2) { animation-delay: .52s; }

/* ---------- start page ---------- */
.flow__list li:not(:last-child)::before { transform-origin: left; transform: scaleX(0); transition: transform .8s var(--ease) calc(var(--d, 0ms) + 250ms); }
.flow__list li.is-in:not(:last-child)::before { transform: scaleX(1); }
.start__logo { animation: fadeIn 1s ease-out; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-delay: 0s !important; transition-delay: 0s !important; }
  .rv, .rvs, .feed li { opacity: 1 !important; transform: none !important; }
  .bar-c i, .dbar i, .kpi__bar i, .flow__list li::before { transform: none !important; }
  .confetti { display: none; }
}