/* ============================================================
   Licensed Brokers animation layer
   Effects adapted from reactbits / originkit / lightswind idioms:
   dot-field canvas, aurora glow, shiny text, scroll reveal,
   count-up, magnetic buttons, tilt cards, scroll progress,
   decrypt text, spotlight cards, pixel trail cursor.
   All vanilla, no framework, no runtime deps.
   ============================================================ */

/* ---------- scroll progress bar ---------- */
#progress{
  position:fixed;top:0;left:0;height:2px;width:0;z-index:200;
  background:linear-gradient(90deg,var(--acid),var(--acid));
  box-shadow:0 0 12px rgba(226,184,72,.55);
  transition:width .08s linear;
}

/* ---------- hero canvas backdrop ---------- */
#dots{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;opacity:.55;z-index:0;
}
.hero-in{position:relative;z-index:1}

/* ---------- aurora glow behind hero ---------- */
.aurora{
  position:absolute;top:-30%;right:-15%;width:70%;height:150%;
  pointer-events:none;z-index:0;filter:blur(80px);opacity:.32;
  background:
    radial-gradient(closest-side at 50% 50%, rgba(226,184,72,.55), transparent 70%),
    radial-gradient(closest-side at 70% 30%, rgba(226,184,72,.30), transparent 70%);
  animation:aurora 14s ease-in-out infinite alternate;
}
@keyframes aurora{
  0%{transform:translate3d(0,0,0) scale(1) rotate(0deg)}
  50%{transform:translate3d(-4%,3%,0) scale(1.12) rotate(6deg)}
  100%{transform:translate3d(3%,-2%,0) scale(1.05) rotate(-4deg)}
}

