/* ==========================================================================
   Home page extras: hero coin scene and the announcements strip.
   Uses only the tokens from style-v2.css.
   ========================================================================== */

/* ---------------- Hero: gold coin and bars ---------------- */
.coin-scene{ position: relative; width: 100%; max-width: 500px; margin-inline: auto; }
.coin-scene svg{ width: 100%; height: auto; overflow: visible; display: block; }
.coin-float{ animation: gc-float 7s ease-in-out infinite; }
.coin-glow{ animation: gc-glow 6s ease-in-out infinite; transform-origin: 50% 50%; }
.coin-shine{ animation: gc-shine 6.5s ease-in-out infinite; }
.coin-spark{ animation: gc-twinkle 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.coin-spark:nth-of-type(2){ animation-delay: 1.3s; }
.coin-spark:nth-of-type(3){ animation-delay: 2.4s; }
@keyframes gc-float{ 0%, 100%{ transform: translateY(0); } 50%{ transform: translateY(-14px); } }
@keyframes gc-glow{ 0%, 100%{ opacity: .55; } 50%{ opacity: .95; } }
@keyframes gc-shine{ 0%, 50%{ transform: translateX(-280px); } 100%{ transform: translateX(300px); } }
@keyframes gc-twinkle{ 0%, 100%{ opacity: .2; transform: scale(.6); } 50%{ opacity: 1; transform: scale(1); } }

/* ---------------- Announcements strip ---------------- */
.announce{ background: var(--ink); border-bottom: 1px solid var(--line-dark); padding: 26px 0; }
.announce[hidden]{ display: none; }
.announce__label{
  display: inline-block; margin-bottom: 14px;
  color: var(--gold-bright); font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.announce__list{ display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.ad-banner{
  display: grid; grid-template-columns: 132px 1fr; gap: 18px; align-items: center;
  background: var(--ink-2); border: 1px solid var(--line-dark); border-radius: 8px;
  padding: 14px; color: var(--text-light);
}
.ad-banner--noimg{ grid-template-columns: 1fr; padding: 20px 22px; }
.ad-banner img{ width: 132px; height: 96px; object-fit: cover; border-radius: 6px; }
.ad-banner h3{ font-size: 17px; margin-bottom: 4px; color: var(--gold-bright); }
.ad-banner p{ font-size: 14.5px; color: var(--text-light-dim); line-height: 1.6; }
@media (max-width: 560px){
  .announce__list{ grid-template-columns: 1fr; }
  .ad-banner{ grid-template-columns: 1fr; }
  .ad-banner img{ width: 100%; height: 140px; }
}

/* ---------------- Hero: buy / sell buttons and live price line ---------------- */
.hero__ctas{ flex-wrap: wrap; }
.btn--outline-gold{ border-color: var(--gold-bright); color: var(--gold-bright); }
.btn--outline-gold:hover{ background: rgba(212,175,55,.12); }
.hero__price{ margin-top: 18px; font-size: 14.5px; color: var(--text-light-dim); }
.hero__price b{ color: var(--gold-bright); font-size: 17px; }
.hero__price a{ color: var(--gold-bright); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.hero__updated{ font-size: 13px; color: var(--text-light-dim); }
.hero__updated:not(:empty)::before{ content: "\00a0\00b7\00a0"; }