/* ============================================================================
   CoinsHawk · MagicUI design layer
   ----------------------------------------------------------------------------
   Port of the MagicUI design system (magicuidesign/magicui, MIT) to plain CSS:
   the colour and radius tokens from their globals.css (oklch converted to
   sRGB), the keyframes and the effects (Magic Card spotlight, Shine Border,
   Border Beam, Marquee, Bento grid, Blur Fade, Number Ticker, Dot/Grid
   patterns, Shimmer/Rainbow buttons, Shiny text, Scroll progress, click wave).

   Loaded BEFORE theme.css. theme.css builds every component on the --mg-*
   tokens defined here. One scheme only: dark navy (2026-10-17 redesign); the
   values below are the shop's, not MagicUI's neutral greys. Everything
   motion-related is switched off under prefers-reduced-motion.
   ========================================================================== */

/* ----------------------------------------------------------------- 1. Tokens */

/* Dark navy only (2026-10-17): the storefront has one scheme, like the reference shop. */
:root {
  --mg-bg: #0b1017;
  --mg-fg: #e8eef7;
  --mg-card: #121a26;
  --mg-muted: #182230;
  --mg-muted-fg: #8f9db2;
  --mg-border: rgba(148, 170, 200, .14);
  --mg-input: rgba(148, 170, 200, .22);
  --mg-ring: #3b82f6;
  --mg-primary: #2f6fe4;
  --mg-primary-fg: #ffffff;
  --mg-surface: #0e151f;
  --mg-destructive: #ff6b6e;
  --mg-success: #2ecc71;
  --mg-warning: #f5a524;
  --mg-info: #5aa2ff;

  --mg-fg-rgb: 232, 238, 247;
  --mg-bg-rgb: 11, 16, 23;

  --mg-c1: #ff4242;
  --mg-c2: #a142fe;
  --mg-c3: #40a1ff;
  --mg-c4: #43d0ff;
  --mg-c5: #a0ff42;
  --mg-rainbow: linear-gradient(90deg, var(--mg-c1), var(--mg-c5), var(--mg-c3), var(--mg-c4), var(--mg-c2));
  --mg-beam-from: #ffaa40;
  --mg-beam-to: #9c40ff;
  --mg-aurora: linear-gradient(135deg, #ff0080, #7928ca, #0070f3, #38bdf8, #ff0080);

  --mg-radius: 0.625rem;
  --mg-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, .45);
  --mg-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .55), 0 1px 2px -1px rgba(0, 0, 0, .55);
  --mg-shadow: 0 6px 16px -4px rgba(0, 0, 0, .6);
  --mg-shadow-lg: 0 20px 40px -12px rgba(0, 0, 0, .75);

  --mg-dot: rgba(140, 165, 205, .13);
  --mg-line: rgba(140, 165, 205, .07);
  --mg-spot: rgba(90, 150, 255, .08);
  --mg-glass: rgba(11, 16, 23, .76);

  color-scheme: dark;
}

/* ------------------------------------------------------------- 2. Spotlight
   Magic Card: the pointer position arrives as --mg-x / --mg-y (magic.js) and
   lights a soft radial spot. Opt in with .mg-spot, or let theme.css apply it
   to .card and .brand-tile. Beam carriers are excluded (their ::before is the
   rotating gradient). */
/* isolation keeps the z-index:-1 spot inside the carrier: it paints above the
   carrier's own background and below its content, without touching the
   positioning of any child. */
.mg-spot:not(.mg-beam) { position: relative; isolation: isolate; }
.mg-spot:not(.mg-beam)::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
  background: radial-gradient(340px circle at var(--mg-x, 50%) var(--mg-y, 0%), var(--mg-spot), transparent 62%);
  z-index: -1;
}
.mg-spot:not(.mg-beam):hover::before { opacity: 1; }

/* ---------------------------------------------------------- 3. Shine Border */
.mg-shine { position: relative; }
.mg-shine::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--mg-shine-w, 1px);
  background-image: radial-gradient(transparent, transparent, var(--mg-shine-c, var(--mg-c3)), transparent, transparent);
  background-size: 300% 300%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: mgShine var(--mg-shine-d, 14s) infinite linear;
  pointer-events: none;
  will-change: background-position;
  z-index: 2;
}
@keyframes mgShine {
  0% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}

/* ----------------------------------------------------------- 4. Border Beam
   The carrier must be transparent; ::after paints the surface back in. */
.mg-beam { position: relative; isolation: isolate; overflow: hidden; background: transparent !important; }
.mg-beam::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 160%;
  aspect-ratio: 1;
  translate: -50% -50%;
  z-index: -2;
  background: conic-gradient(from 0deg, transparent 0 62%, var(--mg-beam-from) 78%, var(--mg-beam-to) 90%, transparent 100%);
  animation: mgSpin var(--mg-beam-d, 6s) linear infinite;
}
.mg-beam::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: var(--mg-card);
  z-index: -1;
}
@keyframes mgSpin { to { transform: rotate(360deg); } }

