/*-----------------------------------*\
  #ANIMATIONS HERO
\*-----------------------------------*/


.hero-text-main-container:not(.animate-in) .hero-title,
.hero-text-main-container:not(.animate-in) .hero-description,
.hero-text-main-container:not(.animate-in) .main-button,
.hero-text-main-container:not(.animate-in) .barborancheta-underline {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
    will-change: transform, opacity;
}

.hero-text-main-container.animate-in .hero-title,
.hero-text-main-container.animate-in .hero-description,
.hero-text-main-container.animate-in .main-button {
    opacity: 1;
    transform: none;
}

.barborancheta {
    position: relative;
    display: inline-block;
}

.barborancheta-underline {
    position: absolute;
    left: 0;
    right: 0;
    transform-origin: left center;
}

.hero-text-main-container.animate-in .hero-title {
    animation: bounceUpStrong 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 80ms both;
}

.hero-text-main-container.animate-in .barborancheta-underline {
    animation: scribbleDrawBouncy 900ms cubic-bezier(0.34, 1.56, 0.64, 1) 300ms both;
}

.hero-text-main-container.animate-in .hero-description {
    animation: bounceUpStrong 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 480ms both;
}

.hero-text-main-container.animate-in .main-button {
    animation: popInBouncy 1s cubic-bezier(0.34, 1.56, 0.64, 1) 720ms both;
}

@keyframes bounceUpStrong {
    0% {
        opacity: 0;
        transform: translateY(60px) scale(0.85);
    }

    45% {
        opacity: 1;
        transform: translateY(-24px) scale(1.15);
    }

    65% {
        transform: translateY(8px) scale(0.95);
    }

    80% {
        transform: translateY(-6px) scale(1.05);
    }

    100% {
        transform: translateY(0) scale(1);
    }
}

@keyframes popInBouncy {
    0% {
        opacity: 0;
        transform: scale(0.6) translateY(20px);
    }

    50% {
        opacity: 1;
        transform: scale(1.2) translateY(-4px);
    }

    70% {
        transform: scale(0.95) translateY(3px);
    }

    85% {
        transform: scale(1.05) translateY(-2px);
    }

    100% {
        transform: scale(1) translateY(0);
    }
}

@keyframes scribbleDrawBouncy {
    0% {
        opacity: 0;
        transform: scaleX(0);
    }

    50% {
        opacity: 1;
        transform: scaleX(1.2);
    }

    70% {
        transform: scaleX(0.9);
    }

    85% {
        transform: scaleX(1.05);
    }

    100% {
        transform: scaleX(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-text-main-container * {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}


.hero-section .hero-image,
.hero-section .giraffe-illustration-hero {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
    will-change: transform, opacity, filter;
}

.hero-section.animate-in .hero-image,
.hero-section.animate-in .giraffe-illustration-hero {
    opacity: 1;
    transform: none;
}

.hero-section.animate-in .hero-image {
    animation:
        photoBounceIn 1.1s cubic-bezier(.34, 1.56, .64, 1) 80ms both,
        photoFloat 6s ease-in-out 1.2s infinite;
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .12));
    transform-origin: 20% 60%;
}

.hero-section.animate-in .giraffe-illustration-hero {
    animation:
        giraffePopTilt 1s cubic-bezier(.34, 1.56, .64, 1) 420ms both,
        giraffeIdle 4s ease-in-out 1.4s infinite;
    transform-origin: 50% 90%;
    filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .10));
}

/* Keyframes */
@keyframes photoBounceIn {
    0% {
        opacity: 0;
        transform: translateX(-60px) translateY(20px) scale(.9) rotate(-2deg);
    }

    55% {
        opacity: 1;
        transform: translateX(8px) translateY(-6px) scale(1.04) rotate(.8deg);
    }

    75% {
        transform: translateX(-4px) translateY(3px) scale(.98) rotate(-.4deg);
    }

    100% {
        transform: translateX(0) translateY(0) scale(1) rotate(0);
    }
}

@keyframes photoFloat {
    0% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-6px) rotate(.3deg);
    }

    100% {
        transform: translateY(0) rotate(0);
    }
}

@keyframes giraffePopTilt {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(.8) rotate(-6deg);
    }

    50% {
        opacity: 1;
        transform: translateY(-8px) scale(1.08) rotate(3deg);
    }

    75% {
        transform: translateY(3px) scale(.98) rotate(-1.5deg);
    }

    100% {
        transform: translateY(0) scale(1) rotate(0);
    }
}

@keyframes giraffeIdle {
    0% {
        transform: translateY(0) rotate(0);
    }

    25% {
        transform: translateY(-8px) rotate(3deg);
    }

    50% {
        transform: translateY(0) rotate(0);
    }

    75% {
        transform: translateY(-8px) rotate(-3deg);
    }

    100% {
        transform: translateY(0) rotate(0);
    }
}

.hero-main-container .hero-image:hover {
    transform: translateY(-4px) scale(1.01);
    transition: transform .25s ease;
}

@media (prefers-reduced-motion: reduce) {

    .hero-section .hero-image,
    .hero-section .giraffe-illustration-hero {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        filter: none !important;
    }
}

