/* Empire's opening — "A · Drawn E", her pick on the openings mockup
   (claude-rulebook mockups/openings, APPS id emp, variant a; 2026-09-30).
   A Sea Mist tile pops in, the favicon's E draws stroke by stroke inside it,
   then "Empire" rises in the app's serif. While the app is still loading, the
   strokes softly glow. The frame and the ≥3 s hold are house-splash.css/.js.

   Colours are the app's own tokens (app.css), so light and dark follow
   data-theme exactly as the rest of the app does — theme-early.js sets it
   before this paints. Every piece is drawn in its FINAL state by default;
   the animation only plays on top, and reduced motion turns it off. */
#house-splash{--hs-bg:var(--pap);--hs-ink:var(--ink);gap:20px}
#house-splash .hs-tile{width:156px;height:156px;border-radius:36px;background:var(--accent);
  display:grid;place-items:center}
#house-splash .hs-tile svg{width:112px;height:112px;overflow:visible}
#house-splash .hs-name{font-family:var(--serif);font-weight:600;font-size:4.25rem;line-height:1.1;
  color:var(--head);white-space:nowrap}

#house-splash .hs-tile{animation:hs-emp-pop .7s cubic-bezier(.3,.7,.3,1) both}
#house-splash .hs-draw{stroke-dasharray:var(--len);
  animation:hs-emp-draw 1s cubic-bezier(.5,0,.3,1) var(--d,0s) both}
#house-splash .hs-name{animation:hs-emp-fadeup .7s cubic-bezier(.2,.7,.2,1) 1.3s both}
/* Still loading: the strokes glow. */
#house-splash .hs-lp{animation:hs-emp-glow 1.4s ease-in-out 1.8s infinite}

@keyframes hs-emp-pop{0%{opacity:0;transform:scale(.35)}70%{opacity:1;transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes hs-emp-draw{from{stroke-dashoffset:var(--len)}}
@keyframes hs-emp-fadeup{from{opacity:0;transform:translateY(24px)}}
@keyframes hs-emp-glow{50%{opacity:.35}}

/* Phone: a little smaller so the name never crowds the edges. */
@media (max-width:480px){
  #house-splash .hs-tile{width:120px;height:120px;border-radius:28px}
  #house-splash .hs-tile svg{width:86px;height:86px}
  #house-splash .hs-name{font-size:3.25rem}
}