.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;
}

html.hero-low-perf .particle-container {
  display: none;
}
.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);
  /* 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. */
.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; }
@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); }
}