/*-----------------------------------*\
  #ANIMATIONS ABOUT
\*-----------------------------------*/

.section-about:not(.in-view) .section-name,
.section-about:not(.in-view) .section-title,
.section-about:not(.in-view) .about-text,
.section-about:not(.in-view) .about-sun,
.section-about:not(.in-view) .about-butterfly,
.section-about:not(.in-view) .about-benefit-card,
.section-about:not(.in-view) .about-elephant {
    opacity: 0;
    transform: translateY(18px) scale(0.98);
}

.section-about.in-view .section-name,
.section-about.in-view .section-title,
.section-about.in-view .about-text,
.section-about.in-view .about-sun,
.section-about.in-view .about-butterfly,
.section-about.in-view .about-benefit-card,
.section-about.in-view .about-elephant {
    opacity: 1;
    transform: none;
}

.section-about.in-view .section-name {
    animation: tagPopAbout 560ms cubic-bezier(.25, .9, .25, 1) 160ms both;
}

.section-about.in-view .section-title {
    animation: gentleUpAbout 680ms cubic-bezier(.25, .9, .25, 1) 220ms both;
}

.section-about.in-view .about-text {
    animation: gentleUpAbout 680ms cubic-bezier(.25, .9, .25, 1) 320ms both;
}

.section-about.in-view .about-sun {
    transform-origin: 50% 50%;
    animation: iconPopAbout 640ms cubic-bezier(.25, .9, .25, 1) 360ms both,
        smallFloatAbout 7s ease-in-out 1.1s infinite;
}

.section-about.in-view .about-butterfly {
    transform-origin: 60% 40%;
    animation: iconPopAbout 640ms cubic-bezier(.25, .9, .25, 1) 420ms both,
        tinyWiggleAbout 600ms ease-in-out 1.2s infinite;
}

.section-about.in-view .about-elephant {
    transform-origin: 40% 85%;
    animation: sideInAbout 700ms cubic-bezier(.25, .9, .25, 1) 460ms both,
        smallFloatAbout 2s ease-in-out 1.4s infinite;
}

.about-benefit-card:nth-child(1) {
    --i: 0
}

.about-benefit-card:nth-child(2) {
    --i: 1
}

.about-benefit-card:nth-child(3) {
    --i: 2
}

.about-benefit-card:nth-child(4) {
    --i: 3
}

.section-about.in-view .about-benefit-card {
    animation: cardRiseAbout 560ms cubic-bezier(.25, .9, .25, 1) calc(240ms + var(--i)*300ms) both;
}

@keyframes gentleUpAbout {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(.98);
    }

    60% {
        opacity: 1;
        transform: translateY(-4px) scale(1.01);
    }

    100% {
        transform: translateY(0) scale(1);
    }
}

@keyframes tagPopAbout {
    0% {
        opacity: 0;
        transform: translateY(16px) rotate(-8deg) scale(.94);
    }

    55% {
        opacity: 1;
        transform: translateY(-3px) rotate(-3deg) scale(1.03);
    }

    100% {
        transform: translateY(0) rotate(-8deg) scale(1);
    }

}

@keyframes iconPopAbout {
    0% {
        opacity: 0;
        transform: scale(.85) rotate(-6deg);
    }

    55% {
        opacity: 1;
        transform: scale(1.06) rotate(2deg);
    }

    100% {
        transform: scale(1) rotate(0);
    }
}

@keyframes sideInAbout {
    0% {
        opacity: 0;
        transform: translateX(-28px) translateY(10px) rotate(-4deg) scale(.96);
    }

    65% {
        opacity: 1;
        transform: translateX(4px) translateY(-2px) rotate(1.5deg) scale(1.02);
    }

    100% {
        transform: translateX(0) translateY(0) rotate(0) scale(1);
    }
}

@keyframes cardRiseAbout {
    0% {
        opacity: 0;
        transform: translateY(24px) scale(.98);
    }

    70% {
        opacity: 1;
        transform: translateY(-3px) scale(1.005);
    }

    100% {
        transform: translateY(0) scale(1);
    }
}

@keyframes smallFloatAbout {
    0% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-8px) rotate(-4deg);
    }

    100% {
        transform: translateY(0) rotate(0);
    }
}

@keyframes tinyWiggleAbout {

    0%,
    100% {
        transform: rotate(0);
    }

    25% {
        transform: rotate(2deg);
    }

    75% {
        transform: rotate(-2deg);
    }
}


/*-----------------------------------*\
  #ANIMATIONS LOCATION
\*-----------------------------------*/

.location-section.js-anim:not(.in-view) .section-name,
.location-section.js-anim:not(.in-view) .section-title,
.location-section.js-anim:not(.in-view) .location-description,
.location-section.js-anim:not(.in-view) .location-card,
.location-section.js-anim:not(.in-view) .location-card .location-map,
.location-section.js-anim:not(.in-view) .new-location-badge,
.location-section.js-anim:not(.in-view) .pig-illustration,
.location-section.js-anim:not(.in-view) .girl-illustration,
.location-section.js-anim:not(.in-view) .boy-illustration {
    opacity: 0;
    transform: translateY(18px) scale(0.98);
}

