/* =========================================================
   CHILD-FRIENDLY ANIMATIONS — MUGHAI MUTRAM
   Animals, toys, bouncy buttons and playful motion.
   Loaded after style.css so it can refine it.
   ========================================================= */

:root {
    --sky: #5fb8d9;
    --sun: #f7c948;
    --coral: #ef6f6c;
    --mint: #7cc9a0;
    --lilac: #b79be0;
}

/* ---------- shared keyframes ---------- */

@keyframes bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-16px); }
}

@keyframes hop {
    0%, 55%, 100% { transform: translateY(0) scale(1, 1); }
    62%           { transform: translateY(0) scale(1.06, .92); }
    78%           { transform: translateY(-28px) scale(.97, 1.04); }
    92%           { transform: translateY(0) scale(1.05, .94); }
}

@keyframes sway {
    0%, 100% { transform: rotate(-4deg); }
    50%      { transform: rotate(4deg); }
}

@keyframes wiggle {
    0%, 100% { transform: rotate(-7deg); }
    50%      { transform: rotate(7deg); }
}

@keyframes balloonFloat {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50%      { transform: translateY(-22px) rotate(3deg); }
}

@keyframes twinkle {
    0%, 100% { transform: scale(.6) rotate(0); opacity: .4; }
    50%      { transform: scale(1.2) rotate(25deg); opacity: 1; }
}

@keyframes flutter {
    0%   { transform: translate(0, 0) rotate(-8deg); }
    25%  { transform: translate(40px, -36px) rotate(10deg); }
    50%  { transform: translate(90px, 4px) rotate(-6deg); }
    75%  { transform: translate(40px, 34px) rotate(8deg); }
    100% { transform: translate(0, 0) rotate(-8deg); }
}

@keyframes jelly {
    0%   { transform: scale(1, 1); }
    30%  { transform: scale(1.18, .82); }
    50%  { transform: scale(.88, 1.14); }
    70%  { transform: scale(1.08, .94); }
    100% { transform: scale(1, 1); }
}

