/*
 * Altayseer hero title refinement
 * - Two-line title on large screens
 * - Word-by-word entrance animation
 * - Accessible reduced-motion fallback
 */

.home-page .home-hero-copy {
    max-width: 920px;
}

.home-page .home-hero .home-hero-title {
    display: grid;
    gap: .08em;
    width: min(100%, 920px);
    max-width: 920px;
    margin: 18px 0 20px;
    color: #fff;
    font-size: clamp(3rem, 4.45vw, 4.65rem);
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: -.035em;
    text-wrap: initial;
    text-shadow: 0 12px 36px rgba(5, 26, 52, .22);
}

.hero-title-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 .24em;
    min-width: 0;
}

html[dir="rtl"] .hero-title-line {
    direction: rtl;
    justify-content: flex-start;
}

html[dir="ltr"] .hero-title-line {
    direction: ltr;
    justify-content: flex-start;
}

.hero-title-line--2 {
    position: relative;
    width: fit-content;
    max-width: 100%;
    padding-bottom: .13em;
}

.hero-title-line--2::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    width: min(180px, 28%);
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, #ee6623, rgba(238, 102, 35, .2));
    transform: scaleX(0);
    transform-origin: right center;
    animation: heroTitleAccent 720ms cubic-bezier(.22, 1, .36, 1) 1.15s forwards;
}

html[dir="ltr"] .hero-title-line--2::after {
    transform-origin: left center;
}

.hero-title-word {
    display: inline-block;
    opacity: 0;
    filter: blur(6px);
    transform: translateY(20px) scale(.985);
    will-change: opacity, transform, filter;
    animation: heroTitleWordReveal 720ms cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: calc(120ms + (var(--word-index) * 105ms));
}

.home-hero-subtitle-reveal {
    opacity: 0;
    transform: translateY(12px);
    animation: heroSubtitleReveal 650ms ease 1.02s forwards;
}

.home-page .home-hero .hero-actions {
    opacity: 0;
    transform: translateY(12px);
    animation: heroSubtitleReveal 650ms ease 1.16s forwards;
}

@keyframes heroTitleWordReveal {
    0% {
        opacity: 0;
        filter: blur(6px);
        transform: translateY(20px) scale(.985);
    }
    65% {
        opacity: 1;
        filter: blur(0);
    }
    100% {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0) scale(1);
    }
}

@keyframes heroSubtitleReveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroTitleAccent {
    to {
        transform: scaleX(1);
    }
}

@media (min-width: 1100px) {
    .hero-title-line {
        flex-wrap: nowrap;
        white-space: nowrap;
    }
}

@media (max-width: 1099px) {
    .home-page .home-hero .home-hero-title {
        font-size: clamp(2.7rem, 6.5vw, 4.1rem);
        max-width: 780px;
    }
}

@media (max-width: 760px) {
    .home-page .home-hero .home-hero-title {
        gap: .12em;
        margin-block: 14px 18px;
        font-size: clamp(2.25rem, 11vw, 3.25rem);
        line-height: 1.17;
        letter-spacing: -.025em;
    }

    .hero-title-line {
        gap: 0 .21em;
    }

    .hero-title-line--2::after {
        width: 92px;
        height: 3px;
    }

    .hero-title-word {
        transform: translateY(14px) scale(.99);
        animation-duration: 620ms;
        animation-delay: calc(90ms + (var(--word-index) * 82ms));
    }
}

@media (max-width: 420px) {
    .home-page .home-hero .home-hero-title {
        font-size: clamp(2rem, 10.5vw, 2.7rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-title-word,
    .home-hero-subtitle-reveal,
    .home-page .home-hero .hero-actions,
    .hero-title-line--2::after {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
        animation: none !important;
    }
}