/* The home page: a 421 art-pixel wide picture that scales through --px.
   Bands keep their size; the gaps between them (and the header above the
   scene) stretch on tall screens so the page always fills the window. */
.home{--u:var(--px);position:relative;display:flex;flex-direction:column;width:calc(421*var(--px));max-width:100%;min-height:100vh;min-height:100dvh;margin:0 auto;
  overflow:hidden;background:var(--page);font:calc(10*var(--px))/1 var(--body)}
.hm{position:relative;flex:0 0 auto;height:calc(var(--h)*var(--px))}
.hm-gap{flex:var(--g) 0 calc(var(--g)*var(--px))}
.hm-hero{flex:10 0 calc(233*var(--px));background:var(--header)}
.hm-foot{flex:6 0 calc(40*var(--px))}
.hero{position:absolute;left:0;bottom:0;width:calc(421*var(--px));height:calc(233*var(--px))}
.hero__fx{position:absolute;inset:0;overflow:hidden;pointer-events:none}

/* Anything pressable that is placed by the manifest. */
.hit{position:absolute;display:block;padding:0;transition:transform .08s steps(2),filter .08s steps(2)}
.hit:hover{transform:translateY(calc(-1*var(--px)));filter:brightness(1.08)}
.hit:active{transform:translateY(calc(1*var(--px)));filter:brightness(.92)}
.hit .frame{z-index:auto}

/* Top bar */
.topbar{position:absolute;inset:0 0 auto;height:calc(36*var(--px));animation:drop .5s steps(5) both}
.badge{animation:nudge 2.4s steps(1) infinite}
.sound-icon{transition:opacity .1s steps(2)}
.chip--sound[aria-pressed=false] .sound-icon{opacity:.35}
.chip--sound[aria-pressed=false]:after{content:"";position:absolute;left:calc(11*var(--px));top:calc(13*var(--px));width:calc(18*var(--px));height:calc(1*var(--px));background:var(--lavender);transform:rotate(-35deg)}

