.opening-layer{--opening-duration:2.8s;z-index:10;color:#60636b;position:absolute;inset:0;overflow:hidden}.opening-ground{background:#efeff3;position:absolute;inset:0}.opening-moon{--moon-size:clamp(90px, 24vw, 108px);width:var(--moon-size);aspect-ratio:1;margin:calc(var(--moon-size) * -.5) 0 0 calc(var(--moon-size) * -.5);opacity:0;background:linear-gradient(140deg,#fafafc,#d9dbe2);border-radius:50%;position:absolute;top:43%;left:50%;overflow:hidden;transform:scale(.94);box-shadow:inset 1px 1px 5px #ffffff65,inset -3px -4px 12px #adb1bd12}.opening-moon:after{content:"";background:#efeff3;border-radius:50%;position:absolute;inset:-2px;transform:translate(-13%)}.opening-name{text-align:center;letter-spacing:3px;opacity:0;width:100%;font:400 24px/1.2 system-ui,sans-serif;position:absolute;top:calc(43% + 80px);left:0}.opening-fog{opacity:0;background:#efeff37a;position:absolute;inset:0}.opening-error{text-align:center;width:100%;margin:0;padding:0 24px;font-size:13px;position:absolute;top:50%}.opening-layer[data-opening-phase=playing]{animation:opening-reveal var(--opening-duration) linear both}.opening-layer[data-opening-phase=playing] .opening-ground{animation:opening-ground var(--opening-duration) linear both}.opening-layer[data-opening-phase=playing] .opening-moon{animation:opening-moon var(--opening-duration) cubic-bezier(.3,.5,.25,1) both}.opening-layer[data-opening-phase=playing] .opening-moon:after{animation:opening-phase var(--opening-duration) ease-in-out both}.opening-layer[data-opening-phase=playing] .opening-name{animation:opening-name var(--opening-duration) ease-in-out both}.opening-layer[data-opening-phase=playing] .opening-fog{animation:opening-fog var(--opening-duration) ease-in-out both}@keyframes opening-reveal{0%,67%{opacity:1;-webkit-backdrop-filter:blur();backdrop-filter:blur()}76%{opacity:1;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}92%{opacity:1;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}to{opacity:0;-webkit-backdrop-filter:blur();backdrop-filter:blur()}}@keyframes opening-ground{0%,67%{opacity:1}86%,to{opacity:0}}@keyframes opening-moon{0%,8%{opacity:0;transform:scale(.94)}22%{opacity:.24;transform:scale(.98)}40%{opacity:.75;transform:scale(1)}49%{opacity:.82;transform:scale(1.035)}60%{opacity:.75;transform:scale(1)}68%{opacity:.75;transform:scale(1.08)}86%{opacity:.36;transform:scale(15)}to{opacity:0;transform:scale(18)}}@keyframes opening-phase{0%,10%{opacity:1;transform:translate(-13%)}39%,to{opacity:0;transform:translate(105%)}}@keyframes opening-name{0%,44%{opacity:0}59%,67%{opacity:1}82%,to{opacity:0}}@keyframes opening-fog{0%,67%{opacity:0}76%{opacity:1}to{opacity:0}}@media (prefers-reduced-motion:reduce){.opening-layer{display:none}.opening-layer,.opening-layer *{animation:none!important}}