/* =========================================================
   kolOS 2.0 — Kolo, der Assistent + die Startsequenz
   ========================================================= */

/* ---------------------------------------------------------
   Kolo
   Er steht auf dem Schreibtisch, nicht in einer Leiste --
   "mehr da sein" war der ganze Punkt.
   --------------------------------------------------------- */
.kolo {
  position: absolute;
  left: 14px; bottom: 12px;
  z-index: 6;                 /* ueber den Symbolen, unter den Fenstern */
  /* So breit wie die Blase, nicht wie die Figur: bei 104 px ragten Blase
     und Menue links aus dem Bild und wurden abgeschnitten. */
  width: 228px;
  display: flex; flex-direction: column; align-items: flex-start;
  pointer-events: none;       /* nur die Figur selbst faengt Klicks */
  /* Sonst scrollt der Finger die Seite, statt Kolo zu ziehen. */
  touch-action: none;
}
.kolo.gone { display: none; }

.kolo-fig {
  pointer-events: auto;
  width: 104px; height: 112px;
  padding: 0; border: 0; background: none;
  cursor: grab;
  filter: drop-shadow(0 8px 16px rgba(10,50,80,.42));
  animation: kolo-bob 4.4s ease-in-out infinite;
  transition: transform .18s ease;
}
.kolo-fig:hover { transform: scale(1.05); }
.kolo.grabbed .kolo-fig { cursor: grabbing; animation: none; transform: scale(1.08) rotate(-3deg); }
.kolo-svg { width: 100%; height: 100%; overflow: visible; }

@keyframes kolo-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30%      { transform: translateY(-5px) rotate(-1.6deg); }
  65%      { transform: translateY(-2px) rotate(1.4deg); }
}

/* Die Antenne wippt versetzt zum Koerper mit. */
.kolo-bulb, .kolo-bulb-glow, .kolo-ant { transform-origin: 60px 26px; animation: kolo-ant 3.1s ease-in-out infinite; }
@keyframes kolo-ant { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(4deg); } }
.kolo-bulb-glow { animation: kolo-ant 3.1s ease-in-out infinite, kolo-glow 2.2s ease-in-out infinite; }
@keyframes kolo-glow { 0%,100% { opacity: .28; } 50% { opacity: .7; } }

/* Blinzeln: die Lider fahren als Rechtecke ueber die Augen. */
.kolo-lid { transition: height .07s ease; }
.kolo.blink .kolo-lid { height: 30px; }

/* Beim Reden bewegt sich der Mund. */
.kolo.talking .kolo-mouth { animation: kolo-talk .26s ease-in-out infinite alternate; }
@keyframes kolo-talk { to { transform: translateY(1.6px) scaleX(.92); } }
.kolo-mouth { transform-origin: 60px 94px; transition: d .18s ease; }
.kolo-brow-l, .kolo-brow-r { transition: d .18s ease; }
.kolo-spark { animation: kolo-spark 5s ease-in-out infinite; }
@keyframes kolo-spark { 0%,100% { opacity: .55; } 40% { opacity: .95; } }