/* Scene lights and small animations */
.glow{mix-blend-mode:screen}
.glow--lantern{animation:flicker 2.8s steps(1) infinite}
.glow--moon{animation:breathe 6s steps(3) infinite alternate}
.glow--orb{animation:breathe 3.2s steps(3) infinite alternate}
.glow--study{animation:breathe 1.8s steps(3) infinite alternate}
.twinkle{background-image:url('./assets/art/twinkle.png');background-size:200% 100%;animation:twinkle 4s steps(1) infinite}
.twinkle--big{animation-duration:2.2s}
.window{position:absolute;background:#6d4320;opacity:0;animation:dim 7s steps(1) infinite}
.breath{opacity:0;animation:breath 3.4s steps(1) infinite}
.snore{opacity:0;animation:snore 3.6s steps(6) infinite}
.fly{position:absolute;background:#ffe58a;opacity:0;animation:fly 6s steps(8) infinite}
.shoot{position:absolute;left:calc(300*var(--px));top:calc(38*var(--px));width:calc(7*var(--px));height:calc(1*var(--px));background:linear-gradient(90deg,#fff0,#fff);opacity:0;transform:rotate(-24deg);animation:shoot 13s steps(12) infinite 4s}

/* Logo and the lines under it */
.logo{position:absolute;margin:0;animation:logo-in .7s steps(7) both .15s}
.logo__art{animation:glint 7s steps(1) infinite 2s}
.sparkle{animation:spark 2.6s steps(1) infinite}
.sparkle--late{animation-delay:1.3s}
.tagline{position:absolute;left:0;right:0;top:calc(186*var(--px));text-align:center;letter-spacing:calc(1*var(--px));color:var(--lilac);animation:fade .6s steps(4) both .5s}
.hero__links{position:absolute;left:0;right:0;top:calc(205*var(--px));height:calc(13*var(--px));letter-spacing:calc(1*var(--px));animation:fade .6s steps(4) both .7s}
.howto{position:absolute;left:calc(88*var(--px));top:0;display:flex;align-items:center;gap:calc(6*var(--px));height:100%;color:var(--gold)}
.howto:hover{filter:brightness(1.15)}
.howto:hover .howto__mark{transform:translateY(calc(-1*var(--px)))}
.howto__mark{display:grid;place-items:center;width:calc(11*var(--px));height:calc(11*var(--px));padding-left:calc(1*var(--px));border:calc(1*var(--px)) solid var(--gold);font:calc(10*var(--px))/1 var(--label);font-style:normal;transition:transform .1s steps(2)}
.online{position:absolute;left:calc(187*var(--px));top:0;display:flex;align-items:center;gap:calc(7*var(--px));height:100%;color:#dcd2f5}
.dot{display:inline-block;flex:none;width:calc(9*var(--px));height:calc(9*var(--px));background:var(--online);animation:pulse 2s steps(2) infinite}

/* Nickname card */
.hm-card{animation:lift .5s steps(5) both .25s}
.avatar-spot .avatar,.avatar-spot .pet{--a:var(--px)}
.home-avatar,.home-pet{position:absolute;display:block}
.quill.is-writing{animation:scratch .2s steps(2) infinite}
.nick{position:absolute;display:block}
.nick input{position:absolute;inset:0;width:100%;height:100%;padding:0 calc(10*var(--px)) calc(1*var(--px)) calc(17*var(--px));background:none;border:0;
  font-size:calc(20*var(--px));color:var(--text)}
.nick input:focus{outline:calc(1*var(--px)) solid var(--gold);outline-offset:calc(-3*var(--px))}

/* Room buttons, code row, divider, Self Study */
.hm-rooms{animation:lift .5s steps(5) both .35s}
.hm-code,.hm-or{animation:lift .5s steps(5) both .45s}
.hm-banner{animation:lift .5s steps(5) both .55s}
.hit--create:hover .bookmark{animation:leaf .4s steps(2)}
.hit--find:hover .signpost{animation:sway .5s steps(4)}
.codebox{position:absolute;display:block}
.codebox input{position:absolute;inset:0;width:100%;height:100%;padding:0 0 0 calc(7*var(--px));background:none;border:0;text-align:center;
  font-size:calc(10*var(--px));letter-spacing:calc(7*var(--px));color:var(--gold-soft)}
.codebox input:focus{outline:calc(1*var(--px)) solid var(--gold);outline-offset:calc(-3*var(--px))}
.codebox input:not(:placeholder-shown)~.codebox__hint{display:none}
.hit--join.is-ready{animation:ready 1s steps(2) infinite}
.hit--study{overflow:hidden}
.hit--study:after{content:"";position:absolute;top:0;bottom:0;left:-20%;width:12%;background:#fff3;transform:skewX(-20deg);animation:sweep 5s steps(14) infinite 1.5s}

/* Shelf and footer */
.hm-shelf{animation:fade .6s steps(4) both .65s}
.footlinks button{position:absolute;top:calc(9*var(--px));padding:calc(2*var(--px)) 0;color:var(--text);white-space:nowrap}
.footlinks button:hover{color:var(--gold);text-decoration:underline;text-underline-offset:.25em}
.heart{animation:beat 1.6s steps(1) infinite}

@keyframes drop{from{opacity:0;transform:translateY(calc(-6*var(--px)))}}
@keyframes lift{from{opacity:0;transform:translateY(calc(6*var(--px)))}}
@keyframes logo-in{0%{opacity:0;transform:translateY(calc(-14*var(--px)))}70%{opacity:1;transform:translateY(calc(2*var(--px)))}}
@keyframes glint{0%,6%,100%{filter:none}2%,4%{filter:brightness(1.22)}}
@keyframes spark{0%,100%{opacity:1;transform:none}40%{opacity:.55}50%{opacity:1;transform:translateY(calc(-1*var(--px)))}}
@keyframes nudge{0%,80%,100%{transform:none}85%,95%{transform:translateY(calc(-1*var(--px)))}90%{transform:translateY(calc(-2*var(--px)))}}
@keyframes flicker{0%,100%{opacity:.85}12%{opacity:1}23%{opacity:.7}37%{opacity:.95}52%{opacity:.78}68%{opacity:1}84%{opacity:.82}}
@keyframes breathe{from{opacity:.45}to{opacity:1}}
@keyframes twinkle{0%,100%{background-position:100% 0;opacity:.7}45%{background-position:0 0;opacity:1}60%{background-position:100% 0;opacity:1}80%{opacity:.3}}
@keyframes dim{0%,100%{opacity:0}8%,16%{opacity:.9}12%{opacity:.4}}
@keyframes breath{0%,100%{opacity:0}50%{opacity:1}}
@keyframes snore{0%{opacity:0;transform:translate(calc(-2*var(--px)),calc(3*var(--px)))}20%,60%{opacity:1;transform:none}100%{opacity:0;transform:translate(calc(3*var(--px)),calc(-5*var(--px)))}}
@keyframes fly{0%{opacity:0;transform:none}15%{opacity:1}35%{transform:translate(calc(5*var(--px)),calc(-4*var(--px)))}50%{opacity:.3}65%{opacity:1;transform:translate(calc(9*var(--px)),calc(2*var(--px)))}85%{transform:translate(calc(4*var(--px)),calc(6*var(--px)))}100%{opacity:0;transform:none}}
@keyframes shoot{0%{opacity:0;transform:rotate(-24deg) translateX(0)}1%{opacity:1}6%{opacity:0;transform:rotate(-24deg) translateX(calc(-70*var(--px)))}100%{opacity:0;transform:rotate(-24deg) translateX(calc(-70*var(--px)))}}
@keyframes pulse{50%{opacity:.6}}
@keyframes scratch{50%{transform:translate(calc(-1*var(--px)),calc(1*var(--px)))}}
@keyframes leaf{50%{transform:translateY(calc(-2*var(--px)))}}
@keyframes sway{25%{transform:translateX(calc(-1*var(--px)))}75%{transform:translateX(calc(1*var(--px)))}}
@keyframes ready{50%{filter:brightness(1.25)}}
@keyframes sweep{0%{left:-20%}22%,100%{left:120%}}
@keyframes beat{0%,30%,100%{transform:none}10%,20%{transform:translateY(calc(-1*var(--px)))}15%{filter:brightness(1.2)}}

@media(min-width:900px){.home{box-shadow:0 0 0 calc(1*var(--px)) #3d3260,0 0 calc(40*var(--px)) #0008}}