/* ================= Animacioni i bebes (sinkron, cikël 8 s) ================= */
:root { --bs-t: 8s; }

.banner { position: relative; isolation: isolate; }
.banner .banner-text, .banner .banner-art { position: relative; z-index: 1; }
.bs-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: visible; }

/* Harku me skenën */
.banner-art > div.scene { padding: 0; overflow: hidden; justify-content: flex-end; }
.bs { width: 100%; height: auto; display: block; overflow: visible; }
.bs-baby, .bs-baby path, .bs-baby circle { fill: var(--primary); }
.bs-curl, .bs-arm { fill: none !important; stroke: var(--primary); stroke-width: 7; stroke-linecap: round; }
.bs-curl { stroke-width: 3; }
.bs-eye { fill: none !important; stroke: var(--blush); stroke-width: 1.8; stroke-linecap: round; }
.bs-baby .bs-ear { fill: #6d4a77; }
.bs-string { stroke: var(--gold-dark); stroke-width: 1.5; }
.bs-rod { fill: none; stroke: var(--gold-dark); stroke-width: 3; stroke-linecap: round; }
.bs-toy { fill: var(--primary); opacity: .85; }
.bs-star { fill: var(--gold); }
.bs-z { font-family: var(--font); font-style: italic; font-weight: 700; font-size: 22px; fill: var(--primary); opacity: 0; }
.bs-bubble { fill: rgba(255, 255, 255, .14); }
.bs-bg path.bs-float { fill: rgba(194, 160, 99, .55); }

/* Frymëmarrja: dy frymë në çdo cikël */
.bs-breath { transform-box: fill-box; transform-origin: 50% 100%; animation: bs-breath calc(var(--bs-t) / 2) ease-in-out infinite; }
@keyframes bs-breath { 0%, 100% { transform: scale(1, 1); } 45% { transform: scale(1.015, 1.07); } }

/* Lodra lëkundet një herë në cikël; varëset kanë vonesë të vogël */
.bs-mobile { transform-box: view-box; transform-origin: 160px 0; animation: bs-swing var(--bs-t) ease-in-out infinite; }
@keyframes bs-swing { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
.bs-hang { transform-box: view-box; animation: bs-sway var(--bs-t) ease-in-out infinite; }
.bs-hang1 { transform-origin: 102px 35px; }
.bs-hang2 { transform-origin: 160px 28px; }
.bs-hang3 { transform-origin: 218px 35px; }
@keyframes bs-sway { 0%, 100% { transform: rotate(4deg); } 50% { transform: rotate(-4deg); } }

/* Shkëlqimi i hënës ndjek frymëmarrjen */
.bs-glow { transform-box: fill-box; transform-origin: center; animation: bs-glow calc(var(--bs-t) / 2) ease-in-out infinite; }
@keyframes bs-glow { 0%, 100% { opacity: .55; transform: scale(.97); } 45% { opacity: 1; transform: scale(1.03); } }

/* Yjet: secili ndizet në një moment tjetër të të njëjtit cikël */
.bs-star { transform-box: fill-box; transform-origin: center; animation: bs-twinkle var(--bs-t) ease-in-out infinite; }
@keyframes bs-twinkle { 0%, 100% { opacity: .25; scale: .7; } 12% { opacity: 1; scale: 1.15; } 30% { opacity: .35; scale: .8; } }
.bs-star1 { animation-delay: 0s; }
.bs-star2 { animation-delay: calc(var(--bs-t) * -1 / 6); }
.bs-star3 { animation-delay: calc(var(--bs-t) * -2 / 6); }
.bs-star4 { animation-delay: calc(var(--bs-t) * -3 / 6); }
.bs-star5 { animation-delay: calc(var(--bs-t) * -4 / 6); }
.bs-star6 { animation-delay: calc(var(--bs-t) * -5 / 6); }

/* Z-të ngjiten njëra pas tjetrës, të ndara në tre pjesë të barabarta të ciklit */
.bs-z { animation: bs-z var(--bs-t) ease-out infinite; }
.bs-z2 { animation-delay: calc(var(--bs-t) * -1 / 3); font-size: 18px; }
.bs-z3 { animation-delay: calc(var(--bs-t) * -2 / 3); font-size: 14px; }
@keyframes bs-z {
  0% { opacity: 0; transform: translate(0, 0); }
  15% { opacity: .9; }
  70% { opacity: .5; }
  100% { opacity: 0; transform: translate(26px, -70px); }
}

/* Flluskat e sfondit: cikël 16 s (2 × 8 s) */
.bs-float { animation: bs-rise calc(var(--bs-t) * 2) linear infinite; }
@keyframes bs-rise {
  0% { transform: translateY(0); opacity: 0; }
  10% { opacity: 1; }
  85% { opacity: .8; }
  100% { transform: translateY(-112px); opacity: 0; }
}
.bs-bg path.bs-float { animation-name: bs-rise-star; }
@keyframes bs-rise-star {
  0% { translate: 0 0; opacity: 0; }
  10% { opacity: 1; }
  100% { translate: 0 -112px; opacity: 0; }
}

/* Telefon: skena del mbi tekstin, më e vogël */
@media (max-width: 860px) {
  .banner .banner-art { display: grid; order: -1; padding: 24px 24px 0; }
  .banner-art > div.scene { max-width: 230px; min-height: 0; margin: 0 auto; }
  .banner-text { padding-top: 18px; }
}

/* Pa lëvizje për ata që e kanë çaktivizuar në telefon/kompjuter */
@media (prefers-reduced-motion: reduce) {
  .bs *, .bs-bg * { animation: none !important; }
  .bs-z { opacity: .6; }
}

/* ================= Sfondi i animuar i gjithë faqes ================= */
.page-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; contain: strict; }
.pg-item { position: absolute; overflow: visible; translate: -50% -50%; }
.pg-baby-moon { color: var(--primary); opacity: .18; animation: pg-bob var(--bs-t) ease-in-out infinite; }
.pg-baby-moon .pg-moon, #pgBabyMoon .pg-moon { fill: var(--gold); }
#pgBabyMoon .pg-baby { fill: var(--primary); }
@keyframes pg-bob {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-14px) rotate(4deg); }
}
.pg-star { fill: var(--gold); opacity: .35; animation: pg-twinkle var(--bs-t) ease-in-out infinite; }
@keyframes pg-twinkle {
  0%, 100% { opacity: .25; transform: scale(.7); }
  12% { opacity: .85; transform: scale(1.2); }
  30% { opacity: .18; transform: scale(.8); }
}
.pg-bubble { position: absolute; bottom: -60px; border-radius: 50%; border: 1px solid rgba(75, 42, 85, .2);
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .7), rgba(242, 220, 214, .25) 60%, transparent 70%);
  animation: pg-rise calc(var(--bs-t) * 2) linear infinite; }
@keyframes pg-rise {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: .9; }
  50% { transform: translate(18px, -55vh); }
  90% { opacity: .6; }
  100% { transform: translate(0, -112vh); opacity: 0; }
}
/* Pjesët e faqes pa sfond të vetin e lënë skenën të duket */
main { position: relative; }

@media (max-width: 860px) {
  .pg-baby-moon { scale: .7; }
  .pg-baby-moon:nth-of-type(n+5), .pg-star:nth-of-type(n+8) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .page-bg * { animation: none !important; }
  .pg-bubble { display: none; }
}