/* Site-wide finish: light that answers the pointer, and a little shine on the main actions.
   Everything here is hover- or focus-driven except the live dot, and all of it is off under
   prefers-reduced-motion. Loaded last so it layers over each page's own styles. */

/* Primary buttons: a soft glow and a light sweep when you point at them. */
.btn-primary{position:relative;overflow:hidden;isolation:isolate}
.btn-primary::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 48%,transparent 62%);transform:translateX(-120%)}
.btn-primary:hover::after,.btn-primary:focus-visible::after{transform:translateX(120%);transition:transform .7s ease}
.btn-primary:hover{box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 10px 30px -8px rgba(11,95,255,.85),0 0 0 1px rgba(61,128,255,.5)}
.btn-ghost:hover{box-shadow:0 0 0 1px rgba(61,128,255,.25),0 8px 24px -14px rgba(61,128,255,.6)}

/* Cards: a light that follows the pointer, and a lit edge. polish.js adds .spot and sets --mx/--my. */
.spot{transition:border-color .2s,box-shadow .25s,transform .2s,background-color .2s}
.spot.spot:hover{background-image:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),rgba(61,128,255,.14),transparent 65%);
  border-color:rgba(61,128,255,.38);box-shadow:0 0 0 1px rgba(61,128,255,.12),0 24px 60px -34px rgba(11,95,255,.7)}
.spot.mintish:hover{background-image:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),rgba(34,230,165,.12),transparent 65%);border-color:rgba(34,230,165,.38);box-shadow:0 0 0 1px rgba(34,230,165,.1),0 24px 60px -34px rgba(34,230,165,.55)}
.svc .ic{transition:box-shadow .25s,transform .25s}
.svc:hover .ic{box-shadow:0 0 0 1px rgba(61,128,255,.35),0 0 28px -4px rgba(61,128,255,.75);transform:translateY(-1px)}

/* Live pills breathe a little light so "Live" reads as on. */
.live-pill{position:relative}
.live-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 0 0 rgba(34,230,165,.6);animation:livePing 2.4s ease-out infinite}
@keyframes livePing{0%{box-shadow:0 0 0 0 rgba(34,230,165,.55)}70%,100%{box-shadow:0 0 0 7px rgba(34,230,165,0)}}

/* The logo catches the light on hover. */
.brand svg{transition:filter .25s,transform .25s}
.brand:hover svg{filter:drop-shadow(0 0 10px rgba(61,128,255,.75));transform:rotate(-6deg)}

/* Nav links get an underline of light. */
.nav-links a{position:relative}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--electric-hi,#3D80FF),transparent);opacity:0;transform:scaleX(.4);transition:opacity .2s,transform .25s}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{opacity:1;transform:none}
.nav-links a[aria-current="page"]{color:var(--text,#F4F6FB)}

/* ==========================================================================
   HBAR SWITCH. One edit flips the whole site from "HBAR coming soon" to "HBAR live".

   Both versions of the copy are already in the pages. Elements marked
   data-hbar="soon" show while HBAR is coming soon. Elements marked data-hbar="live"
   show once HBAR is live. The one rule below hides whichever set is not current.
   The homepage demo checkout reads this rule too, so it adds HBAR by itself.

   TO GO LIVE: on the next line, change  [data-hbar="live"]  to  [data-hbar="soon"]
   Nothing else on the site needs to change.
   ========================================================================== */
[data-hbar="soon"]{display:none!important}

/* ==========================================================================
   ESCROW SWITCH. Same idea for deal escrow on /escrow. Elements marked
   data-escrow="soon" show while escrow is coming soon; data-escrow="live" show
   once it is live. Default is soon. Flip only after Brandon's real mainnet test
   (lock, release, and separately a refund) has gone through end to end.

   TO GO LIVE: on the next line, change  [data-escrow="live"]  to  [data-escrow="soon"]
   and update the <title>/meta description on escrow.html by hand (CSS cannot).
   ========================================================================== */
[data-escrow="live"]{display:none!important}

/* HBAR styling used in both states. Same glow family as the rest of the site, in Hedera purple. */
.coin-chip.hbar-live{border-color:rgba(130,89,239,.45);box-shadow:0 0 0 1px rgba(130,89,239,.12),0 0 18px -6px rgba(130,89,239,.7)}
.btn-hashpack{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding-inline:16px;border-radius:10px;font-weight:600;font-size:14px;color:#fff;
  background:linear-gradient(135deg,#6D47E8,#8259EF);border:1px solid rgba(130,89,239,.6);box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 10px 26px -12px rgba(130,89,239,.9);position:relative;overflow:hidden;isolation:isolate;transition:box-shadow .2s,transform .2s}
.btn-hashpack::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.26) 48%,transparent 62%);transform:translateX(-120%)}
.btn-hashpack:hover::after,.btn-hashpack:focus-visible::after{transform:translateX(120%);transition:transform .7s ease}
.btn-hashpack:hover{box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 12px 30px -10px rgba(130,89,239,1),0 0 0 1px rgba(130,89,239,.5);transform:translateY(-1px)}
.btn-hashpack svg{width:16px;height:16px;flex:none}
/* The demo checkout: a "Scan with HashPack" hint beside the QR on wide screens, a "Pay with HashPack" button on phones. */
.hp-scan{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);margin-top:4px}
.hp-scan svg{width:14px;height:14px;color:#A98BFF;flex:none}
.hp-phone{display:none}
@media (max-width:640px){.hp-scan{display:none}.hp-phone{display:flex;width:100%}}
.co-assets[data-n="3"]{grid-template-columns:repeat(3,1fr)}
.co-assets[data-n="3"] button{font-size:12.5px;gap:5px;padding-inline:6px}

@media (prefers-reduced-motion:reduce){
  .btn-primary::after{display:none}
  .btn-hashpack::after{display:none}
  .live-pill::before{animation:none}
  .brand:hover svg{transform:none}
  .spot{transition:none}
}