/**
 * Birger Triangle Sections - Frontend Styles
 * Triangle container with clip-path and scroll-animated bottom triangle
 */

/* Parent Triangle Container */
.birger-triangle-section {
    position: relative;
    aspect-ratio: 252 / 187;
    overflow: visible;
    background: #ffffff;
    margin-top: 0;
    z-index: 999;
    clip-path: polygon(12% 0%, 88% 0%, 50% 100%);
}

/* Triangle Border using pseudo-element */


/* Triangle Image (Child Element) */
.birger-triangle-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(1.1) contrast(1.05);
    z-index: 998;
}

/* Bottom Triangle Element */
.birger-bottom-triangle {
    height: 0px;
    width: 100%;
    background: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    clip-path: polygon(40% 0%, 60% 0%, 50% 99%);
    z-index: 999;
    transition: height 0.1s ease-out, clip-path 0.1s ease-out;
    will-change: height, clip-path;
}



/* Animation Speed Variations */
.birger-triangle-section[data-speed="slow"] .birger-bottom-triangle {
    transition: height 0.3s ease-out, clip-path 0.3s ease-out;
}

.birger-triangle-section[data-speed="smooth"] .birger-bottom-triangle {
    transition: height 0.15s ease-out, clip-path 0.15s ease-out;
}

.birger-triangle-section[data-speed="fast"] .birger-bottom-triangle {
    transition: height 0.05s ease-out, clip-path 0.05s ease-out;
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
    .birger-triangle-section {
        aspect-ratio: 252 / 187;
       
    }
}

@media (max-width: 768px) {
    .birger-triangle-section {
        aspect-ratio: 252 / 187;
      
    }

    .birger-bottom-triangle {
        transition: height 0.2s ease-out, clip-path 0.2s ease-out;
    }
}

@media (max-width: 480px) {
    .birger-triangle-section {
        aspect-ratio: 252 / 187;
        max-width: 100%;
        width: 100%;
    }
}

/* iPhone 14 Plus, 13 Pro Max, 12 Pro Max, 11 Pro Max (428px) */
@media (max-width: 428px) {
    .birger-triangle-section {
        aspect-ratio: 252 / 187;
        width: 100%;
        max-width: 100%;
    }
}

/* iPhone 14, 13, 12, 11, XR (414px) */
@media (max-width: 414px) {
    .birger-triangle-section {
        aspect-ratio: 252 / 187;
        width: 100%;
        padding: 0 10px;
    }
}

/* iPhone 14 Pro, 13 Pro, 12 Pro (390px) */
@media (max-width: 390px) {
    .birger-triangle-section {
        aspect-ratio: 252 / 187;
        width: 100%;
        padding: 0 8px;
    }
}

/* iPhone SE, 13 mini, 12 mini, X, XS, 11 Pro (375px) */
@media (max-width: 375px) {
    .birger-triangle-section {
        aspect-ratio: 252 / 200;
        width: 100%;
        padding: 0 5px;
    }
}

/* Small Android devices (360px) */
@media (max-width: 360px) {
    .birger-triangle-section {
        aspect-ratio: 252 / 210;
        width: 100%;
        padding: 0 5px;
    }
}

/* Performance Optimizations */
.birger-triangle-section {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.birger-triangle-image {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    height: 100%   !important;
    object-fit: contain !important;
}

/* Ensure smooth rendering */
.birger-bottom-triangle {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}