/* =========================================================
   INTRO ANIMATION RIG (Fades in and scales up beautifully)
   ========================================================= */

@keyframes introFadeInScale {
    0% {
        opacity: 0;
        transform: scale(0.92) translateY(30px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes transportSwipeOut {
    0% {
        opacity: 0;
        /* Starts shifted to the left from its native coordinate engine */
        transform: translateX(-80px) scaleX(0.8);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scaleX(1);
    }
}

.intro-animate {
    --intro-animation-duration: 5s;
    animation-name: introFadeInScale;
    animation-duration: var(--intro-animation-duration);
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    animation-fill-mode: backwards;
}

.transport-swipe-animate {
    animation-name: transportSwipeOut;
    animation-duration: calc(var(--intro-animation-duration) * 0.6);
    animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
    animation-fill-mode: backwards;
}

.main-animation-wrapper{
    --delay-bg: 0.1;        --duration-bg: 1.5;
    --delay-text: 0.1;      --duration-text: 1.0;
    --delay-text1: 0.1;     --duration-text1: 0.6;
    --delay-text2: 0.3;     --duration-text2: 0.6;
    --delay-text3: 0.5;     --duration-text3: 0.6;
    --delay-gym: 0.7;       --duration-gym: 0.6;
    --delay-center: 0.3;    --duration-center: 0.6;
    --delay-runners: 0.7;   --duration-runners: 0.6;
}

.delay-bg        { animation-duration: calc(var(--intro-animation-duration) * var(--duration-bg)); animation-delay: calc(var(--intro-animation-duration) * var(--delay-bg)); } 
.delay-text      { animation-duration: calc(var(--intro-animation-duration) * var(--duration-text)); animation-delay: calc(var(--intro-animation-duration) * var(--delay-text)); }
.delay-text1     { animation-duration: calc(var(--intro-animation-duration) * var(--duration-text1)); animation-delay: calc(var(--intro-animation-duration) * var(--delay-text1)); }
.delay-text2     { animation-duration: calc(var(--intro-animation-duration) * var(--duration-text2)); animation-delay: calc(var(--intro-animation-duration) * var(--delay-text2)); }
.delay-text3     { animation-duration: calc(var(--intro-animation-duration) * var(--duration-text3)); animation-delay: calc(var(--intro-animation-duration) * var(--delay-text3)); }
.delay-gym       { animation-duration: calc(var(--intro-animation-duration) * var(--duration-gym)); animation-delay: calc(var(--intro-animation-duration) * var(--delay-gym)); }
.delay-center    { animation-duration: calc(var(--intro-animation-duration) * var(--duration-center)); animation-delay: calc(var(--intro-animation-duration) * var(--delay-center)); } 
.delay-runners   { animation-duration: calc(var(--intro-animation-duration) * var(--duration-runners)); animation-delay: calc(var(--intro-animation-duration) * var(--delay-runners)); }

@media (max-height: 650px) {
    .landing-wrapper {
        overflow-y: auto; /* Allows scrolling if the laptop height is tiny */
        align-items: flex-start; /* Aligns content to top so items aren't cut off */
        padding: 40px 0;
    }
    
    .landing-content-container {
        height: auto; /* Releases the strict 100vh lock to fit the minimum content bounds */
    }
}

/* =========================================================
   LAYER WRAPPER REVISIONS (The Fix)
   ========================================================= */
.wrapper-layer-bottom,
.wrapper-layer-mid,
.wrapper-layer-top,
.wrapper-gym-group,
.wrapper-center-group,
.wrapper-bottom-right-runners {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none; /* Keeps layers transparent to mouse/clicks */
}

/* Maintain original stacking depths */
.wrapper-layer-bottom { z-index: 1; }
.wrapper-layer-mid    { z-index: 5; }
.wrapper-layer-top    { z-index: 10; }


/* Global layout and environment settings */
body {
    margin: 0;
    padding: 0;
    background-color: #c2edd1;
}

.runner-container {
    position: relative;
}

.part {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
}

.main-animation-wrapper {
    position: relative;
    --canvas-width: min(960px, 100vw); 
    width: var(--canvas-width);
    height: calc(var(--canvas-width) * (1135 / 1800)); 
    min-height: calc(var(--canvas-width) * (1135 / 1800)); 
    /* background: #c2edd1; */
    /* background: url('../images/animation/main-banner_sample.jpg') no-repeat center center; */
    background-size: cover; 
    container-type: inline-size; 
    margin: 0 auto; /* Centers the whole project canvas on widescreen monitors */

    position: relative;
}


.wrapper-layer-bottom {z-index: 1;}
.wrapper-layer-mid {z-index: 5;}
.wrapper-layer-top {z-index: 10;}

.bg-track {
    position: absolute;
    width: 25%;
    height: 4.3%;
    bottom: 13%;
    right: 3.7%;
    background: url(../images/animation/img_track.png) no-repeat center center;
    background-size: contain;
}

/* =========================================================
   UPDATED LOGO FLARE ENGINE (Seamless Opacity Transition)
   ========================================================= */
.logo-flare {
    position: absolute;
    --flare-width: 80cqw;
    width: var(--flare-width);
    height: calc(var(--flare-width) * (288/688));
    top: 5%;
    left: 18%;
    
    /* Changed base opacity to 0 so it stays perfectly hidden 
       while waiting out its 4-second entrance delay cue */
    opacity: 0; 
    
    background: url('../images/animation/img_logo-flare.png') no-repeat center center;
    background-size: contain;
    z-index: 9;

    /* Chain the animations. 
       We apply 'both' so it obeys the intro's initial states, 
       then transitions into the loop without snapping. */
    animation-name: introFadeInScale, flarePulse;
    animation-duration: var(--intro-animation-duration), 5s;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1), ease-in-out;
    animation-delay: calc(var(--intro-animation-duration) * 1.0), calc(var(--intro-animation-duration) * 1.4);
    animation-iteration-count: 1, infinite;
    animation-fill-mode: both, none;
}

@keyframes flarePulse {
    /* 0% starts exactly at 1 (where the intro animation settles it) 
       and gently drops down to dim out organically */
    0%, 100% {
        opacity: 0.95; 
    }
    50% {
        opacity: 0.3; /* Smoothly dips down to a soft ambient glow halfway through */
    }
}

.img_logo-text {
    position: absolute;
    width: 63.4%;
    height: 90%;
    top: 6%;
    left: 18%;
    background: url('../images/animation/img_logo-text.png') no-repeat center center;
    background-size: contain;
    z-index: 9;
}

.wrapper-text-row{
    width: 100%;
    height: 100%;
}

.wrapper-bottom-right-runners {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Keeps the container clickable-transparent */
}

/* =========================================================
   CHARACTER 1: RUNNING LADY (FULLY RESPONSIVE ENGINE)
   ========================================================= */
.runner-lady1-rig {
    --anim-speed: 0.93s;
    --canvas-width: 8.5cqw; 
    --canvas-height: calc(var(--canvas-width) * (500 / 377)); 
    
    --canvas-position-x: 15.7%;
    --canvas-position-y: 15.5%;
    
    --r-arm-base: -20deg; --r-thigh-base: 38deg; --r-knee-base: 0deg;
    --l-arm-base: 27deg;  --l-thigh-base: -47deg; --l-knee-base: 0deg;
    --thigh-swing: 38deg; --knee-flex: 52deg; --arm-swing: 25deg;    
    --bounce-height: 1.6%; 

    --r-shoulder-x: 54.05%; --r-shoulder-y: 21.8%;
    --r-hip-x: 50.66%;      --r-hip-y: 48.8%;      
    --r-knee-x: 76.39%;     --r-knee-y: 67.60%;    
    --l-shoulder-x: 63.93%; --l-shoulder-y: 21.60%;
    --l-hip-x: 54.54%;      --l-hip-y: 50.70%;     
    --l-knee-x: 40.58%;     --l-knee-y: 70.60%;    

    position: absolute;
    width: var(--canvas-width);
    height: var(--canvas-height);
    animation: lady-bodyBob var(--anim-speed) infinite ease-in-out;
    right: var(--canvas-position-x);
    bottom: var(--canvas-position-y);
    z-index: 10;
}

/* Image directory paths pointing to images/runner-lady1/ */
.runner-lady1-rig .left-arm       { background-image: url('../images/animation/runner-lady1/layer4-left-arm.png'); transform-origin: var(--l-shoulder-x) var(--l-shoulder-y); animation: lady-leftArmSwing var(--anim-speed) infinite ease-in-out; z-index: 1;}
.runner-lady1-rig .left-upper-leg { background-image: url('../images/animation/runner-lady1/layer6-left-upper-leg.png'); transform-origin: var(--l-hip-x) var(--l-hip-y); animation: lady-leftThighSwing var(--anim-speed) infinite ease-in-out; z-index: 2;}
.runner-lady1-rig .left-lower-leg { background-image: url('../images/animation/runner-lady1/layer7-left-lower-leg.png'); transform-origin: var(--l-knee-x) var(--l-knee-y); animation: lady-leftKneeBend var(--anim-speed) infinite ease-in-out; }
.runner-lady1-rig .torso          { background-image: url('../images/animation/runner-lady1/layer3-body.png'); z-index: 3; }
.runner-lady1-rig .right-arm      { background-image: url('../images/animation/runner-lady1/layer1-right-arm.png'); transform-origin: var(--r-shoulder-x) var(--r-shoulder-y); animation: lady-rightArmSwing var(--anim-speed) infinite ease-in-out; z-index: 4;}
.runner-lady1-rig .right-upper-leg{ background-image: url('../images/animation/runner-lady1/layer2-right-upper-leg.png'); transform-origin: var(--r-hip-x) var(--r-hip-y); animation: lady-rightThighSwing var(--anim-speed) infinite ease-in-out; z-index: 5;}
.runner-lady1-rig .right-fore-leg { background-image: url('../images/animation/runner-lady1/layer5-right-fore-leg.png'); transform-origin: var(--r-knee-x) var(--r-knee-y); animation: lady-rightKneeBend var(--anim-speed) infinite ease-in-out; }

/* Lady Timelines */
@keyframes lady-bodyBob { 0%, 50%, 100% { transform: translateY(0%); } 25%, 75% { transform: translateY(var(--bounce-height)); } }
@keyframes lady-rightArmSwing { 0%, 100% { transform: rotate(calc(var(--r-arm-base) - var(--arm-swing))); } 50% { transform: rotate(calc(var(--r-arm-base) + var(--arm-swing))); } }
@keyframes lady-leftArmSwing  { 0%, 100% { transform: rotate(calc(var(--l-arm-base) + var(--arm-swing))); } 50% { transform: rotate(calc(var(--l-arm-base) - var(--arm-swing))); } }
@keyframes lady-rightThighSwing { 0%, 100% { transform: rotate(calc(var(--r-thigh-base) + var(--thigh-swing))); } 50% { transform: rotate(calc(var(--r-thigh-base) - var(--thigh-swing))); } }
@keyframes lady-rightKneeBend { 0%, 100% { transform: rotate(calc(var(--r-knee-base) + (var(--knee-flex) * 1.0))); } 25% { transform: rotate(calc(var(--r-knee-base) + (var(--knee-flex) * 1.0))); } 50% { transform: rotate(calc(var(--r-knee-base) + (var(--knee-flex) * 0.2))); } 75% { transform: rotate(calc(var(--r-knee-base) + var(--knee-flex) * 0.0)); } }
@keyframes lady-leftThighSwing { 0%, 100% { transform: rotate(calc(var(--l-thigh-base) - var(--thigh-swing))); } 50% { transform: rotate(calc(var(--l-thigh-base) + var(--thigh-swing))); } }
@keyframes lady-leftKneeBend { 0%, 100% { transform: rotate(calc(var(--l-knee-base) + (var(--knee-flex) * -0.2))); } 25% { transform: rotate(calc(var(--l-knee-base) + var(--knee-flex) * 0.0)); } 50% { transform: rotate(calc(var(--l-knee-base) + (var(--knee-flex) * 0.6))); } 75% { transform: rotate(calc(var(--l-knee-base) + (var(--knee-flex) * 1.0))); } }


/* =========================================================
   CHARACTER 2: RUNNING MALE (FULLY RESPONSIVE ENGINE)
   ========================================================= */
.runner-man1-rig {
    --anim-speed: 0.9s;
    --canvas-position-x: 10.9%;
    --canvas-position-y: 16.5%;
    --canvas-width: 8.5cqw; 
    --canvas-height: calc(var(--canvas-width) * (519 / 377)); 
    
    --r-arm-base: -20deg; --r-thigh-base: 24deg; --r-knee-base: 0deg;
    --l-arm-base: 27deg;  --l-thigh-base: -41deg; --l-knee-base: 0deg;
    --thigh-swing: 30deg; --knee-flex: 52deg; --arm-swing: 25deg;    
    --bounce-height: 1.6%; 

    --r-shoulder-x: 51.05%; --r-shoulder-y: 22.3%; 
    --r-hip-x: 49.66%;      --r-hip-y: 49.8%;       
    --r-knee-x: 72.39%;     --r-knee-y: 69.60%;    
    --l-shoulder-x: 63.93%; --l-shoulder-y: 21.60%;
    --l-hip-x: 54.54%;      --l-hip-y: 50.70%;     
    --l-knee-x: 40.58%;     --l-knee-y: 70.60%;    

    position: absolute;
    width: var(--canvas-width);
    height: var(--canvas-height);
    animation: man-bodyBob var(--anim-speed) infinite ease-in-out;
    right: var(--canvas-position-x);
    bottom: var(--canvas-position-y);
    z-index: 9;
}

.runner-man1-rig .left-arm       { background-image: url('../images/animation/runner-man1/layer4-left-arm.png'); transform-origin: var(--l-shoulder-x) var(--l-shoulder-y); animation: man-leftArmSwing var(--anim-speed) infinite ease-in-out; z-index: 1;}
.runner-man1-rig .left-upper-leg { background-image: url('../images/animation/runner-man1/layer6-left-upper-leg.png'); transform-origin: var(--l-hip-x) var(--l-hip-y); animation: man-leftThighSwing var(--anim-speed) infinite ease-in-out; z-index: 2;}
.runner-man1-rig .left-lower-leg { background-image: url('../images/animation/runner-man1/layer7-left-lower-leg.png'); transform-origin: var(--l-knee-x) var(--l-knee-y); animation: man-leftKneeBend var(--anim-speed) infinite ease-in-out; }
.runner-man1-rig .torso          { background-image: url('../images/animation/runner-man1/layer3-body.png'); z-index: 3; }
.runner-man1-rig .right-arm      { background-image: url('../images/animation/runner-man1/layer1-right-arm.png'); transform-origin: var(--r-shoulder-x) var(--r-shoulder-y); animation: man-rightArmSwing var(--anim-speed) infinite ease-in-out; z-index: 4;}
.runner-man1-rig .right-upper-leg{ background-image: url('../images/animation/runner-man1/layer2-right-upper-leg.png'); transform-origin: var(--r-hip-x) var(--r-hip-y); animation: man-rightThighSwing var(--anim-speed) infinite ease-in-out; z-index: 5;}
.runner-man1-rig .right-fore-leg { background-image: url('../images/animation/runner-man1/layer5-right-fore-leg.png'); transform-origin: var(--r-knee-x) var(--r-knee-y); animation: man-rightKneeBend var(--anim-speed) infinite ease-in-out; }

@keyframes man-bodyBob { 0%, 50%, 100% { transform: translateY(0%); } 25%, 75% { transform: translateY(var(--bounce-height)); } }
@keyframes man-rightArmSwing { 0%, 100% { transform: rotate(calc(var(--r-arm-base) - var(--arm-swing))); } 50% { transform: rotate(calc(var(--r-arm-base) + var(--arm-swing))); } }
@keyframes man-leftArmSwing  { 0%, 100% { transform: rotate(calc(var(--l-arm-base) + var(--arm-swing))); } 50% { transform: rotate(calc(var(--l-arm-base) - var(--arm-swing))); } }
@keyframes man-rightThighSwing { 0%, 100% { transform: rotate(calc(var(--r-thigh-base) + var(--thigh-swing))); } 50% { transform: rotate(calc(var(--r-thigh-base) - var(--thigh-swing))); } }
@keyframes man-rightKneeBend { 0%, 100% { transform: rotate(calc(var(--r-knee-base) + (var(--knee-flex) * 1.0))); } 25% { transform: rotate(calc(var(--r-knee-base) + (var(--knee-flex) * 1.0))); } 50% { transform: rotate(calc(var(--r-knee-base) + (var(--knee-flex) * 0.2))); } 75% { transform: rotate(calc(var(--r-knee-base) + var(--knee-flex) * 0.0)); } }
@keyframes man-leftThighSwing { 0%, 100% { transform: rotate(calc(var(--l-thigh-base) - var(--thigh-swing))); } 50% { transform: rotate(calc(var(--l-thigh-base) + var(--thigh-swing))); } }
@keyframes man-leftKneeBend { 0%, 100% { transform: rotate(calc(var(--l-knee-base) + (var(--knee-flex) * -0.2))); } 25% { transform: rotate(calc(var(--l-knee-base) + var(--knee-flex) * 0.0)); } 50% { transform: rotate(calc(var(--l-knee-base) + (var(--knee-flex) * 0.6))); } 75% { transform: rotate(calc(var(--l-knee-base) + (var(--knee-flex) * 1.0))); } }

/* =========================================================
   CHARACTER 8: GYM LADY LEFT RUNNER (CHARACTER 1 DIRECT REF ENGINE)
   ========================================================= */
.runner-gym-lady-left-rig {
    --anim-speed: 0.95s;
    --canvas-position-x: 37.3%;
    --canvas-position-y: 13.7%;
    --canvas-width: 6.5cqw;
    --canvas-height: calc(var(--canvas-width) * (685 / 447));

    --r-arm-base: -20deg;   --r-thigh-base: 24deg;  --r-knee-base: -1deg;
    --l-arm-base: 27deg;    --l-thigh-base: -41deg; --l-knee-base: -37deg;
    --arm-swing: 25deg;     --thigh-swing: 40deg;   --knee-flex: 87deg;
    --bounce-height: 3%;  --hair-swing: 15deg;

    --r-shoulder-x: 46.5%;  --r-shoulder-y: 24%;
    --r-hip-x: 44%;         --r-hip-y: 51%;
    --r-knee-x: 20.5%;      --r-knee-y: 71%;
    --l-shoulder-x: 36.5%;  --l-shoulder-y: 21%;
    --l-hip-x: 45.5%;       --l-hip-y: 51.5%;
    --l-knee-x: 60%;        --l-knee-y: 72.5%;
    --hair-root-x: 50.5%;   --hair-root-y: 4.5%;

    position: absolute;
    width: var(--canvas-width);
    height: var(--canvas-height);
    left: var(--canvas-position-x);
    top: var(--canvas-position-y);
    z-index: 12;

    animation: gym-lady-bodyBob var(--anim-speed) infinite ease-in-out;
}

.running-mill{
    position: absolute;
    top: 14.8%;
    left: 34%;
    --mill-canvas-width: 11.2cqw;
    width: var(--mill-canvas-width);
    height: calc(var(--mill-canvas-width) * (854 / 800));;
    background-image: url('../images/animation/gym-lady/running-mill.png');
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 6;
}

.runner-gym-lady-left-rig .gym-layer1-right-arm       { background-image: url('../images/animation/gym-lady/layer1-right-arm.png'); }
.runner-gym-lady-left-rig .gym-layer2-right-upper-leg { background-image: url('../images/animation/gym-lady/layer2-right-upper-leg.png'); }
.runner-gym-lady-left-rig .gym-layer3-body            { background-image: url('../images/animation/gym-lady/layer3-body.png'); }
.runner-gym-lady-left-rig .gym-layer3-1-hair          { background-image: url('../images/animation/gym-lady/layer3-1-hair.png'); }
.runner-gym-lady-left-rig .gym-layer4-left-arm        { background-image: url('../images/animation/gym-lady/layer4-left-arm.png'); }
.runner-gym-lady-left-rig .gym-layer5-right-fore-leg  { background-image: url('../images/animation/gym-lady/layer5-right-fore-leg.png'); }
.runner-gym-lady-left-rig .gym-layer6-left-upper-leg  { background-image: url('../images/animation/gym-lady/layer6-left-upper-leg.png'); }
.runner-gym-lady-left-rig .gym-layer7-left-lower-leg  { background-image: url('../images/animation/gym-lady/layer7-left-lower-leg.png'); }

.runner-gym-lady-left-rig .gym-layer4-left-arm        { transform-origin: var(--l-shoulder-x) var(--l-shoulder-y); animation: gym-lady-l-arm var(--anim-speed) infinite linear; }
.runner-gym-lady-left-rig .gym-layer1-right-arm       { transform-origin: var(--r-shoulder-x) var(--r-shoulder-y); animation: gym-lady-r-arm var(--anim-speed) infinite linear; }
.runner-gym-lady-left-rig .gym-layer6-left-upper-leg  { transform-origin: var(--l-hip-x) var(--l-hip-y);           animation: gym-lady-l-thigh var(--anim-speed) infinite linear; }
.runner-gym-lady-left-rig .gym-layer7-left-lower-leg  { transform-origin: var(--l-knee-x) var(--l-knee-y);         animation: gym-lady-l-knee var(--anim-speed) infinite linear; }
.runner-gym-lady-left-rig .gym-layer2-right-upper-leg { transform-origin: var(--r-hip-x) var(--r-hip-y);           animation: gym-lady-r-thigh var(--anim-speed) infinite linear; }
.runner-gym-lady-left-rig .gym-layer5-right-fore-leg  { transform-origin: var(--r-knee-x) var(--r-knee-y);         animation: gym-lady-r-knee var(--anim-speed) infinite linear; }

.runner-gym-lady-left-rig .gym-layer3-1-hair {
    z-index: -1; 
    transform-origin: var(--hair-root-x) var(--hair-root-y);
    animation: gym-lady-hair-swing var(--anim-speed) infinite ease-in-out;
}

/* =========================================================
   GYM LADY ANIMATION LOOPS (SINGLE-LINE CHARACTER 1 REFERENCE ENGINE)
   ========================================================= */
@keyframes gym-lady-bodyBob { 0%, 50%, 100% { transform: translateY(0%) } 25%, 75% { transform: translateY(var(--bounce-height)) } } 
@keyframes gym-lady-hair-swing { 0%, 50%, 100% { transform: rotate(var(--hair-swing)) } 25%, 75% { transform: rotate(0deg) } }
@keyframes gym-lady-l-arm { 0%, 100% { transform: rotate(calc(-1 * var(--l-arm-base) + var(--arm-swing))) } 50% { transform: rotate(calc(-1 * var(--l-arm-base) - var(--arm-swing))) } }
@keyframes gym-lady-r-arm { 0%, 100% { transform: rotate(calc(-1 * var(--r-arm-base) - var(--arm-swing))) } 50% { transform: rotate(calc(-1 * var(--r-arm-base) + var(--arm-swing))) } }

@keyframes gym-lady-r-thigh { 0%, 100% { transform: rotate(calc(-1 * var(--r-thigh-base) + var(--thigh-swing))); } 50% { transform: rotate(calc(-1 * var(--r-thigh-base) - var(--thigh-swing))); } }
@keyframes gym-lady-l-thigh { 0%, 100% { transform: rotate(calc(-1 * var(--l-thigh-base) - var(--thigh-swing))); } 50% { transform: rotate(calc(-1 * var(--l-thigh-base) + var(--thigh-swing))); } }

@keyframes gym-lady-l-knee { 0%, 100% { transform: rotate(calc(-1 * var(--l-knee-base) - (var(--knee-flex) * 1.0))) } 25% { transform: rotate(calc(-1 * var(--l-knee-base) - (var(--knee-flex) * 1.0))) } 50% { transform: rotate(calc(-1 * var(--l-knee-base) - (var(--knee-flex) * 0.2))) } 75% { transform: rotate(calc(-1 * var(--l-knee-base) - (var(--knee-flex) * 0.0))) } }
@keyframes gym-lady-r-knee { 0%, 100% { transform: rotate(calc(-1 * var(--r-knee-base) - (var(--knee-flex) * 0.0))) } 25% { transform: rotate(calc(-1 * var(--r-knee-base) - (var(--knee-flex) * 0.0))) } 50% { transform: rotate(calc(-1 * var(--r-knee-base) - (var(--knee-flex) * 0.8))) } 75% { transform: rotate(calc(-1 * var(--r-knee-base) - (var(--knee-flex) * 1.0))) } }


/* =========================================================
   CHARACTER 3: BATHING DOG
   ========================================================= */
.wrapper-bath-dog {
    position: absolute;
    width: 15%;
    height: 15.5%;
    right: 23.6%;
    bottom: 7.7%;
    z-index: 9;
    --dog-anim-speed: 2s;
}

.bath-dog-base {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url('../images/animation/bath-dog/bath-dog-base.png');
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 1;
}

.bath-dog-arm {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url('../images/animation/bath-dog/bath-dog-arm.png');
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 2;
    
    transform-origin: 66.3% 49%; 
    animation: dogArmWave var(--dog-anim-speed) infinite ease-in-out;
}

.bath-dog-head {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url('../images/animation/bath-dog/bath-dog-head.png');
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 3;
    
    transform-origin: 55% 19%;
    animation: dogHeadTilt var(--dog-anim-speed) infinite ease-in-out;
}

.leaf-dog {
    position: absolute;
    width: 38%;
    height: 68%;
    top: -8%;
    right: 0%;
    background-image: url('../images/animation/bath-dog/leaf-dog.png');
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 0;
    transform-origin: left bottom; 
    animation: leafWindBreeze 7s infinite ease-in-out; 
}

/* Bath Dog Timelines */
@keyframes dogArmWave {
    0%, 100% { transform: rotate(0deg); }
    50%      { transform: rotate(-12deg); } /* Waves up/down subtly */
}

@keyframes dogHeadTilt {
    0%, 100% { transform: rotate(-3deg); }
    50%      { transform: rotate(4deg); }   /* Gentle, natural idling tilt */
}
@keyframes leafWindBreeze {
    0%, 100% {
        transform: rotate(-8deg) skewX(0deg);
    }
    30% {
        transform: rotate(4deg) skewX(1deg); /* Gentle forward tilt from wind force */
    }
    70% {
        transform: rotate(-2deg) skewX(-0.5deg); /* Subtle backwards recovery swing */
    }
}

/* =========================================================
   CHARACTER 4: FLOATING YOGA LADY (CONSOLIDATED RIG)
   ========================================================= */
.wrapper-yoga-lady {
    position: absolute;
    width: 16%;               
    height: 16%;              
    right: 17%;               
    top: 23.5%;               
    z-index: 9;
    
    --yoga-speed: 4.5s; 

    font-size: calc(16% * 0.05); 
    animation: yogaOverallDrift var(--yoga-speed) infinite ease-in-out;
}

.wrapper-yoga-lady div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
}

.yoga-base {
    background-image: url('../images/animation/yoga/yoga-base.png');
    z-index: 1;
    transform-origin: 50.3% 82.2%; 
    animation: yogaBaseWave var(--yoga-speed) infinite ease-in-out;
}

.yoga-wholebody {
    background-image: url('../images/animation/yoga/yoga-wholebody.png');
    z-index: 2;
    transform-origin: 50.3% 82.2%;
    animation: yogaBodySync var(--yoga-speed) infinite ease-in-out;
}

/* =========================================================
   YOGA SCALABLE RESPONSIVE TIMELINES
   ========================================================= */

@keyframes yogaOverallDrift {
    0%, 100% {
        transform: translateX(-2%);
    }
    50% {
        transform: translateX(2%);
    }
}

@keyframes yogaBaseWave {
    0%, 100% { 
        transform: translate(-0.4em, 0em) rotate(-3.5deg); 
    }
    50% { 
        transform: translate(0.5em, -0.8em) rotate(4deg); 
    }
}

@keyframes yogaBodySync {
    0%, 100% { 
        transform: translate(-0.5em, 0em) rotate(-0.5deg); 
    }
    50% { 
        transform: translate(0.75em, -0.6em) rotate(0.5deg);
    }
}

/* =========================================================
   CHARACTER 5: TEA GIRL (FULLY RESPONSIVE ENGINE)
   ========================================================= */
.wrapper-tea-girl {
    position: absolute;
    width: 7cqw;
    height: 14cqw;
    left: 58.8%;
    bottom: 35%;
    z-index: 11;
}

.wrapper-tea-girl div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
}

