/* Button fill-sweep effect: on hover/focus a new colour sweeps across the button
   from LEFT to RIGHT. On mouse-out it exits to the right, so the motion always
   travels in one direction.
   Applies to every .btn (primary + ghost). To flip the direction, swap the two
   transform-origin values below (left <-> right). */

.btn{
  position:relative;
  overflow:hidden;
  isolation:isolate;                 /* keeps the ::before layer inside the button */
  --fill-dur:.55s;
  --fill-ease:cubic-bezier(.65,.05,.25,1);
  transition:
    transform .25s,
    box-shadow .25s,
    color var(--fill-dur) var(--fill-ease),
    border-color var(--fill-dur) var(--fill-ease);
}

.btn::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  transform:scaleX(0);
  transform-origin:right center;     /* exit side (mouse-out): fill leaves to the right */
  transition:transform var(--fill-dur) var(--fill-ease);
  pointer-events:none;
  will-change:transform;
}

/* --- colours of the sweeping fill --- */
.btn-primary::before{background:linear-gradient(135deg,#5cc8ff,#9be7ff)}
.btn-ghost::before{background:linear-gradient(135deg,#EBBA41,#f6d77a)}

/* --- trigger --- */
.btn:focus-visible::before,
.btn:active::before{
  transform:scaleX(1);
  transform-origin:left center;      /* entry side: fill starts from the left */
}
.btn-primary:focus-visible,.btn-primary:active{color:#06101f}
.btn-ghost:focus-visible,.btn-ghost:active{color:#1a1204;border-color:#EBBA41 !important}

@media (hover:hover){
  .btn:hover::before{
    transform:scaleX(1);
    transform-origin:left center;
  }
  .btn-primary:hover{color:#06101f}
  .btn-ghost:hover{color:#1a1204;border-color:#EBBA41 !important}
}

@media (prefers-reduced-motion:reduce){
  .btn,.btn::before{--fill-dur:.01s}
}


/* Larger Moniex currency character in the About section */
#about .character-img{width:430px;max-width:100%;}
@media(max-width:720px){#about > .container.about-grid > .about-copy > .about-character-mobile{min-height:0;padding:4px 0;}#about > .container.about-grid > .about-copy > .about-character-mobile .character-img{width:100%;max-width:420px;} }