/* Custom styling for timeline cards, navigation, and mobile performance */

/* Hide the resume button from top nav */
a[href="Usama_Gulzar_Resume_Optimized.docx"],
a[href*="resume"] {
    display: none !important;
}

/* Hide the bullets for NAT and ECAT (which were work experiences with ul) */
ol.space-y-10 > li:nth-child(2) ul,
ol.space-y-10 > li:nth-child(4) ul {
    display: none !important;
}

/* Hide Slot 6 completely */
ol.space-y-10 > li:nth-child(6) {
    display: none !important;
}

/* Make test cards (Slot 2: NAT, Slot 3: LAT, Slot 4: ECAT/NET) a little smaller */
ol.space-y-10 > li:nth-child(2) .scrap-tilt > div.relative,
ol.space-y-10 > li:nth-child(3) .scrap-tilt > div.relative,
ol.space-y-10 > li:nth-child(4) .scrap-tilt > div.relative {
    transform: scale(0.92);
    transform-origin: top left;
}

/* Distinct soft tint for test cards */
ol.space-y-10 > li:nth-child(2) [aria-hidden="true"].absolute.inset-0,
ol.space-y-10 > li:nth-child(3) [aria-hidden="true"].absolute.inset-0,
ol.space-y-10 > li:nth-child(4) [aria-hidden="true"].absolute.inset-0 {
    background: rgb(240, 246, 252) !important; /* Soft cool slate/blue tinted paper */
    border: 1px solid rgba(42, 157, 143, 0.25);
}

@media (min-width: 640px) {
    ol.space-y-10 > li:nth-child(2) .scrap-tilt > div.relative,
    ol.space-y-10 > li:nth-child(4) .scrap-tilt > div.relative {
        transform-origin: top right;
    }
}

/* Add the 1st badge to the LAT card (now Slot 3) */
ol.space-y-10 > li:nth-child(3) .mb-2.flex::after {
    content: "🏆 1st Rank";
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: 9999px;
    border: 1px solid rgba(58,47,47,0.1);
    padding: 0.25rem 0.75rem;
    font-family: var(--font-caveat), cursive;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-teal-deep);
    background: #fff;
    box-shadow: 0 2px 6px rgba(58,47,47,0.18);
    transform: rotate(2deg);
    margin-left: 0.5rem;
}

/* About page: Reduce section gaps & tighten skills section */
main > section {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
}

main > section .mb-14 {
    margin-bottom: 2rem !important;
}

/* Skills section: Remove dividers and bring lines closer */
.divide-y > :not([hidden]) ~ :not([hidden]) {
    border-top-width: 0px !important;
}

/* Reduce vertical padding for skill row categories */
main section .py-7 {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}

/* ==========================================================================
   MOBILE PERFORMANCE & INSTANT CONTENT APPEARANCE OPTIMIZATIONS
   ========================================================================== */

/* 1. Eliminate long animation delays so elements show up immediately on scroll */
[style*="transition-delay"],
[style*="transitionDelay"] {
    transition-delay: 0s !important;
}

/* 2. Instantly reveal hidden/delayed opacity elements without affecting card rotations/tilts */
@media (max-width: 768px) {
    [style*="opacity: 0"],
    [style*="opacity:0"] {
        opacity: 1 !important;
        transition: opacity 0.15s ease-out !important;
    }

    /* 3. Disable heavy SVG fractal filters on mobile GPU (preserves card rotations, tilts & blend modes) */
    *[style*="filter: url(#torn-edge)"],
    *[style*="filter: url(#sketchy)"],
    *[style*="filter:url(#torn-edge)"],
    *[style*="filter:url(#sketchy)"],
    *[style*="filter: url(#sketchy-strong)"],
    *[style*="filter:url(#sketchy-strong)"] {
        filter: drop-shadow(0 3px 10px rgba(58, 47, 47, 0.12)) !important;
    }

    /* 4. Disable backdrop blur on sticky navigation bar on mobile for smooth 60fps scrolling */
    header.sticky,
    header {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background-color: var(--color-paper, #fef8eb) !important;
    }

    /* 5. Smooth touch scrolling */
    html, body {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: auto !important;
    }
}

/* Guarantee hello world badge is layered on top of photo frame on all screens */
.hello-world-badge {
    z-index: 50 !important;
}

/* Prevent horizontal page shifts on mobile */
html, body {
    overflow-x: hidden;
}