.tea-girl-body {
    background-image: url('../images/animation/tea-girl/tea-girl-body.png'); 
    z-index: 1;
}

.tea-girl-arm {
    background-image: url('../images/animation/tea-girl/tea-girl-arm.png'); 
    z-index: 2;
    transform-origin: 84.75% 66.87%; 
    animation: teaGirlArmSwing 6s infinite ease-in-out; 
}

@keyframes teaGirlArmSwing {
    0%, 100% { 
        transform: rotate(0deg); 
    }
    50% { 
        transform: rotate(-7deg); /* Adjust this angle to make the swing wider or narrower */
    }
}

/* =========================================================
   CHARACTER 6: FOOD BBQ
   ========================================================= */
.food-bbq {
    position: absolute;
    width: 6.65%;
    height: 8%;
    left: 47.8%;
    bottom: 16.5%;
    background-image: url(../images/animation/food-bbq.png);
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 8;
}


/* =========================================================
   CHARACTER 7: SWIM LADY (FULLY RESPONSIVE ENGINE)
   ========================================================= */
.wrapper-swim-lady {
    position: absolute;
    width: 24.5cqw;
    height: 7.6cqw;
    left: 26.8%;
    bottom: 32.7%;
    z-index: 11;
}

.wrapper-swim-lady div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
}

