/*
 * Homepage custom CSS, ported verbatim from the legacy marketing page
 * (view/application/index/rebrand/index/index.phtml, inline <style> block).
 *
 * Kept byte-for-byte rather than re-expressed in Tailwind: these are the
 * hero's cursor/highlight keyframes and the scroll-jack geometry, where
 * 'close enough' is visible. The utility classes in the markup were
 * de-prefixed (tw-) during the port; this file never used them.
 */

    .fade-in {
        opacity: 0;
        animation: fadeIn 0.8s ease-out forwards;
    }

    .delay-1 {
        animation-delay: 0.3s;
    }

    .delay-2 {
        animation-delay: 0.6s;
    }

    .delay-3 {
        animation-delay: 0.9s;
    }

    .delay-4 {
        animation-delay: 1.2s;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(20px);
        }

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

    .highlight-italic,
    .highlight-bg {
        position: relative;
        white-space: nowrap;
    }

    .highlight-italic {
        animation: cursorAndItalic 2s forwards;
        animation-delay: 1s;
    }

    .highlight-bg {
        animation: cursorAndBackground 2s forwards;
        animation-delay: 3s;
    }

    .highlight-italic::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 3px;
        height: 100%;
        background-color: #2c61ff;
        animation: cursor 2s forwards;
        animation-delay: 1s;
        border-radius: 999px;
    }

    @keyframes cursorBg {
        0% {
            opacity: 1;
            left: 0;
        }

        15% {
            opacity: 1;
            left: 0;
        }

        20% {
            opacity: 0;
            left: 0;
        }

        25% {
            opacity: 1;
            left: 0;
        }

        45% {
            opacity: 1;
            left: 100%;
        }

        46%,
        100% {
            opacity: 1;
            left: 100%;
        }
    }

    .highlight-bg::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 3px;
        height: 100%;
        opacity: 0;
        background-color: #2c61ff;
        animation: cursorBg 2s forwards;
        /* Changed from cursor to cursorBg */
        animation-delay: 3s;
        border-radius: 999px;
    }

    @keyframes cursor {
        0% {
            opacity: 1;
            left: 0;
        }

        15% {
            /* Blink cursor at start */
            opacity: 1;
            left: 0;
        }

        20% {
            opacity: 0;
            left: 0;
        }

        25% {
            opacity: 1;
            left: 0;
        }

        45% {
            opacity: 1;
            left: 100%;
        }

        46% {
            opacity: 0;
        }

        100% {
            opacity: 0;
            left: 100%;
        }
    }

    @keyframes cursorAndItalic {
        0% {
            background: transparent;
        }

        25% {
            background: transparent;
        }

        35% {
            background: linear-gradient(to right, rgba(55, 148, 255, 0.2) 0%, rgba(55, 148, 255, 0.2) 0%);
        }

        40% {
            background: linear-gradient(to right, rgba(55, 148, 255, 0.2) 0%, rgba(55, 148, 255, 0.2) 100%);
            font-style: normal;
        }

        65% {
            background: linear-gradient(to right, rgba(55, 148, 255, 0.2) 0%, rgba(55, 148, 255, 0.2) 100%);
        }

        100% {
            background: transparent;
            font-style: italic;
            color: #2c61ff;
        }
    }

    @keyframes cursorAndBackground {
        0% {
            background: transparent;
        }

        25% {
            background: transparent;
        }

        35%,
        100% {
            background: rgba(55, 148, 255, 0.2);
        }
    }

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

    @media (min-width: 768px) {
        .highlight-bg::after {
            font-size: 14px;
            padding: 4px 8px;
            bottom: calc(100% - 19px);
            border-bottom-right-radius: 5px;
            border-top-right-radius: 5px;
            border-top-left-radius: 5px;
        }
    }

    .overflow-x-auto {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .overflow-x-auto::-webkit-scrollbar {
        display: none;
        /* Chrome, Safari and Opera */
    }

    .feature-button.active {
        background-color: #f3f4f6;
        color: #111827;
        font-weight: 500;
    }

    .feature-content {
        opacity: 0;
        transform: translateY(10px);
        transition: all 0.3s ease-out;
    }

    .feature-content:not(.hidden) {
        opacity: 1;
        transform: translateY(0);
    }

    .fake-analyzing-loading {
        display: none;
    }

    .fake-analyzing-text {
        display: block;
    }

    .fake-opportunity-button.fake-analyzing {
        background-color: #f3f4f6 !important;
    }

    .fake-opportunity-button.fake-analyzing .fake-analyzing-loading {
        display: flex;
    }

    .fake-opportunity-button.fake-analyzing .fake-analyzing-text {
        display: none;
    }


    @keyframes float {
        0% {
            transform: translateY(0px);
        }

        50% {
            transform: translateY(-10px);
        }

        100% {
            transform: translateY(0px);
        }
    }

    .track-container,
    .track-container-reverse {
        position: relative;
        overflow: hidden;
        mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
        -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    }

    .track {
        will-change: transform;
    }

    /* Add these new styles */
    .hero-section {
        transition: transform, opacity 0.1s linear;
    }

    .typing-animation {
        border-right: 2px solid #555;
        animation: blink 0.75s step-end infinite;
        white-space: nowrap;
    }

    @keyframes blink {

        from,
        to {
            border-color: transparent
        }

        50% {
            border-color: #555
        }
    }