.particle-container {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--hero-header-offset, 0px));
  bottom: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  --timescale: 0.5s;
}
.pt {
  display: block;
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  height: 50px;
  animation: moveUpDown calc(var(--timescale) * var(--yt)) infinite cubic-bezier(.45, .05, .55, .95) alternate;
  animation-delay: calc(-1s * var(--d, 0));
}
.pt b {
  display: block;
  background: url(https://res.cloudinary.com/monson-productions/image/upload/v1645640126/glowey_yfdvor.png);
  background-size: contain;
  width: calc(0.1vw * var(--w));
  height: calc(0.1vw * var(--w));
  position: absolute;
  opacity: var(--o, 1);
  animation: moveRightLeft calc(var(--timescale) * var(--xt)) infinite cubic-bezier(.45, .05, .55, .95) alternate,
    flicker calc(2s * var(--xd)) infinite alternate cubic-bezier(.45, .05, .55, .95),
    goldPulse 3s ease-in-out infinite alternate;
  /* drop-shadow는 원본 알파를 사용해 네모 틀 없이 글로우를 입힘 */
  filter:
    drop-shadow(0 0 8px rgba(255, 215, 150, 0.55))
    drop-shadow(0 0 18px rgba(255, 188, 80, 0.35))
    drop-shadow(0 0 28px rgba(240, 160, 60, 0.25));
  animation-delay: calc(-1s * var(--d, 0)), calc(-0.2s * var(--d, 0));
}

@media (max-width: 768px) {
  .particle-container {
    top: calc(-0.6 * var(--hero-header-offset, 0px));
  }
}

/* Fixed particle layout (24개). JS에서 랜덤 값을 넣더라도 여기 !important 값이 적용됩니다. */
.particle-container .pt:nth-child(1)  { --x:50!important; --y:0!important;  --xt:13!important; --yt:12!important; --xd:2!important;   --yd:2!important;   --w:25!important;  --d:1!important;  --o:.9!important; }
.particle-container .pt:nth-child(2)  { --x:16!important; --y:0!important;  --xt:17!important; --yt:10!important; --xd:3!important;   --yd:1!important;   --w:39!important;  --d:6!important;  --o:.5!important; }
.particle-container .pt:nth-child(3)  { --x:16!important; --y:0!important;  --xt:17!important; --yt:10!important; --xd:3!important;   --yd:3!important;   --w:28!important;  --d:4!important;  --o:.9!important; }
.particle-container .pt:nth-child(4)  { --x:66!important; --y:0!important;  --xt:11!important; --yt:13!important; --xd:3!important;   --yd:2!important;   --w:38!important;  --d:2!important;  --o:.9!important; }
.particle-container .pt:nth-child(5)  { --x:56!important; --y:-3!important; --xt:11!important; --yt:10!important; --xd:3!important;   --yd:1!important;   --w:58!important;  --d:0!important;  --o:.9!important; }
.particle-container .pt:nth-child(6)  { --x:19!important; --y:0!important;  --xt:17!important; --yt:10!important; --xd:3!important;   --yd:4!important;   --w:45!important;  --d:9!important;  --o:.7!important; }
.particle-container .pt:nth-child(7)  { --x:49!important; --y:0!important;  --xt:17!important; --yt:10!important; --xd:3!important;   --yd:-4!important;  --w:65!important;  --d:2!important;  --o:.6!important; }
.particle-container .pt:nth-child(8)  { --x:20!important; --y:0!important;  --xt:13!important; --yt:12!important; --xd:2!important;   --yd:4!important;   --w:70!important;  --d:8!important;  --o:.9!important; }
.particle-container .pt:nth-child(9)  { --x:35!important; --y:3!important;  --xt:8!important;  --yt:16!important; --xd:0.5!important; --yd:0.8!important; --w:190!important; --d:5!important;  --o:.7!important; }
.particle-container .pt:nth-child(10) { --x:15!important; --y:10!important; --xt:18!important; --yt:16!important; --xd:0.5!important; --yd:1!important;  --w:190!important; --d:6!important;  --o:.9!important; }
.particle-container .pt:nth-child(11) { --x:15!important; --y:30!important; --xt:9!important;  --yt:22!important; --xd:0.5!important; --yd:1!important;  --w:30!important;  --d:9!important;  --o:.4!important; }
.particle-container .pt:nth-child(12) { --x:4!important;  --y:20!important; --xt:10!important; --yt:7!important;  --xd:1.5!important; --yd:1.2!important; --w:26!important;  --d:12!important; --o:0.4!important; }
.particle-container .pt:nth-child(13) { --x:50!important; --y:40!important; --xt:16!important; --yt:6!important;  --xd:4!important;   --yd:-2!important;  --w:70!important;  --d:5!important;  --o:0.3!important; }
.particle-container .pt:nth-child(14) { --x:50!important; --y:40!important; --xt:16!important; --yt:6!important;  --xd:1!important;   --yd:-2!important;  --w:170!important; --d:0!important;  --o:1!important; }
.particle-container .pt:nth-child(15) { --x:60!important; --y:40!important; --xt:16!important; --yt:6!important;  --xd:1!important;   --yd:2!important;   --w:70!important;  --d:5!important;  --o:0.4!important; }
.particle-container .pt:nth-child(16) { --x:50!important; --y:50!important; --xt:12!important; --yt:7!important;  --xd:1!important;   --yd:1.2!important; --w:100!important; --d:7!important;  --o:0.4!important; }
.particle-container .pt:nth-child(17) { --x:70!important; --y:40!important; --xt:4!important;  --yt:1!important;  --xd:0.5!important; --yd:.2!important;  --w:100!important; --d:7!important;  --o:0.4!important; }
.particle-container .pt:nth-child(18) { --x:2!important;  --y:50!important; --xt:10!important; --yt:7!important;   --xd:1!important;   --yd:1.2!important; --w:20!important;  --d:7!important;  --o:0.4!important; }
.particle-container .pt:nth-child(19) { --x:4!important;  --y:50!important; --xt:10!important; --yt:7!important;  --xd:1.5!important; --yd:1.2!important; --w:16!important;  --d:12!important; --o:0.4!important; }
.particle-container .pt:nth-child(20) { --x:10!important; --y:40!important; --xt:10!important; --yt:17!important; --xd:2!important;   --yd:1.2!important; --w:28!important; --d:7!important;  --o:0.4!important; }
.particle-container .pt:nth-child(21) { --x:70!important; --y:60!important; --xt:12!important; --yt:6!important;  --xd:2!important;   --yd:2!important;   --w:36!important;  --d:5!important;  --o:0.7!important; }
.particle-container .pt:nth-child(22) { --x:10!important; --y:60!important; --xt:12!important; --yt:16!important; --xd:-1!important;  --yd:2.2!important; --w:80!important;  --d:5!important;  --o:0.7!important; }
.particle-container .pt:nth-child(23) { --x:10!important; --y:70!important; --xt:12!important; --yt:26!important; --xd:-1!important;  --yd:2.2!important; --w:110!important; --d:5!important;  --o:0.7!important; }
.particle-container .pt:nth-child(24) { --x:19!important; --y:70!important; --xt:12!important; --yt:26!important; --xd:-1!important;  --yd:3.2!important; --w:20!important;  --d:5!important;  --o:0.7!important; }
@keyframes moveUpDown {
  0% {}
  100% { transform: translateY(calc(50% * var(--yd, 3))); }
}
@keyframes moveRightLeft {
  0% { transform: translateX(calc(-50% * var(--xd, 3))); }
  100% { transform: translateX(calc(50% * var(--xd, 3))); }
}
@keyframes flicker {
  0% { opacity: calc(var(--o, 1) - 0.1); }
  100% { opacity: calc(var(--o, 1) + 0.1); }
}

@keyframes goldPulse {
  0% {
    filter:
      drop-shadow(0 0 8px rgba(255, 205, 130, 0.5))
      drop-shadow(0 0 18px rgba(255, 180, 90, 0.35))
      drop-shadow(0 0 28px rgba(230, 150, 60, 0.22));
  }
  50% {
    filter:
      drop-shadow(0 0 10px rgba(255, 220, 170, 0.6))
      drop-shadow(0 0 22px rgba(255, 200, 120, 0.4))
      drop-shadow(0 0 34px rgba(240, 170, 90, 0.28));
  }
  100% {
    filter:
      drop-shadow(0 0 9px rgba(255, 210, 150, 0.55))
      drop-shadow(0 0 20px rgba(255, 190, 110, 0.38))
      drop-shadow(0 0 30px rgba(245, 170, 80, 0.25));
  }
}