.swim-lady-body {
    background-image: url('../images/animation/swim-lady/swim-lady-body.png'); 
    z-index: 1;
}

.swim-lady-arm {
    background-image: url('../images/animation/swim-lady/swim-lady-arm.png'); 
    z-index: 2;
    transform-origin: 49.9% 50.2%; 
    animation: swimLadyArmSwing 6s infinite ease-in-out; 
}

@keyframes swimLadyArmSwing {
    0%, 100% { 
        transform: rotate(0deg); 
    }
    50% { 
        transform: rotate(-5deg); /* Adjust this angle to make the swing wider or narrower */
    }
}

/* =========================================================
   WRAPPER LOGO TEXT SYSTEM (DYNAMIC VIEW-WIDTH ENGINE)
   ========================================================= */
.wrapper-logo-text {
    position: absolute;
    --text-wrapper-width: 63.4cqw; 
    width: var(--text-wrapper-width);  
    height: calc(var(--text-wrapper-width) * (926 / 1179));
    
    top: 11.5%;           
    left: 18%;         
    z-index: 5;        
}

.wrapper-logo-text div {
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
}

/* ---------------------------------------------------------
   ROW 1 (Y Baseline: ~1px)
   --------------------------------------------------------- */
.logo-text-1-1 {
    background-image: url('../images/animation/logo-text/logo-text-1-1.png');
    width: calc(227 / 1179 * 100%);  height: calc(323 / 926 * 100%);
    left: calc(249 / 1179 * 100%);   top: calc(1 / 926 * 100%);
}
.logo-text-1-2 {
    background-image: url('../images/animation/logo-text/logo-text-1-2.png');
    width: calc(126 / 1179 * 100%);  height: calc(324 / 926 * 100%);
    left: calc(434 / 1179 * 100%);   top: calc(1 / 926 * 100%);
}
.logo-text-1-3 {
    background-image: url('../images/animation/logo-text/logo-text-1-3.png');
    width: calc(299 / 1179 * 100%);  height: calc(324 / 926 * 100%);
    left: calc(506 / 1179 * 100%);   top: calc(1 / 926 * 100%);
}