.location-section.in-view .section-name,
.location-section.in-view .section-title,
.location-section.in-view .location-description,
.location-section.in-view .location-card,
.location-section.in-view .location-card .location-map,
.location-section.in-view .new-location-badge,
.location-section.in-view .pig-illustration,
.location-section.in-view .girl-illustration,
.location-section.in-view .boy-illustration {
    opacity: 1;
    transform: none;
}

.location-section.in-view .section-name {
    animation: tagPopSmallLocation 520ms cubic-bezier(.25, .9, .25, 1) 40ms both;
}

.location-section.in-view .section-title {
    animation: gentleUpLocation 640ms cubic-bezier(.25, .9, .25, 1) 120ms both;
}

.location-section.in-view .location-description {
    animation: gentleUpLocation 640ms cubic-bezier(.25, .9, .25, 1) 200ms both;
}


.location-main-container>.location-card:nth-child(1) {
    --delay: 280ms;
}

.location-main-container>.location-card:nth-child(2) {
    --delay: 380ms;
}

.location-section.in-view .location-card {
    animation: cardRiseLocation 560ms cubic-bezier(.25, .9, .25, 1) var(--delay) both;
    will-change: transform, opacity;
}


.location-section.in-view .location-card .location-map {
    animation: fadeInLocation 520ms ease-out calc(var(--delay) + 220ms) both;
}

.location-section.in-view .new-location-badge {
    transform-origin: 50% 50%;
    animation:
        badgePopLocation 600ms cubic-bezier(.25, .9, .25, 1) 460ms both,
        badgeWiggleLocation 2200ms ease-in-out 1s infinite;
}

.location-section.in-view .girl-illustration {
    transform-origin: 40% 80%;
    animation:
        sideInLeftLocation 680ms cubic-bezier(.25, .9, .25, 1) 420ms both,
        smallFloatReverseLocation 6.5s ease-in-out 1.4s infinite;
}

.location-section.in-view .boy-illustration {
    transform-origin: 60% 85%;
    animation:
        sideInRightLocation 680ms cubic-bezier(.25, .9, .25, 1) 460ms both,
        smallFloatLocation 6.5s ease-in-out 1.5s infinite;
}

.location-section.js-anim:not(.in-view) .pig-illustration {
    opacity: 0;
    transform: translateX(-50%) translateY(14px) scale(0.98);
}


.location-section.in-view .pig-illustration {
    opacity: 1;
    transform: translateX(-50%);

}

.location-section.in-view .pig-illustration {
    transform-origin: 50% 100%;
    animation:
        pigEnterLocation 700ms cubic-bezier(.34, 1.56, .64, 1) 520ms both,
        pigIdleLocation 5500ms ease-in-out 1.5s infinite;
}

@keyframes smallFloatLocation {
    0% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(12px) rotate(0deg);
    }

    100% {
        transform: translateY(0) rotate(0);
    }
}

@keyframes smallFloatReverseLocation {
    0% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-12px) rotate(0deg);
    }

    100% {
        transform: translateY(0) rotate(0);
    }
}


@keyframes gentleUpLocation {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(.98);
    }

    60% {
        opacity: 1;
        transform: translateY(-3px) scale(1.01);
    }

    100% {
        transform: translateY(0) scale(1);
    }
}

@keyframes tagPopSmallLocation {
    0% {
        opacity: 0;
        transform: translateY(14px) rotate(8deg) scale(.95);
    }

    55% {
        opacity: 1;
        transform: translateY(-3px) rotate(3deg) scale(1.03);
    }

    100% {
        transform: translateY(0) rotate(8deg) scale(1);
    }


}