/* Die Sprechblase steht ueber ihm. */
.kolo-bubble {
  pointer-events: auto;
  position: relative;
  max-width: 228px; min-width: 128px;
  margin-bottom: 10px;
  padding: 10px 13px;
  border: 1px solid #a9d4ee;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff, #eaf7ff);
  box-shadow: 0 8px 24px rgba(10,50,80,.3), inset 0 1px 0 #fff;
  font: 400 12.5px/1.45 "Segoe UI", system-ui, sans-serif;
  color: #17384f;
  animation: kolo-pop .22s cubic-bezier(.2,1.4,.5,1) both;
}
.kolo-bubble::after {
  content: ""; position: absolute; left: 34px; bottom: -9px;
  border: 9px solid transparent; border-top-color: #eaf7ff; border-bottom: 0;
  filter: drop-shadow(0 1px 0 #a9d4ee);
}
.kolo-bubble.out { animation: kolo-unpop .18s ease both; }
@keyframes kolo-pop { from { opacity: 0; transform: translateY(8px) scale(.9); } }
@keyframes kolo-unpop { to { opacity: 0; transform: translateY(6px) scale(.94); } }

/* Sein Menue */
.kolo-menu {
  pointer-events: auto;
  position: relative;
  width: 208px;
  margin-bottom: 8px;
  padding: 4px;
  display: flex; flex-direction: column; gap: 1px;
  border: 1px solid #9dc9e6; border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(232,246,255,.97));
  box-shadow: 0 10px 28px rgba(10,50,80,.34);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  animation: kolo-pop .18s ease both;
}
.kolo-mi {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px;
  border: 1px solid transparent; border-radius: 6px;
  background: none; color: #17384f;
  font: 500 12.5px/1.2 "Segoe UI", system-ui, sans-serif;
  text-align: left; cursor: pointer;
}
.kolo-mi:hover { background: linear-gradient(180deg, #e8f6ff, #c9e7fb); border-color: #8cc4e6; }
.kolo-mi-i { font-size: 15px; width: 20px; text-align: center; flex: 0 0 auto; }

.trayitem.off { opacity: .45; }

@media (max-width: 819px) {
  .kolo { width: 192px; left: 8px; bottom: 8px; }
  .kolo-fig { width: 76px; height: 82px; }
  .kolo-bubble { max-width: 168px; font-size: 12px; }
  .kolo-menu { width: 186px; }
}
@media (prefers-reduced-motion: reduce) {
  .kolo-fig, .kolo-bulb, .kolo-bulb-glow, .kolo-ant, .kolo-spark { animation: none; }
  .kolo-bubble, .kolo-menu { animation: none; }
  .kolo.talking .kolo-mouth { animation: none; }
}

/* =========================================================
   Startsequenz
   Drei Bilder wie bei Vista: Marke mit Ladebalken, dann der
   Willkommensbildschirm mit dem Ring, dann auf den Schreibtisch.
   Ersetzt die frueheren Regeln aus kolos.css (spaeter geladen).
   ========================================================= */
#boot {
  position: fixed; inset: 0; z-index: 200;
  background: radial-gradient(120% 90% at 50% 42%, #0b2e4e 0%, #061826 62%, #02080f 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0;
  color: #dfefff;
  font: 400 13px/1.5 "Segoe UI", system-ui, sans-serif;
  overflow: hidden;
}

/* Ein paar Blasen steigen schon im Startbild auf -- das Motiv der
   ganzen Seite, bevor irgendetwas anderes zu sehen ist. */
#boot .boot-bubbles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
#boot .boot-bubbles i {
  position: absolute; bottom: -60px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.85), rgba(150,220,255,.22) 55%, rgba(90,180,240,.05) 72%);
  box-shadow: inset 0 0 12px rgba(255,255,255,.35);
  animation: boot-rise linear infinite;
}
@keyframes boot-rise {
  from { transform: translateY(0) scale(.7); opacity: 0; }
  12%  { opacity: .75; }
  to   { transform: translateY(-115vh) scale(1.15); opacity: 0; }
}

#boot .boot-stage { display: flex; flex-direction: column; align-items: center; gap: 26px; }
#boot .boot-stage.two { display: none; }
#boot.welcome .boot-stage.one { display: none; }
#boot.welcome .boot-stage.two { display: flex; }
#boot.welcome { background: radial-gradient(120% 90% at 50% 40%, #1b5c8e 0%, #0d3357 58%, #061c30 100%); }

