@keyframes writeText {
    0% { content: "|"; width: 0; }
    2% { content: "e|"; width: 0.6em; }
    4% { content: "en|"; width: 1.2em; }
    6% { content: "ens|"; width: 1.8em; }
    8% { content: "ensa|"; width: 2.4em; }
    10% { content: "ensag|"; width: 3em; }
    12% { content: "ensage|"; width: 3.6em; }
    14% { content: "ensager|"; width: 4.2em; }
    16% { content: "ensageri|"; width: 4.4em; }
    18% { content: "ensageria|"; width: 4.8em; }
    70% { content: "ensageria|"; width: 4.8em; }
    72% { content: "ensageri|"; width: 4.4em; }
    74% { content: "ensager|"; width: 4.2em; }
    76% { content: "ensage|"; width: 3.6em; }
    78% { content: "ensag|"; width: 3em; }
    80% { content: "ensa|"; width: 2.4em; }
    82% { content: "ens|"; width: 1.8em; }
    84% { content: "en|"; width: 1.2em; }
    86% { content: "e|"; width: 0.6em; }
    88% { content: "|"; width: 0; }
    100% { content: "|"; width: 0; }
}

.msn-logo-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.m-letter {
    display: inline-block;
}

.mensageria-animation {
    position: relative;
    display: inline-block;
    overflow: visible;
    min-width: 0;
}

.mensageria-animation::before {
    content: "";
    animation: writeText 8s infinite;
    display: inline-block;
    color: inherit;
    white-space: nowrap;
    margin-right: 0.1em;
}

.sn-text {
    display: inline-block;
    margin-left: 0.1em;
    position: relative;
}

.msn-text {
    position: relative;
    display: inline-block;
} 

.aero-background {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: url('<?= base_url("assets/img/bg/bg-1.jpg") ?>') center/cover no-repeat fixed; */
    background: var(--aero-background) center/cover no-repeat fixed;
    display: flex;
    justify-content: center;
    align-items: center;
}

.aero-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 120, 215, 0.2), rgba(0, 164, 239, 0.2));
    backdrop-filter: blur(10px);
}