@keyframes fadeSlideDownLocation {
    0% {
        opacity: 0;
        transform: translateY(-12px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes cardRiseLocation {
    0% {
        opacity: 0;
        transform: translateY(22px) scale(.985);
    }

    70% {
        opacity: 1;
        transform: translateY(-2px) scale(1.002);
    }

    100% {
        transform: translateY(0) scale(1);
    }
}

@keyframes fadeInLocation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes badgePopLocation {
    0% {
        opacity: 0;
        transform: translateY(-10px) rotate(10deg) scale(.9);
    }

    60% {
        opacity: 1;
        transform: translateY(2px) rotate(-4deg) scale(1.06);
    }

    100% {
        transform: translateY(0) rotate(15deg) scale(1);
    }


}

@keyframes badgeWiggleLocation {

    0%,
    100% {
        transform: rotate(15deg);
    }

    25% {
        transform: rotate(19deg);
    }

    75% {
        transform: rotate(11deg);
    }
}

@keyframes sideInLeftLocation {
    0% {
        opacity: 0;
        transform: translateX(-24px) translateY(10px) rotate(-3deg) scale(.98);
    }

    65% {
        opacity: 1;
        transform: translateX(3px) translateY(-2px) rotate(1deg) scale(1.01);
    }

    100% {
        transform: translateX(0) translateY(0) rotate(0) scale(1);
    }
}

@keyframes sideInRightLocation {
    0% {
        opacity: 0;
        transform: translateX(24px) translateY(10px) rotate(3deg) scale(.98);
    }

    65% {
        opacity: 1;
        transform: translateX(-3px) translateY(-2px) rotate(-1deg) scale(1.01);
    }

    100% {
        transform: translateX(0) translateY(0) rotate(0) scale(1);
    }
}

@keyframes pigEnterLocation {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(30px) scale(.9) rotate(-6deg);
    }

    50% {
        opacity: 1;
        transform: translateX(-50%) translateY(-8px) scale(1.06) rotate(3deg);
    }

    75% {
        transform: translateX(-50%) translateY(3px) scale(.98) rotate(-1.5deg);
    }

    100% {
        transform: translateX(-50%) translateY(0) scale(1) rotate(0);
    }
}

@keyframes pigIdleLocation {
    0% {
        transform: translateX(-50%) translateY(0) rotate(0);
    }

    25% {
        transform: translateX(-50%) translateY(-8px) rotate(4deg);
    }

    50% {
        transform: translateX(-50%) translateY(0) rotate(0);
    }

    75% {
        transform: translateX(-50%) translateY(-8px) rotate(-4deg);
    }

    100% {
        transform: translateX(-50%) translateY(0) rotate(0);
    }
}


@media (prefers-reduced-motion: reduce) {
    .location-section * {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}



/*-----------------------------------*\
  #ANIMATIONS GALLERY
\*-----------------------------------*/

.gallery-section.js-anim:not(.in-view) .section-name,
.gallery-section.js-anim:not(.in-view) .section-title,
.gallery-section.js-anim:not(.in-view) .gallery-location-tab-selector,
.gallery-section.js-anim:not(.in-view) .illustration-draw-pink,
.gallery-section.js-anim:not(.in-view) .illustration-draw-orange,
.gallery-section.js-anim:not(.in-view) .gallery-cloud-small,
.gallery-section.js-anim:not(.in-view) .gallery-cloud-big,
.gallery-section.js-anim:not(.in-view) .tedy-bear {
    opacity: 0;
    transform: translateY(16px);
}

.gallery-section.in-view .section-name,
.gallery-section.in-view .section-title,
.gallery-section.in-view .gallery-location-tab-selector,
.gallery-section.in-view .illustration-draw-pink,
.gallery-section.in-view .illustration-draw-orange,
.gallery-section.in-view .gallery-cloud-small,
.gallery-section.in-view .gallery-cloud-big,
.gallery-section.in-view .tedy-bear {
    opacity: 1;
    transform: none;
}

.gallery-section.in-view .section-name {
    animation: tagPopSmallGallery 520ms cubic-bezier(.25, .9, .25, 1) 40ms both;
}

.gallery-section.in-view .section-title {
    animation: gentleUpGallery 640ms cubic-bezier(.25, .9, .25, 1) 120ms both;
}

.gallery-section.in-view .gallery-location-tab-selector {
    animation: gentleUpGallery 600ms cubic-bezier(.25, .9, .25, 1) 200ms both;
}

.gallery-location-tab-selector .gallery-tab {
    will-change: transform, opacity;
}

.gallery-section.in-view .gallery-location-tab-selector .gallery-tab.left {
    animation: tabPopGallery 520ms cubic-bezier(.25, .9, .25, 1) 320ms both;
}

.gallery-section.in-view .gallery-location-tab-selector .gallery-tab.right {
    animation: tabPopGallery 520ms cubic-bezier(.25, .9, .25, 1) 380ms both;
}

.gallery-section.in-view .illustration-draw-pink {
    transform-origin: left center;
    animation: scribbleDrawGallery 560ms cubic-bezier(.25, .9, .25, 1) 360ms both;
}

.gallery-section.in-view .illustration-draw-orange {
    transform-origin: right center;
    animation: scribbleDrawGallery 560ms cubic-bezier(.25, .9, .25, 1) 420ms both;
}

.gallery-section.in-view .tedy-bear {
    transform-origin: 50% 100%;
    animation:
        bearEnterGallery 680ms cubic-bezier(.34, 1.56, .64, 1) 520ms both,
        smallFloatGallery 1s ease-in-out 1s infinite;
}

.gallery-section.in-view .gallery-cloud-small {
    animation:
        cloudRevealGallery 520ms ease-out 80ms both,
        cloudDriftLeftGallery 8s ease-in-out 0.9s infinite;
}

.gallery-section.in-view .gallery-cloud-big {
    animation:
        cloudRevealGallery 520ms ease-out 120ms both,
        cloudDriftRightGallery 12s ease-in-out 1.1s infinite;
}

@keyframes gentleUpGallery {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    60% {
        opacity: 1;
        transform: translateY(-3px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes tagPopSmallGallery {
    0% {
        opacity: 0;
        transform: translateY(14px) rotate(-8deg) scale(.95);
    }

    55% {
        opacity: 1;
        transform: translateY(-3px) rotate(-3deg) scale(1.03);
    }

    100% {
        transform: translateY(0) rotate(-8deg) scale(1);
    }

}

@keyframes tabPopGallery {
    0% {
        opacity: 0;
        transform: translateY(12px) scale(.96);
    }

    60% {
        opacity: 1;
        transform: translateY(-2px) scale(1.02);
    }

    100% {
        transform: translateY(0) scale(1);
    }
}

@keyframes scribbleDrawGallery {
    0% {
        opacity: 0;
        transform: scaleX(0.2) rotate(-2deg);
    }

    60% {
        opacity: 1;
        transform: scaleX(1.08) rotate(1deg);
    }

    85% {
        transform: scaleX(0.96) rotate(-.5deg);
    }

    100% {
        transform: scaleX(1) rotate(0);
    }
}

@keyframes bearEnterGallery {
    0% {
        opacity: 0;
        transform: translateY(24px) scale(.92) rotate(-5deg);
    }

    55% {
        opacity: 1;
        transform: translateY(-6px) scale(1.05) rotate(2deg);
    }

    80% {
        transform: translateY(3px) scale(.99) rotate(-1deg);
    }

    100% {
        transform: translateY(0) scale(1) rotate(0);
    }
}

@keyframes smallFloatGallery {
    0% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-12px) rotate(0deg);
    }

    100% {
        transform: translateY(0) rotate(0);
    }
}

@keyframes cloudRevealGallery {
    0% {
        opacity: 0;
        transform: translateY(-8px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes cloudDriftLeftGallery {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(-16px);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes cloudDriftRightGallery {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(24px);
    }

    100% {
        transform: translateX(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .gallery-section * {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}



/*-----------------------------------*\
  #ANIMATIONS PARTY CENTER
\*-----------------------------------*/

/* Hidden BEFORE entering viewport (wave stays static) */
.party-center-section.js-anim:not(.in-view) .section-name,
.party-center-section.js-anim:not(.in-view) .section-title,
.party-center-section.js-anim:not(.in-view) .location-description,
.party-center-section.js-anim:not(.in-view) .party-center-picture-container,
.party-center-section.js-anim:not(.in-view) .party-image-frame,
.party-center-section.js-anim:not(.in-view) .party-center-image,
.party-center-section.js-anim:not(.in-view) .zebra-illustration,
.party-center-section.js-anim:not(.in-view) .balloons-illustration {
    opacity: 0;
    transform: translateY(18px) scale(0.98);
}

/* Special hidden state for the rotated address card: KEEP rotate(-4deg) */
.party-center-section.js-anim:not(.in-view) .party-address-container {
    opacity: 0;
    transform: translateY(18px) rotate(-4deg) scale(0.98);
}

/* Base visible state (persists after animation) */
.party-center-section.in-view .section-name,
.party-center-section.in-view .section-title,
.party-center-section.in-view .location-description,
.party-center-section.in-view .party-center-picture-container,
.party-center-section.in-view .party-image-frame,
.party-center-section.in-view .party-center-image,
.party-center-section.in-view .zebra-illustration,
.party-center-section.in-view .balloons-illustration {
    opacity: 1;
    transform: none;
}

/* Visible baseline for the rotated address card: KEEP rotate(-4deg) */
.party-center-section.in-view .party-address-container {
    opacity: 1;
    transform: rotate(-4deg);
}

/* Wave — static (no animation) */
.party-wave-top {
    opacity: 1;
    transform: none;
}

/* ---------- Left visuals ---------- */
.party-center-section.in-view .party-image-frame {
    animation: party-frameIn 720ms cubic-bezier(.25, .9, .25, 1) 120ms both;
}

.party-center-section.in-view .party-center-image {
    animation: party-photoIn 720ms cubic-bezier(.34, 1.56, .64, 1) 220ms both;
}

.party-center-section.in-view .zebra-illustration {
    transform-origin: 50% 90%;
    animation:
        party-zebraEnter 700ms cubic-bezier(.34, 1.56, .64, 1) 320ms both,
        party-zebraIdle 6000ms ease-in-out 1.6s infinite;
}

/* ---------- Right text ---------- */
.party-center-section.in-view .section-name {
    animation: party-tagPop 520ms cubic-bezier(.25, .9, .25, 1) 240ms both;
}

.party-center-section.in-view .section-title {
    animation: party-gentleUp 640ms cubic-bezier(.25, .9, .25, 1) 300ms both;
}

.party-center-section.in-view .location-description {
    animation: party-gentleUp 640ms cubic-bezier(.25, .9, .25, 1) 380ms both;
}

/* Address card: Rise while PRESERVING rotate(-4deg) */
.party-center-section.in-view .party-address-container {
    animation: party-addressRise 560ms cubic-bezier(.25, .9, .25, 1) 460ms both;
}

/* ---------- Balloons ---------- */
.party-center-section.in-view .balloons-illustration {
    animation: party-fadeIn 580ms ease-out 480ms both;
}

/* ---------- Keyframes ---------- */
@keyframes party-gentleUp {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(.98);
    }

    60% {
        opacity: 1;
        transform: translateY(-3px) scale(1.01);
    }

    100% {
        transform: translateY(0) scale(1);
    }
}

@keyframes party-tagPop {
    0% {
        opacity: 0;
        transform: translateY(14px) rotate(8deg) scale(.95);
    }

    55% {
        opacity: 1;
        transform: translateY(-3px) rotate(3deg) scale(1.03);
    }

    100% {
        transform: translateY(0) rotate(8deg) scale(1);
    }
}

@keyframes party-frameIn {
    0% {
        opacity: 0;
        transform: translateY(24px) scale(.96);
    }

    60% {
        opacity: 1;
        transform: translateY(-4px) scale(1.02);
    }

    100% {
        transform: translateY(0) scale(1);
    }
}

@keyframes party-photoIn {
    0% {
        opacity: 0;
        transform: translateY(24px) scale(.9) rotate(-2deg);
    }

    55% {
        opacity: 1;
        transform: translateY(-6px) scale(1.06) rotate(1.5deg);
    }

    80% {
        transform: translateY(3px) scale(.99) rotate(-.5deg);
    }

    100% {
        transform: translateY(0) scale(1) rotate(0);
    }
}

@keyframes party-zebraEnter {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(.9) rotate(-6deg);
    }

    50% {
        opacity: 1;
        transform: translateY(-8px) scale(1.08) rotate(3deg);
    }

    75% {
        transform: translateY(3px) scale(.98) rotate(-1.5deg);
    }

    100% {
        transform: translateY(0) scale(1) rotate(0);
    }
}

@keyframes party-zebraIdle {
    0% {
        transform: translateY(0) rotate(0);
    }

    25% {
        transform: translateY(-6px) rotate(1.5deg);
    }

    50% {
        transform: translateY(0) rotate(0);
    }

    75% {
        transform: translateY(-6px) rotate(-1.5deg);
    }

    100% {
        transform: translateY(0) rotate(0);
    }
}

/* Address card rise — always includes rotate(-4deg) */
@keyframes party-addressRise {
    0% {
        opacity: 0;
        transform: translateY(20px) rotate(-4deg) scale(.985);
    }

    70% {
        opacity: 1;
        transform: translateY(-2px) rotate(-4deg) scale(1.002);
    }

    100% {
        transform: translateY(0) rotate(-4deg) scale(1);
    }
}

@keyframes party-cardRise {
    0% {
        opacity: 0;
        transform: translateY(22px) scale(.985);
    }

    70% {
        opacity: 1;
        transform: translateY(-2px) scale(1.002);
    }

    100% {
        transform: translateY(0) scale(1);
    }
}

@keyframes party-fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* ---------- Motion safety ---------- */
@media (prefers-reduced-motion: reduce) {
    .party-center-section * {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}



/*-----------------------------------*\
  #ANIMATIONS CONTACT
\*-----------------------------------*/

.contact-section.js-anim:not(.in-view) .section-name,
.contact-section.js-anim:not(.in-view) .section-title,
.contact-section.js-anim:not(.in-view) .location-description,
.contact-section.js-anim:not(.in-view) .phone-numbers-coontainer,
.contact-section.js-anim:not(.in-view) .contact-butterfly,
.contact-section.js-anim:not(.in-view) .contact-flower,
.contact-section.js-anim:not(.in-view) .contact-image-container.left,
.contact-section.js-anim:not(.in-view) .contact-image-container.right {
    opacity: 0;
}


.contact-section.in-view .section-name,
.contact-section.in-view .section-title,
.contact-section.in-view .location-description,
.contact-section.in-view .phone-numbers-coontainer,
.contact-section.in-view .contact-butterfly,
.contact-section.in-view .contact-flower,
.contact-section.in-view .contact-image-container.left,
.contact-section.in-view .contact-image-container.right {
    opacity: 1;
}

.contact-section.in-view .section-name {
    animation: contact-tag-pop 560ms cubic-bezier(.25, .9, .25, 1) 80ms both;
}

.contact-section.in-view .section-title {
    animation: contact-gentle-up 640ms cubic-bezier(.25, .9, .25, 1) 160ms both;
}

.contact-section.in-view .location-description {
    animation: contact-gentle-up 640ms cubic-bezier(.25, .9, .25, 1) 240ms both;
}

.contact-section.in-view .phone-numbers-coontainer {
    animation: contact-stack-rise 560ms cubic-bezier(.25, .9, .25, 1) 280ms both;
}

.phone-numbers-coontainer .phone-link:not(.pink) {
    animation: contact-phone-left-in 560ms cubic-bezier(.25, .9, .25, 1) 360ms both;
    will-change: transform, opacity;
}

.phone-numbers-coontainer .phone-link.pink {
    animation: contact-phone-right-in 560ms cubic-bezier(.25, .9, .25, 1) 420ms both;
    will-change: transform, opacity;
}

.phone-numbers-coontainer .phone-link:hover {
    transition: transform .25s ease;
    transform: translateY(-2px) rotate(4deg) scale(1.01);
}

.phone-numbers-coontainer .phone-link.pink:hover {
    transform: translateY(-2px) rotate(-8deg) scale(1.01);
}


.contact-section.in-view .contact-image-container.left {
    transform-origin: 50% 90%;
    animation:
        contact-polaroid-left-in 720ms cubic-bezier(.25, .9, .25, 1) 380ms both,
        contact-polaroid-left-idle 1800ms ease-in-out 1.4s infinite;
}

.contact-section.in-view .contact-image-container.right {
    transform-origin: 50% 90%;
    animation:
        contact-polaroid-right-in 720ms cubic-bezier(.25, .9, .25, 1) 420ms both,
        contact-polaroid-right-idle 2600ms ease-in-out 1.6s infinite;
}

.contact-section.in-view .contact-butterfly {
    transform-origin: 60% 40%;
    animation:
        contact-icon-pop 600ms cubic-bezier(.25, .9, .25, 1) 360ms both,
        contact-tiny-wiggle 800ms ease-in-out 1.4s infinite;
}

.contact-section.in-view .contact-flower {
    transform-origin: 50% 100%;
    animation:
        contact-icon-pop 600ms cubic-bezier(.25, .9, .25, 1) 420ms both,
        contact-float-flower 700ms ease-in-out 1.8s infinite;
}



@keyframes contact-gentle-up {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(.98);
    }

    60% {
        opacity: 1;
        transform: translateY(-3px) scale(1.01);
    }

    100% {
        transform: translateY(0) scale(1);
    }
}

@keyframes contact-tag-pop {
    0% {
        opacity: 0;
        transform: translateY(14px) rotate(8deg) scale(.95);
    }

    55% {
        opacity: 1;
        transform: translateY(-3px) rotate(3deg) scale(1.03);
    }

    100% {
        transform: translateY(0) rotate(8deg) scale(1);
    }

}

@keyframes contact-stack-rise {
    0% {
        opacity: 0;
        transform: translateY(22px) scale(.985);
    }

    70% {
        opacity: 1;
        transform: translateY(-2px) scale(1.002);
    }

    100% {
        transform: translateY(0) scale(1);
    }
}


@keyframes contact-phone-left-in {
    0% {
        opacity: 0;
        transform: translateY(18px) rotate(4deg) scale(.96);
    }

    60% {
        opacity: 1;
        transform: translateY(-3px) rotate(4deg) scale(1.02);
    }

    100% {
        transform: translateY(0) rotate(4deg) scale(1);
    }
}

@keyframes contact-phone-right-in {
    0% {
        opacity: 0;
        transform: translateY(18px) rotate(-8deg) scale(.96);
    }

    60% {
        opacity: 1;
        transform: translateY(-3px) rotate(-8deg) scale(1.02);
    }

    100% {
        transform: translateY(0) rotate(-8deg) scale(1);
    }
}

@keyframes contact-polaroid-left-in {
    0% {
        opacity: 0;
        transform: translateY(28px) rotate(-15deg) scale(.96);
    }

    55% {
        opacity: 1;
        transform: translateY(-6px) rotate(-12deg) scale(1.04);
    }

    80% {
        transform: translateY(3px) rotate(-14deg) scale(.995);
    }

    100% {
        transform: translateY(0) rotate(-15deg) scale(1);
    }
}

@keyframes contact-polaroid-right-in {
    0% {
        opacity: 0;
        transform: translateY(28px) rotate(15deg) scale(.96);
    }

    55% {
        opacity: 1;
        transform: translateY(-6px) rotate(12deg) scale(1.04);
    }

    80% {
        transform: translateY(3px) rotate(14deg) scale(.995);
    }

    100% {
        transform: translateY(0) rotate(15deg) scale(1);
    }
}

@keyframes contact-polaroid-left-idle {
    0% {
        transform: translateY(0) rotate(-15deg);
    }

    50% {
        transform: translateY(-10px) rotate(-5deg);
    }

    100% {
        transform: translateY(0) rotate(-15deg);
    }
}

@keyframes contact-polaroid-right-idle {
    0% {
        transform: translateY(0) rotate(15deg);
    }

    50% {
        transform: translateY(-12px) rotate(25deg);
    }

    100% {
        transform: translateY(0) rotate(15deg);
    }
}

@keyframes contact-icon-pop {
    0% {
        opacity: 0;
        transform: scale(.85) rotate(-6deg);
    }

    55% {
        opacity: 1;
        transform: scale(1.06) rotate(2deg);
    }

    100% {
        transform: scale(1) rotate(0);
    }
}

@keyframes contact-float-butterfly {
    0% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-6px) rotate(2deg);
    }

    100% {
        transform: translateY(0) rotate(0);
    }
}

@keyframes contact-float-flower {
    0% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-3px) rotate(-1deg);
    }

    100% {
        transform: translateY(0) rotate(0);
    }
}

@keyframes contact-tiny-wiggle {

    0%,
    100% {
        transform: rotate(0);
    }

    25% {
        transform: rotate(2deg);
    }

    75% {
        transform: rotate(-2deg);
    }
}


@media (prefers-reduced-motion: reduce) {
    .contact-section * {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}

/*-----------------------------------*\
  #ANIMATIONS FOOTER
\*-----------------------------------*/
.footer-section.js-anim:not(.in-view) .footer-logo-img,
.footer-section.js-anim:not(.in-view) .footer-logo-text,
.footer-section.js-anim:not(.in-view) .footer-contact-container,
.footer-section.js-anim:not(.in-view) .footer-location,
.footer-section.js-anim:not(.in-view) .footer-location-separator,
.footer-section.js-anim:not(.in-view) .footer-links-left,
.footer-section.js-anim:not(.in-view) .created-by-main-container {
    opacity: 0;
    transform: translateY(14px);
}

.footer-section.in-view .footer-logo-img,
.footer-section.in-view .footer-logo-text,
.footer-section.in-view .footer-contact-container,
.footer-section.in-view .footer-location,
.footer-section.in-view .footer-location-separator,
.footer-section.in-view .footer-links-left,
.footer-section.in-view .created-by-main-container {
    opacity: 1;
    transform: none;
}

.footer-wave-bottom {
    opacity: 1;
    transform: rotate(180deg);
}

.footer-section.in-view .footer-logo-img {
    animation: footer-logo-bounceIn 900ms cubic-bezier(.34, 1.56, .64, 1) 200ms both;
}

.footer-section.in-view .footer-logo-text {
    animation: footer-gentleUp 600ms cubic-bezier(.25, .9, .25, 1) 400ms both;
}

/* Contacts block appears, locations stagger */
.footer-section.in-view .footer-contact-container {
    animation: footer-rise 560ms cubic-bezier(.25, .9, .25, 1) 640ms both;
}

.footer-contact-container .footer-location:nth-of-type(1) {
    --footer-delay: 320ms;
}

.footer-contact-container .footer-location:nth-of-type(2) {
    --footer-delay: 380ms;
}

.footer-section.in-view .footer-location {
    animation: footer-gentleUp 560ms cubic-bezier(.25, .9, .25, 1) var(--footer-delay) both;
}

.footer-section.in-view .footer-location-separator {
    animation: footer-fadeIn 420ms ease-out 360ms both;
}

.footer-section.in-view .footer-links-left {
    animation: footer-gentleUp 560ms cubic-bezier(.25, .9, .25, 1) 320ms both;
}

.footer-section.in-view .created-by-main-container {
    animation: footer-gentleUp 560ms cubic-bezier(.25, .9, .25, 1) 360ms both;
}

@keyframes footer-logo-bounceIn {
    0% {
        opacity: 0;
        transform: translateY(28px) scale(.9);
    }

    55% {
        opacity: 1;
        transform: translateY(-8px) scale(1.06);
    }

    80% {
        transform: translateY(3px) scale(.99);
    }

    100% {
        transform: translateY(0) scale(1);
    }
}

@keyframes footer-gentleUp {
    0% {
        opacity: 0;
        transform: translateY(16px) scale(.98);
    }

    60% {
        opacity: 1;
        transform: translateY(-2px) scale(1.005);
    }

    100% {
        transform: translateY(0) scale(1);
    }
}

@keyframes footer-rise {
    0% {
        opacity: 0;
        transform: translateY(18px) scale(.985);
    }

    70% {
        opacity: 1;
        transform: translateY(-2px) scale(1.002);
    }

    100% {
        transform: translateY(0) scale(1);
    }
}

@keyframes footer-fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .footer-section * {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}


@media (max-width: 1120px) {
    .location-section.js-anim:not(.in-view) .pig-illustration {
        position: absolute;
        /* or relative depending on your layout */
        right: 24px;
        opacity: 0;
        transform: translateY(14px) scale(0.98);
    }

    .location-section.in-view .pig-illustration {
        position: absolute;
        /* ensure consistent positioning */
        right: 24px;
        opacity: 1;
        transform: translateY(0);
    }

    @keyframes pigEnterLocation {
        0% {
            opacity: 0;
            transform: translateY(30px) scale(0.9) rotate(-6deg);
        }

        50% {
            opacity: 1;
            transform: translateY(-8px) scale(1.06) rotate(3deg);
        }

        75% {
            transform: translateY(3px) scale(0.98) rotate(-1.5deg);
        }

        100% {
            transform: translateY(0) scale(1) rotate(0);
        }
    }

    @keyframes pigIdleLocation {
        0% {
            transform: translateY(0) rotate(0);
        }

        25% {
            transform: translateY(-8px) rotate(4deg);
        }

        50% {
            transform: translateY(0) rotate(0);
        }

        75% {
            transform: translateY(-8px) rotate(-4deg);
        }

        100% {
            transform: translateY(0) rotate(0);
        }
    }
}




@media (max-width: 550px) {
    .location-section.js-anim:not(.in-view) .pig-illustration {
        position: absolute;
        /* or relative depending on your layout */
        right: -64px;
        opacity: 0;
        transform: translateY(14px) scale(0.98);
    }

    .location-section.in-view .pig-illustration {
        position: absolute;
        /* ensure consistent positioning */
        right: -64px;
        opacity: 1;
        transform: translateY(0);
    }

    @keyframes pigEnterLocation {
        0% {
            opacity: 0;
            transform: translateY(30px) scale(0.9) rotate(-6deg);
        }

        50% {
            opacity: 1;
            transform: translateY(-8px) scale(1.06) rotate(3deg);
        }

        75% {
            transform: translateY(3px) scale(0.98) rotate(-1.5deg);
        }

        100% {
            transform: translateY(0) scale(1) rotate(0);
        }
    }

    @keyframes pigIdleLocation {
        0% {
            transform: translateY(0) rotate(0);
        }

        25% {
            transform: translateY(-8px) rotate(4deg);
        }

        50% {
            transform: translateY(0) rotate(0);
        }

        75% {
            transform: translateY(-8px) rotate(-4deg);
        }

        100% {
            transform: translateY(0) rotate(0);
        }
    }
}