/* =========================================
   HERO — wordmark, letter animations, city reveal
========================================= */

.content {
    margin: 3.25rem auto;
    text-align: center;
}

.hero-area {
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    
}

.hero {
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    
}



.logo-word {
    font-family: 'Exo 2', sans-serif;
    font-weight: 200;
    font-size: clamp(2.5rem, 6vw, 5.3125rem);
    color: white;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    flex-wrap: nowrap;
    pointer-events: auto;
    max-width: 100%;
    overflow: hidden;
}

.group {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.letter {
    display: inline-block;
    cursor: pointer;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.group:hover .letter {
    transform: scale(1.45);
}

.word {
    font-size: clamp(1.25rem, 2.5vw, 2.5rem);
    font-weight: 300;
    white-space: nowrap;
    overflow: hidden;
    max-width: 0;
    opacity: 0;
    margin-left: 0;
    display: inline-block;
    transition:
        max-width 0.6s ease,
        opacity 0.3s ease,
        margin-left 0.6s ease;
}

.word.open {
    max-width: 15rem;
    opacity: 1;
    margin-left: 0.875rem;
}

body:not(.intro-done) .group {
    pointer-events: none;
}

body.intro-done .group {
    pointer-events: auto;
}

body.intro-done .group:hover .word {
    max-width: 15rem;
    opacity: 1;
    margin-left: 0.875rem;
}

.city {
    font-family: 'Exo 2', sans-serif;
    font-weight: 200;
    font-size: clamp(2.5rem, 6vw, 5.3125rem);
    color: white;
    letter-spacing: 0.375rem;
    opacity: 0;
    transform: translateX(-0.625rem);
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    transition:
        opacity 1s ease,
        transform 1s ease,
        max-width 1s ease;
}

body.intro-done .city {
    opacity: 1;
    transform: translateX(0);
    max-width: 31.25rem;
}

.welcome-animation {
    width: min(1200px, 95vw);
    margin: 5rem auto 0;
    overflow:hidden;
    margin-top:10rem;
}


.welcome-track {
    display: flex;
    width: max-content;

    gap: 4rem;

    animation: welcome-scroll 25s linear infinite;
    color: white;
    font-family: 'Libre Baskerville', serif;
    font-size: clamp(1rem, 3vw, 3rem);
    white-space: nowrap;

    text-shadow:
        0 0 10px rgba(255,255,255,0.35),
        0 0 25px rgba(255,255,255,0.15),
        0 5px 15px rgba(0,0,0,0.5);
}


.welcome-track span {
    display: inline-block;
}


/* left → right movement */
@keyframes welcome-scroll {

    from {
        transform: translateX(-50%);
    }

    to {
        transform: translateX(0%);
    }

}