/* The welcome screen and the festival look of the home page. The festival is an "app theme": the games have their own looks. */

/* welcome screen */
.splash{position:fixed;inset:0;z-index:100;background:var(--asphalt);display:grid;place-items:center;transition:opacity .35s;touch-action:manipulation}
.splash.out{opacity:0;pointer-events:none}
.splash-inner{text-align:center;width:100%;overflow:hidden;padding:30px 0 70px}
.splash h1{font:800 56px var(--display);text-transform:uppercase;letter-spacing:.04em;color:var(--paint);text-shadow:0 4px 0 #7a5b00,0 0 26px rgba(255,196,0,.45);animation:splashpop .6s cubic-bezier(.2,1.4,.4,1)}
.splash .cap{margin-top:6px;font-size:15px}
.splash-run{position:relative;height:56px;margin-top:44px}
.s-mouse,.s-cat{position:absolute;bottom:0;animation:runacross 1.9s linear infinite,runbob .22s ease-in-out infinite alternate}
.s-mouse{width:46px}
.s-cat{width:84px;animation-delay:.42s,0s}
@keyframes runacross{from{left:-100px}to{left:100%}}
@keyframes runbob{from{transform:translateY(0)}to{transform:translateY(-5px)}}
@keyframes splashpop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}

/* Halloween on the home page */
html[data-festival="halloween"] body{background:linear-gradient(#140a22 0,#241033 55%,#1b1f26 100%) fixed}
html[data-festival="halloween"] .splash{background:radial-gradient(circle at 50% 40%,#3a1a52,#0e0716)}
html[data-festival="halloween"] .splash h1{color:#ff9d3a;text-shadow:0 4px 0 #7a2a00,0 0 30px rgba(255,138,31,.55)}
html[data-festival="halloween"] .app{position:relative;z-index:1}
html[data-festival="halloween"] .top h1{color:#ff9d3a;text-shadow:0 3px 0 #7a2a00,0 0 18px rgba(255,138,31,.45)}
html[data-festival="halloween"] .top,html[data-festival="halloween"] .more{border-color:rgba(255,138,31,.55)}
html[data-festival="halloween"] .mode{border-top-color:rgba(255,138,31,.45)}
html[data-festival="halloween"] .mode:last-child{border-bottom-color:rgba(255,138,31,.45)}
html[data-festival="halloween"] .chip{background:#2a1a3d;box-shadow:inset 0 0 0 2px rgba(255,138,31,.35)}
html[data-festival="halloween"] .lede{color:#f4e6ff}
.fest-deco{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.moon{position:absolute;top:56px;right:-46px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fffbe0,#f6e7a0 60%,#d9c06a);box-shadow:0 0 70px 16px rgba(255,230,140,.22);opacity:.5}
.web{position:absolute;top:0;left:0;width:150px;color:rgba(255,255,255,.3)}
.bat{position:absolute;left:-60px;width:calc(44px * var(--s));fill:#0a0612;animation:batfly 13s linear infinite}
@keyframes batfly{0%{transform:translate(0,0) rotate(-6deg)}25%{transform:translate(30vw,22px) rotate(6deg)}50%{transform:translate(60vw,-10px) rotate(-6deg)}75%{transform:translate(90vw,18px) rotate(6deg)}100%{transform:translate(125vw,0) rotate(-6deg)}}
.fest-pumpkins{position:relative;height:74px;margin-top:6px}
.pumpkin{position:absolute;bottom:0}
.pumpkin .glow{animation:flicker 2.6s ease-in-out infinite}
@keyframes flicker{0%,100%{fill-opacity:1}45%{fill-opacity:.65}60%{fill-opacity:.95}}