.gold-rain {
  position: fixed;
  inset: 0;
  height: 100dvh;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
  perspective: 1100px;
  perspective-origin: 50% 50%;
  opacity: 1;
  will-change: auto;
}

.gold-bar {
  --bar-w: 156px;
  --bar-h: 72px;
  --x: 50vw;
  --y: -180px;
  --rx: -18deg;
  --ry: 24deg;
  --rz: -8deg;
  --scale: 1;
  --z: 0px;
  --bar-blur: 0px;
  position: absolute;
  left: 0;
  top: 0;
  width: var(--bar-w);
  height: var(--bar-h);
  opacity: 0;
  transform-style: flat;
  transform-origin: 50% 50%;
  transform: translate3d(var(--x), var(--y), var(--z)) rotateZ(var(--rz)) scale(var(--scale));
  filter: blur(var(--bar-blur)) drop-shadow(0 18px 10px rgba(24, 15, 2, .35)) drop-shadow(0 4px 3px rgba(255, 220, 104, .22));
  /* No CSS transition here: gold-rain.js runs a persistent rAF loop that eases every
     value (position, rotation, opacity, blur) toward its scroll-driven target every
     frame, so motion is already smoothed continuously — a CSS transition on top would
     just add a second, laggier layer of smoothing on top of the JS one. */
  will-change: transform, opacity, filter;
}

.gold-bar__face {
  position: absolute;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 239, 158, .58);
  border-radius:8px;
  box-shadow:inset 0 1px 0 rgba(255,252,212,.92),inset 0 -9px 16px rgba(88,48,0,.32),inset 8px 0 14px rgba(255,234,132,.22),0 7px 0 #7d4b03,0 12px 14px rgba(0,0,0,.26);
  backface-visibility: hidden;
}

.gold-bar__face::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg, transparent 18%, rgba(255,255,255,.48) 39%, transparent 57%);
  transform: translateX(-130%);
  animation: gold-glint 4.8s ease-in-out infinite;
  animation-delay: var(--glint-delay, 0s);
}

.gold-bar__face::before {
  content:"";
  position:absolute;
  inset:6px;
  border:1px solid rgba(91,52,0,.28);
  border-radius:5px;
  box-shadow:inset 0 0 0 1px rgba(255,244,172,.24), inset 0 7px 12px rgba(255,242,164,.2), inset 0 -8px 14px rgba(81,44,0,.2);
  pointer-events:none;
}

.gold-bar__front,
.gold-bar__back {
  width: var(--bar-w);
  height: var(--bar-h);
  clip-path:polygon(7% 0,93% 0,100% 13%,100% 87%,93% 100%,7% 100%,0 87%,0 13%);
  background:radial-gradient(ellipse at 30% 18%,rgba(255,250,199,.98) 0 3%,transparent 22%),linear-gradient(155deg,#fff0a2 0%,#e8bd43 28%,#bd790a 71%,#814802 100%);
  transform:none;
}

.gold-bar__back,.gold-bar__top,.gold-bar__bottom,.gold-bar__left,.gold-bar__right { display:none; }

.gold-bar__stamp {
  color: rgba(74, 42, 0, .78);
  font: 600 9px/1 "DM Mono", monospace;
  letter-spacing: .14em;
  text-align: center;
  text-shadow: 0 1px rgba(255,255,255,.25);
}

@keyframes gold-glint { 0%,68%,100%{transform:translateX(-130%)} 82%{transform:translateX(130%)} }

@media (max-width: 700px) {
  .gold-bar { --bar-w: 112px; --bar-h: 52px; }
  .gold-bar:nth-child(n+6) { display:none; }
}

@media (prefers-reduced-motion: reduce) { .gold-rain { display:none; } }