/* =========================================
   WalidEx — animations.css
   Анимации: hero, ticker, blobs, timeline, contact
   ========================================= */

/* ---- Вход hero-блока ---- */
@keyframes heroTextIn {
    from { opacity: 0; transform: translateX(-56px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes heroBannerIn {
    from { opacity: 0; transform: translateX(56px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes heroBadgeIn {
    from { opacity: 0; transform: translateY(-16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hero__left {
    animation: heroTextIn 0.65s cubic-bezier(.2,.8,.2,1) both;
}

.hero__right {
    animation: heroBannerIn 0.75s cubic-bezier(.2,.8,.2,1) both;
    animation-delay: 0.1s;
}

.hero__badge {
    animation: heroBadgeIn 0.5s cubic-bezier(.2,.8,.2,1) both;
    animation-delay: 0.25s;
}

/* ---- Крипто-тикер (infinite horizontal scroll) ---- */
@keyframes tickerScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.crypto-ticker {
    overflow: hidden;
    width: 100%;
    mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.crypto-ticker__track {
    display: flex;
    gap: 16px;
    width: max-content;
    animation: tickerScroll 28s linear infinite;
    will-change: transform;
}

.crypto-ticker__track:hover {
    animation-play-state: paused;
}

.crypto-ticker__item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 999px;
    padding: 9px 20px;
    white-space: nowrap;
    color: rgba(220, 230, 255, .85);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .3px;
    transition: background .2s, border-color .2s;
    cursor: default;
}

.crypto-ticker__item:hover {
    background: rgba(255, 255, 255, .09);
    border-color: rgba(255, 255, 255, .14);
}

.crypto-ticker__item img,
.crypto-ticker__item svg {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    flex-shrink: 0;
}

.crypto-ticker__symbol {
    font-weight: 700;
    color: #f0f4ff;
}

.crypto-ticker__name {
    color: rgba(155, 170, 210, .75);
    font-size: 12px;
}

/* ---- Hero banner image (правая колонка) ---- */
.hero__banner-img {
    width: 100%;
    max-width: 584px;
    height: auto;
    display: block;
    filter: drop-shadow(0 32px 80px rgba(0, 212, 255, .18))
            drop-shadow(0 8px 24px rgba(123, 94, 234, .14));
}

/* ---- Фоновые blobs (ambient lighting) ---- */
.hero > .bg-blob {
    position: absolute !important;
    z-index: 0 !important;
}

.bg-blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    will-change: transform;
}

.bg-blob--hero-teal {
    width: 520px;
    height: 520px;
    bottom: -180px;
    left: -160px;
    background: radial-gradient(circle, rgba(0, 212, 255, .20) 0%, transparent 70%);
    filter: blur(90px);
    opacity: .65;
}

.bg-blob--hero-purple {
    width: 640px;
    height: 420px;
    top: -80px;
    right: -180px;
    background: radial-gradient(circle, rgba(123, 94, 234, .22) 0%, transparent 70%);
    filter: blur(110px);
    opacity: .60;
}

.bg-blob--mid-green {
    width: 400px;
    height: 400px;
    bottom: -120px;
    right: -100px;
    background: radial-gradient(circle, rgba(0, 255, 163, .14) 0%, transparent 70%);
    filter: blur(80px);
    opacity: .55;
}

/* ---- Timeline секция (как в crypgo) ---- */
.timeline-section {
    padding: 80px 24px 100px;
    overflow: visible;
}

.timeline-section__header {
    text-align: center;
    margin-bottom: 80px;
}

.timeline-section__eyebrow {
    color: rgba(255,255,255,.75);
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 16px;
}

.timeline-section__eyebrow span {
    color: var(--primary, #6ee7b7);
}

.timeline-section__title {
    color: #fff;
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 500;
    max-width: 70%;
    margin: 0 auto;
    line-height: 1.25;
}

/* Desktop visual: центральный телефон + 4 блока */
.timeline-section__visual {
    position: relative;
    width: 82%;
    margin: 0 auto;
    display: none;
}

.timeline-section__img {
    width: 100%;
    display: block;
}

/* Общие стили блока */
.timeline-block {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 20px;
    width: 280px;
}

.timeline-block__text h3 {
    color: rgba(255,255,255,.85);
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 8px;
}

.timeline-block__text p {
    color: rgba(255,255,255,.5);
    font-size: 15px;
    line-height: 1.5;
}

.timeline-block__text--right { text-align: right; }
.timeline-block__text--left  { text-align: left; }

.timeline-block__icon {
    background: rgba(110, 231, 183, .15);
    backdrop-filter: blur(4px);
    border-radius: 50%;
    padding: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Позиции 4 блоков (точно как в crypgo) */
.timeline-block--tl {
    top: 140px;
    left: -60px;
}

.timeline-block--tr {
    top: 140px;
    right: -60px;
}

.timeline-block--bl {
    bottom: 192px;
    left: -60px;
}

.timeline-block--br {
    bottom: 192px;
    right: -60px;
}

/* Mobile grid: 2x2 */
.timeline-section__mobile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 640px;
    margin: 0 auto;
}

.timeline-mobile-card {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px;
    padding: 24px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.timeline-mobile-card h4 {
    color: rgba(255,255,255,.85);
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.timeline-mobile-card p {
    color: rgba(255,255,255,.5);
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}

.timeline-mobile-card .timeline-block__icon {
    padding: 14px;
    margin-bottom: 4px;
}

/* ---- Contact / Support секция ---- */
.contact-section {
    padding: 80px 24px;
    text-align: center;
}

.contact-section__eyebrow {
    color: rgba(255,255,255,.6);
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 12px;
}

.contact-section__title {
    color: #fff;
    font-size: clamp(26px, 3.5vw, 42px);
    font-weight: 500;
    margin-bottom: 48px;
}

.contact-section__cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    max-width: 800px;
    margin: 0 auto;
}

.contact-card {
    flex: 1;
    min-width: 200px;
    max-width: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 32px 24px;
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.05);
    border-radius: 16px;
    text-decoration: none;
    transition: background .2s, border-color .2s, transform .2s;
    cursor: pointer;
}

.contact-card:hover {
    background: rgba(110, 231, 183, .1);
    border-color: rgba(110, 231, 183, .3);
    transform: translateY(-4px);
}

.contact-card__icon {
    font-size: 32px;
    line-height: 1;
}

.contact-card__title {
    color: rgba(255,255,255,.85);
    font-size: 17px;
    font-weight: 600;
    margin: 0;
}

.contact-card__desc {
    color: rgba(255,255,255,.5);
    font-size: 13px;
    margin: 0;
    line-height: 1.5;
}

/* ---- Hero badge ---- */
.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 18px;
    border-radius: 999px;
    border: 1px solid rgba(0, 255, 163, .22);
    background: rgba(0, 255, 163, .08);
    color: #00ffa3;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .5px;
    margin-bottom: 8px;
}

/* ---- Hero subtitle text ---- */
.hero__subtitle-text {
    font-size: 18px;
    line-height: 1.75;
    color: rgba(210, 222, 252, .76);
    max-width: 520px;
    margin: 12px 0 0;
}

/* ---- Hero 2-column wrapper ---- */
.hero__grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    width: 100%;
    position: relative;
    z-index: 1;
}

/* ---- CountUp: плавное появление числа ---- */
[data-countup] {
    transition: opacity .3s;
}

/* ---- Spinner для загрузки (опционально) ---- */
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ---- Desktop (≥900px) ---- */
@media (min-width: 900px) {
    .hero__grid {
        flex-direction: row;
        align-items: center;
        gap: 56px;
        padding: 80px 56px 40px;
        max-width: 1200px;
        margin: 0 auto;
    }

    .hero__left {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        gap: 0;
    }

    .hero__right {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .hero__subtitle-text {
        font-size: 19px;
    }

    .crypto-ticker__item {
        font-size: 15px;
        padding: 10px 24px;
    }

    .hero__banner-img {
        max-width: 500px;
    }

    /* Desktop: показываем телефон с блоками, скрываем мобильную сетку */
    .timeline-section__visual {
        display: block;
    }

    .timeline-section__mobile-grid {
        display: none;
    }

    .timeline-section {
        padding: 120px 80px 160px;
    }
}

/* ---- Mobile (<900px) ---- */
@media (max-width: 899px) {
    .hero__right {
        order: -1;
    }

    .hero__banner-img {
        max-width: 300px;
    }

    .bg-blob--hero-teal,
    .bg-blob--hero-purple,
    .bg-blob--mid-green {
        opacity: .35;
        filter: blur(60px);
    }

    .timeline-section__title {
        max-width: 92%;
    }

    .contact-section__cards {
        flex-direction: column;
        align-items: center;
    }

    .contact-card {
        max-width: 100%;
        width: 100%;
    }

    .hero__subtitle-text {
        font-size: 16px;
        text-align: center;
    }

    .hero__badge {
        align-self: center;
    }

    .timeline-section__mobile-grid {
        grid-template-columns: 1fr;
        max-width: 100%;
    }
}