/* ================================================
   We Are... rotating phrase display
   ================================================ */

.we-are-wrap {
    text-align: center;
    /* padding:    2rem 1rem; */
}

.we-are-heading {
    font-size:   70px;
    /* font-weight: 700; */
    color:       #fff;
    margin:      0 0 1rem 0;
    line-height: 0.1;
}

/* Fixed-height stage so layout never jumps */
.we-are-stage {
    position: relative;
    height:   5rem;
    overflow: hidden;
    margin-top: -20px;
}

.we-are-phrase {
    position:        absolute;
    inset:           0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       5rem;
    font-weight:     400;
    color:           #fff;
    opacity:         0;
    padding-bottom: 20px;
    /* duration and delay set inline by shortcode PHP */
    animation-name:            we-are-fade;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode:       both;
}

/* 
   Each phrase animates over the FULL cycle duration but is
   only visible during its own slice. With 6 phrases at 4s each,
   total = 24s. Each phrase owns 1/6 = ~16.67% of the cycle.
   Fade in at 2%, hold to 14%, fade out by 16.67%, invisible rest.
   These percentages are baked in for 6 phrases.
   If you add/remove phrases, update the keyframes to match.
*/
@keyframes we-are-fade {
    0%      { opacity: 0; }
    2%      { opacity: 1; }
    14.67%  { opacity: 1; }
    16.67%  { opacity: 0; }
    100%    { opacity: 0; }
}

/* Responsive */
@media (max-width: 600px) {
    .we-are-heading {
        font-size: 1.8rem;
    }

    .we-are-phrase {
        font-size: 1.4rem;
    }

    .we-are-stage {
        height: 2.5rem;
    }
}