/* Explorer view — motion & polish layer.
   Rule of thumb: nothing is ever hidden on first paint. Load-time motion only
   moves things that are already visible; fades are reserved for network switches. */

/* ── Header ── */
.xh{transition:box-shadow .3s var(--e),background .3s}
.xh[data-s]{box-shadow:0 8px 24px -16px rgba(20,28,40,.28)}

/* ── Hero: one quiet load sequence ── */
.hero-pane:not([hidden]) .tile{animation:x-pop .8s var(--spring) backwards}
.hero-pane:not([hidden]) h1{animation:x-shine 1.7s cubic-bezier(.4,0,.2,1) .35s backwards}
.hero-pane:not([hidden]) .glance:before{animation:x-edge 1s var(--e) .15s backwards}
@keyframes x-pop{from{transform:scale(.86) rotate(-5deg)}}
@keyframes x-edge{from{transform:scaleX(0)}}
@keyframes x-shine{
  from{background:linear-gradient(100deg,var(--ink) 0 41%,var(--a) 50%,var(--ink) 59% 100%) 100% 0/270% 100% no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  to{background:linear-gradient(100deg,var(--ink) 0 41%,var(--a) 50%,var(--ink) 59% 100%) 0% 0/270% 100% no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
}

/* ── Network switch (user initiated): panes swap with a short, staggered entrance ── */
.hero-pane.is-in .hero-main{animation:x-swap .5s var(--e) backwards}
.hero-pane.is-in .glance{animation:x-swap .55s var(--e) .06s backwards}
.hero-pane.is-in .glance .rw{animation:x-row .5s var(--e) calc(var(--r)*55ms + .14s) backwards}
.hero-pane.is-in .tile{animation:x-pop .8s var(--spring) backwards}
.p-card.is-in{animation:x-swap .5s var(--e) backwards}
.p-card.is-in .rec-l li{animation:x-line .42s var(--e) calc(var(--ci,0)*45ms + .1s) backwards}
.rec-l li:nth-child(1){--ci:0}.rec-l li:nth-child(2){--ci:1}.rec-l li:nth-child(3){--ci:2}.rec-l li:nth-child(4){--ci:3}.rec-l li:nth-child(5){--ci:4}.rec-l li:nth-child(6){--ci:5}
@keyframes x-line{from{opacity:0;transform:translate3d(-8px,0,0)}}
@keyframes x-swap{from{opacity:0;transform:translate3d(0,12px,0)}}
@keyframes x-row{from{opacity:0;transform:translate3d(10px,0,0)}}
@keyframes x-chip{from{opacity:0;transform:translate3d(0,6px,0) scale(.92)}}

/* ── Structure → Consensus → Settlement: the signal draws once when the card is seen ── */
html[data-net=TRX]{--run:.7s}html[data-net=XRP]{--run:.85s}html[data-net=ETH]{--run:1.15s}html[data-net=BTC]{--run:1.7s}
.js .p-card:not(.seen) .pf-line i{transform:scaleY(0)}
.js .p-card:not(.seen) .pf-dot{transform:scale(.7);opacity:.45}
.p-card .pf-dot{transition:transform .5s var(--spring),opacity .3s}
.p-card.seen .pf-line i{animation:x-draw-y calc(var(--run,.9s)*.6) var(--e) calc(var(--k,0)*var(--run,.9s)*.45 + .1s) backwards}
.p-card.seen .pf-dot{animation:x-dot .6s var(--spring) calc(var(--k,0)*var(--run,.9s)*.45) backwards}
@keyframes x-draw-y{from{transform:scaleY(0)}}
@keyframes x-draw-x{from{transform:scaleX(0)}}
@keyframes x-dot{from{transform:scale(.4);box-shadow:0 0 0 0 color-mix(in srgb,var(--a) 50%,transparent)}60%{box-shadow:0 0 0 9px color-mix(in srgb,var(--a) 0%,transparent)}}
@media(min-width:900px){
  .js .p-card:not(.seen) .pf-line i{transform:scaleX(0)}
  .p-card.seen .pf-line i{animation-name:x-draw-x}
}


/* Timeline: a tick lands with a small spring and a ring that fades out */
.mn.live .tk{transition:transform .35s var(--spring),background .2s,box-shadow .3s}
.mn.live .tk.on{animation:x-land .6s var(--e)}
@keyframes x-land{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--a) 55%,transparent)}100%{box-shadow:0 0 0 12px color-mix(in srgb,var(--a) 0%,transparent)}}
.mn.live.run .ln-gap{animation:x-hatch 1.6s linear infinite}
@keyframes x-hatch{to{background-position:-17px 0}}
.mn.live .ln-c b{transition:color .2s}
.ln[aria-pressed=true] .ln-c b{color:var(--at)}
.ln:active{background:color-mix(in srgb,var(--a) 7%,#fff)}


/* ── Press / hover feedback that tells you something is interactive ── */


.btn.b1{box-shadow:0 1px 2px rgba(20,28,40,.12),0 10px 18px -12px color-mix(in srgb,var(--a) 70%,transparent)}
.btn.b1:hover{box-shadow:0 1px 2px rgba(20,28,40,.12),0 14px 24px -12px color-mix(in srgb,var(--a) 80%,transparent)}
.btn svg{transition:transform .25s var(--e)}
@media(hover:hover){.btn:hover svg{transform:translate(2px,2px)}.xl a[href^="#"]:hover svg{transform:translateY(2px)}.p-lb .btn:hover svg,.xl a[target]:hover svg{transform:translate(2px,-2px)}}
@media(hover:hover){.f-nets a:hover svg{transform:translate(2px,-2px)}.f-nets svg{transition:transform .25s var(--e)}.f-end a:hover svg{transform:translateY(-2px)}.f-end svg{transition:transform .25s var(--e)}}

/* Footer spectrum grows in when the footer is reached */
@media(prefers-reduced-motion:no-preference){
  footer.f .f-spec i{animation:x-draw-x .9s var(--e) calc(var(--k,0)*110ms) backwards}
}

/* Lookup: a short shake when the input is not a recognised format */
.sx-f.shake{animation:x-shake .38s cubic-bezier(.36,.07,.19,.97)}
@keyframes x-shake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.sx-h{transition:color .2s}

/* ── Reduced motion: keep state changes, drop movement ── */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .js .p-card:not(.seen) .pf-line i{transform:none}
  .js .p-card:not(.seen) .pf-dot{transform:none;opacity:1}
}