/* Split Overlapping Layers */
.logo-text-1-4_1 {
    background-image: url('../images/animation/logo-text/logo-text-1-4_1.png');
    width: calc(247 / 1179 * 100%);  height: calc(325 / 926 * 100%);
    left: calc(749 / 1179 * 100%);   top: calc(0 / 926 * 100%);
    z-index: 1;
}
.logo-text-1-4_2 {
    background-image: url('../images/animation/logo-text/logo-text-1-4_2.png');
    width: calc(247 / 1179 * 100%);  height: calc(325 / 926 * 100%);
    left: calc(749 / 1179 * 100%);   top: calc(0 / 926 * 100%);
    z-index: 3;
}

.leaf-1-4 {
    background-image: url('../images/animation/logo-text/leaf-1-4.png');
    width: calc(202 / 1179 * 50%);   height: calc(188 / 926 * 50%);
    left: calc(830 / 1179 * 100%);   top: calc(150 / 926 * 100%);
    z-index: 2;
    transform-origin: 10% 90%; 
    animation: leafWindBreeze 7s infinite ease-in-out; 
}

/* ---------------------------------------------------------
   ROW 2 (Y Baseline: ~300px)
   --------------------------------------------------------- */
.logo-text-2-1 {
    background-image: url('../images/animation/logo-text/logo-text-2-1.png');
    width: calc(227 / 1179 * 100%);  height: calc(324 / 926 * 100%);
    left: calc(188 / 1179 * 100%);   top: calc(300 / 926 * 100%);
}
.leaf-2-2 {
    background-image: url('../images/animation/logo-text/leaf-2-2.png');
    width: calc(453 / 1179 * 50%);   height: calc(277 / 926 * 50%);
    left: calc(190 / 1179 * 100%);   top: calc(320 / 926 * 100%);
    z-index: 2;
    transform-origin: 90% 90%; 
    animation: leafWindBreeze 7s infinite ease-in-out; 
}
.logo-text-2-2 {
    background-image: url('../images/animation/logo-text/logo-text-2-2.png');
    width: calc(262 / 1179 * 100%);  height: calc(320 / 926 * 100%);
    left: calc(355 / 1179 * 100%);   top: calc(303 / 926 * 100%);
    z-index: 3;
}
.logo-text-2-3 {
    background-image: url('../images/animation/logo-text/logo-text-2-3.png');
    width: calc(282 / 1179 * 100%);  height: calc(324 / 926 * 100%);
    left: calc(564 / 1179 * 100%);   top: calc(300 / 926 * 100%);
}
.logo-text-2-4 {
    background-image: url('../images/animation/logo-text/logo-text-2-4.png');
    width: calc(247 / 1179 * 100%);  height: calc(324 / 926 * 100%);
    left: calc(791 / 1179 * 100%);   top: calc(299 / 926 * 100%);
}

