/* impara.app home: the wordmark drops in letter by letter, fireworks go off, 3 tiles lead to the exercises, the games and the books. Tokens from /app.css. */
html,body{height:100%;overflow:hidden}
body{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100svh;padding:max(16px,env(safe-area-inset-top)) 16px calc(60px + env(safe-area-inset-bottom))}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.home-wrap{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:clamp(14px,3.2svh,34px);width:min(100%,1080px)}
.mark{width:min(92vw,880px,calc(48svh * 4.53));height:auto;overflow:visible;cursor:pointer;-webkit-user-select:none;user-select:none}
.mark .L{transform-box:fill-box;transform-origin:50% 100%}
.mark .L:focus{outline:none}
.tag{font:500 clamp(18px,2.6svh,26px)/1.3 var(--font);color:var(--ink-2);text-align:center;text-wrap:balance}
.home-wrap .tiles{--n:3;justify-content:center;--gx:clamp(14px,2.6vw,30px);display:grid;grid-template-columns:repeat(var(--n),var(--t));grid-auto-rows:var(--t);gap:var(--gx);
  --t:min(calc((100vw - 32px - 2 * var(--gx)) / 3),27svh,250px);padding-bottom:12px}
.home-wrap .tile{text-decoration:none;gap:clamp(4px,1.2svh,10px);padding:10px}
.home-wrap .tile .art{width:46%}
.home-wrap .tile .name{font-size:clamp(17px,calc(var(--t) * .13),31px)}
.home-wrap .tile .lvl{font-size:clamp(11px,calc(var(--t) * .068),16px);padding:6px 12px;white-space:nowrap}
/* the Glenmore Studio wordmark, as on the book covers (flag band dropped, Guido 10-06) */
.by{position:fixed;left:0;right:0;bottom:0;height:calc(44px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);display:flex;align-items:center;justify-content:center;z-index:1}
.by .pub{width:min(34vw,160px);height:auto;display:block}
@media (max-width:520px){.home-wrap .tile .lvl{padding:5px 8px}}
@media (prefers-reduced-motion:reduce){#fx{display:none}}