/* --- Bild 1: die Marke --- */
#boot .boot-brand {
  font-size: 46px; font-weight: 200; letter-spacing: .10em;
  text-shadow: 0 0 40px rgba(120,210,255,.55);
  animation: boot-in 1s ease both;
}
#boot .boot-brand b { font-weight: 600; }
#boot .boot-sub {
  margin-top: -14px;
  font-size: 11.5px; letter-spacing: .34em; text-transform: uppercase;
  color: rgba(190,225,250,.6);
  animation: boot-in 1s .25s ease both;
}
@keyframes boot-in { from { opacity: 0; transform: translateY(10px); letter-spacing: .3em; } }

/* Der Vista-Ladebalken: ein Lichtpunkt wandert durch eine Rinne. */
#boot .boot-bar {
  position: relative;
  width: 210px; height: 10px;
  border-radius: 6px;
  border: 1px solid rgba(140,200,240,.35);
  background: rgba(255,255,255,.04);
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.6);
  animation: boot-in .8s .4s ease both;
}
#boot .boot-bar i {
  position: absolute; top: 0; bottom: 0; left: -70px; width: 70px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(120,210,255,0), #b9e9ff 48%, rgba(120,210,255,0));
  box-shadow: 0 0 14px rgba(150,225,255,.9);
  animation: boot-slide 1.5s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes boot-slide { to { left: 210px; } }

/* --- Bild 2: der Willkommensbildschirm --- */
#boot .boot-user { text-align: center; }
#boot .boot-ring {
  position: relative;
  width: 118px; height: 118px;
  margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
}
#boot .boot-ring img {
  width: 96px; height: 96px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.9);
  box-shadow: 0 8px 30px rgba(0,0,0,.55);
  object-fit: cover;
  animation: boot-pop .5s cubic-bezier(.2,1.5,.4,1) both;
}
/* Der drehende Ring aus dem Anmeldebildschirm. */
#boot .boot-ring::before {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: rgba(160,225,255,.95);
  border-right-color: rgba(160,225,255,.35);
  animation: boot-spin 1.1s linear infinite;
}
@keyframes boot-spin { to { transform: rotate(360deg); } }
@keyframes boot-pop { from { opacity: 0; transform: scale(.82); } }
#boot .boot-user b {
  display: block; font-size: 22px; font-weight: 400;
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
  animation: boot-in .6s .1s ease both;
}
#boot .boot-user small {
  display: block; margin-top: 6px; font-size: 12px;
  color: rgba(200,230,250,.72);
  animation: boot-in .6s .2s ease both;
}

#boot .boot-skip {
  position: absolute; right: 18px; bottom: 16px;
  padding: 7px 14px;
  border: 1px solid rgba(160,210,250,.45); border-radius: 5px;
  background: rgba(255,255,255,.08); color: #cfe8ff;
  font: 400 12px/1 "Segoe UI", system-ui, sans-serif; cursor: pointer;
}
#boot .boot-skip:hover { background: rgba(255,255,255,.2); border-color: rgba(190,230,255,.75); }

/* Der Uebergang auf den Schreibtisch: aufblenden statt hart schneiden. */
#boot.gone { animation: boot-gone .55s ease both; pointer-events: none; }
@keyframes boot-gone { to { opacity: 0; transform: scale(1.06); } }
body.booting-out #desktop, body.booting-out .taskbar { animation: desk-in .55s ease both; }
@keyframes desk-in { from { opacity: 0; transform: scale(.985); } }

@media (prefers-reduced-motion: reduce) {
  #boot .boot-bar i { animation: none; left: 70px; }
  #boot .boot-ring::before { animation: none; }
  #boot .boot-brand, #boot .boot-sub, #boot .boot-bar,
  #boot .boot-user b, #boot .boot-user small, #boot .boot-ring img { animation: none; }
  #boot .boot-bubbles { display: none; }
  body.booting-out #desktop, body.booting-out .taskbar { animation: none; }
}

/* =========================================================
   Kolo — Immer vorn, wandert, wird sauer, unterbricht
   ========================================================= */

/* Er steht über den Fenstern: ins #winlayer gehoben und über
   dessen z-top gelegt. Nur die ganz großen Ebenen (Start, Pause,
   blauer Bildschirm, Wecker) stehen über ihm. */