/* ---------------------------------------------------------
   ROW 3 (Y Baseline: ~602px)
   --------------------------------------------------------- */
.logo-text-3-1 {
    background-image: url('../images/animation/logo-text/logo-text-3-1.png');
    width: calc(313 / 1179 * 100%);  height: calc(323 / 926 * 100%);
    left: calc(0 / 1179 * 100%);     top: calc(603 / 926 * 100%);
}
.logo-text-3-2 {
    background-image: url('../images/animation/logo-text/logo-text-3-2.png');
    width: calc(271 / 1179 * 100%);  height: calc(324 / 926 * 100%);
    left: calc(265 / 1179 * 100%);   top: calc(602 / 926 * 100%);
    z-index: 3;
}
.leaf-3-2 {
    background-image: url('../images/animation/logo-text/leaf-3-2.png');
    width: calc(252 / 1179 * 50%);   height: calc(294 / 926 * 50%);
    left: calc(200 / 1179 * 100%);   top: calc(675 / 926 * 100%);
    z-index: 2;
    transform-origin: 90% 90%; 
    animation: leafWindBreeze 7s infinite ease-in-out; 
}
.logo-text-3-3 {
    background-image: url('../images/animation/logo-text/logo-text-3-3.png');
    width: calc(247 / 1179 * 100%);  height: calc(324 / 926 * 100%);
    left: calc(482 / 1179 * 100%);   top: calc(602 / 926 * 100%);
    z-index: 3;
}
.leaf-3-3 {
    background-image: url('../images/animation/logo-text/leaf-3-3.png');
    width: calc(209 / 1179 * 50%);   height: calc(251 / 926 * 50%);
    left: calc(665 / 1179 * 100%);   top: calc(545 / 926 * 100%);
    z-index: 2;
    transform-origin: 10% 90%; 
    animation: leafWindBreeze 7s infinite ease-in-out; 
}
.logo-text-3-4 {
    background-image: url('../images/animation/logo-text/logo-text-3-4.png');
    width: calc(247 / 1179 * 100%);  height: calc(324 / 926 * 100%);
    left: calc(687 / 1179 * 100%);   top: calc(602 / 926 * 100%);
}
.logo-text-3-5 {
    background-image: url('../images/animation/logo-text/logo-text-3-5.png');
    width: calc(292 / 1179 * 100%);  height: calc(324 / 926 * 100%);
    left: calc(887 / 1179 * 100%);   top: calc(602 / 926 * 100%);
}

