.pcg-guilloche{

  --g-x:75%;
  --g-y:50%;
  --g-r:min(30vw,340px);

  --g-safe-top:83px;

  --g-safe-bottom:0px;

  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;

  -webkit-mask-image:linear-gradient(180deg,
    transparent 0 var(--g-safe-top),
    rgba(0,0,0,.45) calc(var(--g-safe-top) + 22px),
    #000 calc(var(--g-safe-top) + 62px),
    #000 calc(100% - var(--g-safe-bottom)),
    rgba(0,0,0,.34) calc(100% - var(--g-safe-bottom) * .42),
    transparent 100%);
          mask-image:linear-gradient(180deg,
    transparent 0 var(--g-safe-top),
    rgba(0,0,0,.45) calc(var(--g-safe-top) + 22px),
    #000 calc(var(--g-safe-top) + 62px),
    #000 calc(100% - var(--g-safe-bottom)),
    rgba(0,0,0,.34) calc(100% - var(--g-safe-bottom) * .42),
    transparent 100%);


  opacity:1;
  animation:pcg-guilloche-strike 1.5s var(--ease,cubic-bezier(.22,1,.36,1)) .12s backwards;
}
@keyframes pcg-guilloche-strike{
  from{opacity:0}
  to{opacity:1}
}

.pcg-guilloche::before{
  content:"";
  position:absolute;
  left:var(--g-x);
  top:var(--g-y);
  width:calc(var(--g-r) * 2);
  height:calc(var(--g-r) * 2);
  translate:-50% -50%;
  border-radius:50%;
  background:repeating-radial-gradient(circle at 50% 50%,
    rgba(201,161,74,.34) 0 1px,
    transparent 1px 12px);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,
    transparent 0 46%,#000 57%,#000 88%,transparent 100%);
          mask-image:radial-gradient(circle at 50% 50%,
    transparent 0 46%,#000 57%,#000 88%,transparent 100%);
  opacity:.55;
  transition:opacity .9s var(--ease,cubic-bezier(.22,1,.36,1));
}
.pcg-guilloche[data-live="1"]::before{opacity:0}

.pcg-guilloche__plate{
  position:absolute;
  inset:0;
  overflow:hidden;

  -webkit-mask-image:linear-gradient(90deg,
    transparent 0 22%,rgba(0,0,0,.18) 42%,#000 66%);
          mask-image:linear-gradient(90deg,
    transparent 0 22%,rgba(0,0,0,.18) 42%,#000 66%);
}
.pcg-guilloche__cv{
  position:absolute;

  left:0;
  top:0;
}

.hero:has(.pcg-guilloche) .hero__particles{display:none}

@media (max-width:960px){
  .pcg-guilloche{
    --g-x:106%;
    --g-y:93%;
    --g-r:calc(min(100vw,100svh) * .323);

    --g-safe-bottom:clamp(38px,9vw,84px);
  }
}

.pcg-guilloche[data-mode="edge"] .pcg-guilloche__plate{
  opacity:.8;

  -webkit-mask-image:linear-gradient(90deg,
    transparent 0 calc(var(--g-x) - var(--g-r) * 1.6),
    rgba(0,0,0,.55) calc(var(--g-x) - var(--g-r) * 1.25),
    #000 calc(var(--g-x) - var(--g-r) * .95));
          mask-image:linear-gradient(90deg,
    transparent 0 calc(var(--g-x) - var(--g-r) * 1.6),
    rgba(0,0,0,.55) calc(var(--g-x) - var(--g-r) * 1.25),
    #000 calc(var(--g-x) - var(--g-r) * .95));
}
@media (max-width:859px){
  .pcg-guilloche::before{opacity:.28}
}

@media (prefers-reduced-motion:reduce){
  .pcg-guilloche{animation:none}
  .pcg-guilloche::before,
  .pcg-guilloche__plate{transition:none}
}

@media (forced-colors:active){
  .pcg-guilloche{display:none}
}