/* WHY ME SECTION */
#whyme {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 10vh 5%;
    position: relative;
    z-index: 50;
    background-color: var(--primary-bg);
    background-image: var(--gradient-bg-dots);
    background-size: 24px 24px;
    background-attachment: fixed;
}

#whyme::after {
    content: "";
    position: absolute;
    bottom: -40px;
    /* Slightly overlap next section */
    left: 0;
    width: 100%;
    height: 41px;
    background-color: var(--primary-bg);
    z-index: 10;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,30 L20,20 L40,35 L60,25 L80,40 L100,15 L120,35 L140,25 L160,45 L180,20 L200,40 L220,25 L240,50 L260,30 L280,45 L300,20 L320,40 L340,25 L360,45 L380,15 L400,35 L420,25 L440,45 L460,20 L480,40 L500,25 L520,50 L540,30 L560,45 L580,20 L600,40 L620,25 L640,45 L660,15 L680,35 L700,25 L720,45 L740,20 L760,40 L780,25 L800,50 L820,30 L840,45 L860,20 L880,40 L900,25 L920,45 L940,15 L960,35 L980,25 L1000,45 L1020,20 L1040,40 L1060,25 L1080,50 L1100,30 L1120,45 L1140,20 L1160,40 L1180,25 L1200,30 V0 H0 Z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,30 L20,20 L40,35 L60,25 L80,40 L100,15 L120,35 L140,25 L160,45 L180,20 L200,40 L220,25 L240,50 L260,30 L280,45 L300,20 L320,40 L340,25 L360,45 L380,15 L400,35 L420,25 L440,45 L460,20 L480,40 L500,25 L520,50 L540,30 L560,45 L580,20 L600,40 L620,25 L640,45 L660,15 L680,35 L700,25 L720,45 L740,20 L760,40 L780,25 L800,50 L820,30 L840,45 L860,20 L880,40 L900,25 L920,45 L940,15 L960,35 L980,25 L1000,45 L1020,20 L1040,40 L1060,25 L1080,50 L1100,30 L1120,45 L1140,20 L1160,40 L1180,25 L1200,30 V0 H0 Z' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    filter: drop-shadow(0 10px 10px var(--rgba-black-10));
}

.whyme-progress-container {
    position: absolute;
    top: 0;
    left: 35%;
    /* Moved further left as requested */
    /* Positioned in the gap between heading and content */
    transform: translateX(-50%);
    width: 2px;
    height: calc(100% - 150px);
    z-index: -1;
    /* Placed behind content */
    pointer-events: none;
}

.falling-me-progress {
    position: sticky;
    top: 50vh;
    width: clamp(80px, 10vw, 150px);
    height: auto;
    opacity: 0;
    visibility: hidden;
    /* Prevent interaction or visual artifacts when hidden */
    /* Hidden by default, controlled by GSAP */
    filter: grayscale(100%);
    transition: opacity 0.5s ease;
}

body.dark-knight-mode .falling-me-progress {
    filter: grayscale(100%) invert(1);
}

.whyme-container {
    display: flex;
    justify-content: space-between;
    gap: 8%;
    max-width: 1400px;
    margin: 0 auto;
}

.whyme-left {
    flex: 0 0 35%;
    position: sticky;
    top: 15vh;
    height: fit-content;
}

.whyme-heading {
    font-family: var(--font-heading);
    font-size: clamp(80px, 10vw, 140px);
    color: var(--text-dark);
    line-height: 0.9;
    letter-spacing: -5px;
    text-shadow: 2px 2px 10px var(--rgba-black-05);
    margin-bottom: 20px;
}

.whyme-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 120px;
    /* Space between points */
    padding-bottom: 10vh;
}

.whyme-item {
    display: flex;
    flex-direction: column;
    gap: 15px;
    opacity: 0;
    transform: translateY(50px);
}

.whyme-number {
    font-family: var(--font-heading);
    font-size: clamp(60px, 8vw, 100px);
    color: var(--text-dark);
    line-height: 1;
    opacity: 0.15;
    margin-bottom: -10px;
    transition: opacity 0.5s ease;
}

.whyme-item:hover .whyme-number {
    opacity: 0.4;
}

.whyme-title {
    font-family: var(--font-heading);
    font-size: clamp(32px, 4vw, 48px);
    color: var(--text-dark);
    line-height: 1.1;
    margin-bottom: 10px;
}

.whyme-description {
    font-family: var(--font-paragraph-text);
    font-size: clamp(18px, 1.8vw, 22px);
    line-height: 1.6;
    color: var(--text-muted);
    font-weight: 500;
}

.about-subtitle {
    color: var(--text-dark);
    font-weight: 700;
    /* font-size: 1.1em; Slightly larger like in About section */
}