/* =========================================================
   CHARACTER 9: TRANSPORTS (1600x528 VIEWPORT RATIO ENGINE)
   ========================================================= */
.wrapper-transport {
    position: absolute;
    --transport-width: 23.5cqw; 
    width: var(--transport-width);
    height: calc(var(--transport-width) * (528 / 1600)); 
    left: 64.7%;
    bottom:37.7%;
    opacity:1;
    z-index: 1;
}

.wrapper-transport div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
}

.transport-minibus {
    background-image: url('../images/animation/transports/transport-minibus.png');
    z-index: 1;
}

.transport-bus {
    background-image: url('../images/animation/transports/transport-bus.png');
    z-index: 2;
}

.transport-mtr {
    background-image: url('../images/animation/transports/transport-mtr.png');
    z-index: 3;
}

/* =========================================================
   CHARACTER 10: PICKLEBALL GROUP (900x608 VIEWPORT ENGINE)
   ========================================================= */
.wrapper-pickleball {
    position: absolute;
    --pickleball-width: 23.4cqw; 
    width: var(--pickleball-width);
    height: calc(var(--pickleball-width) * (608 / 900)); 
    
    left: 3.4%;
    bottom: 7.5%;
}

.wrapper-pickleball div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
}

.wrapper-pickleball .pickle-ball { background-image: url('../images/animation/pickleball/pickleball-ball.png'); }
.wrapper-pickleball .pickle-main { background-image: url('../images/animation/pickleball/pickleball-main.png'); }
.wrapper-pickleball .pickle-arm  { background-image: url('../images/animation/pickleball/pickleball-arm.png'); }

