/* G9 gold finish. The only animated paint is a short pass over the hero glyphs.
   Dust and button reflections animate transform/opacity only. No animated blur. */
:root {
  --gold-metal: linear-gradient(176deg,
    #fff6cf 0%, #f9df8a 17%, #d4a247 33%, #fff1b4 47%,
    #fffbe0 50%, #e5b85c 60%, #c18b32 78%, #f5d889 100%);
  --gold-glint: linear-gradient(110deg,
    transparent 36%, #fff8dc00 43%, #fff8dc99 48%,
    #ffffff 50%, #fff8dc99 52%, #fff8dc00 57%, transparent 64%);
  --gold-glow: 0 0 9px #efbd4c24, 0 0 26px #eaa72d16;
}
.gold-text {
  width: fit-content;
  max-width: 100%;
  color: #f6d17d;
  text-shadow: var(--gold-glow);
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  :is(.gold-text, .text-link, .step-num, .game-tile small) {
    background-image: var(--gold-metal);
    background-repeat: no-repeat;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  .hero .gold-text {
    background-image: var(--gold-glint), var(--gold-metal);
    background-size: 240% 100%, 100% 100%;
    background-position: 150% 0, 0 0;
    animation: g9-gold-pass 8s linear infinite;
    animation-play-state: paused;
  }
}
/* Six seconds of still metallic gold, then one soft travelling reflection. */
@keyframes g9-gold-pass {
  0%, 72% { background-position: 150% 0, 0 0; }
  94%, 100% { background-position: -150% 0, 0 0; }
}
.hero { isolation: isolate; }
.hero .hero-content { z-index: 3; }
.hero::after { z-index: 0; }
.gold-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  contain: layout paint style;
  pointer-events: none;
  user-select: none;
}
.gold-particle {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: #ffe9a5;
  box-shadow: 0 0 5px 1px #efc66555;
  opacity: .26;
  animation: g9-gold-dust var(--duration) ease-in-out var(--delay) infinite;
  animation-play-state: paused;
}
.gold-particle:nth-child(5n)::after {
  content: '';
  position: absolute;
  inset: -3px;
  background: linear-gradient(90deg, transparent 45%, #fff2b7b3 50%, transparent 55%),
    linear-gradient(transparent 45%, #fff2b7b3 50%, transparent 55%);
}
@keyframes g9-gold-dust {
  0%, 100% { transform: translate3d(0, 12px, 0) scale(.72); opacity: .08; }
  30% { opacity: .55; }
  65% { transform: translate3d(var(--drift), calc(-1 * var(--rise)), 0) scale(1); opacity: .35; }
  85% { opacity: .10; }
}
.hero[data-gold-motion='running'] :is(.gold-text, .gold-particle) {
  animation-play-state: running;
}
.btn.primary {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(135deg, #fff0b3 0%, #f5cf75 38%, #dca443 78%, #f8da87 100%);
  box-shadow: inset 0 1px 0 #fff7d6b3, inset 0 -1px 0 #a96e1f40,
    0 3px 18px #d9a33d1c;
}
.btn.primary::before {
  content: '';
  position: absolute;
  inset: -20% -45%;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 40%, #ffffff66 50%, transparent 60%);
  transform: translate3d(-80%, 0, 0);
  opacity: 0;
}
.btn.primary:is(:hover, :focus-visible)::before {
  animation: g9-button-reflection .8s ease-out both;
}
@keyframes g9-button-reflection {
  0% { transform: translate3d(-80%, 0, 0); opacity: 0; }
  20% { opacity: .75; }
  100% { transform: translate3d(80%, 0, 0); opacity: 0; }
}
@media (max-width: 700px) {
  /* Eight small edge motes; no full-screen particle canvas or render loop. */
  .gold-particle:nth-child(n+9) { display: none; }
  .hero .gold-text { animation-duration: 10s; }
}
@media (prefers-reduced-motion: reduce) {
  .hero .gold-text, .gold-particle, .btn.primary::before {
    animation: none !important;
  }
  .hero .gold-text {
    background-image: var(--gold-metal);
    background-size: 100% 100%;
    background-position: 0 0;
  }
  .gold-particles { display: none; }
}
@media (forced-colors: active) {
  :is(.gold-text, .text-link, .step-num, .game-tile small) {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
    text-shadow: none;
    animation: none !important;
  }
  .gold-particles, .btn.primary::before { display: none; }
}