/* Animovane logo: prstenec s napisem se pri nacteni roztoci, stred vyskoci, z kominu stoupa kour, hvezdy blikaji.
   Vrstvy maji stejne platno (600x600); vnitrni kruh ma stred 49 % / 49 %, polomer 32 %, komin cca 35 % / 25 %. */
.logo-anim { position: relative; display: block; width: var(--logo-velikost, 140px); aspect-ratio: 1; flex: none; }
.logo-anim img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.la-kruh { animation: la-roztoc 1.4s cubic-bezier(.2, .8, .2, 1) both; filter: drop-shadow(0 6px 14px #0006); }
.la-stred { position: absolute; inset: 0; transform-origin: 49% 49%; animation: la-pop .9s .45s cubic-bezier(.3, 1.6, .5, 1) both; }
.logo-anim:hover .la-kruh { animation: la-kyv 1.2s ease-in-out; }

.la-fx { position: absolute; inset: 0; clip-path: circle(31.5% at 49% 49%); pointer-events: none; }
.la-kour i {
  position: absolute; left: 35%; top: 24%; width: 7%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, #fffffff2 0%, #ffffffb0 45%, #fff0 70%);
  opacity: 0; animation: la-kour 3.3s ease-out infinite;
}
.la-kour i:nth-child(2) { animation-delay: 1.1s; }
.la-kour i:nth-child(3) { animation-delay: 2.2s; }
.la-hvezdy i {
  position: absolute; width: 1.6%; aspect-ratio: 1; border-radius: 50%; background: #ffe680;
  box-shadow: 0 0 4px 1px #ffe680; opacity: .2; animation: la-blik 2.4s ease-in-out infinite;
}
.la-hvezdy i:nth-child(1) { left: 47%; top: 21%; }
.la-hvezdy i:nth-child(2) { left: 61%; top: 23%; animation-delay: .5s; }
.la-hvezdy i:nth-child(3) { left: 72%; top: 33%; animation-delay: 1.1s; }
.la-hvezdy i:nth-child(4) { left: 26%; top: 38%; animation-delay: 1.6s; }
.la-hvezdy i:nth-child(5) { left: 54%; top: 30%; animation-delay: .8s; }
.la-hvezdy i:nth-child(6) { left: 77%; top: 45%; animation-delay: 2s; }

@keyframes la-roztoc { from { transform: rotate(-220deg) scale(.55); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes la-pop { from { transform: scale(.2); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes la-kyv { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-10deg); } 65% { transform: rotate(6deg); } }
@keyframes la-kour {
  0% { transform: translate(-50%, 0) scale(.35); opacity: 0; }
  12% { opacity: .9; }
  100% { transform: translate(60%, -330%) scale(2.1); opacity: 0; }
}
@keyframes la-blik { 0%, 100% { opacity: .15; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.15); } }

@media (prefers-reduced-motion: reduce) {
  .la-kruh, .la-stred, .la-kour i, .la-hvezdy i, .logo-anim:hover .la-kruh { animation: none; }
  .la-kour { display: none; }
}