.wrapper-pickleball .pickle-ball { animation: pickleBallBounce 2s infinite; z-index: 3; }
.wrapper-pickleball .pickle-arm  { transform-origin: 56% 22%; animation: picklePaddleSwing 2s infinite ease-in-out; z-index: 2; }

@keyframes picklePaddleSwing { 0%, 100% { transform: rotate(10deg); } 50% { transform: rotate(0deg); } } 
@keyframes pickleBallBounce { 50% { opacity: 1; transform: translate(3%, 4%) rotate(0deg); } 100% { opacity: 0; transform: translate(-5%, -20%) rotate(-30deg); } 0% { opacity: 0; transform: translate(-5%, -3.3%) rotate(-30deg); } }

/* =========================================================
   BACKGROUND LEAVES RIG (1200x986 FULL-BLEED ENGINE)
   ========================================================= */
.wrapper-BG-leaves {
    position: absolute;
    --leaves-zone-width: 62.8cqw; 
    width: var(--leaves-zone-width);
    height: calc(var(--leaves-zone-width) * (986 / 1200)); 
    left: 21.6%;
    top: 6.8%;
    z-index: 1;
    pointer-events: none; /* Prevents background layers from intercepting clicks */
}

.wrapper-BG-leaves div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
}

.wrapper-BG-leaves .leaf-g-1 { background-image: url('../images/animation/bg-leaves/leaf-g-1.png'); transform-origin: 15% 15%;  animation: leafBreezeSlow 12.0s infinite ease-in-out; z-index: 8; }
.wrapper-BG-leaves .leaf-g-2 { background-image: url('../images/animation/bg-leaves/leaf-g-2.png'); transform-origin: 30% 10%;  animation: leafBreezeFast 9.0s infinite ease-in-out; z-index: 7; }
.wrapper-BG-leaves .leaf-g-3 { background-image: url('../images/animation/bg-leaves/leaf-g-3.png'); transform-origin: 52% 12%;  animation: leafBreezeSlow 13.5s infinite ease-in-out; z-index: 6; }
.wrapper-BG-leaves .leaf-g-4 { background-image: url('../images/animation/bg-leaves/leaf-g-4.png'); transform-origin: 78% 10%;  animation: leafBreezeFast 10.0s infinite ease-in-out; z-index: 5; }
.wrapper-BG-leaves .leaf-g-5 { background-image: url('../images/animation/bg-leaves/leaf-g-5.png'); transform-origin: 88% 25%;  animation: leafBreezeSlow 11.0s infinite ease-in-out; z-index: 4; }
.wrapper-BG-leaves .leaf-g-6 { background-image: url('../images/animation/bg-leaves/leaf-g-6.png'); transform-origin: 10% 70%;  animation: leafBreezeFast 10.5s infinite ease-in-out; z-index: 3; }
.wrapper-BG-leaves .leaf-g-7 { background-image: url('../images/animation/bg-leaves/leaf-g-7.png'); transform-origin: 45% 85%;  animation: leafBreezeSlow 15.0s infinite ease-in-out; z-index: 2; }
.wrapper-BG-leaves .leaf-g-8 { background-image: url('../images/animation/bg-leaves/leaf-g-8.png'); transform-origin: 82% 70%;  animation: leafBreezeFast 11.5s infinite ease-in-out; z-index: 1; }

@keyframes leafBreezeSlow { 0%, 100% { transform: rotate(0deg) translate(0%, 0%); } 50% { transform: rotate(2.5deg) translate(0.3%, 0.1%); } }
@keyframes leafBreezeFast { 0%, 100% { transform: rotate(0deg) translate(0%, 0%); } 50% { transform: rotate(-3.0deg) translate(-0.2%, -0.2%); } }

/* =========================================================
   BICYCLE SYSTEM (STOP-MOTION FLIPBOOK ENGINE)
   ========================================================= */

.img-bicycle{
    position: absolute;
    --img-width: 8cqw;
    width: var(--img-width);
    height: calc(var(--img-width) * (798 / 800));
    left: 20.1%;
    top: 24.2%;
    background-image: url('../images/animation/bicycle.png');
    background-repeat: no-repeat;
    background-size: contain;
}

.wrapper-bicycle{
    position: absolute;
    --img-width: 12cqw;
    width: var(--img-width);
    height: calc(var(--img-width) * (798 / 800));
    left: 17.5%;
    top: 21.4%;
    background-image: url('../images/animation/bicycle_main.png');
    background-repeat: no-repeat;
    background-size: contain;
    animation: slowFloatBicycle 4s infinite ease-in-out;
}

.wrapper-bicycle .bicycle-main{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url('../images/animation/bicycle/bicycle_main.png');
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 3;
}

/* --- Fixed Stop-Motion Overlap Mechanics --- */
.wrapper-bicycle .bicycle-wheel1,
.wrapper-bicycle .bicycle-wheel2,
.wrapper-bicycle .bicycle-wheel3 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: contain; 
    opacity: 0; 
    z-index: 2;
    --sequence-interval: 0.3s
}
.wrapper-bicycle .bicycle-wheel1 {
    background-image: url('../images/animation/bicycle/bicycle_wheel1.png');
    /* Plays frame 1 instantly at the start */
    animation: loopFrame1 var(--sequence-interval) infinite steps(1);
}