/* ---------- scroll reveal ---------- */
[data-rv]{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
[data-rv].in{opacity:1;transform:none}
[data-rv="left"]{transform:translateX(-28px)}
[data-rv="scale"]{transform:scale(.94)}
[data-rv].in[data-rv="left"],[data-rv].in[data-rv="scale"]{transform:none}

/* stagger children */
[data-stagger] > *{opacity:0;transform:translateY(22px);
  transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
[data-stagger].in > *{opacity:1;transform:none}

/* ---------- shiny text (hero em + section em) ---------- */
.shine{
  background:linear-gradient(100deg,
    var(--acid) 20%, #f6ffd0 38%, var(--acid) 56%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:shine 4.5s linear infinite;
}
@keyframes shine{0%{background-position:180% 0}100%{background-position:-80% 0}}
.sec.paper .shine{
  background:linear-gradient(100deg,#5f7a00 20%,#9dc400 38%,#5f7a00 56%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

/* ---------- magnetic / glow buttons ---------- */
.b1,.nav-btn{position:relative;overflow:hidden;
  transition:transform .18s cubic-bezier(.2,.7,.3,1),background .15s,box-shadow .2s}
.b1::after,.nav-btn::after{
  content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);
}
.b1:hover::after,.nav-btn:hover::after{animation:sweep .75s ease}
@keyframes sweep{to{left:140%}}
.b1:hover{box-shadow:0 8px 30px rgba(241,244,228,.16)}
.b2{position:relative;transition:transform .18s cubic-bezier(.2,.7,.3,1),border-color .2s,box-shadow .2s}
.b2:hover{box-shadow:0 8px 26px rgba(0,0,0,.35)}

/* ---------- spotlight cards (bento / steps) ---------- */
.bx,.st,.vbox{position:relative;overflow:hidden}
.bx::before,.st::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity .3s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),
    rgba(226,184,72,.12), transparent 62%);
}
.bx:hover::before,.st:hover::before{opacity:1}
.bx{transition:transform .3s cubic-bezier(.2,.7,.3,1),border-color .3s}
.bx:hover{transform:translateY(-4px);border-color:rgba(226,184,72,.34)}

/* ---------- tilt cards (grid + grails) ---------- */
.card,.gr{transform-style:preserve-3d;will-change:transform;
  transition:transform .22s cubic-bezier(.2,.7,.3,1),border-color .22s,box-shadow .22s}
.card:hover,.gr:hover{box-shadow:0 14px 40px rgba(0,0,0,.5)}
.card img,.gr img{transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.card:hover img,.gr:hover img{transform:scale(1.06)}

/* grail rank badge slides up */
.gr{position:relative}
.gr .lab{transition:background .25s,color .25s}
.gr:hover .lab{background:rgba(226,184,72,.1)}

/* ---------- count-up numbers ---------- */
.bx .big,.mt .v,.hero-facts b{font-variant-numeric:tabular-nums}

/* ---------- marquee: pause on hover + edge fade ---------- */
.marq{position:relative}
.marq::before,.marq::after{
  content:"";position:absolute;top:0;bottom:0;width:130px;z-index:2;pointer-events:none;
}
.marq::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.marq::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}
.marq:hover .marq-t{animation-play-state:paused}
.marq-t img{transition:transform .3s cubic-bezier(.2,.7,.3,1),filter .3s;filter:grayscale(.28)}
.marq-t img:hover{transform:scale(1.14) translateY(-5px);filter:grayscale(0);z-index:3;position:relative}

/* ---------- hero art frame ---------- */
.hero-art{perspective:900px}
.hero-art img{transition:transform .5s cubic-bezier(.2,.7,.3,1),opacity .25s}
.hero-art:hover img{transform:rotateY(-5deg) rotateX(3deg) scale(1.02)}
.hero-art::before{
  content:"";position:absolute;inset:-1px;pointer-events:none;z-index:2;
  background:linear-gradient(135deg,rgba(226,184,72,.55),transparent 40%,transparent 60%,rgba(226,184,72,.35));
  opacity:0;transition:opacity .35s;
}
.hero-art:hover::before{opacity:1}

/* ---------- ticker pip glow ---------- */
.pip{box-shadow:0 0 0 0 rgba(226,184,72,.6);animation:pipPulse 2.2s infinite}
@keyframes pipPulse{
  0%{box-shadow:0 0 0 0 rgba(226,184,72,.55)}
  70%{box-shadow:0 0 0 9px rgba(226,184,72,0)}
  100%{box-shadow:0 0 0 0 rgba(226,184,72,0)}
}

/* ---------- filter row hover slide ---------- */
.opt{transition:background .16s,padding-left .16s}
.opt:hover{padding-left:20px}

/* ---------- modal entrance ---------- */
.modal{opacity:0;transition:opacity .22s}
.modal.on{opacity:1}
.modal .mi{transform:translateY(18px) scale(.97);opacity:0;
  transition:transform .3s cubic-bezier(.2,.8,.3,1),opacity .3s}
.modal.on .mi{transform:none;opacity:1}
.ms .tr{opacity:0;transform:translateX(10px);animation:trIn .4s forwards}
@keyframes trIn{to{opacity:1;transform:none}}

/* ---------- results grid entrance ---------- */
.grid .card{animation:cardIn .42s cubic-bezier(.2,.8,.3,1) backwards}
@keyframes cardIn{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}

/* ---------- chip pop ---------- */
.chip{animation:chipIn .28s cubic-bezier(.2,.8,.3,1)}
@keyframes chipIn{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}

/* ---------- section heading underline draw ---------- */
.kicker{position:relative;display:inline-block;padding-bottom:8px}
.kicker::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:currentColor;opacity:.42;transition:width .9s cubic-bezier(.2,.7,.3,1) .15s;
}
[data-rv].in .kicker::after,.sec-head.in .kicker::after{width:100%}

/* ---------- pixel trail cursor ---------- */
.px-trail{
  position:fixed;width:8px;height:8px;pointer-events:none;z-index:190;
  background:var(--acid);opacity:.85;
  animation:pxFade .62s linear forwards;
}
@keyframes pxFade{to{opacity:0;transform:scale(.2)}}

/* ---------- nav shrink on scroll ---------- */
nav{transition:height .25s,background .25s,box-shadow .25s}
nav.small{box-shadow:0 6px 26px rgba(0,0,0,.42)}
nav.small .nav-in{height:54px}

/* ---------- respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  #dots,.aurora{display:none}
  [data-rv],[data-stagger] > *{opacity:1 !important;transform:none !important}
}


/* ---------- mobile + touch tuning ---------- */
@media (max-width:900px){
  /* canvas field is desktop-only: saves battery, avoids scroll jank */
  #dots{display:none}
  .aurora{opacity:.22;filter:blur(60px)}
  .marq::before,.marq::after{width:56px}
  .px-trail{display:none}
}
@media (hover:none),(pointer:coarse){
  .px-trail{display:none}
  .card:hover img,.gr:hover img{transform:none}
  .bx:hover{transform:none}
  .hero-art:hover img{transform:none}
  .marq-t img:hover{transform:none}
  .opt:hover{padding-left:16px}
  /* tap feedback instead of hover */
  .card:active,.gr:active{transform:scale(.97);border-color:var(--acid)}
  .b1:active,.b2:active,.nav-btn:active{transform:scale(.97)}
}
/* burger open animation */
.burger .ic{transition:transform .22s}
.burger[aria-expanded="true"] .ic{transform:rotate(90deg)}
/* filter drawer slide */
.fil{transform-origin:top}
.fil.open{animation:drawer .26s cubic-bezier(.2,.8,.3,1)}
@keyframes drawer{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}


