html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Or apply it to your specific section wrapper */
.section-container {
    overflow: hidden;
}

/* =====================================================
   GLOBAL SCROLL CONTROL
   ===================================================== */

.js-animate-section:not(.is-visible) * {
    animation: none !important;
}

/* =====================================================
   vital-pulse (CONTINUOUS)
   ===================================================== */

.vital-pulse {
    /*opacity: 0;*/
    transform: scale(0) rotate(0deg);
    animation: vital-emerge-cycle 3s ease-out infinite;
}

@keyframes vital-emerge-cycle {
    0% {
        /*opacity: 0;*/
        transform: scale(0) rotate(-50deg);
    }
    50% {
        /*opacity: 0.5;*/
        transform: scale(1) rotate(10deg);
    }
    100% {
        /*opacity: 1;*/
        transform: scale(1) rotate(10deg);
    }
}

/* =====================================================
   fade-rise-reveal (ONCE)
   ===================================================== */

.fade-rise-reveal {
    opacity: 0;
    animation: fade-opacity-cycle 4s ease-out forwards;
}

@keyframes fade-opacity-cycle {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 1; }
}

/* =====================================================
   icon-div-animate (JS)
   ===================================================== */

.icon-div-animate {
    opacity: 0;
    transform: scale(0.85);
}

@keyframes reveal-in {
    from {
        opacity: 0;
        transform: scale(0.85);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* =====================================================
   slide-in-right / left
   ===================================================== */

.fade-slide-in-right {
    opacity: 0;
    transform: translateX(200px);
    animation: fade-slide-in-right 3s ease-out forwards;
}

@keyframes fade-slide-in-right {
    0% { opacity: 0; transform: translateX(200px); }
    66% { opacity: 1; transform: translateX(0); }
    100% { opacity: 1; transform: translateX(0); }
}

.fade-slide-in-left {
    opacity: 0;
    transform: translateX(-200px);
    animation: fade-slide-in-left 3s ease-out forwards;
}

@keyframes fade-slide-in-left {
    0% { opacity: 0; transform: translateX(-200px); }
    66% { opacity: 1; transform: translateX(0); }
    100% { opacity: 1; transform: translateX(0); }
}

/*@media (max-width: 768px) {*/
/*    .fade-slide-in-right,*/
/*    .fade-slide-in-right[style*="transform"] {*/
/*        transform: translateX(50px) !important;*/
/*    }*/
    
/*}*/

/* =====================================================
   benefits
   ===================================================== */

.benefit-icon,
.benefit-text {
    opacity: 0;
    transform: translateY(20px);
}

.benefit-show {
    animation: benefit-fade-up 0.6s ease-out forwards;
}

@keyframes benefit-fade-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =====================================================
   indications
   ===================================================== */

.indication-image {
    opacity: 0;
}

.indication-image--show {
    animation: indication-image-fade 1.2s ease-in-out forwards;
}

@keyframes indication-image-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.indication-text {
    opacity: 0;
}

.indication-text--show {
    animation: indication-text-fade 1s ease-in-out forwards;
}

@keyframes indication-text-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* =====================================================
   bap cards
   ===================================================== */

.bap-card {
    opacity: 0;
}

.bap-card--show {
    animation: bap-fade-in 1.2s ease-in-out forwards;
}

@keyframes bap-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* =====================================================
   ACCESSIBILITY
   ===================================================== */

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* =====================================================
    FOCUS SCALE REVEAL
   ===================================================== */

.focus-scale-reveal {
    opacity: 0;
    transform: scale(0);
    will-change: transform, opacity;
}

.focus-scale-reveal--show {
    animation: focus-scale-reveal 3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes focus-scale-reveal {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    60% {
        opacity: 0.8;
        transform: scale(1.05);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* =====================================================
    PROTOCOL CARD FADE IN
   ===================================================== */

.protocol-card {
    opacity: 0;
    will-change: opacity;
}

/* Fade-in animation */
.protocol-card--show {
    animation: protocol-fade-in 1.2s ease-in-out forwards;
}

@keyframes protocol-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}



/* =====================================================
    PROPERTY ITEM FADE IN
   ===================================================== */
   
   .property-item {
    opacity: 0;
    will-change: opacity;
}

.property-item--show {
    animation: property-fade-in 1.2s ease-in-out forwards;
}

@keyframes property-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}



/* Base state */
.comp-item {
    opacity: 0;
    will-change: opacity;
}

.comp-item--show {
    animation: comp-fade-in 4s ease-in-out forwards;
}

@keyframes comp-fade-in {
    from {
        opacity: 1;
    }

    to {
        opacity: 1;
    }
}


/* =====================================================
    PARTICLE CREATION
   ===================================================== */

.reveal-image {
    opacity: 0;
    /* transform: translateX(-30px); */
    animation: revealImage 0.6s ease-out forwards;
}

/* 1 second delay per image */
.delay-1 {
    animation-delay: 0s;
}

.delay-2 {
    animation-delay: 1s;
}

.delay-3 {
    animation-delay: 2s;
}

.delay-4 {
    animation-delay: 3s;
}

@keyframes revealImage {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}