.wrapper-bicycle .bicycle-wheel2 {
    background-image: url('../images/animation/bicycle/bicycle_wheel2.png');
    /* Matches duration, handles step 2 */
    animation: loopFrame2 var(--sequence-interval) infinite steps(1);
}

.wrapper-bicycle .bicycle-wheel3 {
    background-image: url('../images/animation/bicycle/bicycle_wheel3.png');
    /* Matches duration, handles step 3 */
    animation: loopFrame3 var(--sequence-interval) infinite steps(1);
}

/* --- Timelines & Stepper Logic --- */
@keyframes slowFloatBicycle { 
    0%, 100% { transform: translateX(0%) scale(1); } 
    50% { transform: translateX(2.5%) scale(1.04); } 
}

/* Frame 1 Stepper Timeline: On for the first 33.3%, off for the rest */
@keyframes loopFrame1 {
    0%, 33.33% { opacity: 1; }
    33.34%, 100% { opacity: 0; }
}

/* Frame 2 Stepper Timeline: On from 33.34% to 66.66%, off for the rest */
@keyframes loopFrame2 {
    0%, 33.33% { opacity: 0; }
    33.34%, 66.66% { opacity: 1; }
    66.67%, 100% { opacity: 0; }
}

/* Frame 3 Stepper Timeline: On from 66.67% to 100%, off for the rest */
@keyframes loopFrame3 {
    0%, 66.66% { opacity: 0; }
    66.67%, 100% { opacity: 1; }
}

/* --- Wind Breeze Engines --- */
.wrapper-bicycle .wind-breeze1,
.wrapper-bicycle .wind-breeze2,
.wrapper-bicycle .wind-breeze3 {
    position: absolute;
    width: calc((320 / 800) * 100%);
    height: calc((23 / 798) * 100%);
    background-image: url('../images/animation/bicycle/wind-breeze-line.png');
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0;
    z-index: 4;
    --wind-gust-speed: 1.0s;
}

/* Staggered positions and offsets for natural wind patterns */
.wrapper-bicycle .wind-breeze1 {
    top: 30%;
    left: -15%;
    animation: windGust var(--wind-gust-speed) infinite ease-in-out;
    animation-delay: 0s;
}

.wrapper-bicycle .wind-breeze2 {
    top: 45%;
    left: -25%;
    animation: windGust var(--wind-gust-speed) infinite ease-in-out;
    animation-delay: 0.4s;
}

.wrapper-bicycle .wind-breeze3 {
    top: 65%;
    left: -10%;
    animation: windGust var(--wind-gust-speed) infinite ease-in-out;
    animation-delay: 0.8s;
}

/* --- Timelines --- */

/* Wind Breeze: Moves up and right at a 5° angle while stretching slightly */
@keyframes windGust {
    0% {
        opacity: 0;
        /* Starts at native point, compressed horizontally */
        transform: translate(0, 0) scaleX(0.7);
    }
    30% {
        opacity: 0.75; /* Fades in smoothly as it travels */
    }
    60% {
        opacity: 0.75;
    }
    100% {
        opacity: 0;
        /* Moves 130px right and 11px up (produces a 5-degree upward slope) */
        transform: translate(130px, -11px) scaleX(1.3);
    }
}



/* =========================================================
   OTHERS (WITH SLOW AMBIENT FLOATING TRACKS)
   ========================================================= */

.img-shopping {
    position: absolute;
    --img-width: 29cqw;
    width: var(--img-width);
    height: calc(var(--img-width) * (341 / 800));
    left: 8.5%;
    top: 45.4%;
    background-image: url('../images/animation/shopping.png');
    background-repeat: no-repeat;
    background-size: contain;
    animation: slowFloatShopping 10s infinite ease-in-out;
}

@keyframes slowFloatShopping { 0%, 100% { transform: translateX(0%) scale(1); } 50% { transform: translateX(-1.5%) scale(0.97); } }

.img-bird{
    position: absolute;
    --img-width: 5.6cqw;
    width: var(--img-width);
    height: calc(var(--img-width) * (262 / 316));
    left: 62%;
    top: 6.7%;
    background-image: url('../images/animation/bird.png');
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 9;
}


.landing-main-slogan {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 30px; 
    width: 100%;

    /* 1. Allows items to break onto a new line when squeezed */
    flex-wrap: wrap; 
    
    /* 2. Adjust vertical spacing between the items when they wrap */
    row-gap: 10px; 

    /* Keep your existing negative margin if needed */
    margin-top: -40px; 
}

@media (max-width: 768px) {
    .landing-main-slogan {
        /* Reset or loosen the negative margin so it looks clean on mobile */
        margin-top: 10px; 
        
        /* Optional: Scale down the container widths slightly if they are too wide for tiny screens */
        padding: 0 15px;
        box-sizing: border-box;
    }
}

.slogan-chi,
.slogan-eng {
    --slogan-height: 24px;
}
    
.slogan-chi {
    width: calc(var(--slogan-height) * 469 / 44);
    height: var(--slogan-height);
    background: url('../images/landing/slogan_chi.png') no-repeat center center;
    background-size: contain;
}

.slogan-eng {
    width: calc(var(--slogan-height) * 745 / 44 );
    height: var(--slogan-height);
    background: url('../images/landing/slogan_eng.png') no-repeat center center;
    background-size: contain;
}


@media (max-width: 1920px) {
    .main-animation-wrapper {
       --canvas-width: 50vw; 
    }
    .landing-main-slogan{
        margin-top: 5px;
        gap: 20px;
    }
    .slogan-chi,
    .slogan-eng {
        --slogan-height: 24px;
        margin-top: -60px;
    }
}

@media (max-width: 1440px) {
    .main-animation-wrapper {
       --canvas-width: 50vw; 
    }
    .slogan-chi,
    .slogan-eng {
        --slogan-height: 14px;
        margin-top: -30px;
    }
}

@media (max-width: 1024px) {
    .main-animation-wrapper {
       --canvas-width: 60vw; 
    }
}

@media (max-width: 600px) {
    .main-animation-wrapper {
       --canvas-width: 100vw; 
    }
    .slogan-chi,
    .slogan-eng {
        --slogan-height: 16px;
        margin-top: -20px;
    }
}