/*
 * Elementor Animated Headline widget stilleri
 * Modern ve performans odaklı animasyon sınıfları
 */

.eah-headline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    line-height: 1.3;
    margin: 0;
}

.eah-static {
    display: inline-flex;
}

.eah-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.eah-animated-area {
    position: relative;
    display: inline-flex;
    min-height: 1.25em;
    align-items: center;
    contain: layout style paint;
}

.eah-item {
    position: absolute;
    inset: 0 auto auto 0;
    width: max-content;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 8px, 0);
    transform-origin: center;
    pointer-events: none;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

.eah-item.is-active {
    position: relative;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Fade */
.eah-item.is-enter.eah-anim-fade {
    animation: eahFadeIn var(--eah-speed, 700ms) ease both;
}

.eah-item.is-leave.eah-anim-fade {
    animation: eahFadeOut var(--eah-speed, 700ms) ease both;
}

/* Slide */
.eah-item.is-enter.eah-anim-slide {
    animation: eahSlideIn var(--eah-speed, 700ms) cubic-bezier(.2,.8,.2,1) both;
}

.eah-item.is-leave.eah-anim-slide {
    animation: eahSlideOut var(--eah-speed, 700ms) cubic-bezier(.2,.8,.2,1) both;
}

/* Rotate */
.eah-item.is-enter.eah-anim-rotate {
    animation: eahRotateIn var(--eah-speed, 800ms) cubic-bezier(.2,.8,.2,1) both;
}

.eah-item.is-leave.eah-anim-rotate {
    animation: eahRotateOut var(--eah-speed, 800ms) cubic-bezier(.2,.8,.2,1) both;
}

/* Flip */
.eah-item.is-enter.eah-anim-flip {
    animation: eahFlipIn var(--eah-speed, 700ms) ease both;
}

.eah-item.is-leave.eah-anim-flip {
    animation: eahFlipOut var(--eah-speed, 700ms) ease both;
}

/* Zoom */
.eah-item.is-enter.eah-anim-zoom {
    animation: eahZoomIn var(--eah-speed, 700ms) cubic-bezier(.2,.8,.2,1) both;
}

.eah-item.is-leave.eah-anim-zoom {
    animation: eahZoomOut var(--eah-speed, 700ms) cubic-bezier(.2,.8,.2,1) both;
}

/* Typing için JS tarafından sınıf yönetimi */
.eah-item.eah-anim-typing {
    white-space: nowrap;
}

.eah-item.eah-typing-caret::after {
    content: "";
    display: inline-block;
    width: 1px;
    height: 0.95em;
    margin-left: 0.06em;
    vertical-align: -0.08em;
    background: currentColor;
    animation: eahCaretBlink 1s steps(1, end) infinite;
}

@keyframes eahFadeIn {
    from { opacity: 0; transform: translate3d(0, 6px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes eahFadeOut {
    from { opacity: 1; transform: translate3d(0, 0, 0); }
    to { opacity: 0; transform: translate3d(0, -6px, 0); }
}

@keyframes eahSlideIn {
    from { opacity: 0; transform: translate3d(0, 18px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes eahSlideOut {
    from { opacity: 1; transform: translate3d(0, 0, 0); }
    to { opacity: 0; transform: translate3d(0, -18px, 0); }
}

@keyframes eahRotateIn {
    from { opacity: 0; transform: perspective(500px) rotateX(-50deg); }
    to { opacity: 1; transform: perspective(500px) rotateX(0deg); }
}

@keyframes eahRotateOut {
    from { opacity: 1; transform: perspective(500px) rotateX(0deg); }
    to { opacity: 0; transform: perspective(500px) rotateX(50deg); }
}

@keyframes eahFlipIn {
    from { opacity: 0; transform: perspective(600px) rotateY(-90deg); }
    to { opacity: 1; transform: perspective(600px) rotateY(0deg); }
}

@keyframes eahFlipOut {
    from { opacity: 1; transform: perspective(600px) rotateY(0deg); }
    to { opacity: 0; transform: perspective(600px) rotateY(90deg); }
}

@keyframes eahZoomIn {
    from { opacity: 0; transform: scale(0.85); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes eahZoomOut {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(1.07); }
}

@keyframes eahCaretBlink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* Erişilebilirlik: kullanıcı azaltılmış hareket tercih ederse animasyonları kapat */
@media (prefers-reduced-motion: reduce) {
    .eah-item,
    .eah-item::after {
        animation: none !important;
        transition: none !important;
    }
}

/* Responsive güvenli alan */
@media (max-width: 767px) {
    .eah-headline {
        line-height: 1.4;
    }

    .eah-animated-area {
        min-height: 1.4em;
    }
}