/* ---------- Mobile / persistent touch toggle for introduction grid ---------- */

@media(max-width: 112.5em) {
    .hero-text-box {
        font-size: 5.4rem;
    }

    .hero-img {
        right: 12rem;
    }
}

@media(max-width: 93.75em) {
    .hero-text-box {
        font-size: 4.4rem;
    }

    .hero-img {
        right: 8rem;
    }
}

@media(max-width: 75em) {
    .hero-text-box {
        font-size: 3.4rem;
    }

    .hero-img {
        right: 8rem;
    }
}

/* Responsive Design for max-width: 60em (Updated) */
@media (max-width: 60em) {
    .subheading {
        font-size: 2.8rem;
    }

    .heading-secondary {
        font-size: 3.6rem;
    }

    .hover-text {
        font-size: 1.6rem;
    }

    .hero-text-box {
        border-right: 3px solid #eee;
        font-size: 4.8rem;
        top: -19rem;
        /* Removed large negative top value, rely on flex centering */
        max-width: 15ch;
        /* Increased to 15ch to include space after underscore */
        animation:
            typing 1.5s steps(15) forwards,
            /* Increased steps to 15 for space and cursor */
            move-up 2s 1.5s forwards,
            cursor-blink 1s 3.5s infinite step-end;
        /* Ensure initial position is centered */
        transform: translateY(0);
        /* Start centered */
    }

    @keyframes typing {
        from {
            width: 0ch;
            border-color: #eee;
        }

        to {
            width: 15ch;
            /* Matches max-width, ensuring space after underscore */
            border-color: #eee;
        }
    }

    @keyframes move-up {
        from {
            transform: translateY(0);
            /* Start centered */
        }

        to {
            transform: translateY(-15vh);
            /* Move up to desired height */
        }
    }

    .hero-img {
        right: auto;
        left: 50%;
        width: 72vw;
        animation:
            image-slide-to-center 2s 1.5s forwards,
            border-glow 1s 3.5s forwards;
    }

    @keyframes image-slide-to-center {
        from {
            transform: translateY(-50%) translateX(100%);
            opacity: 0;
        }

        to {
            transform: translate(-50%, -50%);
            opacity: 1;
        }
    }

    .introduction-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media(max-width: 52.5em) {
    .hero-text-box {
        top: -20rem;
        font-size: 5.8rem;
    }

    html {
        font-size: 50%;
    }

}

@media(max-width: 40em) {
    .hero-text-box {
        top: -15rem;
        font-size: 4.8rem;
    }




}

/* 小於 600px 時 */
@media (max-width: 37.5em) {

    html {
        font-size: 45%;
    }

    .header {
        overflow: visible !important;
    }

    .logo {
        padding: 3.2rem 0;
    }

    .hero-text-box {
        z-index: 0;
        font-size: 4.8rem
    }

    .logo {
        font-size: 4.2rem
    }


    .nav-toggle {
        display: block;
        font-size: 4.2rem;
        cursor: pointer;
        padding: 1.2rem;
        z-index: 10;
    }

    .main-nav-list {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        flex-direction: column;
        background-color: #394561;
        padding: 1.6rem 0;
        border-radius: 0 0 0.9rem 0.9rem;
        z-index: 9999;
        /* Ensure it appears above other content */
    }

    .main-nav-list.active {
        display: flex;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    }

    .main-nav-link {
        display: block;
        padding: 1.2rem 3.2rem;
        font-size: 2rem;
        color: #e6e8eb;
        text-decoration: none;
    }

    .main-nav-link:hover {
        background-color: #525c75;
    }

}

@media (max-width: 30em) {
    html {
        font-size: 32.5%;
    }
}