html, body {
  margin: 0;
  width: 100%;
  overflow-x: hidden;
  background: #060812;
}

/* ---------- background animation ---------- */
.bg-anim {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.bg-anim .coin,
.bg-anim .spark {
  position: absolute;
  bottom: -10%;
  animation: floatUp linear infinite;
  opacity: .8;
}

.bg-anim .coin {
  font-size: 32px;
  left: 10%;
  animation-duration: 10s;
}

.bg-anim .spark {
  font-size: 22px;
  left: 80%;
  animation-duration: 7s;
}

@keyframes floatUp {
  from { transform: translateY(0); opacity: 0; }
  20%  { opacity: .8; }
  to   { transform: translateY(-120vh); opacity: 0; }
}

/* ---------- center image ---------- */
.wrap {
  position: relative;
  z-index: 2;

  display: flex;
  justify-content: center;
  padding: 40px 0;
}

.img-box {
  position: relative;
  display: inline-block;
}

.img-box img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ---------- image overlay animation ---------- */
.img-anim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

/* soft moving light */
.shine {
  position: absolute;
  inset: -40%;
  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(146, 93, 12, 0.25),
    transparent 70%
  );
  animation: shineMove 5s linear infinite;
}

@keyframes shineMove {
  from { transform: translateX(-60%) rotate(15deg); }
  to   { transform: translateX(60%) rotate(15deg); }
}

/* sparkles on image */
.img-anim .spark {
  position: absolute;
  font-size: 18px;
  animation: sparkle 3s ease-in-out infinite;
}

.s1 { top: 15%; left: 20%; animation-delay: 0s; }
.s2 { top: 45%; right: 15%; animation-delay: 1s; }
.s3 { bottom: 20%; left: 50%; animation-delay: 2s; }

@keyframes sparkle {
  0%   { transform: scale(.6); opacity: 0; }
  50%  { transform: scale(1.2); opacity: .9; }
  100% { transform: scale(.6); opacity: 0; }
}