/* BabyKids - Decorações infantis da home */

body {
    position: relative;
    overflow-x: hidden;
}

.bk-bg-decorations {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.app-shell {
    position: relative;
    z-index: 2;
}

.bk-dot,
.bk-star,
.bk-ring {
    position: absolute;
    display: block;
    opacity: .78;
    filter: drop-shadow(0 8px 14px rgba(0, 98, 200, .10));
    animation: bkFloatDecor 5.5s ease-in-out infinite;
}

.bk-dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
}

.bk-dot-1 { left: 6%; top: 16%; background: #ff4fa3; animation-delay: 0s; }
.bk-dot-2 { left: 16%; top: 74%; background: #ffd32a; animation-delay: .8s; width: 10px; height: 10px; }
.bk-dot-3 { right: 12%; top: 18%; background: #7dd3fc; animation-delay: 1.4s; width: 16px; height: 16px; }
.bk-dot-4 { right: 7%; top: 64%; background: #ff9f1c; animation-delay: 2s; width: 11px; height: 11px; }
.bk-dot-5 { left: 43%; top: 10%; background: #a78bfa; animation-delay: 1s; width: 9px; height: 9px; }
.bk-dot-6 { left: 56%; bottom: 11%; background: #22c55e; animation-delay: 2.6s; width: 12px; height: 12px; }

.bk-star {
    color: #ffd32a;
    font-size: 20px;
    text-shadow: 0 2px 0 rgba(255,255,255,.75);
}

.bk-star-1 { left: 9%; top: 40%; color: #ffd32a; animation-delay: .2s; }
.bk-star-2 { right: 10%; top: 40%; color: #ff4fa3; animation-delay: 1.1s; font-size: 17px; }
.bk-star-3 { left: 28%; top: 22%; color: #7dd3fc; animation-delay: 1.8s; font-size: 16px; }
.bk-star-4 { right: 25%; bottom: 18%; color: #ff9f1c; animation-delay: 2.5s; font-size: 19px; }
.bk-star-5 { left: 4%; bottom: 24%; color: #a78bfa; animation-delay: 3s; font-size: 15px; }

.bk-ring {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 4px solid rgba(255, 79, 163, .35);
}

.bk-ring-1 { left: 74%; top: 13%; animation-delay: .6s; }
.bk-ring-2 { left: 22%; bottom: 14%; border-color: rgba(7, 151, 255, .36); animation-delay: 2.2s; }

@keyframes bkFloatDecor {
    0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
    50% { transform: translateY(-12px) rotate(8deg) scale(1.08); }
}

/* Figurinhas que passam na tela */
.bk-floating-figure-stage {
    position: fixed;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    overflow: hidden;
}

.bk-flying-figure {
    position: absolute;
    width: clamp(58px, 14vw, 115px);
    height: clamp(58px, 14vw, 115px);
    border-radius: 24px;
    object-fit: cover;
    background: #fff;
    border: 4px solid rgba(255,255,255,.92);
    box-shadow: 0 18px 36px rgba(0, 108, 233, .20);
    animation: bkFlyAcross var(--bk-fly-time, 11s) linear forwards;
    opacity: .96;
}

@keyframes bkFlyAcross {
    0% {
        transform: translateX(-140px) translateY(0) rotate(-8deg) scale(.92);
        opacity: 0;
    }
    10% {
        opacity: .96;
    }
    50% {
        transform: translateX(50vw) translateY(var(--bk-y-move, -24px)) rotate(8deg) scale(1);
    }
    90% {
        opacity: .96;
    }
    100% {
        transform: translateX(calc(100vw + 160px)) translateY(0) rotate(-4deg) scale(.92);
        opacity: 0;
    }
}

@media (max-width: 720px) {
    .bk-dot,
    .bk-star,
    .bk-ring {
        opacity: .55;
    }

    .bk-flying-figure {
        width: 62px;
        height: 62px;
        border-radius: 18px;
        border-width: 3px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bk-dot,
    .bk-star,
    .bk-ring,
    .bk-flying-figure {
        animation: none !important;
    }
}


/* BabyKids - Figura voando sem borda, do inferior direito ao superior esquerdo */
.bk-flying-figure {
    width: clamp(70px, 18vw, 150px) !important;
    height: auto !important;
    max-height: 170px !important;
    border-radius: 0 !important;
    object-fit: contain !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    animation: bkFlyZigZagUp var(--bk-fly-time, 12s) linear forwards !important;
}

@keyframes bkFlyZigZagUp {
    0% {
        right: -160px;
        bottom: -120px;
        transform: translate(0, 0) rotate(-8deg) scale(.92);
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    18% {
        right: 12vw;
        bottom: 12vh;
        transform: translate(-22px, -10px) rotate(5deg) scale(1);
    }

    34% {
        right: 28vw;
        bottom: 28vh;
        transform: translate(28px, -16px) rotate(-7deg) scale(1.04);
    }

    50% {
        right: 44vw;
        bottom: 44vh;
        transform: translate(-30px, -20px) rotate(7deg) scale(1);
    }

    66% {
        right: 60vw;
        bottom: 60vh;
        transform: translate(26px, -14px) rotate(-6deg) scale(1.03);
    }

    82% {
        right: 76vw;
        bottom: 76vh;
        transform: translate(-24px, -10px) rotate(5deg) scale(.98);
        opacity: 1;
    }

    100% {
        right: calc(100vw + 170px);
        bottom: calc(100vh + 120px);
        transform: translate(0, 0) rotate(-8deg) scale(.9);
        opacity: 0;
    }
}

@media (max-width: 720px) {
    .bk-flying-figure {
        width: clamp(58px, 22vw, 105px) !important;
        max-height: 120px !important;
    }
}