/* ============================================================
   Acid lime palette accents (Robinhood Chain #e2b848)
   ============================================================ */

/* hero gets a lime horizon wash instead of the old warm glow */
.hero::after{
  background:
    radial-gradient(820px 420px at 80% 18%, rgba(226,184,72,.10), transparent 62%),
    radial-gradient(500px 300px at 12% 88%, rgba(63,216,200,.06), transparent 65%) !important;
}
.aurora{
  background:
    radial-gradient(closest-side at 50% 50%, rgba(226,184,72,.50), transparent 70%),
    radial-gradient(closest-side at 72% 28%, rgba(63,216,200,.24), transparent 70%) !important;
}

/* primary button: lime slab, dark ink, glow on hover */
.b1,.nav-btn{background:var(--acid);color:var(--ink)}
.b1:hover,.nav-btn:hover{
  background:var(--acid-3);
  box-shadow:0 0 0 1px rgba(226,184,72,.5), 0 10px 34px rgba(226,184,72,.22);
}
.b2:hover{border-color:var(--acid);color:var(--acid)}

/* status pip: lime pulse */
.pip{background:var(--acid);box-shadow:0 0 10px var(--acid-glow)}
@keyframes pipPulse{
  0%{box-shadow:0 0 10px var(--acid-glow),0 0 0 0 rgba(226,184,72,.5)}
  70%{box-shadow:0 0 10px var(--acid-glow),0 0 0 10px rgba(226,184,72,0)}
  100%{box-shadow:0 0 10px var(--acid-glow),0 0 0 0 rgba(226,184,72,0)}
}

/* scanline texture over dark sections, very subtle */
.sec:not(.paper)::before,.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.35;
  background:repeating-linear-gradient(
    to bottom, rgba(226,184,72,.022) 0 1px, transparent 1px 3px);
}
.sec{position:relative}
.sec > .wrap{position:relative;z-index:1}

/* left rule marks the kicker like a terminal prompt */
.kicker{padding-left:14px}
.kicker::before{
  content:"";position:absolute;left:0;top:1px;bottom:9px;width:2px;
  background:var(--acid);box-shadow:0 0 8px var(--acid-glow);
}
.sec.paper .kicker::before{background:#5f7a00;box-shadow:none}

/* bento: acid top-edge on hover */
.bx::after{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--acid),transparent);
  opacity:0;transition:opacity .3s;
}
.bx:hover::after{opacity:1}

/* metric numbers pick up lime on the paper sections */
.sec.paper .mt .v{color:#4e6600}
.bx .big.gold{color:var(--acid);text-shadow:0 0 26px rgba(226,184,72,.28)}
.bx .big.green{color:var(--cyan)}

/* grail cards: lime frame + corner ticks */
.gr{position:relative}
.gr::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  border:1px solid transparent;transition:border-color .25s;
}
.gr:hover::after{border-color:rgba(226,184,72,.45)}
.gr:hover .lab b{text-shadow:0 0 12px var(--acid-glow)}

/* token cards: lime rank chip */
.card .m .r{color:var(--acid)}
.card:hover{border-color:var(--acid);box-shadow:0 12px 34px rgba(0,0,0,.55),0 0 0 1px rgba(226,184,72,.2)}

/* search focus ring */
.srch:focus{box-shadow:0 0 0 1px rgba(226,184,72,.35),0 0 22px rgba(226,184,72,.12)}

/* proof box: terminal feel */
.vbox{background:linear-gradient(180deg,rgba(226,184,72,.03),transparent 40%),var(--card)}
.kv .v a:hover{color:var(--acid-3);border-bottom-color:var(--acid)}

/* scroll progress in lime */
#progress{background:linear-gradient(90deg,var(--acid-2),var(--acid));
  box-shadow:0 0 14px var(--acid-glow)}

/* pixel trail in lime */
.px-trail{background:var(--acid);box-shadow:0 0 6px var(--acid-glow)}

/* selection */
::selection{background:var(--acid);color:var(--ink)}

/* focus-visible for keyboard users */
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:2px solid var(--acid);outline-offset:2px}

/* marquee edge fades follow the new bg */
.marq::before{background:linear-gradient(90deg,var(--card),transparent)}
.marq::after{background:linear-gradient(270deg,var(--card),transparent)}

@media (max-width:900px){
  .sec:not(.paper)::before,.hero::before{display:none}
}