/* MŠ Jestřebí – animace webu: rozpohybovaná oblaka úvodu, ptáčci, konfety u loga, interaktivní hřiště (Demo5 varianta A) */
/* MŠ Jestřebí – animované prostředí úvodní stránky: společné styly variant A, B, C */

/* scéna za obsahem (od spodku hlavičky po hřiště) a vrstva efektů nad obsahem */
.hpx .kingster-body-wrapper { position: relative; isolation: isolate; }
.hpx-stage, .hpx-fx { position: absolute; left: 0; right: 0; pointer-events: none; overflow: hidden; }
.hpx-stage { z-index: 0; }
.hpx-fx { z-index: 30; }
.hpx-back, .hpx-mid { position: absolute; inset: 0; }
.hpx #kingster-page-wrapper, .hpx #green_bg_wave_cover { position: relative; z-index: 1; background: transparent; }
.hpx footer { position: relative; z-index: 2; }
/* sekce pod úvodem průhledné, ať je vidět přechod do louky za hřištěm */
.hpx .ms4-sec, .hpx .gdlr-core-page-builder-body { background: transparent !important; }
/* původní ptáčci z Demo4 nahrazeni novými */
.hpx .ms3-birds { display: none !important; }

/* mraky */
.hpx-cloud { position: absolute; left: 100%; animation: hpx-drift 120s linear infinite; will-change: transform; }
.hpx-cloud svg { display: block; width: 100%; height: auto; overflow: visible; }
@keyframes hpx-drift { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--sw, 1600px) - 100%)); } }
.hpx-eyes { transform-box: fill-box; transform-origin: center; animation: hpx-blink 5s infinite; }
@keyframes hpx-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }

/* sluníčko */
.hpx-sun { position: absolute; }
.hpx-sun svg { display: block; width: 100%; height: auto; overflow: visible; }
.hpx-sun-rays { animation: hpx-spin 40s linear infinite; }
.hpx-sun-glow { transform-box: fill-box; transform-origin: center; animation: hpx-pulse 4s ease-in-out infinite alternate; }
@keyframes hpx-spin { to { transform: rotate(360deg); } }
@keyframes hpx-pulse { from { transform: scale(.92); opacity: .25; } to { transform: scale(1.08); opacity: .45; } }

/* ptáčci (pozici řídí JS) */
.hpx-bird { position: absolute; left: 0; top: 0; will-change: transform; }
.hpx-bird-in { animation: hpx-flap-wrap .26s ease-in-out infinite alternate; }
.hpx-bird-svg { display: block; width: 100%; height: auto; overflow: visible; }
.hpx-wing { transform-box: view-box; transform-origin: 24px 20px; animation: hpx-flap .26s ease-in-out infinite alternate; animation-duration: inherit; }
.hpx-bird-in { animation-name: none; }
.hpx-bird-in .hpx-wing { animation-duration: inherit; }
.hpx-wing-s { transform-box: fill-box; transform-origin: 50% 70%; animation: hpx-flap-s .4s ease-in-out infinite alternate; }
@keyframes hpx-flap { from { transform: scaleY(1); } to { transform: scaleY(-.8); } }
@keyframes hpx-flap-s { from { transform: scaleY(1); } to { transform: scaleY(-.5); } }
.hpx-bird.is-loop .hpx-bird-in { animation: hpx-loop .9s cubic-bezier(.4, 0, .3, 1); }
@keyframes hpx-loop { to { transform: rotate(-360deg); } }

/* motýlci */
.hpx-bfly { position: absolute; left: 0; top: 0; will-change: transform; }
.hpx-bfly-svg { display: block; width: 100%; height: auto; overflow: visible; }
.hpx-bw { transform-box: fill-box; animation: hpx-bw .18s ease-in-out infinite alternate; }
.hpx-bw-l { transform-origin: 100% 50%; }
.hpx-bw-r { transform-origin: 0 50%; }
@keyframes hpx-bw { from { transform: scaleX(1); } to { transform: scaleX(.25); } }

/* prostor kolem loga */
.hpx-logo { position: relative; }
.hpx-logo > a { position: relative; z-index: 2; }
.hpx-logo-fx { position: absolute; z-index: 1; pointer-events: none; }


.hpx-paused *, .hpx-paused *::before, .hpx-paused *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
    .hpx-stage *, .hpx-fx *, .hpx-logo-fx * { animation: none !important; }
    .hpx-cloud { left: auto; right: var(--rx, 10%); }
}

