/* Drifting-metals hero background (templates/partials/_hero_metals.html +
   hero-metals.js). The coin field is built by JS; legibility comes from the
   cream veil here. Cream literals are rgb(247,243,232) = --surface-app. */

@keyframes cor-drift { from { transform: translateX(0); } to { transform: translateX(-1400px); } }
@keyframes cor-drift-wide { from { transform: translateX(0); } to { transform: translateX(-1900px); } }
@keyframes cor-sheen {
  0% { transform: translateX(-130%) skewX(-8deg); }
  100% { transform: translateX(240%) skewX(-8deg); }
}

/* Hero section that hosts the field: positioned, clipped, content centered. */
.hero--metals {
  position: relative;
  overflow: hidden;
  min-height: 560px;
  display: flex;
  align-items: center;
  padding: 0;
  background: var(--surface-app);
}

/* Background layer (decorative). JS appends the drifting field into __field. */
.hero-metals { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero-metals__field { position: absolute; inset: 0; }
.hero-metals__veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgb(247,243,232) 0%, rgba(247,243,232,.96) 27%, rgba(247,243,232,.55) 52%, rgba(247,243,232,.06) 80%, rgba(247,243,232,0) 100%),
    linear-gradient(180deg, rgba(247,243,232,.9) 0%, transparent 16%, transparent 80%, rgba(247,243,232,.92) 100%);
}

/* Hero copy sits above the field. */
.hero-metals-content { position: relative; z-index: 1; width: 100%; }
.hero--metals .hero-copy { max-width: 540px; padding: var(--space-16) 0; }

/* Compact "banner" treatment for secondary pages (pricing, faq): shorter, with
   a centered, stronger veil so centered headings stay legible over the field. */
.hero--metals.hero--compact { min-height: 320px; }
.hero--compact .hero-metals-content { text-align: center; padding: var(--space-12) 0; }
.hero--compact .upgrade-head,
.hero--compact .faq-head { margin-bottom: 0; }
.hero--compact .hero-metals__veil {
  background:
    linear-gradient(180deg, rgba(247,243,232,.96) 0%, rgba(247,243,232,.52) 42%, rgba(247,243,232,.52) 58%, rgba(247,243,232,.97) 100%),
    linear-gradient(0deg, rgba(247,243,232,.58), rgba(247,243,232,.58));
}
@media (max-width: 880px) {
  .hero--metals.hero--compact { min-height: 260px; }
}

/* Smaller, more-legible treatment where copy spans the field on narrow screens. */
@media (max-width: 880px) {
  .hero--metals { min-height: 460px; }
  .hero--metals .hero-copy { padding: var(--space-12) 0; }
  .hero-metals__veil {
    background:
      linear-gradient(90deg, rgb(247,243,232) 0%, rgba(247,243,232,.92) 42%, rgba(247,243,232,.6) 72%, rgba(247,243,232,.2) 100%),
      linear-gradient(180deg, rgba(247,243,232,.94) 0%, rgba(247,243,232,.45) 30%, rgba(247,243,232,.45) 68%, rgba(247,243,232,.95) 100%);
  }
}

/* Respect reduced-motion: keep the coins, stop the drift + sheen. */
@media (prefers-reduced-motion: reduce) {
  .hero-metals__field > *,
  .hero-metals__field * { animation: none !important; }
}