/**
 * Hero typewriter — production SSOT styles.
 * Scoped under .hero-tw / [data-hero-tw].
 */

.hero-tw,
[data-hero-tw] {
    position: relative;
    display: block;
    width: 100%;
}

.hero-tw__placeholder {
    position: relative;
    display: block;
    opacity: 1;
    visibility: visible;
    pointer-events: none;
    user-select: none;
}

.hero-tw.is-tw-ready .hero-tw__placeholder {
    opacity: 0;
}

.hero-tw__items {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
}

.hero-tw.is-tw-ready .hero-tw__items {
    opacity: 1;
}

.hero-tw__item {
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    visibility: visible;
    opacity: 1;
}

.hero-tw__word {
    display: inline-block;
    white-space: nowrap;
}

.hero-tw__space {
    display: inline;
    /* normal: soft-wrap sonrası satır başı boşluğu collapse olur; pre ikinci satırı sağa kaydırır */
    white-space: normal;
}

.hero-tw__char {
    display: inline;
    opacity: 0;
}

.hero-tw__char--highlight {
    color: inherit;
}

.hero-tw__cursor {
    position: absolute;
    left: 0;
    top: 0;
    display: inline-block;
    pointer-events: none;
    animation: hero-tw-cursor-blink 1.1s ease-in-out infinite;
}

.hero-tw--soft-motion .hero-tw__cursor {
    animation: none;
    opacity: 0.7;
}

@keyframes hero-tw-cursor-blink {
    0%,
    42% {
        opacity: 1;
    }

    48%,
    100% {
        opacity: 0.2;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-tw__cursor {
        animation: none;
        opacity: 0.7;
    }
}

.hero-tpl__title--typewriter {
    display: block;
}