/* Slik Kreativ Media portfolio-card interaction */

.slik-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transform: translateZ(0);
    transition:
        transform 420ms cubic-bezier(.22,.75,.18,1),
        box-shadow 420ms ease,
        filter 420ms ease;
    will-change: transform;
}

/* Dark cinematic overlay that becomes stronger on hover. */
.slik-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(0,0,0,.02) 8%,
        rgba(0,0,0,.14) 48%,
        rgba(0,0,0,.76) 100%
    );
    opacity: .62;
    transition: opacity 420ms ease;
}

/* Keep Elementor content above the overlay. */
.slik-card > .e-con-inner,
.slik-card > .elementor-element,
.slik-card .elementor-widget,
.slik-card .elementor-widget-container {
    position: relative;
    z-index: 2;
}

.slik-card-title,
.slik-card-desc,
.slik-card-line,
.slik-card-arrow {
    transition:
        transform 420ms cubic-bezier(.22,.75,.18,1),
        opacity 360ms ease;
    will-change: transform;
}

.slik-card-line {
    transform-origin: left center;
}

@media (hover: hover) and (pointer: fine) {
    .slik-card:hover,
    .slik-card:focus-within {
        transform: translateY(-8px);
        box-shadow:
            0 24px 52px rgba(0,0,0,.58),
            inset 0 0 44px rgba(0,0,0,.40);
        filter: brightness(1.07) contrast(1.02);
        z-index: 10;
    }

    .slik-card:hover::after,
    .slik-card:focus-within::after {
        opacity: .88;
    }

    .slik-card:hover .slik-card-title,
    .slik-card:hover .slik-card-desc,
    .slik-card:hover .slik-card-line,
    .slik-card:focus-within .slik-card-title,
    .slik-card:focus-within .slik-card-desc,
    .slik-card:focus-within .slik-card-line {
        transform: translateY(-14px);
    }

    .slik-card:hover .slik-card-arrow,
    .slik-card:focus-within .slik-card-arrow {
        transform: translate(9px,-14px);
    }

    .slik-card:hover .slik-card-line,
    .slik-card:focus-within .slik-card-line {
        transform: translateY(-14px) scaleX(1.32);
    }
}

/* Mobile/touch devices: no sticky hover state. */
@media (hover: none), (pointer: coarse) {
    .slik-card,
    .slik-card::after,
    .slik-card-title,
    .slik-card-desc,
    .slik-card-line,
    .slik-card-arrow {
        transition-duration: 0ms;
    }
}

@media (prefers-reduced-motion: reduce) {
    .slik-card,
    .slik-card::after,
    .slik-card-title,
    .slik-card-desc,
    .slik-card-line,
    .slik-card-arrow {
        transition: none !important;
        animation: none !important;
    }

    .slik-card:hover,
    .slik-card:focus-within,
    .slik-card:hover .slik-card-title,
    .slik-card:hover .slik-card-desc,
    .slik-card:hover .slik-card-line,
    .slik-card:hover .slik-card-arrow {
        transform: none !important;
    }
}