/* Varianta A (verze 2) – „Nebe nad školkou“ */
/* přechod do louky jen na úvodu – na podstránkách by scéna zakryla pruh s drobečkovou navigací */
.hpx-home .hpx-stage { background: linear-gradient(180deg, #fff 0, #fff calc(100% - 520px), #f2faf5 calc(100% - 300px), #e3f5ea 100%); }

/* nebe úvodu = původní obrázek oblak, každý mrak se hýbe sám */
.hpx-sky-on #div_1dd7_44 { background: transparent !important; background-image: none !important; }
.hpx-a-sky { position: absolute; left: -3%; right: -3%; top: 0; overflow: hidden; }
.hpx-a-skysvg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hpx-cl { transform-box: fill-box; transform-origin: 50% 100%; animation: hpx-a-cl var(--d, 10s) ease-in-out var(--dl, 0s) infinite alternate; }
@keyframes hpx-a-cl { from { transform: translate(0, 0) scale(1); } to { transform: translate(var(--tx), var(--ty)) scale(var(--sc)); } }

/* kopečky a stromky za hřištěm */
.hpx-a-hillwrap { position: absolute; left: 0; right: 0; bottom: 0; height: 260px; }
.hpx-a-hills { position: absolute; inset: 0; width: 100%; height: 100%; }
.hpx-a-tree { position: absolute; width: 34px; transform-origin: 50% 100%; animation: hpx-a-tree 5s ease-in-out infinite alternate; }
.hpx-a-tree svg { display: block; width: 100%; height: auto; }
@keyframes hpx-a-tree { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }

/* logo: konfety */
.hpx-a-confetti { position: absolute; left: 50%; top: 50%; }
.hpx-a-confetti i { position: absolute; left: 0; top: 0; width: 8px; height: 8px; border-radius: 2px; animation: hpx-a-conf 1.4s cubic-bezier(.2, .7, .3, 1) forwards; }
.hpx-a-confetti i.is-star { width: 12px; height: 12px; border-radius: 0; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
@keyframes hpx-a-conf { 0% { transform: translate(0, 0) rotate(0) scale(.4); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(var(--x), calc(var(--y) + 40px)) rotate(var(--r)) scale(1); opacity: 0; } }

/* hřiště: drak, balonky, míče */
.hpx-a-play { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hpx-a-kitebox { animation: hpx-a-kite 4.5s ease-in-out infinite alternate; transform-origin: 1166px 238px; }
@keyframes hpx-a-kite { from { transform: rotate(-4deg); } to { transform: rotate(3deg); } }
.hpx-a-kite-k { pointer-events: auto; cursor: pointer; }
.hpx-a-kite-spin { transform-box: fill-box; transform-origin: 50% 20%; }
.hpx-a-kite-spin.is-loop { animation: hpx-a-kloop 1.3s cubic-bezier(.45, 0, .25, 1); }
@keyframes hpx-a-kloop { 0% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(-30px, -60px) rotate(200deg); } 100% { transform: translate(0, 0) rotate(360deg); } }
.hpx-a-kite-tail { transform-box: fill-box; transform-origin: 50% 0; animation: hpx-a-tail 1.2s ease-in-out infinite alternate; }
@keyframes hpx-a-tail { from { transform: skewX(-8deg); } to { transform: skewX(8deg); } }
.hpx-a-bunch, .hpx-a-ball { pointer-events: auto; cursor: pointer; }
.hpx-a-bal { transform-origin: 196px 228px; animation: hpx-a-balsway 2.4s ease-in-out infinite alternate; transition: opacity .2s; }
.hpx-a-bal.is-gone { opacity: 0; pointer-events: none; animation: none; }
@keyframes hpx-a-balsway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
.hpx-a-fly { position: absolute; width: 36px; pointer-events: none; animation: hpx-a-fly 14s cubic-bezier(.3, 0, .7, 1) forwards; }
.hpx-a-fly svg { display: block; width: 100%; height: auto; overflow: visible; animation: hpx-a-wob 1.4s ease-in-out infinite alternate; }
@keyframes hpx-a-fly { 0% { transform: translate(0, 0); } 100% { transform: translate(var(--dx), calc(-1 * var(--up))); } }
@keyframes hpx-a-wob { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
.hpx-a-hint { position: absolute; left: 6%; bottom: 84%; white-space: nowrap; padding: 6px 12px; border-radius: 14px; background: #fff; color: #2e7d61;
    font: 700 13px/1.2 Grandstander, Poppins, sans-serif; box-shadow: 0 4px 14px rgba(30, 80, 110, .18); pointer-events: none; animation: hpx-a-hint 1.6s ease-in-out infinite alternate; }
.hpx-a-hint::after { content: ""; position: absolute; left: 40px; top: 100%; border: 7px solid transparent; border-top-color: #fff; }
@keyframes hpx-a-hint { from { transform: translateY(0); } to { transform: translateY(-6px); } }

@media (max-width: 767px) {
    .hpx-a-hillwrap { height: 160px; }
    .hpx-a-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hpx-cl, .hpx-a-kitebox { animation: none !important; } }