/* ==========================================================================
   ABG — Global Design System
   Core styles and utility classes extracted from index.html
   ========================================================================== */

.glass-nav {
    background: rgba(249, 249, 247, 0.7);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

/* ----- Glass Card ----- */
.glass-card {
    background: rgba(131, 119, 107, 0.15);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(131, 119, 107, 0.4);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.text-glow {
    text-shadow: 0 0 30px rgba(165, 207, 195, 0.3);
}

.ghost-border {
    border: 1px solid rgba(18, 60, 51, 0.1);
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

.service-card:hover img {
    transform: scale(1.05);
}

.active-dot::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background-color: #C8A96B;
    border-radius: 9999px;
}

.text-gradient {
    color: transparent;
    background-image: linear-gradient(to right, #1F7A5C, rgba(31, 122, 92, 0.5));
    -webkit-background-clip: text;
    background-clip: text;
    padding-right: 0.5rem;
}

/* Safari fix for border-radius overflow during transforms */
.fix-safari-corners {
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: radial-gradient(white, black);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Base icon class to eliminate inline style thrashing */
.icon-mask-base {
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-position: center;
    -webkit-mask-position: center;
    background-color: currentColor;
    display: inline-block;
}

/* iOS & WebKit Specific Performance Optimizations */
@supports (-webkit-touch-callout: none) {
    /* Optimize backdrop-filter radius on iOS to prevent GPU offscreen buffer saturation while keeping exact glassmorphism appearance */
    .glass-nav,
    .glass-card,
    [class*="backdrop-blur-"] {
        -webkit-backdrop-filter: blur(12px) !important;
        backdrop-filter: blur(12px) !important;
    }

    /* Optimize heavy background filter blurs (blur-[100px] to blur-[160px]) on iOS to prevent multi-layer Gaussian shader freeze */
    [class*="blur-\\[1"] {
        -webkit-filter: blur(50px) !important;
        filter: blur(50px) !important;
        will-change: auto !important;
    }

    /* Prevent mask-image + backdrop-filter compositing collision on non-animating cards in iOS Safari */
    .fix-safari-corners {
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }
}