/* du — the app icon's own pieces (d, u, star, arcs, tail; iOS Assets DuduSplash_*), placed in its 1024 grid,
   as the phone's splash does (YBuildBridgeViewController showSplash). A plain file so desk.html can show it
   before the app's code has loaded; the desk's components (src/desk/DuMark.tsx) use the same classes.
   Parts are masks, so they take the ink / gold of the theme. */
.du { --du-ink: #16171a; --du-gold: #f2ba24; position: relative; display: inline-block; flex-shrink: 0; width: var(--du, 32px); height: var(--du, 32px); }
@media (prefers-color-scheme: dark) { .du { --du-ink: #efe7d0; --du-gold: #f8ec6c; } }
:root[data-dudu-theme="light"] .du { --du-ink: #16171a; --du-gold: #f2ba24; }
:root[data-dudu-theme="dark"] .du { --du-ink: #efe7d0; --du-gold: #f8ec6c; }
.du > i {
  position: absolute; display: block; background: var(--du-ink);
  -webkit-mask: var(--m) center / 100% 100% no-repeat; mask: var(--m) center / 100% 100% no-repeat;
}
.du > .du-d { --m: url(/dudu/brand/d.png); left: 15.53%; top: 32.42%; width: 29.49%; height: 39.16%; transform-origin: 50% 100%; }
.du > .du-u { --m: url(/dudu/brand/u.png); left: 46.48%; top: 34.57%; width: 29.88%; height: 32.42%; transform-origin: 50% 100%; }
.du > .du-star { --m: url(/dudu/brand/star.png); left: 72.36%; top: 24.71%; width: 9.96%; height: 10.16%; background: var(--du-gold); }
.du > .du-arcs { --m: url(/dudu/brand/arcs.png); left: 28.81%; top: 31.05%; width: 7.42%; height: 10.25%; transform-origin: 95% 95%; }
.du > .du-tail { --m: url(/dudu/brand/tail.png); left: 71.48%; top: 64.84%; width: 12.99%; height: 10.45%; transform-origin: 5% 30%; }
/* still: no arcs (they're the wave) */
.du.still > .du-arcs { display: none; }
.du.bare > .du-arcs, .du.bare > .du-tail, .du.bare > .du-star { display: none; }

/* hello (opening the window): the u hops and lands, the star pops as it does; then it keeps a small hop and
   a wave every 2.2s while it's still loading */
.du.hello > .du-u { animation: du-hop 560ms ease-out both, du-hop-small 720ms 1700ms ease-out infinite; }
.du.hello > .du-d { animation: du-squash 200ms 470ms ease-in-out both; }
.du.hello > .du-star { animation: du-pop 300ms 320ms cubic-bezier(0.34, 1.9, 0.64, 1) both; }
.du.hello > .du-arcs { animation: du-wave 720ms 1700ms ease-in-out infinite both; }
.du.hello > .du-tail { animation: du-curl 340ms 520ms cubic-bezier(0.34, 1.9, 0.64, 1) both; }
/* think (Dudu is thinking): the u hops, small, again and again */
.du.think > .du-u { animation: du-hop-small 1400ms ease-out infinite; }
.du.think > .du-star { animation: du-twinkle 1400ms ease-in-out infinite; }

@keyframes du-hop {
  0% { transform: none; }
  15% { transform: scale(1.08, 0.88); }
  50% { transform: translateY(-30%) scale(0.97, 1.06); }
  82% { transform: translateY(0) scale(0.97, 1.05); }
  92% { transform: scale(1.09, 0.87); }
  100% { transform: none; }
}
@keyframes du-hop-small {
  0%, 46%, 100% { transform: none; }
  8% { transform: scale(1.05, 0.93); }
  24% { transform: translateY(-14%) scale(0.98, 1.03); }
  40% { transform: scale(1.05, 0.93); }
}
@keyframes du-squash { 0%, 100% { transform: none; } 50% { transform: scale(1.025, 0.965); } }
@keyframes du-pop { 0% { opacity: 0; transform: rotate(-25deg) scale(0.001); } 1% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes du-twinkle { 0%, 30%, 100% { transform: none; } 15% { transform: rotate(16deg) scale(1.2); } }
@keyframes du-wave { 0%, 100% { opacity: 1; transform: rotate(0); } 25% { transform: rotate(-16deg); } 60% { transform: rotate(8deg); } }
@keyframes du-curl { 0% { opacity: 0; transform: rotate(70deg) scale(0.001); } 1% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .du > i, .du > .du-z { animation: none !important; } }

/* the window opening (desk.html): du in the middle of the paper, gone as the desk is ready */
#du-splash {
  position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center;
  background: #fbfaf7; transition: opacity 300ms ease;
}
@media (prefers-color-scheme: dark) { #du-splash { background: #121315; } }
#du-splash .du { --du: 180px; transition: transform 300ms ease; }
#du-splash.out { opacity: 0; pointer-events: none; }
#du-splash.out .du { transform: scale(1.08); }
html.in-small #du-splash { display: none; }

/* idle (the phone home's corner, 10-26): now and then the u hops, the arcs wave, the star bounces */
.du.idle > .du-u { animation: du-idle-hop 8s 1.2s ease-in-out infinite; }
.du.idle > .du-arcs { animation: du-idle-wave 8s 1.2s ease-in-out infinite; }
.du.idle > .du-star { animation: du-idle-star 8s 1.6s ease-in-out infinite; }
@keyframes du-idle-hop { 0%, 70%, 100% { transform: none; } 74% { transform: scale(1.08, 0.9); } 80% { transform: translateY(-22%) scale(0.96, 1.06); } 86% { transform: scale(1.06, 0.92); } 90% { transform: none; } }
@keyframes du-idle-wave { 0%, 72%, 100% { transform: none; } 78% { transform: rotate(-20deg); } 84% { transform: rotate(14deg); } 90% { transform: rotate(-8deg); } }
@keyframes du-idle-star { 0%, 60%, 100% { transform: none; } 68% { transform: translateY(-40%) rotate(30deg); } 76% { transform: none; } 82% { transform: translateY(-14%); } 88% { transform: none; } }
/* asleep (the home at night): the u leans on the d and breathes, the star dims, no arcs; two z's drift up */
.du.asleep > .du-arcs { display: none; }
.du.asleep > .du-u { left: 44.5%; top: 35.5%; transform-origin: 0% 100%; animation: du-breathe 3.6s ease-in-out infinite; }
.du.asleep > .du-star { left: 74%; top: 23%; opacity: 0.55; }
.du > .du-z { position: absolute; width: 9%; height: 9%; color: var(--du-ink); animation: du-z 3.6s ease-out infinite; }
.du > .du-z + .du-z { animation-delay: 1.8s; width: 7%; height: 7%; }
@keyframes du-breathe { 0%, 100% { transform: rotate(-17deg); } 50% { transform: rotate(-17deg) scale(1.03, 0.97); } }
@keyframes du-z { 0% { opacity: 0; transform: translate(0, 0) scale(0.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-90%, -110%) scale(1.1); } }