36-character-flower/docs/settlement-gold-border-animation.css

@property --gold-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes rotating-gold-border {
  to {
    --gold-angle: 360deg;
  }
}

@keyframes gold-border-pulse {
  0%,
  100% {
    opacity: 0.34;
    transform: scale(0.992);
  }

  50% {
    opacity: 0.54;
    transform: scale(1.008);
  }
}

.gold-reveal-shell {
  --gold-angle: 0deg;
  position: absolute;
  inset: calc(var(--design-unit) * 2.6);
  border-radius: calc(var(--design-unit) * 16);
  overflow: hidden;
  clip-path: inset(0 round calc(var(--design-unit) * 16));
  pointer-events: none;
}

.gold-reveal-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: calc(var(--design-unit) * 16);
  padding: calc(var(--design-unit) * 5.6);
  background: conic-gradient(
    from var(--gold-angle),
    #534217 10%,
    #534217 20%,
    #ffe226 45%,
    #534217 60%,
    #534217 85%,
    #ffe226 95%,
    #534217 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: rotating-gold-border 8s linear infinite;
}

.gold-reveal-shell::after {
  content: "";
  position: absolute;
  inset: calc(var(--design-unit) * 1);
  border-radius: calc(var(--design-unit) * 15);
  padding: calc(var(--design-unit) * 4);
  background: conic-gradient(
    from calc(var(--gold-angle) + 180deg),
    rgba(255, 247, 210, 0) 0%,
    rgba(255, 247, 210, 0) 66%,
    rgba(255, 252, 232, 0.14) 71%,
    rgba(255, 254, 244, 0.98) 75%,
    rgba(255, 230, 130, 0.96) 79%,
    rgba(255, 247, 210, 0.18) 84%,
    rgba(255, 247, 210, 0) 90%,
    rgba(255, 247, 210, 0) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: rotating-gold-border 2.1s linear infinite;
}

.gold-reveal-static-border {
  position: absolute;
  inset: calc(var(--design-unit) * 2.8);
  border-radius: calc(var(--design-unit) * 16);
  border: calc(var(--design-unit) * 7.4) solid rgba(181, 138, 40, 0.98);
  box-shadow:
    inset 0 0 calc(var(--design-unit) * 14) rgba(255, 241, 181, 0.38),
    0 0 calc(var(--design-unit) * 18) rgba(255, 210, 102, 0.32);
  pointer-events: none;
}

.gold-reveal-glow {
  position: absolute;
  inset: calc(var(--design-unit) * 1.4);
  border-radius: calc(var(--design-unit) * 18);
  background: radial-gradient(
    circle at center,
    rgba(255, 226, 92, 0.18) 0%,
    rgba(219, 161, 42, 0.14) 42%,
    rgba(127, 86, 13, 0.08) 62%,
    transparent 82%
  );
  filter: blur(calc(var(--design-unit) * 2.8));
  opacity: 0.36;
  pointer-events: none;
  animation: gold-border-pulse 1.9s ease-in-out infinite;
}

.mobile-gold-reveal-shell {
  --gold-angle: 0deg;
  position: absolute;
  inset: calc(var(--design-unit) * 2.2);
  border-radius: calc(var(--design-unit) * 7);
  overflow: hidden;
  clip-path: inset(0 round calc(var(--design-unit) * 7));
  pointer-events: none;
}

.mobile-gold-reveal-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: calc(var(--design-unit) * 7);
  padding: calc(var(--design-unit) * 2.5);
  background: conic-gradient(
    from var(--gold-angle),
    #534217 10%,
    #534217 20%,
    #ffe226 45%,
    #534217 60%,
    #534217 85%,
    #ffe226 95%,
    #534217 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: rotating-gold-border 8s linear infinite;
}

.mobile-gold-reveal-shell::after {
  content: "";
  position: absolute;
  inset: calc(var(--design-unit) * 0.5);
  border-radius: calc(var(--design-unit) * 6.5);
  padding: calc(var(--design-unit) * 1.7);
  background: conic-gradient(
    from calc(var(--gold-angle) + 180deg),
    rgba(255, 247, 210, 0) 0%,
    rgba(255, 247, 210, 0) 66%,
    rgba(255, 247, 210, 0.14) 71%,
    rgba(255, 254, 244, 0.98) 75%,
    rgba(255, 230, 130, 0.96) 79%,
    rgba(255, 247, 210, 0.18) 84%,
    rgba(255, 247, 210, 0) 90%,
    rgba(255, 247, 210, 0) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: rotating-gold-border 2.1s linear infinite;
}

.mobile-gold-reveal-static-border {
  position: absolute;
  inset: calc(var(--design-unit) * 2.7);
  border-radius: calc(var(--design-unit) * 7);
  border: calc(var(--design-unit) * 2.8) solid rgba(181, 138, 40, 0.98);
  box-shadow:
    inset 0 0 calc(var(--design-unit) * 7) rgba(255, 241, 181, 0.38),
    0 0 calc(var(--design-unit) * 9) rgba(255, 210, 102, 0.32);
  pointer-events: none;
}

.mobile-gold-reveal-glow {
  position: absolute;
  inset: calc(var(--design-unit) * 1.4);
  border-radius: calc(var(--design-unit) * 8);
  background: radial-gradient(
    circle at center,
    rgba(255, 226, 92, 0.2) 0%,
    rgba(219, 161, 42, 0.16) 42%,
    rgba(127, 86, 13, 0.08) 62%,
    transparent 82%
  );
  filter: blur(calc(var(--design-unit) * 1.4));
  opacity: 0.42;
  pointer-events: none;
  animation: gold-border-pulse 1.9s ease-in-out infinite;
}