/* About Section - Tunnel Scroll Effect */
.about_section {
    position: relative;
    width: 100%;
    height: 500vh; /* 5x viewport height for more scroll room */
    background-color: var(--dark-bg, #0a0a0a);
    /* Create a new stacking context */
    isolation: isolate;
}

@media (max-width: 768px) {
    .about_section {
        height: 600vh; /* Even more scroll room on mobile for slower effect */
    }
}

.about_container {
    position: -webkit-sticky; /* Safari support */
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    overflow: hidden;
    z-index: 10;
    /* Force GPU acceleration */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform;
}

/* Mobile specific fixes */
/* @media (max-width: 768px) {
    .about_container {
        height: 100vh;
        max-height: 100vh;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        position: sticky;
    }
} */

/* Rectangle styles - all 3 rectangles use same class */
.about_rectangle {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 3px solid var(--light-bg);
    transform: translate(-50%, -50%);
    pointer-events: none;
    will-change: transform, opacity;
}

/* Text container - positioned in center, above everything */
.about_text_container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    text-align: center;
    width: 100%;
    max-width: 800px;
    pointer-events: none;
}

.about_text_display {
    font-family: var(--heading-font);
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: opacity 0.4s ease;
    opacity: 1;
    line-height: 1.2;
    text-shadow: 0px 0px 10px var(--dark-bg);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .about_rectangle_large {
        width: 90vw;
        height: 70vh;
    }

    .about_rectangle_medium {
        width: 70vw;
        height: 50vh;
    }

    .about_rectangle_small {
        width: 50vw;
        height: 35vh;
    }

    .about_title {
        margin-bottom: 1rem;
    }

    .about_text_container {
        padding: 1rem;
    }

    .about_content {
        gap: 0.5rem;
    }
}

@media (max-width: 480px) {
    .about_rectangle_large {
        width: 95vw;
        height: 60vh;
    }

    .about_rectangle_medium {
        width: 75vw;
        height: 45vh;
    }

    .about_rectangle_small {
        width: 60vw;
        height: 35vh;
    }

    .about_line {
        font-size: 0.9rem;
    }
}