/* Motion wrappers keep editable artwork independent of animated transforms. */
#screen-boot {
  position: fixed; inset: 0; z-index: 1000000; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding-bottom: min(8vw, 34px); box-sizing: border-box;
  background: #F7F2E6;
  background: radial-gradient(60% 45% at 50% 42%, #FFFCF5, #F7F2E6 70%);
  transition: opacity .45s ease, transform .45s ease;
}
#screen-boot[hidden] { display: none; }
#screen-boot[data-boot-state="leaving"] { opacity: 0; transform: scale(1.04); }
.boot-logo { position: relative; width: min(80vw, 340px); aspect-ratio: 817 / 368; flex-shrink: 0; }
.boot-logo img { display: block; width: 100%; height: 100%; }
.boot-ctrl-motion { position: absolute; left: 0; top: 0; width: 41.86%; height: 94.84%; transform-origin: 50% 100%; animation: boot-drop .9s .1s both; }
.boot-bob-motion { width: 100%; height: 100%; animation: boot-bob 2.4s ease-in-out 1.7s infinite; }
.boot-stem-motion { position: absolute; left: 44.44%; top: 0; width: 22.81%; height: 22.06%; transform-origin: 23% 100%; animation: boot-boing 1.1s ease-out .55s both, boot-sway 2.6s ease-in-out 1.7s infinite; }
#boot-body { position: absolute; left: 0; top: 20.06%; width: 100%; height: 79.94%; }
.boot-eye-motion { position: absolute; top: 42.55%; width: 8.77%; height: 11.75%; transform-origin: 50% 50%; animation: boot-wake .55s ease-out .7s both, boot-blink 3.6s ease-in-out 2.4s infinite; }
#boot-eye-left-motion { left: 31.14%; }
#boot-eye-right-motion { left: 58.63%; }
.boot-eye { width: 100%; height: 100%; border-radius: 50%; background: #008534; box-shadow: 0 0 0 1.5px #B2F27D, inset 0 0 0 .5px rgba(0, 70, 25, .35); }
.boot-shadow-motion { position: absolute; left: 5.26%; top: 94.57%; width: 31.33%; height: 4.89%; transform-origin: 50% 50%; animation: boot-shadow .9s .1s both, boot-shadow-bob 2.4s ease-in-out 1.7s infinite; }
.boot-shadow { width: 100%; height: 100%; border-radius: 50%; background: rgba(0, 90, 35, .13); }
.boot-letter-motion { position: absolute; transform-origin: 50% 100%; animation: boot-pop .55s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(.8s + var(--i) * .07s); }
#boot-letter-w-motion { left: 44.19%; top: 16.85%; width: 21.18%; height: 37.23%; }
#boot-letter-h-motion { left: 66.46%; top: 16.85%; width: 13.22%; height: 37.23%; }
#boot-letter-y-motion { left: 80.91%; top: 16.85%; width: 12.73%; height: 37.23%; }
#boot-letter-g-motion { left: 44.55%; top: 58.70%; width: 12.48%; height: 30.16%; }
#boot-letter-a-motion { left: 57.04%; top: 66.03%; width: 10.04%; height: 22.83%; }
#boot-letter-m-motion { left: 67.93%; top: 65.49%; width: 14.32%; height: 23.10%; }
#boot-letter-e-motion { left: 82.50%; top: 65.49%; width: 9.67%; height: 23.37%; }
#boot-letter-s-motion { left: 92.04%; top: 65.49%; width: 7.96%; height: 23.91%; }
.boot-meter { width: min(60vw, 250px); margin-top: min(11vw, 47px); display: grid; gap: 12px; justify-items: center; animation: boot-fade .45s ease-out 1.25s both; }
.boot-bar { width: 100%; height: 22px; border: 3px solid #008534; border-radius: 999px; background: #fff; overflow: hidden; box-sizing: border-box; }
.boot-fill { height: 100%; width: 0%; border-radius: 999px; background-color: #83CF66; background-image: linear-gradient(135deg, #A3DD88 25%, transparent 25%, transparent 50%, #A3DD88 50%, #A3DD88 75%, transparent 75%); background-size: 22px 22px; animation: boot-stripes .7s linear infinite; }
.boot-text { margin: 0; color: #fff; font-size: 19px; font-weight: 800; line-height: 1.2; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.boot-decor { position: absolute; inset: 0; pointer-events: none; animation: boot-fade 1s ease-out 1s both; }
.boot-glyph-motion { position: absolute; width: 26px; height: 26px; animation: boot-float var(--d, 12s) ease-in-out infinite alternate; }
.boot-ring { position: absolute; inset: 2px; border: 5px solid #83CF66; border-radius: 50%; opacity: .35; box-sizing: border-box; }
.boot-ring-small { inset: 4px; }
.boot-plus { position: absolute; inset: 0; opacity: .35; }
.boot-plus span { position: absolute; background: #83CF66; border-radius: 999px; }
.boot-plus span:first-child { left: 10.5px; top: 1.5px; width: 5px; height: 23px; }
.boot-plus span:last-child { left: 1.5px; top: 10.5px; width: 23px; height: 5px; }
.boot-plus-small { inset: 2px; }
.boot-plus-small span:first-child { height: 19px; left: 8.5px; }
.boot-plus-small span:last-child { width: 19px; top: 8.5px; }
:is([data-boot-state="done"], [data-boot-state="leaving"]) .boot-ctrl-motion { animation: boot-hop .6s cubic-bezier(.3, 0, .3, 1) both; }
:is([data-boot-state="done"], [data-boot-state="leaving"]) .boot-letter-motion { animation: boot-wave .5s ease-in-out both; animation-delay: calc(var(--i) * .045s); }
:is([data-boot-state="done"], [data-boot-state="leaving"]) .boot-eye-motion { animation: boot-squint .6s ease-in-out both; }
@keyframes boot-drop {
  0% { transform: translateY(-160%) scale(.92, 1.08); opacity: 0; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  8% { opacity: 1; }
  50% { transform: translateY(0) scale(1, 1); animation-timing-function: ease-out; }
  60% { transform: translateY(0) scale(1.14, .84); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  76% { transform: translateY(-10%) scale(.95, 1.06); animation-timing-function: cubic-bezier(.6, 0, .8, .4); }
  88% { transform: translateY(0) scale(1.04, .96); }
  100% { transform: none; opacity: 1; }
}
@keyframes boot-shadow { 0% { transform: scale(.25); opacity: 0; } 50% { transform: scale(1.05); opacity: 1; } 60% { transform: scale(1.15, 1); } 76% { transform: scale(.85); } 100% { transform: none; opacity: 1; } }
@keyframes boot-boing { 0% { transform: none; } 15% { transform: rotate(-18deg); } 35% { transform: rotate(13deg); } 55% { transform: rotate(-7deg); } 75% { transform: rotate(3deg); } 100% { transform: none; } }
@keyframes boot-sway { 0%, 100% { transform: none; } 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
@keyframes boot-wake { 0%, 35% { transform: scaleY(.08); } 70% { transform: scaleY(1.12); } 100% { transform: none; } }
@keyframes boot-blink { 0%, 90%, 100% { transform: none; } 94% { transform: scaleY(.08); } }
@keyframes boot-squint { 0%, 100% { transform: none; } 30%, 70% { transform: scaleY(.3); } }
@keyframes boot-bob { 0%, 100% { transform: none; } 50% { transform: translateY(-4%); } }
@keyframes boot-shadow-bob { 0%, 100% { transform: none; } 50% { transform: scale(.88); opacity: .75; } }
@keyframes boot-pop { 0% { transform: translateY(35%) scale(0); opacity: 0; } 50% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes boot-wave { 0%, 100% { transform: none; } 40% { transform: translateY(-16%); } }
@keyframes boot-hop { 0% { transform: none; } 20% { transform: scale(1.08, .9); } 55% { transform: translateY(-14%) scale(.96, 1.05); } 80% { transform: scale(1.04, .96); } 100% { transform: none; } }
@keyframes boot-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes boot-stripes { from { background-position: 0 0; } to { background-position: 22px 0; } }
@keyframes boot-float { from { transform: translateY(0) rotate(0); } to { transform: translateY(-28px) rotate(25deg); } }
@media (prefers-reduced-motion: reduce) {
  #screen-boot, #screen-boot * { animation: none !important; transition: none !important; }
  #screen-boot[data-boot-state="leaving"] { transform: none; }
}