@keyframes parade {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@keyframes popIn {
    0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
    70%  { transform: scale(1.15) rotate(6deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}

@keyframes rainbowShift {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

@keyframes confettiFall {
    0%   { transform: translate(0, 0) rotate(0) scale(1); opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(.4); opacity: 0; }
}


/* =========================================================
   FRONT PAGE — ANIMALS & TOYS
   ========================================================= */

.hero { cursor: default; }

/* the old emoji house / tree are replaced by real characters */
.hero-house,
.hero-tree { display: none; }

.hero-animal,
.hero-toy {
    position: absolute;
    z-index: 12;
    height: auto;
    user-select: none;
    -webkit-user-drag: none;
    filter: drop-shadow(0 12px 14px rgba(63, 71, 37, .18));
    cursor: pointer;
    transform-origin: 50% 100%;
}

/* animals stand on the grass */
.hero-giraffe  { left: 1.5%;  bottom: 70px; width: clamp(110px, 11vw, 175px); animation: sway 5s ease-in-out infinite; }
.hero-bunny    { left: 14%;   bottom: 52px; width: clamp(70px, 6.5vw, 105px);  animation: hop 3.4s ease-in-out infinite; }
.hero-lion     { left: 4%;    top: 150px;   width: clamp(80px, 7.5vw, 125px);  animation: bob 4s ease-in-out infinite; transform-origin: 50% 50%; }
.hero-elephant { right: 3.5%; bottom: 52px; width: clamp(150px, 16vw, 250px);  animation: hop 4.2s ease-in-out infinite .6s; }

/* toys */
.hero-balloons { right: 2%;   top: 105px;   width: clamp(80px, 8vw, 130px);    animation: balloonFloat 5s ease-in-out infinite; transform-origin: 50% 100%; }
.hero-blocks   { left: 22%;   bottom: 48px; width: clamp(70px, 7vw, 115px);    animation: wiggle 4s ease-in-out infinite; }
.hero-teddy    { right: 25%;  bottom: 48px; width: clamp(70px, 7vw, 110px);    animation: bob 3.6s ease-in-out infinite .4s; }

/* the little emoji toys */
.toy-two   { right: 25%; top: 140px; bottom: auto; font-size: 46px; animation: balloonFloat 6s ease-in-out infinite; }
.toy-three { left: 14%;  top: 42%;   font-size: 40px; animation: wiggle 5s ease-in-out infinite; }
.toy-four  { left: 30%;  bottom: 175px; font-size: 38px; animation: bob 2.6s ease-in-out infinite; position: absolute; z-index: 3; }

.star { position: absolute; z-index: 3; font-size: 26px; animation: twinkle 2.8s ease-in-out infinite; }
.star-one   { left: 28%;  top: 120px; }
.star-two   { right: 33%; top: 105px; animation-delay: .9s; }
.star-three { left: 8%;   top: 62%;   animation-delay: 1.7s; }

/* real butterflies that flap and wander */
img.butterfly {
    width: 46px;
    height: auto;
    font-size: 0;
    animation: flutter 9s ease-in-out infinite;
}
img.butterfly-one   { left: 12%;  top: 36%; }
img.butterfly-two   { right: 20%; top: 44%; animation-duration: 11s; animation-delay: 1.5s; width: 38px; }
img.butterfly-three { left: 42%;  top: 24%; animation-duration: 13s; animation-delay: .8s; width: 34px; }

/* clicking an animal/toy makes it boing */
.boing { animation: jelly .7s ease !important; }

/* hero heading gets a rainbow shimmer */
.hero h1 span {
    background: linear-gradient(90deg, #c79650, #ef6f6c, #5fb8d9, #7cc9a0, #c79650);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rainbowShift 6s linear infinite;
}

.hero-badge { animation: bob 3.5s ease-in-out infinite; }

/* grass blades */
.grass { position: absolute; bottom: 70px; font-size: 34px; animation: sway 3s ease-in-out infinite; transform-origin: 50% 100%; }
.grass-one { left: 40%; }
.grass-two { left: 58%; animation-delay: .8s; }


/* =========================================================
   BOUNCY, FRIENDLY BUTTONS & CARDS
   ========================================================= */

.primary-button,
.secondary-button,
.nav-button,
#enquiryForm button {
    font-weight: 600;
}

.primary-button:hover,
.secondary-button:hover,
.nav-button:hover,
#enquiryForm button:hover {
    animation: jelly .6s ease;
}

.primary-button {
    background: linear-gradient(135deg, #7a8644, #66703b);
    box-shadow: 0 6px 0 #3f4725;
}
.primary-button:active { transform: translateY(4px); box-shadow: 0 2px 0 #3f4725; }

.about-icon,
.screen-icon { display: inline-block; animation: bob 3.5s ease-in-out infinite; }
.about-card:nth-child(2) .about-icon { animation-delay: .5s; }
.about-card:nth-child(3) .about-icon { animation-delay: 1s; }
.about-card:hover .about-icon { animation: jelly .7s ease; }
.screen-icon { animation: wiggle 3s ease-in-out infinite; }

.section-heading span {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 40px;
    background: #fff1cf;
    border: 2px dashed var(--gold);
}

.program-card:nth-child(1) { border-bottom: 8px solid var(--coral); }
.program-card:nth-child(2) { border-bottom: 8px solid var(--sky); }
.program-card:nth-child(3) { border-bottom: 8px solid var(--sun); }

.program-content > span {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff1cf;
    font-weight: 700;
}
.program-card:hover .program-content > span { animation: jelly .7s ease; }

.announcement-icon { display: inline-block; animation: wiggle 1.8s ease-in-out infinite; transform-origin: 50% 80%; }

.contact-row:hover .contact-logo { animation: jelly .6s ease; }

.contact-main { animation: bob 2.6s ease-in-out infinite; }
.contact-float.active .contact-main { animation: none; }


/* =========================================================
   ANIMALS PEEKING INTO SECTIONS
   ========================================================= */

.about-section,
.enquiry-section,
.contact-section { position: relative; overflow: hidden; }

.about-section > *:not(.peek),
.enquiry-section > *:not(.enquiry-deco),
.contact-container { position: relative; z-index: 2; }

.peek {
    position: absolute;
    top: 28px;
    z-index: 1;
    animation: bob 4.5s ease-in-out infinite;
}
.peek-left  { left: 4%;  width: clamp(70px, 8vw, 120px); }
.peek-right { right: 4%; width: clamp(70px, 8vw, 120px); animation-delay: 1s; }

.enquiry-deco { position: absolute; bottom: 14px; z-index: 1; }
.e-teddy  { left: 1.5%;  width: clamp(80px, 9vw, 140px);  animation: hop 4s ease-in-out infinite; }
.e-blocks { right: 1.5%; width: clamp(80px, 9vw, 140px);  animation: wiggle 4s ease-in-out infinite; }


/* =========================================================
   CONTACT PAGE — ANIMALS & TOYS
   ========================================================= */

.contact-deco {
    position: absolute;
    z-index: 1;
    height: auto;
    pointer-events: none;
    filter: drop-shadow(0 10px 12px rgba(63, 71, 37, .15));
}

.c-giraffe  { left: 1%;   bottom: 16px; width: clamp(90px, 9vw, 150px);  animation: sway 5s ease-in-out infinite; transform-origin: 50% 100%; }
.c-bunny    { left: 11%;  bottom: 14px; width: clamp(60px, 6vw, 95px);   animation: hop 3.4s ease-in-out infinite; }
.c-lion     { left: 2%;   top: 40px;    width: clamp(70px, 7vw, 110px);  animation: bob 4s ease-in-out infinite; }
.c-elephant { right: 1.5%; bottom: 14px; width: clamp(130px, 14vw, 220px); animation: hop 4.2s ease-in-out infinite .5s; }
.c-teddy    { right: 17%; bottom: 14px; width: clamp(60px, 6vw, 95px);   animation: bob 3.6s ease-in-out infinite; }
.c-balloons { right: 2%;  top: 30px;    width: clamp(70px, 7vw, 115px);  animation: balloonFloat 5s ease-in-out infinite; transform-origin: 50% 100%; }
.c-blocks   { left: 20%;  bottom: 14px; width: clamp(60px, 6vw, 95px);   animation: wiggle 4s ease-in-out infinite; }
.c-butterfly { right: 22%; top: 90px;   width: 40px; animation: flutter 10s ease-in-out infinite; }
.c-kite     { left: 12%;  top: 70px;    font-size: 44px; animation: balloonFloat 6s ease-in-out infinite; }


/* =========================================================
   ANIMAL PARADE ABOVE THE FOOTER
   ========================================================= */

.parade {
    overflow: hidden;
    padding-top: 30px;
    background: linear-gradient(to bottom, #fffdf7 0%, #fffdf7 60%, #aeb277 60%, #aeb277 100%);
}

.parade-track {
    display: flex;
    align-items: flex-end;
    width: max-content;
    animation: parade 32s linear infinite;
}

.parade-track img {
    height: 110px;
    width: auto;
    margin: 0 46px;
    transform-origin: 50% 100%;
    animation: hop 2.8s ease-in-out infinite;
}
.parade-track img:nth-child(2n) { animation-delay: .5s; }
.parade-track img:nth-child(3n) { animation-delay: 1.1s; }

.parade-track img:nth-child(2),
.parade-track img:nth-child(7) { height: 150px; }


/* =========================================================
   CONFETTI (made by script.js / app.js)
   ========================================================= */

.confetti {
    position: fixed;
    z-index: 5000;
    pointer-events: none;
    font-size: 22px;
    animation: confettiFall 1.1s ease-out forwards;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1250px) {
    .c-bunny, .c-blocks, .c-teddy, .c-kite { display: none; }
    .contact-deco { opacity: .85; }
}

@media (max-width: 1100px) {
    .enquiry-deco { display: none; }
}

@media (max-width: 1050px) {
    /* photo sits centred at the bottom, so animals stand on the grass either side */
    .hero-giraffe  { left: 1%;  bottom: 8px; width: clamp(80px, 17vw, 130px); }
    .hero-elephant { right: 1%; bottom: 8px; width: clamp(100px, 22vw, 170px); }
    .hero-bunny    { left: auto; right: 30%; bottom: 8px; width: 60px; }
    .hero-lion     { left: 2%;  top: 105px;  width: 70px; }
    .hero-balloons { right: 3%; top: 100px;  width: 70px; }
    .hero-blocks, .hero-teddy, .toy-four, .toy-three { display: none; }
    .toy-two { right: 14%; top: 125px; }
}

@media (max-width: 900px) {
    .peek { display: none; }
    .contact-deco { display: none; }
    .c-elephant, .c-balloons, .c-giraffe {
        display: block;
        opacity: .35;
        width: 90px;
    }
    .c-giraffe  { left: 2%; }
    .c-elephant { right: 2%; width: 110px; }
    .c-balloons { right: 3%; top: 16px; width: 60px; }
    .parade-track img { height: 80px; margin: 0 28px; }
    .parade-track img:nth-child(2),
    .parade-track img:nth-child(7) { height: 105px; }
}

@media (max-width: 600px) {
    .hero-giraffe  { width: 70px; }
    .hero-elephant { width: 95px; }
    .hero-bunny    { display: none; }
    .hero-lion     { width: 56px; top: 92px; }
    .hero-balloons { width: 56px; top: 90px; }
    img.butterfly  { width: 30px; }
}


/* =========================================================
   RESPECT PEOPLE WHO PREFER LESS MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .parade-track { animation: none; }
}