/* Work Cards Mobile Focus Interaction */

@media (max-width: 768px) {
    #work .grid > a,
    .twitter-card {
        transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1) 0ms,
                    box-shadow 420ms cubic-bezier(0.22, 1, 0.36, 1) 70ms;
        transform-origin: center;
        position: relative;
        cursor: default;
        -webkit-tap-highlight-color: transparent;
    }

    #work .grid > a.active,
    .twitter-card.active {
        transform: scale(1.02) translateY(-3px);
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        z-index: 10;
    }

    /* Mobile = desktop hover equivalent */
    #work .grid > a.active svg,
    .twitter-card.active svg {
        color: rgb(55, 65, 81); /* rovnaká farba ako desktop hover */
    }
    
    /* Mobile active - SK label same color as icon */
    #work .grid > a.active .sk-label {
        color: rgb(55, 65, 81);
    }
    
    #work .grid > a:active:not(.active) {
        transform: scale(1.005);
    }
    
    /* Ensure SVG icons remain clickable */
    #work .grid > a svg,
    #work .grid > a .absolute.bottom-6.right-6 {
        pointer-events: auto;
        cursor: pointer;
    }
}

/* CTA text – ChatGPT-style thinking sweep (calm, continuous) - works on all screen sizes */
.cta-text-sweep {
    display: inline-block;
    position: relative;

    color: rgb(156, 163, 175); /* fallback */

    background-image: linear-gradient(
        100deg,
        rgb(156, 163, 175) 35%,
        rgb(229, 231, 235) 45%,
        rgb(243, 244, 246) 50%,
        rgb(229, 231, 235) 55%,
        rgb(156, 163, 175) 65%
    );
    background-size: 400% 100%;
    background-position: 0% 0%;

    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    animation: thinkingSweep 6s linear infinite;
}

/* On hover, stop animation and show solid color */
@media (min-width: 769px) {
    .cta-text-sweep:hover {
        animation: none;
        background-image: none;
        -webkit-text-fill-color: rgb(229, 231, 235);
        color: rgb(229, 231, 235);
    }
}

@keyframes thinkingSweep {
    from {
        background-position: 400% 0%;
    }
    to {
        background-position: 0% 0%;
    }
}

/* SK label and SVG alignment - scoped to #work section */
#work .grid > a .absolute.bottom-6.right-6 {
    align-items: center;
}

/* SK label - consistent baseline and transition */
#work .grid > a .sk-label {
    display: inline-block;
    line-height: 1.5;
    transition: color 150ms ease-in-out;
    vertical-align: middle;
    margin-top: 1px; /* Posunie o 1px nižšie */
}

/* SVG icon - optically align with text baseline */
#work .grid > a .absolute.bottom-6.right-6 svg {
    display: inline-block;
    vertical-align: middle;
    transition: color 150ms ease-in-out;
    margin-top: -1px; /* Fine-tune optical alignment with text */
}

/* Limit Twitter card text to 6 lines with ellipsis */
.twitter-card p.text-gray-600 {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5;
    max-height: calc(1.5em * 6); /* Fallback: 6 lines * line-height */
}

/* Desktop hover - synchronized color change */
@media (min-width: 769px) {
    #work .grid > a.group:hover .sk-label {
        color: rgb(55, 65, 81); /* text-gray-700 */
    }
    
}


/* Ball idle "thinking / breathing" state */
.ball-idle {
    animation: ballThinking 3.8s ease-in-out infinite;
}

@keyframes ballThinking {
    0%, 100% {
        transform: translateY(0) scale(1);
        opacity: 0.9;
    }
    50% {
        transform: translateY(-1px) scale(1.04);
        opacity: 1;
    }
}