/* Content remains visible without JavaScript. This effect belongs on the avatar screen only. */
.sb-avatar-reveal { --sb-avatar-reveal-ready:1; position:relative; isolation:isolate; width:100%; aspect-ratio:1; overflow:hidden; }
.sb-avatar-reveal__content { position:absolute; inset:12%; display:grid; place-items:center; }
.sb-avatar-reveal__content > img,.sb-avatar-reveal__content > svg { display:block; width:100%; height:100%; object-fit:contain; }
.sb-avatar-reveal__clouds { display:none; position:absolute; inset:0; pointer-events:none; }
.sb-avatar-reveal__cloud { position:absolute; width:76%; aspect-ratio:260/150; }
.sb-avatar-reveal__cloud svg { display:block; width:100%; height:100%; }
.sb-avatar-reveal__cloud--left { left:-4%; top:37%; }
.sb-avatar-reveal__cloud--right { right:-4%; top:35%; }
.sb-avatar-reveal__cloud--top { left:12%; top:14%; }
.sb-avatar-reveal--playing .sb-avatar-reveal__clouds { display:block; }
.sb-avatar-reveal--playing .sb-avatar-reveal__content { animation:sb-avatar-appear 1.8s ease-in-out both; }
.sb-avatar-reveal--playing .sb-avatar-reveal__cloud--left { animation:sb-avatar-cloud-left 1.8s ease-in-out both; }
.sb-avatar-reveal--playing .sb-avatar-reveal__cloud--right { animation:sb-avatar-cloud-right 1.8s ease-in-out both; }
.sb-avatar-reveal--playing .sb-avatar-reveal__cloud--top { animation:sb-avatar-cloud-top 1.8s ease-in-out both; }
@keyframes sb-avatar-appear {
  0%,16% { opacity:0; transform:scale(.96); }
  52%,100% { opacity:1; transform:scale(1); }
}
@keyframes sb-avatar-cloud-left {
  0% { opacity:0; transform:translate(10%,4%) scale(.84); }
  14%,25% { opacity:1; transform:translate(0%,0%) scale(1); }
  80%,100% { opacity:0; transform:translate(-65%,12%) scale(1.12); }
}
@keyframes sb-avatar-cloud-right {
  0% { opacity:0; transform:translate(-10%,4%) scale(.84); }
  14%,25% { opacity:1; transform:translate(0%,0%) scale(1); }
  80%,100% { opacity:0; transform:translate(65%,12%) scale(1.12); }
}
@keyframes sb-avatar-cloud-top {
  0% { opacity:0; transform:translate(0%,8%) scale(.84); }
  14%,25% { opacity:1; transform:translate(0%,0%) scale(1); }
  85%,100% { opacity:0; transform:translate(0%,-65%) scale(1.06); }
}
@media(prefers-reduced-motion:reduce) {
  .sb-avatar-reveal .sb-avatar-reveal__content { animation:none; opacity:1; transform:none; }
  .sb-avatar-reveal .sb-avatar-reveal__clouds { display:none; }
}
@media print {
  .sb-avatar-reveal .sb-avatar-reveal__content { animation:none; opacity:1; transform:none; }
  .sb-avatar-reveal .sb-avatar-reveal__clouds { display:none; }
}