/* A soft star field behind the hero content, in both languages and at every size. */
.hero-stars{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:.65;background-image:radial-gradient(circle at 17% 24%,#e8e2c3 0 .8px,transparent 1.7px),radial-gradient(circle at 74% 16%,#c8ad70 0 1px,transparent 2px),radial-gradient(circle at 38% 65%,#d5e1e4 0 .65px,transparent 1.5px),radial-gradient(circle at 88% 72%,#c8ad70 0 .7px,transparent 1.6px);background-size:337px 283px,491px 367px,251px 413px,577px 239px;mask-image:linear-gradient(transparent 8%,#000 24%,#000 74%,transparent 98%);animation:smile-starlight 6s ease-in-out infinite alternate}
.hero-stars i{position:absolute;width:var(--star-size,6px);height:var(--star-size,6px);left:var(--star-x);top:var(--star-y);background:#e0ca92;opacity:.4;clip-path:polygon(50% 0,59% 39%,100% 50%,59% 59%,50% 100%,41% 59%,0 50%,41% 39%);filter:drop-shadow(0 0 4px #c8ad7066);animation:smile-star-sparkle var(--star-time,5s) ease-in-out var(--star-delay,0s) infinite alternate}
.hero:has(#motion[aria-pressed=true]) .hero-stars,.hero:has(#motion[aria-pressed=true]) .hero-stars i{animation-play-state:paused}
@keyframes smile-starlight{from{opacity:.42}to{opacity:.76}}
@keyframes smile-star-sparkle{0%,20%{opacity:.18;transform:scale(.65)}80%,100%{opacity:.75;transform:scale(1)}}
@media(max-width:760px){.hero-stars{background-size:279px 311px,391px 437px,281px 293px,421px 519px}.hero-stars i{max-width:7px;max-height:7px}}
@media(prefers-reduced-motion:reduce){.hero-stars,.hero-stars i{animation:none}.hero-stars{opacity:.55}.hero-stars i{opacity:.5}}