/* Er lebt HINTER den Fenstern (die bekommen ab z-index 100 aufwaerts).
   Nur wenn er die Geduld verliert, springt er nach vorn -- das ist der
   Sinn der Sache, siehe toFront() in kolo.js. */
#winlayer .kolo { z-index: 5; }
#winlayer .kolo.front,
#winlayer .kolo.grabbed,
#winlayer .kolo.interrupt { z-index: 2147483; }

/* Der Satz nach vorn: kurz gross werden, wackeln, sich setzen. */
.kolo.burst .kolo-fig { animation: kolo-burst .68s cubic-bezier(.3,1.5,.4,1) both; }
@keyframes kolo-burst {
  0%   { transform: scale(.86) translateY(6px); }
  35%  { transform: scale(1.22) translateY(-14px) rotate(-6deg); }
  55%  { transform: scale(1.06) translateY(0) rotate(5deg); }
  75%  { transform: scale(1.12) rotate(-3deg); }
  100% { transform: scale(1) rotate(0); }
}

/* Unterwegs: Absprung, Bogen, Landung -- und eine Neigung in die
   Laufrichtung. Ohne das sieht ein Ortswechsel aus wie ein Schnitt. */
.kolo.hopping .kolo-fig { animation: kolo-hop var(--hopdur, 1.1s) cubic-bezier(.4,0,.5,1) both; }
.kolo.hopping.goes-right .kolo-fig { animation-name: kolo-hop-right; }
.kolo.hopping.goes-left  .kolo-fig { animation-name: kolo-hop-left; }
@keyframes kolo-hop {
  0%   { transform: translateY(0) scale(1, 1); }
  12%  { transform: translateY(4px) scale(1.12, .88); }
  45%  { transform: translateY(calc(var(--hop, 20px) * -1)) scale(.94, 1.08); }
  80%  { transform: translateY(0) scale(1.08, .92); }
  100% { transform: translateY(0) scale(1, 1); }
}
@keyframes kolo-hop-right {
  0%   { transform: translateY(0) rotate(0) scale(1, 1); }
  12%  { transform: translateY(4px) rotate(4deg) scale(1.12, .88); }
  45%  { transform: translateY(calc(var(--hop, 20px) * -1)) rotate(9deg) scale(.94, 1.08); }
  80%  { transform: translateY(0) rotate(3deg) scale(1.08, .92); }
  100% { transform: translateY(0) rotate(0) scale(1, 1); }
}
@keyframes kolo-hop-left {
  0%   { transform: translateY(0) rotate(0) scale(1, 1); }
  12%  { transform: translateY(4px) rotate(-4deg) scale(1.12, .88); }
  45%  { transform: translateY(calc(var(--hop, 20px) * -1)) rotate(-9deg) scale(.94, 1.08); }
  80%  { transform: translateY(0) rotate(-3deg) scale(1.08, .92); }
  100% { transform: translateY(0) rotate(0) scale(1, 1); }
}

/* Beim Wandern gleitet er sanft. */
.kolo.wand { transition-property: left, top; }

/* Unterbrechen: er hüpft kurz auf und schüttelt sich. */
.kolo.interrupt .kolo-fig { animation: kolo-interrupt .4s ease-in-out; }
@keyframes kolo-interrupt {
  0% { transform: translateY(0) rotate(0); }
  30% { transform: translateY(-14px) rotate(-7deg) scale(1.12); }
  60% { transform: translateY(-4px) rotate(5deg) scale(1.05); }
  100% { transform: translateY(0) rotate(0); }
}

/* Die Klick-Klaue: ein halbdurchsichtiger Schirm, der für einen
   Wimpernschlag alles abfängt. */
