/* ======================================================================
   Sauce Vertical Text Slider  —  v1.13.0
   Widget: sauce-vtext
   Continuous vertical ticker. The centred line is solid (accent); the two
   nearest above/below are slightly faded, the rest more faded.
   ====================================================================== */

.sauce-vtext {
    --vtx-size:        34px;
    --vtx-line-h:      1.9;
    --vtx-color:       rgba(255,255,255,0.6);
    --vtx-active:      var(--sauce-hot-sauce, #FF5338);
    --vtx-near-op:     0.55;
    --vtx-far-op:      0.28;
    --vtx-visible:     5;       /* visible rows (odd number) */
    --vtx-align:       center;
    --vtx-trans:       250ms;   /* slide + fade transition on each change */

    width: 100%;
    overflow: hidden;
}

.vtx__viewport {
    position: relative;
    height: calc(var(--vtx-size) * var(--vtx-line-h) * var(--vtx-visible));
    overflow: hidden;
}
.vtx__track {
    will-change: transform;
    transition: transform var(--vtx-trans) ease;
}
.vtx__item {
    height: calc(var(--vtx-size) * var(--vtx-line-h));
    display: flex;
    align-items: center;
    justify-content: var(--vtx-align);
    font-size: var(--vtx-size);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--vtx-color);
    opacity: var(--vtx-far-op);
    transition: opacity var(--vtx-trans) ease, color var(--vtx-trans) ease;
    white-space: nowrap;
}
.vtx__item.is-near   { opacity: var(--vtx-near-op); }
.vtx__item.is-active { opacity: 1; color: var(--vtx-active); }

@media (max-width: 767px) {
    .sauce-vtext { --vtx-size: 24px; }
}