/* The first screen: the Modu cube and word on the 柔光 wallpaper, once per visit, about one
   second, a tap skips it. Self-contained: Modu's own brand look in every skin (brand/, walls/).
   The page's hook (index.html, right after .phone opens) shows it and takes it away; it never waits
   for anything, so the phone boots underneath. Its classes: .splash .splash-mark .splash-word. */
.splash{position:absolute;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  background:url("walls/rouguang-day-1.webp") center/cover no-repeat,#efe9df;cursor:pointer;
  transition:opacity .38s ease,visibility 0s linear .38s}
.splash::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 46%,rgba(249,248,246,.62),rgba(249,248,246,.18) 58%,rgba(249,248,246,0) 80%);pointer-events:none}
.splash[hidden]{display:none}
.splash.run{animation:splash-out .38s ease var(--splash-hold,.7s) forwards}
.splash.out{animation:none;opacity:0;visibility:hidden;pointer-events:none}
/* a CSS animation, not a timer: it leaves on time even while the phone is busy starting up */
@keyframes splash-out{to{opacity:0;visibility:hidden;pointer-events:none}}
.splash-mark,.splash-word{position:relative;display:block}
.splash-mark{width:92px;height:auto;filter:drop-shadow(0 10px 18px rgba(74,75,79,.18));animation:splash-rise .7s cubic-bezier(.2,.8,.2,1) both}
.splash-word{width:118px;height:auto;opacity:.92;animation:splash-rise .7s .12s cubic-bezier(.2,.8,.2,1) both}
@keyframes splash-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Modu's night: charcoal and a gold lamp */
:root[data-night="on"] .splash{background:url("walls/rouguang-night-1.webp") center/cover no-repeat,#262628}
:root[data-night="on"] .splash::before{background:radial-gradient(circle at 50% 46%,rgba(226,207,186,.16),rgba(38,38,40,.1) 58%,rgba(38,38,40,0) 80%)}
:root[data-night="on"] .splash-word{filter:brightness(0) invert(.9)}
@media (prefers-color-scheme:dark){
  :root[data-night="auto"] .splash{background:url("walls/rouguang-night-1.webp") center/cover no-repeat,#262628}
  :root[data-night="auto"] .splash::before{background:radial-gradient(circle at 50% 46%,rgba(226,207,186,.16),rgba(38,38,40,.1) 58%,rgba(38,38,40,0) 80%)}
  :root[data-night="auto"] .splash-word{filter:brightness(0) invert(.9)}
}
@media (prefers-reduced-motion:reduce){ .splash-mark,.splash-word{animation:none} .splash.run{animation-duration:.01s} }