/* ==========================================================================
   COMPONENT: language-ticker
   --------------------------------------------------------------------------
   Horizontal infinite-scroll ticker of language pills. Used on the
   GlobalReach section. Each .e-lang-ticker contains a track of duplicated
   pills so the loop is seamless.

   Markup contract:
     <div class="e-lang-ticker e-lang-ticker--left">
         <div class="e-lang-ticker__track">
             <div class="e-lang-ticker__pill">
                 <span class="e-lang-ticker__flag">🇧🇷</span>
                 <span class="e-lang-ticker__greeting">Olá</span>
                 <span class="e-lang-ticker__lang">Portuguese</span>
             </div>
             ...
         </div>
     </div>
   ========================================================================== */

/* Mirror of legacy `.global-reach-ticker` + `.global-reach-pill` (components.css
   2337-2403). Pills are pill-shaped (border-radius 50px), white-tinted glass,
   thin blue border. Greeting in white, language in 50%-opacity white. */

.e-lang-ticker {
    display: flex;
    overflow: hidden;
}

.e-lang-ticker__track {
    display: flex;
    gap: 10px;
    width: max-content;
    padding: 0;
}

.e-lang-ticker--left  .e-lang-ticker__track { animation: e-ticker-left  50s linear infinite; }
.e-lang-ticker--right .e-lang-ticker__track { animation: e-ticker-right 55s linear infinite; }


/* PILL — the individual language entry. */

.e-lang-ticker__pill {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 25px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(28, 145, 228, 0.12);
    border-radius: 50px;
    flex-shrink: 0;
}

.e-lang-ticker__flag {
    font-size: 18px;
    line-height: 1;
}

.e-lang-ticker__greeting {
    color: #ffffff;
    font-weight: 600;
    white-space: nowrap;
}

.e-lang-ticker__lang {
    color: rgba(255, 255, 255, 0.5);
    font-weight: 400;
    white-space: nowrap;
}


/* LIGHT SURFACE OVERRIDE */

.e-section--light .e-lang-ticker__pill,
.e-section--soft  .e-lang-ticker__pill,
.e-section--blue  .e-lang-ticker__pill {
    background: var(--e-color-surface);
    border-color: var(--e-color-border);
}

.e-section--light .e-lang-ticker__greeting,
.e-section--soft  .e-lang-ticker__greeting,
.e-section--blue  .e-lang-ticker__greeting {
    color: var(--e-color-ink);
}

.e-section--light .e-lang-ticker__lang,
.e-section--soft  .e-lang-ticker__lang,
.e-section--blue  .e-lang-ticker__lang {
    color: var(--e-color-muted);
}