.kolo-cover {
  position: fixed; inset: 0; z-index: 2147482;
  display: grid; place-items: center;
  pointer-events: all; cursor: not-allowed;
  background: radial-gradient(120% 100% at 50% 50%, rgba(150,225,255,.14), rgba(10,40,70,.20));
  animation: kc-fade .2s ease both;
}
.kolo-cover[hidden] { display: none; }
@keyframes kc-fade { from { opacity: 0; } }
.kolo-cover .kc-hand { font-size: 96px; filter: drop-shadow(0 10px 20px rgba(0,50,90,.4)); }
.kolo-cover .kc-hand.pop { animation: kc-pop .34s cubic-bezier(.2,1.6,.4,1); }
@keyframes kc-pop { from { transform: scale(.4) rotate(-24deg); opacity: 0; } }

/* Der versteckte Keks, den man Kolo bringen kann. */
.kolo-cookie {
  position: absolute; width: 52px; height: 52px;
  padding: 3px; border: 0; background: none; cursor: grab;
  opacity: .92; z-index: 40;
  /* OHNE das hier scrollt der Finger die Seite, statt den Keks zu ziehen
     -- auf dem Handy war er damit unbedienbar. */
  touch-action: none;
  filter: drop-shadow(0 3px 7px rgba(0,40,70,.35));
  transition: opacity .2s ease, transform .2s ease, filter .2s ease;
  animation: kolo-cookie-bob 3.4s ease-in-out infinite;
}
.kolo-cookie:hover { opacity: 1; transform: translateY(-4px) scale(1.06); }
/* Der Wink: kurz leuchten, damit man ihn ueberhaupt findet. */
.kolo-cookie.hint {
  animation: kolo-cookie-bob 3.4s ease-in-out infinite, kolo-cookie-hint 1.5s ease-in-out 6;
  filter: drop-shadow(0 0 10px rgba(255,205,120,.95)) drop-shadow(0 3px 7px rgba(0,40,70,.35));
}
@keyframes kolo-cookie-bob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-5px) rotate(3deg); }
}
@keyframes kolo-cookie-hint {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(255,205,120,.5)) drop-shadow(0 3px 7px rgba(0,40,70,.35)); }
  50%      { filter: drop-shadow(0 0 16px rgba(255,190,80,1)) drop-shadow(0 3px 7px rgba(0,40,70,.35)); }
}

/* Kruemel beim Fuettern */
.kolo-crumb {
  position: fixed; width: 5px; height: 5px; border-radius: 50%;
  background: #b5762f; z-index: 2147480; pointer-events: none;
  animation: kolo-crumb-fall .9s ease-in forwards;
}
@keyframes kolo-crumb-fall {
  from { transform: translate(0, 0) scale(1); opacity: 1; }
  to   { transform: translate(var(--dx), var(--dy)) scale(.4); opacity: 0; }
}
.kolo-cookie svg { width: 100%; height: 100%; display: block; pointer-events: none; }
.kolo-cookie.grabbed { cursor: grabbing; opacity: 1; z-index: 2147483; transform: scale(1.15); }
.kolo-cookie.fed {
  /* fliegt zu Kolo: kurz und schmerzlos */
  transition: transform .7s cubic-bezier(.3,1.4,.4,1), opacity .7s ease;
  transform: scale(.15); opacity: 0;
  pointer-events: none;
}
.kolo.fed .kolo-fig { animation: kolo-fed .5s ease-in-out; }
@keyframes kolo-fed {
  0%,100% { transform: scale(1); } 50% { transform: scale(1.18) rotate(-4deg); }
}

@media (prefers-reduced-motion: reduce) {
  .kolo.wand { transition: none; }
  .kolo.hopping .kolo-fig, .kolo.burst .kolo-fig { animation: none; }
  .kolo.interrupt .kolo-fig { animation: none; }
  .kolo-cover .kc-hand.pop { animation: none; }
  .kolo-cookie.fed { transition: opacity .3s ease; transform: none; }
  .kolo.fed .kolo-fig { animation: none; }
}