/* ====================================
   Kids & Family - FV Animation
   ==================================== */
.kids-fv-section {
    position: relative;
    width: 100%;
    min-height: 900px; /* Ensure height on PC */
    padding-top: 120px;
    background-color: #FDFCF5; /* Base beige */
    overflow: hidden;
}

/* Base container for absolute positioning of elements within FV */
.fv-inner {
    position: relative;
    max-width: 1400px;
    width: 100%;
    height: 600px; /* Base height for positioning child elements with % */
    margin: 0 auto;
}

/* ------------------------------------
   [PC/SP Switching]
   ------------------------------------ */
.pc-only { display: block; }
.sp-only { display: none; }



/* ------------------------------------
   [Animation Keyframes]
   ------------------------------------ */
@keyframes boyoyon {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    60% {
        transform: scale(1.08); /* Overshoot slightly larger */
        opacity: 1;
    }
    80% {
        transform: scale(0.96); /* Shrink slightly */
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Float softly (keep position) */
@keyframes fv-float {
    0%   { transform: translate(0px, 0px) rotate(0deg); }
    33%  { transform: translate(8px, -12px) rotate(4deg); }
    66%  { transform: translate(-10px, 8px) rotate(-3deg); }
    100% { transform: translate(0px, 0px) rotate(0deg); }
}

/* Delay class - Magic to make them pop out in order */
.delay-1 { animation-delay: 0.1s !important; }
.delay-2 { animation-delay: 0.2s !important; }
.delay-3 { animation-delay: 0.3s !important; }
.delay-4 { animation-delay: 0.4s !important; }
.delay-5 { animation-delay: 0.5s !important; }
.delay-6 { animation-delay: 0.6s !important; }
.delay-7 { animation-delay: 0.8s !important; } /* Copy */
.delay-8 { animation-delay: 1.0s !important; } /* Logo */


/* ------------------------------------
   [Foreground] Kids & Logo (Coordinates for PC)
   ------------------------------------ */
.fv-kid, .fv-main-copy, .fv-main-logo {
    position: absolute;
    transform: scale(0); 
    opacity: 0;
    animation: boyoyon 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    will-change: transform, opacity;
}

/* ▼ PC: Placement of kids (a1-a8) ▼ */
.kid-a1 { top: 35%; left: 22%; width: 16%; z-index: 12; } /* Woman and child */
.kid-a2 { top: 19%; left: 28%; width: 14%; z-index: 11; } /* Boy cheering */
.kid-a3 { top: 16%; left: 38%; width: 21%; z-index: 13; } /* Two people playing with clay */
.kid-a4 { top: 22%; left: 58%; width: 13%; z-index: 11; } /* Boy jumping */
.kid-a5 { top: 4%; left: 55%; width: 16%; z-index: 9;  } /* Air playground equipment */
.kid-a6 { top: 39%; left: 66%; width: 11%; z-index: 12; } /* Dad and baby */
.kid-a7 { top: 42%; left: 35%; width: 11%; z-index: 15; } /* Smiling boy close-up */
.kid-a8 { top: 36%; left: 44%; width: 21%; z-index: 14; } /* Two smiling girls */

/* ▼ SP: Placement of kids group (for smartphone) ▼ */
.fv-sp-bg { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; animation: fadeIn 1s forwards; z-index: 1; }
/* Image of placing it right on top of the background for SP version */
.sp-kid-g1 { top: 15%; left: 5%; width: 90%; z-index: 10; }
.sp-kid-g2 { top: 30%; left: 5%; width: 90%; z-index: 11; }
.sp-kid-g3 { top: 45%; left: 5%; width: 90%; z-index: 12; }

/* Center logo and copy */
.fv-center-content {
    position: absolute;
    bottom: 8%; /* Placed at the bottom of the screen */
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 600px;
    text-align: center;
    z-index: 20; /* Foremost */
}
.fv-main-copy, .fv-main-logo {
    position: relative;
    margin: 0 auto;
    left: auto; top: auto;
}
.fv-main-copy { width: 85%; margin-bottom: 25px; }
.fv-main-logo { width: 100%; }


/* ------------------------------------
   [Background] Objects & Blobs (Coordinates for PC)
   ------------------------------------ */
.fv-obj {
    position: absolute;
    animation: fv-float 18s ease-in-out infinite alternate;
    will-change: transform;
}

/* ▼ PC: Placement of background shapes (b1-b11) ▼ */
/* Set z-index to 5-8 to place behind kids (10-) */
.obj-b1  { top: 71%; left: 8%;  width: 13%;  z-index: 8; animation-duration: 16s; } /* Light blue zigzag */
.obj-b2  { top: 42%; left: 13%; width: 3%;  z-index: 8; animation-duration: 14s; } /* Yellow circle */
.obj-b3  { top: 35%; left: 5%;  width: 6%;  z-index: 7; animation-duration: 20s; } /* Pink triangle */
.obj-b4  { top: 20%; left: 16%; width: 10%; z-index: 6; animation-duration: 18s; animation-direction: alternate-reverse; } /* Left wavy */
.obj-b5  { top: 8%;  left: 35%; width: 7%;  z-index: 5; animation-duration: 22s; } /* Yellow triangle frame */
.obj-b6  { top: 8%;  left: 55%; width: 2.5%;z-index: 5; animation-duration: 15s; } /* White circle (small) */
.obj-b7  { top: 15%; left: 75%; width: 8%;  z-index: 6; animation-duration: 19s; animation-direction: alternate-reverse; } /* Right wavy */
.obj-b8  { top: 52%; left: 82%; width: 2.5%;z-index: 5; animation-duration: 17s; } /* White circle (right) */
.obj-b9  { top: 22%; left: 84%; width: 10%; z-index: 7; animation-duration: 21s; } /* Yellow semicircle */
.obj-b10 { top: 16%; left: 89%; width: 3%;  z-index: 8; animation-duration: 16s; } /* Green circle */
.obj-b11 { top: 65%; left: 82%; width: 8%;  z-index: 8; animation-duration: 18s; } /* Pink ring */

/* ▼ PC: Amoeba right behind the kids (b21-b23) ▼ */
.obj-b21 { top: 17%; left: 10%; width: 28%; z-index: 2; animation-duration: 25s; } /* Green-blue amoeba */
.obj-b22 { top: 7%; left: 31%; width: 37%; z-index: 1; animation-duration: 30s; } /* Giant white amoeba */
.obj-b23 { top: 9%; left: 50%; width: 32%; z-index: 2; animation-duration: 28s; animation-direction: alternate-reverse; } /* Orange-pink amoeba */

/* ▼ PC: Giant gradient blobs at the four corners of the screen ▼ */
.fv-blob {
    position: absolute;
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    opacity: 0.9;
    z-index: 0; /* Backmost */
    animation: blob-float 35s infinite alternate ease-in-out;
}
.fv-blob-yellow {
    width: 600px; height: 500px;
    background: linear-gradient(135deg, #FFEB3B, #FF9800);
    bottom: -15%; left: -10%; /* Placed at the bottom left */
}
.fv-blob-green {
    width: 500px; height: 400px;
    background: linear-gradient(135deg, #4DD0E1, #A3D16E);
    bottom: -20%; right: -5%; /* Placed at the bottom right */
    animation-direction: alternate-reverse;
}

/* ====================================
   FV individual placement layout for smartphone (SP) (Must be placed at the very bottom!)
   ==================================== */
@media screen and (max-width: 767px) {
    .pc-only { display: none; }
    .sp-only { display: block; }

    /* 1. Adjust height of entire FV and inner */
    .kids-fv-section {
        min-height: 160vw; /* Give a little extra vertical space */
        padding-top: 80px; 
        padding-bottom: 0px;
    }
    .fv-inner {
        height: 200vw; /* Base for % placement. Make it wide so it doesn't overlap with the logo */
    }

    /* ------------------------------------
       [Foreground] Kids (Dense coordinates for SP)
       ------------------------------------ */
    .kid-a5 { top: 19%; left: 63%; width: 34%; z-index: 9;  } /* Air playground equipment (backmost) */
    .kid-a2 { top: 29%; left: 20%; width: 25%; z-index: 11; } /* Boy cheering */
    .kid-a4 { top: 30%; left: 65%; width: 22%; z-index: 13; } /* Boy jumping */
    .kid-a1 { top: 35%; left: 8%;  width: 32%; z-index: 12; } /* Woman and child (left end) */
    .kid-a6 { top: 40%; left: 75%; width: 20%; z-index: 12; } /* Dad and baby (right end) */
    .kid-a3 { top: 29%; left: 35%; width: 35%; z-index: 14; } /* Two people playing with clay */
    .kid-a8 { top: 40%; left: 44%; width: 37%; z-index: 14; } /* Two smiling girls */
    .kid-a7 { top: 43%; left: 30%; width: 19%; z-index: 15; } /* Smiling boy close-up (foremost) */

    /* Center logo and copy (for SP) */
    .fv-center-content {
        top: 50%; /* Placed right below the cluster of kids */
        bottom: auto; /* Remove designation for PC */
        width: 90%;
    }
    .fv-main-copy { width: 90%; margin-bottom: 15px; 
        background:#fff;
        line-height:1em;
    }
    .fv-main-logo { width: 95%; }

    /* ------------------------------------
       [Background] Objects (Coordinates for SP)
       ------------------------------------ */
    /* Shapes in the upper half */
    .obj-b3  { top: 19%; left: 0%;  width: 17%; } /* Pink triangle */
    .obj-b4  { top: 35%; left: 0%; width: 16%; } /* Left wavy */
    .obj-b5  { top: 6%; left: 17%; width: 19%; } /* Yellow triangle frame */
    .obj-b6  { top: 22%; left: 52%; width: 4%;  } /* White circle (small) */
    .obj-b7  { top: 33%; left: 91%; width: 15%; } /* Right wavy */
    .obj-b9  { top: 15%; left: 72%; width: 18%; } /* Yellow semicircle */
    .obj-b10 { top: 12%; left: 88%; width: 6%;  } /* Green circle */

    /* Shapes around the logo (lower half) */
    .obj-b1  { top: 80%; left: 0%;  width: 29%; } /* Light blue zigzag (left of logo) */
    .obj-b2  { top: 88%; left: 34%; width: 5%;  } /* Yellow circle (bottom left of logo) */
    .obj-b8  { top: 66%; left: 72%; width: 5%;  } /* White circle (right) */
    .obj-b11 { top: 78%; left: 79%; width: 27%; } /* Pink ring (right of logo) */

    /* Amoeba right behind the kids (for SP) */
    .obj-b21 { top: 31%; left: 4%;  width: 47%; z-index: 2; } /* Green-blue */
    .obj-b22 { top: 24%; left: 35%; width: 41%; z-index: 1; } /* White */
    .obj-b23 { top: 28%; left: 48%; width: 52%; z-index: 2; } /* Orange-pink */

    /* Giant blob in the back (scaled down and placed at the edge for SP) */
    .fv-blob-yellow {
        width: 250px; height: 250px;
        bottom: -5%; left: -15%;
    }
    .fv-blob-green {
        width: 200px; height: 200px;
        bottom: 5%; right: -15%;
    }
}