/* Paid backgrounds share two decorative layers; the free background stays still. */
.profile-card-face:where([data-profile-background]:not([data-profile-background="classic"])) { isolation: isolate; }
.profile-card-face:where([data-profile-background]:not([data-profile-background="classic"])) > * { position: relative; z-index: 1; }
.profile-card-face:where([data-profile-background]:not([data-profile-background="classic"]))::before,
.profile-card-face:where([data-profile-background]:not([data-profile-background="classic"]))::after {
  content: ""; position: absolute; inset: -20%; z-index: 0; pointer-events: none;
  animation: var(--profile-motion, profile-glimmer 7s ease-in-out infinite alternate);
}
.profile-card-face:where([data-profile-background]:not([data-profile-background="classic"]))::after { animation: var(--profile-detail-motion, profile-glimmer 5s ease-in-out infinite alternate-reverse); }
.profile-card-face[data-profile-background="dawn"] {
  background: linear-gradient(90deg, transparent 30%, #9b775133 31% 33%, transparent 34% 69%, #9b775133 70% 72%, transparent 73%), linear-gradient(145deg, #f8d6b8, #e9cebc 54%, #99b1a8);
  color: #443b36; --profile-motion: profile-daylight 14s ease-in-out infinite alternate;
}
.profile-card-face[data-profile-background="dawn"]::before { background: linear-gradient(118deg, transparent 34%, #fff4c78c 35% 47%, transparent 48% 60%, #fff4c752 61% 67%, transparent 68%); }
.profile-card-face[data-profile-background="dawn"]::after { background: radial-gradient(ellipse at 38% 28%, #fff8da88, transparent 48%); }
.profile-card-face[data-profile-background="observatory"] {
  background: radial-gradient(ellipse at 85% 85%, #75637c55, transparent 55%), repeating-linear-gradient(32deg, transparent 0 65px, #9bb5dc16 66px 67px), linear-gradient(140deg, #142f42, #24344f 58%, #494158);
  color: #f4eedc; --profile-motion: profile-glimmer 6s ease-in-out infinite alternate;
}
.profile-card-face[data-profile-background="observatory"]::before { background: radial-gradient(circle at 25% 30%, #fff1c4 0 1px, transparent 2px), radial-gradient(circle at 76% 22%, #fff4d9 0 2px, transparent 3px), radial-gradient(circle at 80% 65%, #e0eaff 0 1px, transparent 2px), radial-gradient(circle at 35% 78%, #e0eaff 0 1px, transparent 2px); }
.profile-card-face[data-profile-background="observatory"]::after { inset: 16% auto auto 55%; width: 70px; height: 1px; background: linear-gradient(90deg, transparent, #f9ebc9); transform: rotate(-28deg); animation: profile-shooting-star 10s ease-in-out infinite; }
.profile-card-face[data-profile-background="aurora"] {
  background: radial-gradient(ellipse at 80% 0, #458b9544, transparent 60%), linear-gradient(150deg, #112c40, #293657 65%, #403251);
  color: #f0f6f0; --profile-motion: profile-aurora 12s ease-in-out infinite alternate;
}
.profile-card-face[data-profile-background="aurora"]::before { background: linear-gradient(113deg, transparent 15%, #6ee4c244 30%, #b3f6bf6b 35%, transparent 45%, #9281e35c 56%, #7ee1d744 62%, transparent 72%); filter: blur(9px); }
.profile-card-face[data-profile-background="aurora"]::after { background: radial-gradient(circle at 25% 28%, #ffffffbb 0 1px, transparent 2px), radial-gradient(circle at 75% 63%, #ffffff99 0 1px, transparent 2px); }
.profile-card-face[data-profile-background="rain"] {
  background: linear-gradient(90deg, transparent 25%, #29455333 26% 28%, transparent 29% 72%, #29455333 73% 75%, transparent 76%), linear-gradient(155deg, #93afb9, #657f90 58%, #344b63);
  color: #fffaf0;
}
.profile-card-face[data-profile-background="rain"]::before { content: none; animation: none; }
.profile-card-face > palette-profile-rain { display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.profile-card-face[data-profile-background="rain"]::after { background: radial-gradient(ellipse at 25% 80%, #f6d39555, transparent 45%); }
.profile-card-face[data-profile-background="petals"] {
  background: radial-gradient(ellipse at 0 0, #ca8e9e44, transparent 55%), linear-gradient(140deg, #f4dce0, #f6e8d7 60%, #c0c9b5);
  color: #59404a; --profile-motion: profile-petals 13s linear infinite;
}
.profile-card-face[data-profile-background="petals"]::before { background: radial-gradient(ellipse at 22% 24%, #c9769399 0 4px, transparent 5px), radial-gradient(ellipse at 75% 43%, #e19aadcc 0 3px, transparent 4px), radial-gradient(ellipse at 58% 80%, #d582a199 0 4px, transparent 5px), radial-gradient(ellipse at 35% 64%, #ecc1cfcc 0 5px, transparent 6px); }
.profile-card-face[data-profile-background="petals"]::after { background: radial-gradient(ellipse at 68% 30%, #fffaf066, transparent 50%); }
.profile-card-face[data-profile-background="sea"] {
  background: linear-gradient(178deg, #d8e8df 0 36%, #96c8c3 37% 55%, #609ea9 56% 67%, #e5d2b2 68%);
  color: #234851; --profile-motion: profile-tide 9s ease-in-out infinite alternate;
}
.profile-card-face[data-profile-background="sea"]::before { inset: 48% -25% 18%; border-radius: 45%; background: repeating-linear-gradient(175deg, transparent 0 13px, #eafff080 14px 16px, transparent 17px 27px); }
.profile-card-face[data-profile-background="sea"]::after { background: radial-gradient(ellipse at 70% 15%, #fff9dd88, transparent 38%); }
.profile-card-face[data-profile-background="lantern"] {
  background: radial-gradient(ellipse at 50% 100%, #a76b5366, transparent 60%), linear-gradient(150deg, #273b52, #46405c 55%, #6d4b52);
  color: #fff0da; --profile-motion: profile-lanterns 16s ease-in-out infinite;
}
.profile-card-face[data-profile-background="lantern"]::before { background: radial-gradient(ellipse 8px 11px at 24% 48%, #ffe6a7 35%, #ecac6777 70%, transparent 100%), radial-gradient(ellipse 6px 8px at 76% 70%, #ffe3a1 35%, #ecac6777 70%, transparent 100%), radial-gradient(ellipse 5px 7px at 65% 22%, #ffe3a1 35%, #ecac6744 70%, transparent 100%); }
.profile-card-face[data-profile-background="lantern"]::after { background: radial-gradient(ellipse at 22% 45%, #efb37633, transparent 28%), radial-gradient(ellipse at 78% 66%, #efb37633, transparent 24%); }
.profile-card-face[data-profile-background="fireflies"] {
  background: radial-gradient(ellipse at 10% 100%, #496f53 0, transparent 50%), radial-gradient(ellipse at 95% 100%, #416552 0, transparent 55%), linear-gradient(145deg, #193a3c, #23483f 65%, #465b3d);
  color: #f3f0cc; --profile-motion: profile-fireflies 10s ease-in-out infinite alternate;
}
.profile-card-face[data-profile-background="fireflies"]::before { background: radial-gradient(circle at 25% 42%, #f4ed9d 0 1px, #dae47855 2px, transparent 6px), radial-gradient(circle at 76% 67%, #f4ed9d 0 2px, #dae47855 3px, transparent 8px), radial-gradient(circle at 37% 80%, #f4ed9d 0 1px, #dae47855 2px, transparent 6px); }
.profile-card-face[data-profile-background="fireflies"]::after { background: radial-gradient(circle at 68% 28%, #e8e8a7 0 1px, #dae47844 2px, transparent 6px), radial-gradient(circle at 20% 73%, #e8e8a7 0 1px, #dae47844 2px, transparent 5px); }
@keyframes profile-glimmer { from { opacity: .3; } to { opacity: .9; } }
@keyframes profile-daylight { from { transform: translateX(-4%); opacity: .45; } to { transform: translateX(6%); opacity: .85; } }
@keyframes profile-shooting-star { 0%, 68%, 100% { opacity: 0; transform: translate(0, 0) rotate(-28deg); } 73% { opacity: .85; } 85% { opacity: 0; transform: translate(-100px, 60px) rotate(-28deg); } }
@keyframes profile-aurora { from { transform: translateX(-6%) skewX(-8deg); opacity: .5; } to { transform: translateX(6%) skewX(9deg); opacity: .95; } }
@keyframes profile-petals { 0% { opacity: 0; transform: translate(-3%, -13%) rotate(-7deg); } 20%, 75% { opacity: .9; } 100% { opacity: 0; transform: translate(7%, 15%) rotate(12deg); } }
@keyframes profile-tide { from { transform: translate(-4%, -4%) rotate(-2deg); } to { transform: translate(4%, 5%) rotate(1deg); } }
@keyframes profile-lanterns { 0% { opacity: .2; transform: translate(0, 12%); } 30%, 70% { opacity: .9; } 100% { opacity: .2; transform: translate(3%, -12%); } }
@keyframes profile-fireflies { from { transform: translate(-3%, 4%); opacity: .35; } to { transform: translate(4%, -3%); opacity: .95; } }
@media (prefers-reduced-motion: reduce) {
  .profile-card-face[data-profile-background]::before,
  .profile-card-face[data-profile-background]::after { animation: none !important; transform: none; }
  .profile-card-face[data-profile-background="observatory"]::after { opacity: 0; }
}