/* -------------------------------------------------------------- 5. Buttons */
.mg-btn-shimmer {
  --mg-sh-color: #fff;
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: var(--mg-primary);
  color: var(--mg-primary-fg);
  padding: .68rem 1.4rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .3s ease;
}
.mg-btn-shimmer:hover { color: var(--mg-primary-fg); text-decoration: none; }
.mg-btn-shimmer:active { transform: translateY(1px); }
.mg-btn-shimmer::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 240%;
  aspect-ratio: 1;
  translate: -50% -50%;
  z-index: -2;
  filter: blur(2px);
  background: conic-gradient(from 270deg, transparent 0, var(--mg-sh-color) 12%, transparent 24%);
  animation: mgSpin 3s linear infinite;
}
.mg-btn-shimmer::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: var(--mg-primary);
  z-index: -1;
}

.mg-btn-rainbow {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: var(--mg-radius);
  padding: .6rem 1.25rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--mg-primary-fg);
  background-image:
    linear-gradient(var(--mg-primary), var(--mg-primary)),
    linear-gradient(var(--mg-primary) 50%, color-mix(in srgb, var(--mg-primary) 60%, transparent) 80%, transparent),
    var(--mg-rainbow);
  background-size: 200%;
  background-clip: padding-box, border-box, border-box;
  background-origin: border-box;
  animation: mgRainbow 2s infinite linear;
}
.mg-btn-rainbow::before {
  content: "";
  position: absolute;
  bottom: -20%;
  left: 50%;
  z-index: -1;
  height: 22%;
  width: 60%;
  translate: -50% 0;
  background: var(--mg-rainbow);
  background-size: 200%;
  filter: blur(.75rem);
  animation: mgRainbow 2s infinite linear;
}
@keyframes mgRainbow { 0% { background-position: 0%; } 100% { background-position: 200%; } }

.mg-btn-pulse {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--mg-radius);
  border: 0;
  background: var(--mg-primary);
  color: var(--mg-primary-fg);
  padding: .6rem 1.2rem;
  font-weight: 500;
  cursor: pointer;
  animation: mgPulse 1.6s ease-out infinite;
}
@keyframes mgPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mg-primary) 45%, transparent); }
  50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--mg-primary) 0%, transparent); }
}

/* ----------------------------------------------------------------- 6. Text */
.mg-shiny {
  --mg-shiny-w: 100px;
  color: color-mix(in srgb, var(--mg-muted-fg) 80%, transparent);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--mg-fg) 85%, transparent) 50%, transparent);
  background-size: var(--mg-shiny-w) 100%;
  background-repeat: no-repeat;
  background-position: 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  animation: mgShiny 8s infinite;
}
@keyframes mgShiny {
  0%, 90%, 100% { background-position: calc(-100% - var(--mg-shiny-w)) 0; }
  30%, 60% { background-position: calc(100% + var(--mg-shiny-w)) 0; }
}
.mg-aurora-text {
  background-image: var(--mg-aurora);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: mgAurora 10s ease-in-out infinite alternate;
}
@keyframes mgAurora {
  0% { background-position: 0% 50%; }
  25% { background-position: 50% 100%; }
  50% { background-position: 100% 50%; }
  75% { background-position: 50% 0%; }
  100% { background-position: 0% 50%; }
}
.mg-gradient-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  position: relative;
  border-radius: 999px;
  padding: .35rem .9rem;
  font-size: .8rem;
  font-weight: 500;
  background: var(--mg-muted);
  color: var(--mg-fg);
  isolation: isolate;
}
.mg-gradient-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--mg-rainbow);
  background-size: 300% 100%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: mgGradient 8s linear infinite;
  z-index: -1;
}
@keyframes mgGradient { to { background-position: 300% 0; } }

/* -------------------------------------------------------------- 7. Patterns */
.mg-dots {
  background-image: radial-gradient(var(--mg-dot) 1px, transparent 1px);
  background-size: 18px 18px;
}
.mg-grid {
  background-image:
    linear-gradient(to right, var(--mg-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--mg-line) 1px, transparent 1px);
  background-size: 44px 44px;
}
.mg-mask-fade {
  -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 78%);
  mask-image: radial-gradient(ellipse at center, #000 40%, transparent 78%);
}
.mg-retro {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  perspective: 200px;
  opacity: .5;
}
.mg-retro > i { position: absolute; inset: 0; transform: rotateX(65deg); }
.mg-retro > i::before {
  content: "";
  position: absolute;
  inset: 0 0 0 -100%;
  width: 300%;
  height: 300%;
  background-image:
    linear-gradient(to right, var(--mg-line) 1px, transparent 0),
    linear-gradient(to bottom, var(--mg-line) 1px, transparent 0);
  background-size: 60px 60px;
  transform-origin: 100% 0 0;
  animation: mgRetro 15s linear infinite;
}
@keyframes mgRetro { 0% { transform: translateY(-50%); } 100% { transform: translateY(0); } }

