.elementor-kit-23{--e-global-color-primary:#1D1C1A;--e-global-color-secondary:#EBE1C8;--e-global-color-text:#1D1C1A;--e-global-color-accent:#E42526;--e-global-color-f29da81:#00000000;--e-global-color-13e07f9:#EBC633;--e-global-color-b3d8dbe:#FFFFFF;--e-global-typography-primary-font-family:"Alternate Gothic No2 D";--e-global-typography-primary-font-size:48px;--e-global-typography-primary-font-weight:500;--e-global-typography-primary-text-transform:uppercase;--e-global-typography-secondary-font-family:"Alternate Gothic No2 D";--e-global-typography-secondary-font-size:38px;--e-global-typography-secondary-font-weight:500;--e-global-typography-secondary-text-transform:uppercase;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-size:18px;--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Outfit";--e-global-typography-accent-font-size:20px;--e-global-typography-accent-font-weight:500;--e-global-typography-59ed2be-font-family:"Alternate Gothic No2 D";--e-global-typography-59ed2be-font-size:25px;--e-global-typography-59ed2be-font-weight:500;--e-global-typography-59ed2be-text-transform:uppercase;}.elementor-kit-23 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1240px;}.e-con{--container-max-width:1240px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS */img {
  height: auto !important;
}

/* =========================================
   Our Fries Our Pride Container: Animation
   ====================================== */
   
.top-paper {
    position: relative;
    overflow: hidden;
}


.top-paper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: -50px; 

    background-image: url("https://jeanlafrite.com.ph/wp-content/uploads/2026/05/darkbg.png");
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;

    /* Normal State */
    transform: translateY(-50px);
    transition: transform 1.2s cubic-bezier(.22, .68, 0, 1);
    z-index: 0; 
}


.paper-active .top-paper::before {
    transform: translateY(0);
}



/* ====================================================
   Side-by-Side Container: Pure Erosion Paint-Brush Reveal
   ==================================================== */

/* 1. Main Container: Base layer and background setup */
.elementor-element.sbs-paper {
    position: relative !important;
    z-index: 10 !important; 
    overflow-x: hidden !important;
    overflow-y: visible !important;
    
    background-image: url("https://jeanlafrite.com.ph/wp-content/uploads/2026/05/darkbg.png") !important;
    background-size: cover !important;
    background-position: center !important; 
    background-repeat: no-repeat !important;
}

/* 2. Content Wrapper */
.sbs-paper > .e-con-inner {
    position: relative;
    z-index: 5 !important;
}

/* 3. Paper Cover: Stationary layer with brush mask gradient */
.sbs-paper::before {
    content: "";
    position: absolute;
    top: 0 !important;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 8; 
    
    background-color: #EBE1C8 !important; /* Cover solid color */
    
    -webkit-mask-image: linear-gradient(to right, 
        rgba(0,0,0,0) 0%, 
        rgba(0,0,0,0) 35%, 
        rgba(0,0,0,1) 60%, 
        rgba(0,0,0,1) 100%
    );
    mask-image: linear-gradient(to right, 
        rgba(0,0,0,0) 0%, 
        rgba(0,0,0,0) 35%, 
        rgba(0,0,0,1) 60%, 
        rgba(0,0,0,1) 100%
    );
    
    -webkit-mask-size: 400% 100%; 
    mask-size: 400% 100%;
    
    /* Initial state: Fully covered */
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;

    transform: none !important; 
    opacity: 1;
}

/* 4. Active State: Trigger paint brush animation */
.sbs-active .sbs-paper::before {
    animation: trueErosion 2.5s linear forwards !important; 
}

/* ===
   Fix: Hide cover in Elementor Editor to allow seamless editing
   === */
.elementor-editor-active .sbs-paper::before {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ===
   Animation Keyframes: Linear erosion mapping (Prevents abrupt flash)
   === */
@keyframes trueErosion {
    0% {
        -webkit-mask-position: 100% 0;
        mask-position: 100% 0;
        opacity: 1;
    }
    25% {
        -webkit-mask-position: 75% 0;
        mask-position: 75% 0;
        opacity: 1;
    }
    50% {
        -webkit-mask-position: 50% 0;
        mask-position: 50% 0;
        opacity: 1;
    }
    75% {
        -webkit-mask-position: 25% 0;
        mask-position: 25% 0;
        opacity: 1;
    }
    99% {
        -webkit-mask-position: 0% 0;
        mask-position: 0% 0;
        clip-path: inset(0 0 0 0); 
        opacity: 1; 
    }
    100% {
        -webkit-mask-position: 0% 0;
        mask-position: 0% 0;
        clip-path: inset(0 0 0 100%);
        opacity: 0;
    }
}

/* ==========================================================================
   Fix: Force Right-Side Image Display (Static, No Animation)
   ========================================================================== */
.elementor-element.elementor-element-56a671f {
    position: relative !important;
    z-index: 99 !important; 
}
.elementor-element.elementor-element-56a671f img {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important; 
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Alternate Gothic No2 D';
	font-display: auto;
	src: url('https://jeanlafrite.com.ph/wp-content/uploads/2026/05/Alternate-Gothic-No2-D-Regular.ttf') format('truetype');
}
/* End Custom Fonts CSS */