/* MagneDS — effect utilities (ship to consumers via styles.css).
   Metallic gold "foil" so gold text and surfaces read as shiny gold, not beige. */

/* Faint gold grid — the premium portal backdrop. Lay behind page content;
   pair with a top glow for the "lit from the top" look. */
:root {
  --grid-size: 64px;
  --grid-gold: rgba(201, 168, 76, 0.05); /* @kind other */
}
.u-grid {
  background-image:
    linear-gradient(var(--grid-gold) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-gold) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
}
/* Grid that fades out toward the bottom, brightest under the top glow. */
.u-grid-fade {
  background-image:
    linear-gradient(var(--grid-gold) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-gold) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  -webkit-mask-image: radial-gradient(120% 80% at 50% -10%, #000 0%, rgba(0,0,0,0.4) 45%, transparent 80%);
  mask-image: radial-gradient(120% 80% at 50% -10%, #000 0%, rgba(0,0,0,0.4) 45%, transparent 80%);
}

/* Premium soft-rounded card — big radius, faint gold hairline, top sheen. */
.u-card-premium {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-xl);
  box-shadow: inset 0 1px 0 rgba(255, 248, 200, 0.04), var(--shadow-card);
}

/* Clip the gold foil gradient to the glyphs — premium gold text. */
.u-gold-foil-text {
  background: var(--gold-foil);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Gold foil surface (e.g. a CTA), with a soft inset sheen + depth. */
.u-gold-foil {
  background: var(--gold-foil);
  color: var(--black);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 200, 0.65),
    inset 0 -2px 4px rgba(120, 86, 20, 0.45),
    var(--shadow-gold);
}
.u-gold-foil:hover {
  background: var(--gold-foil-hover);
}