/* -------------------------------------------------------- 8. Meteors, Ripple */
.mg-meteors { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.mg-meteors > i {
  position: absolute;
  top: -10%;
  height: 2px;
  width: 2px;
  border-radius: 999px;
  background: var(--mg-fg);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--mg-fg) 10%, transparent);
  rotate: var(--mg-angle, 215deg);
  animation: mgMeteor var(--mg-dur, 5s) linear infinite;
  animation-delay: var(--mg-delay, 0s);
}
.mg-meteors > i::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--mg-fg) 55%, transparent), transparent);
}
@keyframes mgMeteor {
  0% { transform: translateX(0); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translateX(-520px); opacity: 0; }
}
.mg-ripple { position: absolute; inset: 0; overflow: hidden; pointer-events: none; display: grid; place-items: center; }
.mg-ripple > i {
  position: absolute;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--mg-fg) 12%, transparent);
  background: color-mix(in srgb, var(--mg-fg) 3%, transparent);
  animation: mgRipple 3s ease infinite;
  animation-delay: calc(var(--mg-i, 0) * .2s);
}
@keyframes mgRipple { 0%, 100% { transform: scale(1); } 50% { transform: scale(.9); } }

/* --------------------------------------------------------------- 9. Marquee */
.mg-marquee {
  --mg-gap: 1.5rem;
  --mg-dur: 34s;
  display: flex;
  overflow: hidden;
  gap: var(--mg-gap);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.mg-marquee > * {
  display: flex;
  flex-shrink: 0;
  gap: var(--mg-gap);
  min-width: 100%;
  animation: mgMarquee var(--mg-dur) linear infinite;
}
.mg-marquee:hover > * { animation-play-state: paused; }
@keyframes mgMarquee { from { transform: translateX(0); } to { transform: translateX(calc(-100% - var(--mg-gap))); } }

/* ----------------------------------------------------------------- 10. Orbit */
.mg-orbit { position: relative; display: grid; place-items: center; }
.mg-orbit > i {
  position: absolute;
  display: grid;
  place-items: center;
  animation: mgOrbit calc(var(--mg-dur, 20) * 1s) linear infinite;
}
@keyframes mgOrbit {
  0% { transform: rotate(calc(var(--mg-angle, 0) * 1deg)) translateY(calc(var(--mg-radius, 80) * 1px)) rotate(calc(var(--mg-angle, 0) * -1deg)); }
  100% { transform: rotate(calc(var(--mg-angle, 0) * 1deg + 360deg)) translateY(calc(var(--mg-radius, 80) * 1px)) rotate(calc(var(--mg-angle, 0) * -1deg - 360deg)); }
}

/* ----------------------------------------------------------------- 11. Bento */
.mg-bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; }
.mg-bento > * { grid-column: span 2; min-width: 0; }
.mg-bento .w3 { grid-column: span 3; }
.mg-bento .w4 { grid-column: span 4; }
.mg-bento .w6 { grid-column: span 6; }
@media (max-width: 991.98px) {
  .mg-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mg-bento > * { grid-column: span 2; }
  .mg-bento .w3, .mg-bento .w4, .mg-bento .w6 { grid-column: span 4; }
}
@media (max-width: 575.98px) {
  .mg-bento { grid-template-columns: minmax(0, 1fr); }
  .mg-bento > *, .mg-bento .w3, .mg-bento .w4, .mg-bento .w6 { grid-column: span 1; }
}

/* ------------------------------------------------------------- 12. Blur Fade */
.mg-js .mg-fade {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(8px);
  transition: opacity .45s ease, filter .45s ease, transform .45s cubic-bezier(.2, .8, .3, 1);
}
.mg-js .mg-fade.in { opacity: 1; filter: none; transform: none; }

/* ---------------------------------------------------------------- 13. Ticker */
.mg-ticker { font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* ------------------------------------------------------- 14. Scroll progress */
.mg-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  z-index: 1080;
  background: var(--mg-rainbow);
  transition: width .08s linear;
}

/* ------------------------------------------------------------- 15. Click wave */
.mg-wave {
  position: absolute;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 26%, transparent);
  transform: scale(0);
  animation: mgWave .6s ease-out;
  pointer-events: none;
}
@keyframes mgWave { to { transform: scale(2.4); opacity: 0; } }

/* --------------------------------------------------------- 16. Motion off */
@media (prefers-reduced-motion: reduce) {
  .mg-shine::after,
  .mg-beam::before,
  .mg-btn-shimmer::before,
  .mg-btn-rainbow,
  .mg-btn-rainbow::before,
  .mg-btn-pulse,
  .mg-shiny,
  .mg-aurora-text,
  .mg-gradient-pill::before,
  .mg-retro > i::before,
  .mg-meteors > i,
  .mg-ripple > i,
  .mg-marquee > *,
  .mg-orbit > i { animation: none !important; }
  .mg-js .mg-fade { opacity: 1; filter: none; transform: none; transition: none; }
  .mg-spot:not(.mg-beam)::before { display: none; }
}
@media print {
  .mg-js .mg-fade { opacity: 1; filter: none; transform: none; transition: none; }
  .mg-progress, .mg-shine::after, .mg-beam::before { display: none; }
}